{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sheet",
  "title": "Sheet",
  "description": "Side panels and drawers that slide in, with a footer tray.",
  "dependencies": [
    "class-variance-authority",
    "lucide-react",
    "radix-ui"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json",
    "https://ui.cuelark.com/r/motion.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/sheet.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Dialog as SheetPrimitive } from \"radix-ui\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { XIcon } from \"lucide-react\";\n\nimport { enterChildren, enterOnce, motionScale, useMergedRef } from \"@/lib/motion\";\nimport { cn } from \"@/lib/utils\";\n\nfunction Sheet(props: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n}\n\nfunction SheetTrigger(props: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\nfunction SheetClose(props: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\nconst sheetVariants = cva(\n  \"fixed z-50 flex flex-col gap-4 bg-popover text-popover-foreground shadow-overlay outline-none data-[state=closed]:animate-out data-[state=closed]:duration-200 data-[state=closed]:ease-in\",\n  {\n    variants: {\n      side: {\n        right: \"inset-y-0 right-0 h-full w-3/4 border-s border-border sm:max-w-sm data-[state=closed]:slide-out-to-right\",\n        left: \"inset-y-0 left-0 h-full w-3/4 border-e border-border sm:max-w-sm data-[state=closed]:slide-out-to-left\",\n        top: \"inset-x-0 top-0 h-auto border-b border-border data-[state=closed]:slide-out-to-top\",\n        bottom: \"inset-x-0 bottom-0 h-auto rounded-t-xl border-t border-border data-[state=closed]:slide-out-to-bottom\",\n      },\n    },\n    defaultVariants: { side: \"right\" },\n  },\n);\n\nconst FROM: Record<string, { xPercent?: number; yPercent?: number }> = { right: { xPercent: 100 }, left: { xPercent: -100 }, top: { yPercent: -100 }, bottom: { yPercent: 100 } };\n\n/** Slides in on the house ease; its sections then settle in one after another. */\nfunction enter(node: HTMLElement | null) {\n  if (!node || node.dataset.entered !== undefined) return;\n  const scale = motionScale(node);\n  enterOnce(node, () => ({ ...FROM[node.dataset.side ?? \"right\"] }), { duration: 0.5 });\n  node.dataset.entered = \"\";\n  if (scale) enterChildren(node.children, { opacity: 0, y: 10 * scale }, { stagger: 0.05, delay: 0.12 });\n}\n\nfunction SheetContent({ className, children, side = \"right\", ref, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & VariantProps<typeof sheetVariants>) {\n  const mergedRef = useMergedRef(enter, ref);\n  return (\n    <SheetPrimitive.Portal>\n      <SheetPrimitive.Overlay\n        data-slot=\"sheet-overlay\"\n        className=\"fixed inset-0 z-50 bg-black/25 backdrop-blur-[2px] dark:bg-black/55 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0\"\n      />\n      <SheetPrimitive.Content ref={mergedRef} data-slot=\"sheet-content\" data-side={side} className={cn(sheetVariants({ side }), className)} {...props}>\n        {children}\n        <SheetPrimitive.Close className=\"absolute top-4 right-4 inline-flex h-7 items-center gap-1.5 rounded-full bg-foreground/5 px-2 text-muted-foreground outline-none transition-[background-color,color,scale] duration-150 hover:bg-foreground/10 hover:text-foreground active:scale-95 [&_kbd]:h-4 [&_kbd]:border-0 [&_kbd]:bg-transparent [&_kbd]:px-0 [&_kbd]:shadow-none focus-visible:ring-3 focus-visible:ring-ring/50\">\n          <kbd aria-hidden=\"true\" className=\"cue-kbd hidden sm:inline-flex\">\n            esc\n          </kbd>\n          <XIcon className=\"size-4\" aria-hidden=\"true\" />\n          <span className=\"sr-only\">Close</span>\n        </SheetPrimitive.Close>\n      </SheetPrimitive.Content>\n    </SheetPrimitive.Portal>\n  );\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"sheet-header\" className={cn(\"cue-dash-b flex flex-col gap-1.5 p-5 pe-20\", className)} {...props} />;\n}\n\nfunction SheetBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"sheet-body\" className={cn(\"flex-1 overflow-y-auto px-5\", className)} {...props} />;\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"sheet-footer\" className={cn(\"cue-dash-t mt-auto flex flex-col-reverse gap-2 bg-muted/40 p-5 sm:flex-row sm:justify-end\", className)} {...props} />;\n}\n\nfunction SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return <SheetPrimitive.Title data-slot=\"sheet-title\" className={cn(\"text-base font-semibold tracking-tight\", className)} {...props} />;\n}\n\nfunction SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return <SheetPrimitive.Description data-slot=\"sheet-description\" className={cn(\"text-sm text-muted-foreground\", className)} {...props} />;\n}\n\nexport { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetBody, SheetFooter, SheetTitle, SheetDescription };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/sheet",
  "categories": [
    "overlays"
  ],
  "type": "registry:ui"
}