@douglasneuroinformatics/libui 2.0.2 → 2.0.4

package/src/components/Command/CommandList.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { Command as CommandPrimitive } from 'cmdk';
+
+import { cn } from '../../utils.js';
+
+export const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(function CommandList({ className, ...props }, ref) {
+  return (
+    <CommandPrimitive.List
+      className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+      ref={ref}
+      {...props}
+    />
+  );
+});

package/src/components/Command/CommandSeparator.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { Command as CommandPrimitive } from 'cmdk';
+
+import { cn } from '../../utils.js';
+
+export const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(function CommandSeparator({ className, ...props }, ref) {
+  return <CommandPrimitive.Separator className={cn('-mx-1 h-px bg-border', className)} ref={ref} {...props} />;
+});

package/src/components/Command/CommandShortcut.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { cn } from '../../utils.js';
+
+export const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)} {...props} />;
+};

package/src/components/ContextMenu/ContextMenu.tsx

@@ -0,0 +1,28 @@
+import { Group, Portal, RadioGroup, Root, Sub, Trigger } from '@radix-ui/react-context-menu';
+
+import { ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.js';
+import { ContextMenuContent } from './ContextMenuContent.js';
+import { ContextMenuItem } from './ContextMenuItem.js';
+import { ContextMenuLabel } from './ContextMenuLabel.js';
+import { ContextMenuRadioItem } from './ContextMenuRadioItem.js';
+import { ContextMenuSeparator } from './ContextMenuSeparator.js';
+import { ContextMenuShortcut } from './ContextMenuShortcut.js';
+import { ContextMenuSubContent } from './ContextMenuSubContent.js';
+import { ContextMenuSubTrigger } from './ContextMenuSubTrigger.js';
+
+export const ContextMenu = Object.assign(Root.bind(null), {
+  CheckboxItem: ContextMenuCheckboxItem,
+  Content: ContextMenuContent,
+  Group,
+  Item: ContextMenuItem,
+  Label: ContextMenuLabel,
+  Portal,
+  RadioGroup,
+  RadioItem: ContextMenuRadioItem,
+  Separator: ContextMenuSeparator,
+  Shortcut: ContextMenuShortcut,
+  Sub,
+  SubContent: ContextMenuSubContent,
+  SubTrigger: ContextMenuSubTrigger,
+  Trigger
+});

package/src/components/ContextMenu/ContextMenuCheckboxItem.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import { CheckIcon } from 'lucide-react';
+
+import { cn } from '../../utils.js';
+
+export const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(function ContextMenuCheckboxItem({ checked, children, className, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      checked={checked}
+      className={cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        className
+      )}
+      ref={ref}
+      {...props}
+    >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="h-4 w-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+});

package/src/components/ContextMenu/ContextMenuContent.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+
+import { cn } from '../../utils.js';
+
+export const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(function ContextMenuContent({ className, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        className={cn(
+          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+});

package/src/components/ContextMenu/ContextMenuItem.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+
+import { cn } from '../../utils.js';
+
+export const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(function ContextMenuItem({ className, inset, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.Item
+      className={cn(
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        inset && 'pl-8',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});

package/src/components/ContextMenu/ContextMenuLabel.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+
+import { cn } from '../../utils.js';
+
+export const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(function ContextMenuLabel({ className, inset, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.Label
+      className={cn('px-2 py-1.5 text-sm font-semibold text-foreground', inset && 'pl-8', className)}
+      ref={ref}
+      {...props}
+    />
+  );
+});

package/src/components/ContextMenu/ContextMenuRadioItem.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import { CircleIcon } from 'lucide-react';
+
+import { cn } from '../../utils.js';
+
+export const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(function ContextMenuRadioItem({ children, className, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      className={cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        className
+      )}
+      ref={ref}
+      {...props}
+    >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="fill-current" style={{ height: 8, width: 8 }} />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+});

package/src/components/ContextMenu/ContextMenuSeparator.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+
+import { cn } from '../../utils.js';
+
+export const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(function ContextMenuSeparator({ className, ...props }, ref) {
+  return <ContextMenuPrimitive.Separator className={cn('-mx-1 my-1 h-px bg-border', className)} ref={ref} {...props} />;
+});

package/src/components/ContextMenu/ContextMenuShortcut.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { cn } from '../../utils.js';
+
+export const ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)} {...props} />;
+};

package/src/components/ContextMenu/ContextMenuSubContent.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+
+import { cn } from '../../utils.js';
+
+export const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(function ContextMenuSubContent({ className, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});

package/src/components/ContextMenu/ContextMenuSubTrigger.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import { ChevronRightIcon } from 'lucide-react';
+
+import { cn } from '../../utils.js';
+
+export const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(function ContextMenuSubTrigger({ children, className, inset, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      className={cn(
+        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+        inset && 'pl-8',
+        className
+      )}
+      ref={ref}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto h-4 w-4" />
+    </ContextMenuPrimitive.SubTrigger>
+  );
+});

package/src/components/DatePicker/Calendar.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import { AnimatePresence, motion } from 'framer-motion';
+import { range } from 'lodash-es';
+import { useTranslation } from 'react-i18next';
+
+export const CALENDAR_ANIMATION_DURATION = 0.2; // seconds
+
+export type CalendarProps = {
+  month: number;
+  onSelection: (date: Date) => void;
+  year: number;
+};
+
+export const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(function Calendar(props, ref) {
+  const { t } = useTranslation('libui');
+  const firstDay = new Date(props.year, props.month).getDay();
+  const lastDay = new Date(props.year, props.month + 1, 0).getDate();
+  const days = range(1, lastDay + 1);
+
+  const daysOfWeek = [
+    t('days.sunday'),
+    t('days.monday'),
+    t('days.tuesday'),
+    t('days.wednesday'),
+    t('days.thursday'),
+    t('days.friday'),
+    t('days.saturday')
+  ];
+
+  return (
+    <AnimatePresence initial={false} mode="wait">
+      <motion.div
+        animate={{ opacity: 1, x: 0 }}
+        exit={{ opacity: 0, x: -20 }}
+        initial={{ opacity: 0, x: 20 }}
+        key={`${props.year}-${props.month}`}
+        transition={{ duration: CALENDAR_ANIMATION_DURATION }}
+      >
+        <div className="grid h-56 w-56 grid-cols-7 text-sm" ref={ref}>
+          {daysOfWeek.map((label) => (
+            <div className="flex h-8 w-8 items-center justify-center text-muted-foreground" key={label}>
+              {label.charAt(0).toUpperCase()}
+            </div>
+          ))}
+          <div style={{ gridColumn: `span ${firstDay} / span ${firstDay}` }} />
+          {days.map((day) => (
+            <button
+              className="dark:hover:bg-extra-muted flex h-8 w-8 items-center justify-center rounded-md hover:bg-slate-200 dark:hover:bg-slate-700"
+              key={day}
+              tabIndex={-1}
+              type="button"
+              onClick={() => {
+                props.onSelection(new Date(props.year, props.month, day));
+              }}
+            >
+              {day}
+            </button>
+          ))}
+        </div>
+      </motion.div>
+    </AnimatePresence>
+  );
+});

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,156 @@
+import React, { useReducer, useState } from 'react';
+
+import { AnimatePresence, motion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
+
+import { cn } from '../../utils.js';
+import { ArrowToggle } from '../ArrowToggle/ArrowToggle.js';
+import { Card } from '../Card/Card.js';
+import { CALENDAR_ANIMATION_DURATION, Calendar } from './Calendar.js';
+import { YearSelector } from './YearSelector.js';
+
+const MONTHS = [
+  'january',
+  'february',
+  'march',
+  'april',
+  'may',
+  'june',
+  'july',
+  'august',
+  'september',
+  'october',
+  'november',
+  'december'
+] as const;
+
+type IncrementAction = {
+  type: 'increment';
+};
+
+type DecrementAction = {
+  type: 'decrement';
+};
+
+type SetYearAction = {
+  type: 'set-year';
+  value: number;
+};
+
+type ReducerAction = DecrementAction | IncrementAction | SetYearAction;
+
+const reducer = (previousDate: Date, action: ReducerAction) => {
+  const newDate = new Date(previousDate.valueOf());
+  switch (action.type) {
+    case 'increment':
+      newDate.setMonth(newDate.getMonth() + 1);
+      break;
+    case 'decrement':
+      newDate.setMonth(newDate.getMonth() - 1);
+      break;
+    case 'set-year':
+      newDate.setFullYear(action.value);
+  }
+  return newDate;
+};
+
+export type DatePickerProps = {
+  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+  onSelection: (value: Date) => void;
+};
+
+export const DatePicker = React.forwardRef<React.ElementRef<typeof Card>, DatePickerProps>(function DatePicker(
+  { onSelection, ...props },
+  ref
+) {
+  const [date, dispatch] = useReducer(reducer, new Date());
+  const [showYearSelector, setShowYearSelector] = useState(false);
+  const { t } = useTranslation('libui');
+
+  // this is to prevent changing month before prev calendar is unmounted
+  // the duration is doubled because presumably it is to mount old and mount new
+  const [canSetMonth, setCanSetMonth] = useState(true);
+
+  const monthName = t(`months.${MONTHS[date.getMonth()]}`);
+
+  const handleYearSelection = (date: Date) => {
+    dispatch({ type: 'set-year', value: date.getFullYear() });
+    setShowYearSelector(false);
+  };
+
+  return (
+    <Card className="w-fit p-3" data-testid="datepicker" ref={ref} {...props}>
+      <div className="mb-3 flex items-center justify-between px-1">
+        <div className="flex items-center">
+          <span className="mx-1 text-sm font-medium tracking-tight">{`${monthName} ${date.getFullYear()}`}</span>
+          <ArrowToggle
+            className="flex items-center justify-center rounded-full p-1 hover:bg-slate-200 dark:hover:bg-slate-700"
+            isToggled={showYearSelector}
+            position="up"
+            rotation={180}
+            tabIndex={-1}
+            onClick={() => {
+              setShowYearSelector(!showYearSelector);
+            }}
+          />
+        </div>
+        <div className={cn('flex', { hidden: showYearSelector })}>
+          <ArrowToggle
+            className="flex items-center justify-center rounded-full p-1 hover:bg-slate-200 dark:hover:bg-slate-700"
+            position="left"
+            tabIndex={-1}
+            onClick={() => {
+              if (canSetMonth) {
+                setCanSetMonth(false);
+                dispatch({ type: 'decrement' });
+                setTimeout(() => {
+                  setCanSetMonth(true);
+                }, CALENDAR_ANIMATION_DURATION * 2000);
+              }
+            }}
+          />
+          <ArrowToggle
+            className="flex items-center justify-center rounded-full p-1 hover:bg-slate-200 dark:hover:bg-slate-700"
+            position="right"
+            tabIndex={-1}
+            onClick={() => {
+              if (canSetMonth) {
+                setCanSetMonth(false);
+                dispatch({ type: 'increment' });
+                setTimeout(() => {
+                  setCanSetMonth(true);
+                }, CALENDAR_ANIMATION_DURATION * 2000);
+              }
+            }}
+          />
+        </div>
+      </div>
+      <div>
+        <AnimatePresence initial={false} mode="wait">
+          {showYearSelector ? (
+            <motion.div
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 10 }}
+              initial={{ opacity: 0, y: 10 }}
+              key={0}
+              transition={{ duration: 0.2 }}
+            >
+              <YearSelector selected={date} onSelection={handleYearSelection} />
+            </motion.div>
+          ) : (
+            <motion.div
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              initial={{ opacity: 0, y: -10 }}
+              key={1}
+              transition={{ duration: 0.2 }}
+            >
+              <Calendar month={date.getMonth()} year={date.getFullYear()} onSelection={onSelection} />
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </Card>
+  );
+});

package/src/components/DatePicker/YearSelector.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect, useRef } from 'react';
+
+import { range } from 'lodash-es';
+
+import { cn } from '../../utils.js';
+import { ScrollArea } from '../ScrollArea/ScrollArea.js';
+
+export type YearSelectorProps = {
+  onSelection: (date: Date) => void;
+  selected: Date;
+};
+
+export const YearSelector = (props: YearSelectorProps) => {
+  const selectedRef = useRef<HTMLButtonElement>(null);
+  const currentYear = new Date().getFullYear();
+  const years = Array.from(range(currentYear - 100, currentYear + 8)).reverse();
+
+  useEffect(() => {
+    if (selectedRef.current) {
+      selectedRef.current.scrollIntoView({ block: 'center' });
+    }
+  }, []);
+
+  return (
+    <ScrollArea className="h-56 w-56">
+      <div className="grid grid-cols-3 gap-x-2 gap-y-1 text-sm text-muted-foreground">
+        {years.map((year) => (
+          <div className="flex h-7 items-center justify-center" key={year}>
+            <button
+              className={cn(
+                'h-full w-full rounded-md hover:bg-slate-200 dark:hover:bg-slate-700',
+                year === props.selected.getFullYear() &&
+                  'bg-primary text-primary-foreground hover:bg-primary dark:hover:bg-primary'
+              )}
+              ref={year === props.selected.getFullYear() ? selectedRef : null}
+              tabIndex={-1}
+              type="button"
+              onClick={() => {
+                props.onSelection(new Date(year, 0));
+              }}
+            >
+              {year}
+            </button>
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  );
+};

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,16 @@
+import { Root, Trigger } from '@radix-ui/react-dialog';
+
+import { DialogContent } from './DialogContent.js';
+import { DialogDescription } from './DialogDescription.js';
+import { DialogFooter } from './DialogFooter.js';
+import { DialogHeader } from './DialogHeader.js';
+import { DialogTitle } from './DialogTitle.js';
+
+export const Dialog = Object.assign(Root.bind(null), {
+  Content: DialogContent,
+  Description: DialogDescription,
+  Footer: DialogFooter,
+  Header: DialogHeader,
+  Title: DialogTitle,
+  Trigger
+});

package/src/components/Dialog/DialogContent.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { Close, Content, Portal } from '@radix-ui/react-dialog';
+import { XIcon } from 'lucide-react';
+
+import { cn } from '../../utils.js';
+import { DialogOverlay } from './DialogOverlay.js';
+
+export const DialogContent = React.forwardRef<
+  React.ElementRef<typeof Content>,
+  React.ComponentPropsWithoutRef<typeof Content>
+>(function DialogContent({ children, className, ...props }, ref) {
+  return (
+    <Portal>
+      <DialogOverlay />
+      <Content
+        className={cn(
+          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        {children}
+        <Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+          <XIcon className="h-4 w-4" />
+        </Close>
+      </Content>
+    </Portal>
+  );
+});

package/src/components/Dialog/DialogDescription.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { Description } from '@radix-ui/react-dialog';
+
+import { cn } from '../../utils.js';
+
+export const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof Description>,
+  React.ComponentPropsWithoutRef<typeof Description>
+>(function DialogDescription({ className, ...props }, ref) {
+  return <Description className={cn('text-sm text-muted-foreground', className)} ref={ref} {...props} />;
+});

package/src/components/Dialog/DialogFooter.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { cn } from '../../utils.js';
+
+export const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+);

package/src/components/Dialog/DialogHeader.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { cn } from '../../utils.js';
+
+export const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+);

package/src/components/Dialog/DialogOverlay.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { Overlay } from '@radix-ui/react-dialog';
+
+import { cn } from '../../utils.js';
+
+export const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof Overlay>,
+  React.ComponentPropsWithoutRef<typeof Overlay>
+>(function DialogOverlay({ className, ...props }, ref) {
+  return (
+    <Overlay
+      className={cn(
+        'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});

package/src/components/Dialog/DialogTitle.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { Title } from '@radix-ui/react-dialog';
+
+import { cn } from '../../utils.js';
+
+export const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof Title>,
+  React.ComponentPropsWithoutRef<typeof Title>
+>(function DialogTitle({ className, ...props }, ref) {
+  return <Title className={cn('text-lg font-semibold leading-none tracking-tight', className)} ref={ref} {...props} />;
+});