main

src/components/ui/overlays/action-bar.tsx

@@ -0,0 +1,38 @@
+import { ActionBar, Portal } from '@chakra-ui/react';
+import { CloseButton } from '@/components/ui/buttons/close-button';
+import * as React from 'react';
+
+interface ActionBarContentProps extends ActionBar.ContentProps {
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement | null>;
+}
+
+export const ActionBarContent = React.forwardRef<HTMLDivElement, ActionBarContentProps>(
+  function ActionBarContent(props, ref) {
+    const { children, portalled = true, portalRef, ...rest } = props;
+
+    return (
+      <Portal disabled={!portalled} container={portalRef}>
+        <ActionBar.Positioner>
+          <ActionBar.Content ref={ref} {...rest} asChild={false}>
+            {children}
+          </ActionBar.Content>
+        </ActionBar.Positioner>
+      </Portal>
+    );
+  },
+);
+
+export const ActionBarCloseTrigger = React.forwardRef<HTMLButtonElement, ActionBar.CloseTriggerProps>(
+  function ActionBarCloseTrigger(props, ref) {
+    return (
+      <ActionBar.CloseTrigger {...props} asChild ref={ref}>
+        <CloseButton size='sm' />
+      </ActionBar.CloseTrigger>
+    );
+  },
+);
+
+export const ActionBarRoot = ActionBar.Root;
+export const ActionBarSelectionTrigger = ActionBar.SelectionTrigger;
+export const ActionBarSeparator = ActionBar.Separator;

src/components/ui/overlays/dialog.tsx

@@ -0,0 +1,46 @@
+import { Dialog as ChakraDialog, Portal } from '@chakra-ui/react';
+import { CloseButton } from '@/components/ui/buttons/close-button';
+import * as React from 'react';
+
+interface DialogContentProps extends ChakraDialog.ContentProps {
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement | null>;
+  backdrop?: boolean;
+}
+
+export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(function DialogContent(props, ref) {
+  const { children, portalled = true, portalRef, backdrop = true, ...rest } = props;
+
+  return (
+    <Portal disabled={!portalled} container={portalRef}>
+      {backdrop && <ChakraDialog.Backdrop />}
+      <ChakraDialog.Positioner>
+        <ChakraDialog.Content ref={ref} {...rest} asChild={false}>
+          {children}
+        </ChakraDialog.Content>
+      </ChakraDialog.Positioner>
+    </Portal>
+  );
+});
+
+export const DialogCloseTrigger = React.forwardRef<HTMLButtonElement, ChakraDialog.CloseTriggerProps>(
+  function DialogCloseTrigger(props, ref) {
+    return (
+      <ChakraDialog.CloseTrigger position='absolute' top='2' insetEnd='2' {...props} asChild>
+        <CloseButton size='sm' ref={ref}>
+          {props.children}
+        </CloseButton>
+      </ChakraDialog.CloseTrigger>
+    );
+  },
+);
+
+export const DialogRoot = ChakraDialog.Root;
+export const DialogFooter = ChakraDialog.Footer;
+export const DialogHeader = ChakraDialog.Header;
+export const DialogBody = ChakraDialog.Body;
+export const DialogBackdrop = ChakraDialog.Backdrop;
+export const DialogTitle = ChakraDialog.Title;
+export const DialogDescription = ChakraDialog.Description;
+export const DialogTrigger = ChakraDialog.Trigger;
+export const DialogActionTrigger = ChakraDialog.ActionTrigger;

src/components/ui/overlays/drawer.tsx

