@gentleduck/registry-ui 0.2.1

package/src/context-menu/context-menu.tsx

@@ -0,0 +1,178 @@
+'use client'
+
+import { cn } from '@gentleduck/libs/cn'
+import * as ContextMenuPrimitive from '@gentleduck/primitives/context-menu'
+import { Check, ChevronRight, Circle } from 'lucide-react'
+import * as React from 'react'
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    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 && 'ps-8',
+      className,
+    )}
+    {...props}>
+    {children}
+    <ChevronRight aria-hidden="true" className="ms-auto h-4 w-4 rtl:rotate-180" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      '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 z-50 min-w-32 origin-(--gentleduck-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in',
+      'transition-all transition-discrete duration-[200ms,150ms] ease-(--duck-motion-ease)',
+      className,
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        '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 z-50 max-h-(--gentleduck-context-menu-content-available-height) min-w-32 origin-(--gentleduck-context-menu-content-transform-origin) overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in',
+        'transition-all transition-discrete duration-[200ms,150ms] ease-(--duck-motion-ease)',
+        className,
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    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 && 'ps-8',
+      className,
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+      className,
+    )}
+    checked={checked}
+    {...props}>
+    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check aria-hidden="true" className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+      className,
+    )}
+    {...props}>
+    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle aria-hidden="true" className="size-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 font-semibold text-foreground text-sm', inset && 'ps-8', className)}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-border', className)} {...props} />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn('ms-auto text-muted-foreground text-xs tracking-widest', className)} {...props} />
+}
+ContextMenuShortcut.displayName = 'ContextMenuShortcut'
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

package/src/context-menu/index.ts

@@ -0,0 +1 @@
+export * from './context-menu'

package/src/dialog/dialog-responsive.tsx

