{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sheet",
  "dependencies": [
    "lucide-react",
    "motion",
    "radix-ui"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/sheet.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Dialog as SheetPrime } from 'radix-ui';\nimport { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';\n\nimport { cn } from '@/lib/utils';\nimport { XIcon } from 'lucide-react';\n\ntype SheetProps = SheetPrimitiveProps;\n\nfunction Sheet(props: SheetProps) {\n  return <SheetPrimitive {...props} />;\n}\n\ntype SheetTriggerProps = SheetTriggerPrimitiveProps;\n\nfunction SheetTrigger(props: SheetTriggerProps) {\n  return <SheetTriggerPrimitive {...props} />;\n}\n\ntype SheetOverlayProps = SheetOverlayPrimitiveProps;\n\nfunction SheetOverlay({ className, ...props }: SheetOverlayProps) {\n  return (\n    <SheetOverlayPrimitive\n      className={cn('fixed inset-0 z-50 bg-black/50', className)}\n      {...props}\n    />\n  );\n}\n\ntype SheetCloseProps = SheetClosePrimitiveProps;\n\nfunction SheetClose(props: SheetCloseProps) {\n  return <SheetClosePrimitive {...props} />;\n}\n\ntype SheetContentProps = SheetContentPrimitiveProps & {\n  showCloseButton?: boolean;\n};\n\nfunction SheetContent({\n  className,\n  children,\n  side = 'right',\n  showCloseButton = true,\n  ...props\n}: SheetContentProps) {\n  return (\n    <SheetPortalPrimitive>\n      <SheetOverlay />\n      <SheetContentPrimitive\n        className={cn(\n          'bg-background fixed z-50 flex flex-col gap-4 shadow-lg',\n          side === 'right' && 'h-full w-[350px] border-l',\n          side === 'left' && 'h-full w-[350px] border-r',\n          side === 'top' && 'w-full h-[350px] border-b',\n          side === 'bottom' && 'w-full h-[350px] border-t',\n          className,\n        )}\n        side={side}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetClose className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none\">\n            <XIcon className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n          </SheetClose>\n        )}\n      </SheetContentPrimitive>\n    </SheetPortalPrimitive>\n  );\n}\n\ntype SheetHeaderProps = SheetHeaderPrimitiveProps;\n\nfunction SheetHeader({ className, ...props }: SheetHeaderProps) {\n  return (\n    <SheetHeaderPrimitive\n      className={cn('flex flex-col gap-1.5 p-4', className)}\n      {...props}\n    />\n  );\n}\n\ntype SheetFooterProps = SheetFooterPrimitiveProps;\n\nfunction SheetFooter({ className, ...props }: SheetFooterProps) {\n  return (\n    <SheetFooterPrimitive\n      className={cn('mt-auto flex flex-col gap-2 p-4', className)}\n      {...props}\n    />\n  );\n}\n\ntype SheetTitleProps = SheetTitlePrimitiveProps;\n\nfunction SheetTitle({ className, ...props }: SheetTitleProps) {\n  return (\n    <SheetTitlePrimitive\n      className={cn('text-foreground font-semibold', className)}\n      {...props}\n    />\n  );\n}\n\ntype SheetDescriptionProps = SheetDescriptionPrimitiveProps;\n\nfunction SheetDescription({ className, ...props }: SheetDescriptionProps) {\n  return (\n    <SheetDescriptionPrimitive\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n  type SheetProps,\n  type SheetTriggerProps,\n  type SheetCloseProps,\n  type SheetContentProps,\n  type SheetHeaderProps,\n  type SheetFooterProps,\n  type SheetTitleProps,\n  type SheetDescriptionProps,\n};\n\n\n\ntype SheetContextType = {\n  isOpen: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n};\n\nconst [SheetProvider, useSheet] =\n  getStrictContext<SheetContextType>('SheetContext');\n\ntype SheetPrimitiveProps = React.ComponentProps<typeof SheetPrime.Root>;\n\nfunction SheetPrimitive(props: SheetPrimitiveProps) {\n  const [isOpen, setIsOpen] = useControlledState({\n    value: props.open,\n    defaultValue: props.defaultOpen,\n    onChange: props.onOpenChange,\n  });\n\n  return (\n    <SheetProvider value={{ isOpen, setIsOpen }}>\n      <SheetPrime.Root\n        data-slot=\"sheet\"\n        {...props}\n        onOpenChange={setIsOpen}\n      />\n    </SheetProvider>\n  );\n}\n\ntype SheetTriggerPrimitiveProps = React.ComponentProps<typeof SheetPrime.Trigger>;\n\nfunction SheetTriggerPrimitive(props: SheetTriggerPrimitiveProps) {\n  return <SheetPrime.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\ntype SheetClosePrimitiveProps = React.ComponentProps<typeof SheetPrime.Close>;\n\nfunction SheetClosePrimitive(props: SheetClosePrimitiveProps) {\n  return <SheetPrime.Close data-slot=\"sheet-close\" {...props} />;\n}\n\ntype SheetPortalPrimitiveProps = React.ComponentProps<typeof SheetPrime.Portal>;\n\nfunction SheetPortalPrimitive(props: SheetPortalPrimitiveProps) {\n  const { isOpen } = useSheet();\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <SheetPrime.Portal forceMount data-slot=\"sheet-portal\" {...props} />\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype SheetOverlayPrimitiveProps = Omit<\n  React.ComponentProps<typeof SheetPrime.Overlay>,\n  'asChild' | 'forceMount'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction SheetOverlayPrimitive({\n  transition = { duration: 0.2, ease: 'easeInOut' },\n  ...props\n}: SheetOverlayPrimitiveProps) {\n  return (\n    <SheetPrime.Overlay asChild forceMount>\n      <motion.div\n        key=\"sheet-overlay\"\n        data-slot=\"sheet-overlay\"\n        initial={{ opacity: 0, filter: 'blur(4px)' }}\n        animate={{ opacity: 1, filter: 'blur(0px)' }}\n        exit={{ opacity: 0, filter: 'blur(4px)' }}\n        transition={transition}\n        {...props}\n      />\n    </SheetPrime.Overlay>\n  );\n}\n\ntype Side = 'top' | 'bottom' | 'left' | 'right';\n\ntype SheetContentPrimitiveProps = React.ComponentProps<typeof SheetPrime.Content> &\n  HTMLMotionProps<'div'> & {\n    side?: Side;\n  };\n\nfunction SheetContentPrimitive({\n  side = 'right',\n  transition = { type: 'spring', stiffness: 150, damping: 22 },\n  style,\n  children,\n  ...props\n}: SheetContentPrimitiveProps) {\n  const axis = side === 'left' || side === 'right' ? 'x' : 'y';\n\n  const offscreen: Record<Side, { x?: string; y?: string; opacity: number }> = {\n    right: { x: '100%', opacity: 0 },\n    left: { x: '-100%', opacity: 0 },\n    top: { y: '-100%', opacity: 0 },\n    bottom: { y: '100%', opacity: 0 },\n  };\n\n  const positionStyle: Record<Side, React.CSSProperties> = {\n    right: { insetBlock: 0, right: 0 },\n    left: { insetBlock: 0, left: 0 },\n    top: { insetInline: 0, top: 0 },\n    bottom: { insetInline: 0, bottom: 0 },\n  };\n\n  return (\n    <SheetPrime.Content asChild forceMount {...props}>\n      <motion.div\n        key=\"sheet-content\"\n        data-slot=\"sheet-content\"\n        data-side={side}\n        initial={offscreen[side]}\n        animate={{ [axis]: 0, opacity: 1 }}\n        exit={offscreen[side]}\n        style={{\n          position: 'fixed',\n          ...positionStyle[side],\n          ...style,\n        }}\n        transition={transition}\n      >\n        {children}\n      </motion.div>\n    </SheetPrime.Content>\n  );\n}\n\ntype SheetHeaderPrimitiveProps = React.ComponentProps<'div'>;\n\nfunction SheetHeaderPrimitive(props: SheetHeaderPrimitiveProps) {\n  return <div data-slot=\"sheet-header\" {...props} />;\n}\n\ntype SheetFooterPrimitiveProps = React.ComponentProps<'div'>;\n\nfunction SheetFooterPrimitive(props: SheetFooterPrimitiveProps) {\n  return <div data-slot=\"sheet-footer\" {...props} />;\n}\n\ntype SheetTitlePrimitiveProps = React.ComponentProps<typeof SheetPrime.Title>;\n\nfunction SheetTitlePrimitive(props: SheetTitlePrimitiveProps) {\n  return <SheetPrime.Title data-slot=\"sheet-title\" {...props} />;\n}\n\ntype SheetDescriptionPrimitiveProps = React.ComponentProps<\n  typeof SheetPrime.Description\n>;\n\nfunction SheetDescriptionPrimitive(props: SheetDescriptionPrimitiveProps) {\n  return (\n    <SheetPrime.Description data-slot=\"sheet-description\" {...props} />\n  );\n}\n\n\nfunction getStrictContext<T>(\n  name?: string,\n): readonly [\n  ({\n    value,\n    children,\n  }: {\n    value: T;\n    children?: React.ReactNode;\n  }) => React.JSX.Element,\n  () => T,\n] {\n  const Context = React.createContext<T | undefined>(undefined);\n\n  const Provider = ({\n    value,\n    children,\n  }: {\n    value: T;\n    children?: React.ReactNode;\n  }) => <Context.Provider value={value}>{children}</Context.Provider>;\n\n  const useSafeContext = () => {\n    const ctx = React.useContext(Context);\n    if (ctx === undefined) {\n      throw new Error(`useContext must be used within ${name ?? 'a Provider'}`);\n    }\n    return ctx;\n  };\n\n  return [Provider, useSafeContext] as const;\n}\n\nexport { getStrictContext };\n\ninterface CommonControlledStateProps<T> {\n  value?: T;\n  defaultValue?: T;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function useControlledState<T, Rest extends any[] = []>(\n  props: CommonControlledStateProps<T> & {\n    onChange?: (value: T, ...args: Rest) => void;\n  },\n): readonly [T, (next: T, ...args: Rest) => void] {\n  const { value, defaultValue, onChange } = props;\n\n  const [state, setInternalState] = React.useState<T>(\n    value !== undefined ? value : (defaultValue as T),\n  );\n\n  React.useEffect(() => {\n    if (value !== undefined) setInternalState(value);\n  }, [value]);\n\n  const setState = React.useCallback(\n    (next: T, ...args: Rest) => {\n      setInternalState(next);\n      onChange?.(next, ...args);\n    },\n    [onChange],\n  );\n\n  return [state, setState] as const;\n}\n",
      "type": "registry:ui",
      "target": "components/ui/sheet.tsx"
    }
  ],
  "type": "registry:ui"
}