@douglasneuroinformatics/libui 2.0.3 → 2.0.4

package/src/components/Pagination/PaginationPrevious.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { ChevronLeftIcon } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+import { cn } from '../../utils.js';
+import { PaginationLink, type PaginationLinkProps } from './PaginationLink.js';
+
+export const PaginationPrevious = ({ className, ...props }: PaginationLinkProps) => {
+  const { t } = useTranslation('libui');
+  return (
+    <PaginationLink aria-label="Go to previous page" className={cn('gap-1 pl-2.5', className)} size="md" {...props}>
+      <ChevronLeftIcon className="h-4 w-4" />
+      <span>{t('pagination.previous')}</span>
+    </PaginationLink>
+  );
+};

package/src/components/Pagination/PaginationRoot.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { cn } from '../../utils.js';
+
+export const PaginationRoot = ({ className, ...props }: React.ComponentProps<'nav'>) => (
+  <nav
+    aria-label="pagination"
+    className={cn('mx-auto flex w-full justify-center', className)}
+    role="navigation"
+    {...props}
+  />
+);

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,8 @@
+import { Root as PopoverRoot, Trigger as PopoverTrigger } from '@radix-ui/react-popover';
+
+import { PopoverContent } from './PopoverContent.js';
+
+export const Popover = Object.assign(PopoverRoot.bind(null), {
+  Content: PopoverContent,
+  Trigger: PopoverTrigger
+});

package/src/components/Popover/PopoverContent.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { Content, Portal } from '@radix-ui/react-popover';
+
+import { cn } from '../../utils.js';
+
+export type PopoverContentProps = {
+  /** The preferred alignment against the anchor, which may change when collisions occur */
+  align?: 'center' | 'end' | 'start';
+  /** Change the default rendered element for the one passed as a child, merging their props and behavior */
+  asChild?: boolean;
+  /** Whether the content should be automatically focused when opened (default = true) */
+  autofocus?: boolean;
+  /** The content to display when the user opens the popover */
+  children: React.ReactNode;
+  /** Additional CSS classes to add to the component, potentially overriding default styling */
+  className?: string;
+  /** The distance in pixels from the viewport edges where collision detection should occur */
+  collisionPadding?: number;
+  /** The distance in pixels from the anchor */
+  sideOffset?: number;
+};
+
+export const PopoverContent = React.forwardRef<React.ElementRef<typeof Content>, PopoverContentProps>(
+  function PopoverContent(
+    { align = 'center', asChild, autofocus = true, className, collisionPadding = 0, sideOffset = 4, ...props },
+    ref
+  ) {
+    return (
+      <Portal>
+        <Content
+          align={align}
+          asChild={asChild}
+          className={cn(
+            'z-50 w-72 rounded-md border bg-popover px-3 py-1.5 text-popover-foreground shadow-md outline-none 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
+          )}
+          collisionPadding={collisionPadding}
+          ref={ref}
+          sideOffset={sideOffset}
+          onOpenAutoFocus={autofocus === false ? (event) => event.preventDefault() : undefined}
+          {...props}
+        />
+      </Portal>
+    );
+  }
+);

package/src/components/Progress/Progress.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+
+import { cn } from '../../utils.js';
+
+export const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(function Progress({ className, value, ...props }, ref) {
+  return (
+    <ProgressPrimitive.Root
+      className={cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', className)}
+      ref={ref}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        className="h-full w-full flex-1 bg-primary transition-all"
+        style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  );
+});

package/src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+
+import { cn } from '../../utils.js';
+import { RadioGroupItem } from './RadioGroupItem.js';
+
+type RadioGroupProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>;
+
+const RadioGroupRoot = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(function RadioGroup({ className, ...props }, ref) {
+  return (
+    <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} data-testid="radio-group" {...props} ref={ref} />
+  );
+});
+
+export const RadioGroup = Object.assign(RadioGroupRoot, {
+  Item: RadioGroupItem
+});
+
+export type { RadioGroupProps };