@@ -0,0 +1,42 @@
+import { Drawer as ChakraDrawer, Portal } from '@chakra-ui/react';
+import { CloseButton } from '@/components/ui/buttons/close-button';
+import * as React from 'react';
+
+interface DrawerContentProps extends ChakraDrawer.ContentProps {
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement | null>;
+  offset?: ChakraDrawer.ContentProps['padding'];
+}
+
+export const DrawerContent = React.forwardRef<HTMLDivElement, DrawerContentProps>(function DrawerContent(props, ref) {
+  const { children, portalled = true, portalRef, offset, ...rest } = props;
+  return (
+    <Portal disabled={!portalled} container={portalRef}>
+      <ChakraDrawer.Positioner padding={offset}>
+        <ChakraDrawer.Content ref={ref} {...rest} asChild={false}>
+          {children}
+        </ChakraDrawer.Content>
+      </ChakraDrawer.Positioner>
+    </Portal>
+  );
+});
+
+export const DrawerCloseTrigger = React.forwardRef<HTMLButtonElement, ChakraDrawer.CloseTriggerProps>(
+  function DrawerCloseTrigger(props, ref) {
+    return (
+      <ChakraDrawer.CloseTrigger position='absolute' top='2' insetEnd='2' {...props} asChild>
+        <CloseButton size='sm' ref={ref} />
+      </ChakraDrawer.CloseTrigger>
+    );
+  },
+);
+
+export const DrawerTrigger = ChakraDrawer.Trigger;
+export const DrawerRoot = ChakraDrawer.Root;
+export const DrawerFooter = ChakraDrawer.Footer;
+export const DrawerHeader = ChakraDrawer.Header;
+export const DrawerBody = ChakraDrawer.Body;
+export const DrawerBackdrop = ChakraDrawer.Backdrop;
+export const DrawerDescription = ChakraDrawer.Description;
+export const DrawerTitle = ChakraDrawer.Title;
+export const DrawerActionTrigger = ChakraDrawer.ActionTrigger;

src/components/ui/overlays/hover-card.tsx

@@ -0,0 +1,34 @@
+import { HoverCard, Portal } from '@chakra-ui/react';
+import * as React from 'react';
+
+interface HoverCardContentProps extends HoverCard.ContentProps {
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement | null>;
+}
+
+export const HoverCardContent = React.forwardRef<HTMLDivElement, HoverCardContentProps>(
+  function HoverCardContent(props, ref) {
+    const { portalled = true, portalRef, ...rest } = props;
+
+    return (
+      <Portal disabled={!portalled} container={portalRef}>
+        <HoverCard.Positioner>
+          <HoverCard.Content ref={ref} {...rest} />
+        </HoverCard.Positioner>
+      </Portal>
+    );
+  },
+);
+
+export const HoverCardArrow = React.forwardRef<HTMLDivElement, HoverCard.ArrowProps>(
+  function HoverCardArrow(props, ref) {
+    return (
+      <HoverCard.Arrow ref={ref} {...props}>
+        <HoverCard.ArrowTip />
+      </HoverCard.Arrow>
+    );
+  },
+);
+
+export const HoverCardRoot = HoverCard.Root;
+export const HoverCardTrigger = HoverCard.Trigger;