@@ -0,0 +1,137 @@
+'use client'
+import { useMediaQuery } from '@gentleduck/hooks/use-media-query'
+import type React from 'react'
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from '../drawer'
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from './dialog'
+
+function DialogResponsive({ children, ...props }: React.ComponentPropsWithoutRef<typeof Dialog>): React.JSX.Element {
+  const isDesktop = useMediaQuery('(min-width: 768px)')
+
+  if (isDesktop) {
+    return <Dialog {...props}>{children}</Dialog>
+  }
+
+  return <Drawer {...props}>{children}</Drawer>
+}
+
+function DialogTriggerResponsive({
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogTrigger> &
+  React.ComponentPropsWithoutRef<typeof DrawerTrigger>): React.JSX.Element {
+  const isDesktop = useMediaQuery('(min-width: 768px)')
+
+  if (isDesktop) {
+    return <DialogTrigger {...props}>{children}</DialogTrigger>
+  }
+
+  return <DrawerTrigger {...props}>{children}</DrawerTrigger>
+}
+
+function DialogContentResponsive({
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogContent>): React.JSX.Element {
+  const isDesktop = useMediaQuery('(min-width: 768px)')
+
+  if (isDesktop) {
+    return <DialogContent {...(props as any)}>{children}</DialogContent>
+  }
+
+  return <DrawerContent {...(props as React.ComponentPropsWithoutRef<typeof DrawerContent>)}>{children}</DrawerContent>
+}
+
+function DialogHeaderResponsive({
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogHeader>): React.JSX.Element {
+  const isDesktop = useMediaQuery('(min-width: 768px)')
+
+  if (isDesktop) {
+    return <DialogHeader {...props}>{children}</DialogHeader>
+  }
+
+  return <DrawerHeader {...props}>{children}</DrawerHeader>
+}
+
+function DialogFooterResponsive({
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogFooter>): React.JSX.Element {
+  const isDesktop = useMediaQuery('(min-width: 768px)')
+
+  if (isDesktop) {
+    return <DialogFooter {...props}>{children}</DialogFooter>
+  }
+
+  return <DrawerFooter {...(props as {})}>{children}</DrawerFooter>
+}
+
+function DialogTitleResponsive({
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogTitle>): React.JSX.Element {
+  const isDesktop = useMediaQuery('(min-width: 768px)')
+
+  if (isDesktop) {
+    return <DialogTitle {...props}>{children}</DialogTitle>
+  }
+
+  return <DrawerTitle {...(props as {})}>{children}</DrawerTitle>
+}
+
+function DialogDescriptionResponsive({
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogDescription>): React.JSX.Element {
+  const isDesktop = useMediaQuery('(min-width: 768px)')
+
+  if (isDesktop) {
+    return <DialogDescription {...props}>{children}</DialogDescription>
+  }
+
+  return <DrawerDescription {...(props as {})}>{children}</DrawerDescription>
+}
+
+function DialogCloseResponsive({
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogClose> &
+  React.ComponentPropsWithoutRef<typeof DrawerClose>): React.JSX.Element {
+  const isDesktop = useMediaQuery('(min-width: 768px)')
+
+  if (isDesktop) {
+    return <DialogClose {...props}>{children}</DialogClose>
+  }
+
+  return <DrawerClose {...props}>{children}</DrawerClose>
+}
+
+export {
+  DialogResponsive,
+  DialogTriggerResponsive,
+  DialogContentResponsive,
+  DialogHeaderResponsive,
+  DialogFooterResponsive,
+  DialogTitleResponsive,
+  DialogDescriptionResponsive,
+  DialogCloseResponsive,
+}

package/src/dialog/dialog.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import { cn } from '@gentleduck/libs/cn'
+import * as DialogPrimitive from '@gentleduck/primitives/dialog'
+import { X } from 'lucide-react'
+import * as React from 'react'
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in',
+      'transition-all transition-discrete duration-[200ms,150ms] ease-(--duck-motion-ease)',
+      className,
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { closeText?: string }
+>(({ className, children, closeText = 'Close', ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-1/2 left-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in sm:rounded-lg',
+        'transition-all transition-discrete duration-[200ms,150ms] ease-(--duck-motion-ease)',
+        className,
+      )}
+      {...props}>
+      {children}
+      <DialogPrimitive.Close className="absolute end-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">
+        <X aria-hidden="true" className="h-4 w-4" />
+        <span className="sr-only">{closeText}</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-start', className)} {...props} />
+)
+DialogHeader.displayName = 'DialogHeader'
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2', className)} {...props} />
+)
+DialogFooter.displayName = 'DialogFooter'
+
+const DialogTitle = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn('font-semibold text-lg leading-none tracking-tight', className)}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

package/src/dialog/index.ts

@@ -0,0 +1,2 @@
+export * from './dialog'
+export * from './dialog-responsive'

package/src/direction/direction.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import {
+  DIRECTION_DICTIONARY,
+  type Direction,
+  DirectionContext,
+  DirectionProvider,
+  type DirectionProviderProps,
+  Provider,
+  useDirection,
+} from '@gentleduck/primitives/direction'
+export type { Direction, DirectionProviderProps }
+export { useDirection, Provider, DirectionProvider, DirectionContext, DIRECTION_DICTIONARY }

package/src/direction/index.ts

@@ -0,0 +1 @@
+export * from './direction'

package/src/drawer/drawer.tsx

@@ -0,0 +1,185 @@
+'use client'
+
+import { cn } from '@gentleduck/libs/cn'
+import { type Direction, useDirection } from '@gentleduck/primitives/direction'
+import * as React from 'react'
+import { Drawer as DrawerPrimitive } from 'vaul'
+
+type DrawerProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Root> & {
+  dir?: Direction
+}
+
+function resolveDrawerDirection(
+  direction: NonNullable<React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Root>['direction']>,
+  dir: Direction,
+) {
+  if (dir !== 'rtl') return direction
+  if (direction === 'left') return 'right'
+  if (direction === 'right') return 'left'
+  return direction
+}
+
+function Drawer({ direction: drawerDirection = 'bottom', shouldScaleBackground = true, dir, ...props }: DrawerProps) {
+  const direction = useDirection(dir)
+  const resolvedDirection = resolveDrawerDirection(drawerDirection, direction)
+
+  return (
+    <DrawerPrimitive.Root
+      data-slot="drawer"
+      direction={resolvedDirection}
+      shouldScaleBackground={shouldScaleBackground}
+      {...props}
+    />
+  )
+}
+Drawer.displayName = 'Drawer'
+
+const DrawerTrigger: React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Trigger> &
+    React.RefAttributes<React.ComponentRef<typeof DrawerPrimitive.Trigger>>
+> = React.forwardRef((props, ref) => <DrawerPrimitive.Trigger ref={ref} {...props} data-slot="drawer-trigger" />)
+DrawerTrigger.displayName = 'DrawerTrigger'
+
+const DrawerPortal: React.FC<React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Portal>> = (props) => (
+  <DrawerPrimitive.Portal {...props} data-slot="drawer-portal" />
+)
+DrawerPortal.displayName = 'DrawerPortal'
+
+const DrawerClose: React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Close> &
+    React.RefAttributes<React.ComponentRef<typeof DrawerPrimitive.Close>>
+> = React.forwardRef((props, ref) => <DrawerPrimitive.Close ref={ref} {...props} data-slot="drawer-close" />)
+DrawerClose.displayName = 'DrawerClose'
+
+const DrawerOverlay: React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> &
+    React.RefAttributes<React.ComponentRef<typeof DrawerPrimitive.Overlay>>
+> = React.forwardRef(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn('fixed inset-0 bg-black/80', className)}
+    {...props}
+    data-slot="drawer-overlay"
+  />
+))
+DrawerOverlay.displayName = 'DrawerOverlay'
+
+type DrawerContentProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
+  dir?: Direction
+  overlayProps?: React.ComponentPropsWithoutRef<typeof DrawerOverlay>
+}
+
+const DrawerContent: React.ForwardRefExoticComponent<
+  DrawerContentProps & React.RefAttributes<React.ComponentRef<typeof DrawerPrimitive.Content>>
+> = React.forwardRef(({ className, children, dir, overlayProps, ...props }, ref) => {
+  const direction = useDirection(dir)
+
+  return (
+    <DrawerPortal>
+      <DrawerOverlay {...overlayProps} />
+      <DrawerPrimitive.Content
+        ref={ref}
+        dir={direction}
+        data-slot="drawer-content"
+        className={cn(
+          'group/drawer-content fixed z-50 flex h-auto flex-col bg-background',
+
+          // top
+          'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',
+
+          // bottom
+          'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t',
+
+          // right
+          'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm',
+
+          // left
+          'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm',
+
+          className,
+        )}
+        {...props}>
+        <div className="mx-auto mt-4 hidden h-2 w-25 shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  )
+})
+DrawerContent.displayName = 'DrawerContent'
+
+const DrawerHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('grid gap-1.5 p-4 **:text-center sm:**:text-start', className)}
+      {...props}
+      data-slot="drawer-header"
+    />
+  ),
+)
+DrawerHeader.displayName = 'DrawerHeader'
+
+const DrawerFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & { dir?: Direction }>(
+  ({ className, dir, ...props }, ref) => {
+    const direction = useDirection(dir)
+    return (
+      <div
+        ref={ref}
+        dir={direction}
+        className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+        {...props}
+        data-slot="drawer-footer"
+      />
+    )
+  },
+)
+DrawerFooter.displayName = 'DrawerFooter'
+
+const DrawerTitle: React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title> & { dir?: Direction } & React.RefAttributes<
+      React.ComponentRef<typeof DrawerPrimitive.Title>
+    >
+> = React.forwardRef(({ className, dir, ...props }, ref) => {
+  const direction = useDirection(dir)
+  return (
+    <DrawerPrimitive.Title
+      ref={ref}
+      dir={direction}
+      className={cn('font-semibold text-lg leading-none tracking-tight', className)}
+      data-slot="drawer-title"
+      {...props}
+    />
+  )
+})
+DrawerTitle.displayName = 'DrawerTitle'
+
+const DrawerDescription: React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description> & { dir?: Direction } & React.RefAttributes<
+      React.ComponentRef<typeof DrawerPrimitive.Description>
+    >
+> = React.forwardRef(({ className, dir, ...props }, ref) => {
+  const direction = useDirection(dir)
+  return (
+    <DrawerPrimitive.Description
+      ref={ref}
+      dir={direction}
+      className={cn('text-muted-foreground text-sm', className)}
+      data-slot="drawer-description"
+      {...props}
+    />
+  )
+})
+DrawerDescription.displayName = 'DrawerDescription'
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}

package/src/drawer/index.ts

@@ -0,0 +1 @@
+export * from './drawer'