package/src/components/RadioGroup/RadioGroupItem.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { CircleIcon } from 'lucide-react';
+
+import { cn } from '../../utils.js';
+
+export const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(function RadioGroupItem({ className, ...props }, ref) {
+  return (
+    <RadioGroupPrimitive.Item
+      className={cn(
+        'flex aspect-square h-4 w-4 items-center justify-center rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      ref={ref}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator asChild>
+        <CircleIcon
+          className="fill-current text-current"
+          style={{ height: '0.625rem', strokeWidth: '2px', width: '0.625rem' }}
+        />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});

package/src/components/Resizable/Resizable.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { Panel, type PanelProps } from 'react-resizable-panels';
+
+import { ResizableHandle, type ResizableHandleProps } from './ResizableHandle.js';
+import { ResizablePanelGroup, type ResizablePanelGroupProps } from './ResizablePanelGroup.js';
+
+type ResizableRootType = React.FC<{ children: React.ReactNode }>;
+type ResizableType = ResizableRootType & {
+  Handle: React.FC<ResizableHandleProps>;
+  Panel: React.FC<PanelProps>;
+  PanelGroup: React.FC<ResizablePanelGroupProps>;
+};
+
+// This is only for storybook and is unnecessary for real-world use
+const ResizableRoot: ResizableRootType = ({ children }) => <>{children}</>;
+
+export const Resizable: ResizableType = Object.assign(ResizableRoot, {
+  Handle: ResizableHandle,
+  Panel,
+  PanelGroup: ResizablePanelGroup
+});

package/src/components/Resizable/ResizableHandle.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { GripVertical } from 'lucide-react';
+import { PanelResizeHandle } from 'react-resizable-panels';
+
+import { cn } from '../../utils.js';
+
+export type ResizableHandleProps = React.ComponentProps<typeof PanelResizeHandle> & {
+  withHandle?: boolean;
+};
+
+export const ResizableHandle = ({ className, withHandle, ...props }: ResizableHandleProps) => (
+  <PanelResizeHandle
+    className={cn(
+      'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </PanelResizeHandle>
+);

package/src/components/Resizable/ResizablePanelGroup.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { PanelGroup } from 'react-resizable-panels';
+
+import { cn } from '../../utils.js';
+
+export type ResizablePanelGroupProps = React.ComponentProps<typeof PanelGroup>;
+
+export const ResizablePanelGroup = ({ className, ...props }: ResizablePanelGroupProps) => (
+  <PanelGroup
+    className={cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className)}
+    {...props}
+  />
+);

package/src/components/ScrollArea/ScrollArea.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { Corner, Root, Viewport } from '@radix-ui/react-scroll-area';
+
+import { cn } from '../../utils.js';
+import { ScrollBar } from './ScrollBar.js';
+
+export const ScrollArea = React.forwardRef<React.ElementRef<typeof Root>, React.ComponentPropsWithoutRef<typeof Root>>(
+  function ScrollArea({ children, className, ...props }, ref) {
+    return (
+      <Root className={cn('relative overflow-hidden', className)} data-testid="scroll-area" ref={ref} {...props}>
+        <Viewport className="h-full w-full rounded-[inherit]">{children}</Viewport>
+        <ScrollBar />
+        <Corner />
+      </Root>
+    );
+  }
+);

package/src/components/ScrollArea/ScrollBar.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { ScrollAreaScrollbar, ScrollAreaThumb } from '@radix-ui/react-scroll-area';
+
+import { cn } from '../../utils.js';
+
+export const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaScrollbar>
+>(function ScrollBar({ className, orientation = 'vertical', ...props }, ref) {
+  return (
+    <ScrollAreaScrollbar
+      className={cn(
+        'flex touch-none select-none transition-colors',
+        orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+        orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+        className
+      )}
+      orientation={orientation}
+      ref={ref}
+      {...props}
+    >
+      <ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    </ScrollAreaScrollbar>
+  );
+});

package/src/components/SearchBar/SearchBar.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { SearchIcon } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+import { cn } from '../../utils.js';
+import { Input } from '../Input/Input.js';
+
+export type BaseSearchBarProps = {
+  /** Additional CSS classes to add to the wrapper form component, potentially overriding default styling */
+  className?: string;
+  /** An optional callback invoked when the user clicks the search bar */
+  onClick?: () => void;
+  /** Custom placeholder to use instead of the default */
+  placeholder?: string;
+};
+
+type ControlledSearchBarProps = BaseSearchBarProps & {
+  /** Event handler called when the value changes */
+  onValueChange: (value: string) => void;
+  /** The controlled value of the search bar, which should be used in conjunction with onValueChange */
+  value: string;
+};
+
+type UncontrolledSearchBarProps = BaseSearchBarProps & {
+  onValueChange?: never;
+  value?: never;
+};
+
+export type SearchBarProps = ControlledSearchBarProps | UncontrolledSearchBarProps;
+
+export const SearchBar = ({ className, onClick, onValueChange, placeholder, value }: SearchBarProps) => {
+  const { t } = useTranslation('libui');
+  return (
+    <form className={cn('relative', className)}>
+      <SearchIcon className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+      <Input
+        className="pl-8"
+        placeholder={placeholder ?? t('searchBar.placeholder')}
+        type="search"
+        value={value}
+        onChange={(event) => {
+          onValueChange?.(event.target.value);
+        }}
+        onClick={() => onClick?.()}
+      />
+    </form>
+  );
+};

package/src/components/Select/Select.tsx

@@ -0,0 +1,21 @@
+import * as SelectPrimitive from '@radix-ui/react-select';
+
+import { SelectContent } from './SelectContent.js';
+import { SelectItem } from './SelectItem.js';
+import { SelectLabel } from './SelectLabel.js';
+import { SelectScrollDownButton } from './SelectScrollDownButton.js';
+import { SelectScrollUpButton } from './SelectScrollUpButton.js';
+import { SelectSeparator } from './SelectSeparator.js';
+import { SelectTrigger } from './SelectTrigger.js';
+
+export const Select = Object.assign(SelectPrimitive.Root.bind(null), {
+  Content: SelectContent,
+  Group: SelectPrimitive.Group,
+  Item: SelectItem,
+  Label: SelectLabel,
+  ScrollDownButton: SelectScrollDownButton,
+  ScrollUpButton: SelectScrollUpButton,
+  Separator: SelectSeparator,
+  Trigger: SelectTrigger,
+  Value: SelectPrimitive.Value
+});

package/src/components/Select/SelectContent.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import * as SelectPrimitive from '@radix-ui/react-select';
+
+import { cn } from '../../utils.js';
+import { SelectScrollDownButton } from './SelectScrollDownButton.js';
+import { SelectScrollUpButton } from './SelectScrollUpButton.js';
+
+export const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(function SelectContent({ children, className, position = 'popper', ...props }, ref) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        className={cn(
+          'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover 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',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          className
+        )}
+        position={position}
+        ref={ref}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            'p-1',
+            position === 'popper' &&
+              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+});

package/src/components/Select/SelectItem.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { CheckIcon } from 'lucide-react';
+
+import { cn } from '../../utils.js';
+
+export const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(function SelectItem({ children, className, ...props }, ref) {
+  return (
+    <SelectPrimitive.Item
+      className={cn(
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 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 right-2 flex h-3.5 w-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="h-4 w-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+});

package/src/components/Select/SelectLabel.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import * as SelectPrimitive from '@radix-ui/react-select';
+
+import { cn } from '../../utils.js';
+
+export const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(function SelectLabel({ className, ...props }, ref) {
+  return <SelectPrimitive.Label className={cn('px-2 py-1.5 text-sm font-semibold', className)} ref={ref} {...props} />;
+});

package/src/components/Select/SelectScrollDownButton.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { ChevronDownIcon } from 'lucide-react';
+
+import { cn } from '../../utils.js';
+
+export const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(function SelectScrollDownButton({ className, ...props }, ref) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      className={cn('flex cursor-default items-center justify-center py-1', className)}
+      ref={ref}
+      {...props}
+    >
+      <ChevronDownIcon />
+    </SelectPrimitive.ScrollDownButton>
+  );
+});

package/src/components/Select/SelectScrollUpButton.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { ChevronUpIcon } from 'lucide-react';
+
+import { cn } from '../../utils.js';
+
+export const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(function SelectScrollUpButton({ className, ...props }, ref) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      className={cn('flex cursor-default items-center justify-center py-1', className)}
+      ref={ref}
+      {...props}
+    >
+      <ChevronUpIcon />
+    </SelectPrimitive.ScrollUpButton>
+  );
+});

package/src/components/Select/SelectSeparator.tsx

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

package/src/components/Select/SelectTrigger.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import * as SelectPrimitive from '@radix-ui/react-select';
+
+import { DropdownButton } from '../DropdownButton/DropdownButton.js';
+
+export const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(function SelectTrigger({ children, className, ...props }, ref) {
+  return (
+    <SelectPrimitive.Trigger asChild className={className} ref={ref} {...props}>
+      <DropdownButton>{children}</DropdownButton>
+    </SelectPrimitive.Trigger>
+  );
+});

package/src/components/Separator/Separator.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+import { cn } from '../../utils.js';
+
+export const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(function Separator({ className, decorative = true, orientation = 'horizontal', ...props }, ref) {
+  return (
+    <SeparatorPrimitive.Root
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className
+      )}
+      data-testid="separator"
+      decorative={decorative}
+      orientation={orientation}
+      ref={ref}
+      {...props}
+    />
+  );
+});

package/src/components/Sheet/Sheet.tsx

@@ -0,0 +1,20 @@
+import { Close, Portal, Root, Trigger } from '@radix-ui/react-dialog';
+
+import { SheetContent } from './SheetContent.js';
+import { SheetDescription } from './SheetDescription.js';
+import { SheetFooter } from './SheetFooter.js';
+import { SheetHeader } from './SheetHeader.js';
+import { SheetOverlay } from './SheetOverlay.js';
+import { SheetTitle } from './SheetTitle.js';
+
+export const Sheet = Object.assign(Root.bind(null), {
+  Close,
+  Content: SheetContent,
+  Description: SheetDescription,
+  Footer: SheetFooter,
+  Header: SheetHeader,
+  Overlay: SheetOverlay,
+  Portal,
+  Title: SheetTitle,
+  Trigger
+});

package/src/components/Sheet/SheetContent.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog';
+import { type VariantProps, cva } from 'class-variance-authority';
+import { XIcon } from 'lucide-react';
+
+import { cn } from '../../utils.js';
+
+export const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  {
+    defaultVariants: {
+      side: 'right'
+    },
+    variants: {
+      side: {
+        bottom:
+          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top'
+      }
+    }
+  }
+);
+
+export type SheetContentProps = React.ComponentPropsWithoutRef<typeof Content> & VariantProps<typeof sheetVariants>;
+
+export const SheetContent = React.forwardRef<React.ElementRef<typeof Content>, SheetContentProps>(function SheetContent(
+  { children, className, side = 'right', ...props },
+  ref
+) {
+  return (
+    <Portal>
+      <Overlay />
+      <Content className={cn(sheetVariants({ side }), 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-secondary">
+          <XIcon className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </Close>
+      </Content>
+    </Portal>
+  );
+});

package/src/components/Sheet/SheetDescription.tsx

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

package/src/components/Sheet/SheetFooter.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { cn } from '../../utils.js';
+
+export const SheetFooter = ({ 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/Sheet/SheetHeader.tsx

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