src/components/ui/overlays/menu.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { AbsoluteCenter, Menu as ChakraMenu, Portal } from '@chakra-ui/react';
+import * as React from 'react';
+import { LuCheck, LuChevronRight } from 'react-icons/lu';
+
+interface MenuContentProps extends ChakraMenu.ContentProps {
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement | null>;
+}
+
+export const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(function MenuContent(props, ref) {
+  const { portalled = true, portalRef, ...rest } = props;
+  return (
+    <Portal disabled={!portalled} container={portalRef}>
+      <ChakraMenu.Positioner>
+        <ChakraMenu.Content ref={ref} {...rest} />
+      </ChakraMenu.Positioner>
+    </Portal>
+  );
+});
+
+export const MenuArrow = React.forwardRef<HTMLDivElement, ChakraMenu.ArrowProps>(function MenuArrow(props, ref) {
+  return (
+    <ChakraMenu.Arrow ref={ref} {...props}>
+      <ChakraMenu.ArrowTip />
+    </ChakraMenu.Arrow>
+  );
+});
+
+export const MenuCheckboxItem = React.forwardRef<HTMLDivElement, ChakraMenu.CheckboxItemProps>(
+  function MenuCheckboxItem(props, ref) {
+    return (
+      <ChakraMenu.CheckboxItem ps='8' ref={ref} {...props}>
+        <AbsoluteCenter axis='horizontal' insetStart='4' asChild>
+          <ChakraMenu.ItemIndicator>
+            <LuCheck />
+          </ChakraMenu.ItemIndicator>
+        </AbsoluteCenter>
+        {props.children}
+      </ChakraMenu.CheckboxItem>
+    );
+  },
+);
+
+export const MenuRadioItem = React.forwardRef<HTMLDivElement, ChakraMenu.RadioItemProps>(
+  function MenuRadioItem(props, ref) {
+    const { children, ...rest } = props;
+    return (
+      <ChakraMenu.RadioItem ps='8' ref={ref} {...rest}>
+        <AbsoluteCenter axis='horizontal' insetStart='4' asChild>
+          <ChakraMenu.ItemIndicator>
+            <LuCheck />
+          </ChakraMenu.ItemIndicator>
+        </AbsoluteCenter>
+        <ChakraMenu.ItemText>{children}</ChakraMenu.ItemText>
+      </ChakraMenu.RadioItem>
+    );
+  },
+);
+
+export const MenuItemGroup = React.forwardRef<HTMLDivElement, ChakraMenu.ItemGroupProps>(
+  function MenuItemGroup(props, ref) {
+    const { title, children, ...rest } = props;
+    return (
+      <ChakraMenu.ItemGroup ref={ref} {...rest}>
+        {title && <ChakraMenu.ItemGroupLabel userSelect='none'>{title}</ChakraMenu.ItemGroupLabel>}
+        {children}
+      </ChakraMenu.ItemGroup>
+    );
+  },
+);
+
+export interface MenuTriggerItemProps extends ChakraMenu.ItemProps {
+  startIcon?: React.ReactNode;
+}
+
+export const MenuTriggerItem = React.forwardRef<HTMLDivElement, MenuTriggerItemProps>(
+  function MenuTriggerItem(props, ref) {
+    const { startIcon, children, ...rest } = props;
+    return (
+      <ChakraMenu.TriggerItem ref={ref} {...rest}>
+        {startIcon}
+        {children}
+        <LuChevronRight />
+      </ChakraMenu.TriggerItem>
+    );
+  },
+);
+
+export const MenuRadioItemGroup = ChakraMenu.RadioItemGroup;
+export const MenuContextTrigger = ChakraMenu.ContextTrigger;
+export const MenuRoot = ChakraMenu.Root;
+export const MenuSeparator = ChakraMenu.Separator;
+
+export const MenuItem = ChakraMenu.Item;
+export const MenuItemText = ChakraMenu.ItemText;
+export const MenuItemCommand = ChakraMenu.ItemCommand;
+export const MenuTrigger = ChakraMenu.Trigger;

src/components/ui/overlays/popover.tsx

@@ -0,0 +1,49 @@
+import { Popover as ChakraPopover, Portal } from '@chakra-ui/react';
+import { CloseButton } from '../buttons/close-button';
+import * as React from 'react';
+
+interface PopoverContentProps extends ChakraPopover.ContentProps {
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement | null>;
+}
+
+export const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(
+  function PopoverContent(props, ref) {
+    const { portalled = true, portalRef, ...rest } = props;
+    return (
+      <Portal disabled={!portalled} container={portalRef}>
+        <ChakraPopover.Positioner>
+          <ChakraPopover.Content ref={ref} {...rest} />
+        </ChakraPopover.Positioner>
+      </Portal>
+    );
+  },
+);
+
+export const PopoverArrow = React.forwardRef<HTMLDivElement, ChakraPopover.ArrowProps>(
+  function PopoverArrow(props, ref) {
+    return (
+      <ChakraPopover.Arrow {...props} ref={ref}>
+        <ChakraPopover.ArrowTip />
+      </ChakraPopover.Arrow>
+    );
+  },
+);
+
+export const PopoverCloseTrigger = React.forwardRef<HTMLButtonElement, ChakraPopover.CloseTriggerProps>(
+  function PopoverCloseTrigger(props, ref) {
+    return (
+      <ChakraPopover.CloseTrigger position='absolute' top='1' insetEnd='1' {...props} asChild ref={ref}>
+        <CloseButton size='sm' />
+      </ChakraPopover.CloseTrigger>
+    );
+  },
+);
+
+export const PopoverTitle = ChakraPopover.Title;
+export const PopoverDescription = ChakraPopover.Description;
+export const PopoverFooter = ChakraPopover.Footer;
+export const PopoverHeader = ChakraPopover.Header;
+export const PopoverRoot = ChakraPopover.Root;
+export const PopoverBody = ChakraPopover.Body;
+export const PopoverTrigger = ChakraPopover.Trigger;

src/components/ui/overlays/toggle-tip.tsx

@@ -0,0 +1,48 @@
+import { Popover as ChakraPopover, IconButton, type IconButtonProps, Portal } from '@chakra-ui/react';
+import * as React from 'react';
+import { HiOutlineInformationCircle } from 'react-icons/hi';
+
+export interface ToggleTipProps extends ChakraPopover.RootProps {
+  showArrow?: boolean;
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement | null>;
+  content?: React.ReactNode;
+  contentProps?: ChakraPopover.ContentProps;
+}
+
+export const ToggleTip = React.forwardRef<HTMLDivElement, ToggleTipProps>(function ToggleTip(props, ref) {
+  const { showArrow, children, portalled = true, content, contentProps, portalRef, ...rest } = props;
+
+  return (
+    <ChakraPopover.Root {...rest} positioning={{ ...rest.positioning, gutter: 4 }}>
+      <ChakraPopover.Trigger asChild>{children}</ChakraPopover.Trigger>
+      <Portal disabled={!portalled} container={portalRef}>
+        <ChakraPopover.Positioner>
+          <ChakraPopover.Content width='auto' px='2' py='1' textStyle='xs' rounded='sm' ref={ref} {...contentProps}>
+            {showArrow && (
+              <ChakraPopover.Arrow>
+                <ChakraPopover.ArrowTip />
+              </ChakraPopover.Arrow>
+            )}
+            {content}
+          </ChakraPopover.Content>
+        </ChakraPopover.Positioner>
+      </Portal>
+    </ChakraPopover.Root>
+  );
+});
+
+export interface InfoTipProps extends Partial<ToggleTipProps> {
+  buttonProps?: IconButtonProps | undefined;
+}
+
+export const InfoTip = React.forwardRef<HTMLDivElement, InfoTipProps>(function InfoTip(props, ref) {
+  const { children, buttonProps, ...rest } = props;
+  return (
+    <ToggleTip content={children} {...rest} ref={ref}>
+      <IconButton variant='ghost' aria-label='info' size='2xs' colorPalette='gray' {...buttonProps}>
+        <HiOutlineInformationCircle />
+      </IconButton>
+    </ToggleTip>
+  );
+});

src/components/ui/overlays/tooltip.tsx

@@ -0,0 +1,35 @@
+import { Tooltip as ChakraTooltip, Portal } from '@chakra-ui/react';
+import * as React from 'react';
+
+export interface TooltipProps extends ChakraTooltip.RootProps {
+  showArrow?: boolean;
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement | null>;
+  content: React.ReactNode;
+  contentProps?: ChakraTooltip.ContentProps;
+  disabled?: boolean;
+}
+
+export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(props, ref) {
+  const { showArrow, children, disabled, portalled = true, content, contentProps, portalRef, ...rest } = props;
+
+  if (disabled) return children;
+
+  return (
+    <ChakraTooltip.Root {...rest}>
+      <ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
+      <Portal disabled={!portalled} container={portalRef}>
+        <ChakraTooltip.Positioner>
+          <ChakraTooltip.Content ref={ref} {...contentProps}>
+            {showArrow && (
+              <ChakraTooltip.Arrow>
+                <ChakraTooltip.ArrowTip />
+              </ChakraTooltip.Arrow>
+            )}
+            {content}
+          </ChakraTooltip.Content>
+        </ChakraTooltip.Positioner>
+      </Portal>
+    </ChakraTooltip.Root>
+  );
+});