{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sheet",
  "type": "registry:ui",
  "title": "Sheet",
  "description": "Side panel over the page for details, filters and mobile navigation.",
  "dependencies": [
    "radix-ui",
    "class-variance-authority",
    "lucide-react"
  ],
  "registryDependencies": [
    "@wibo/utils"
  ],
  "files": [
    {
      "path": "src/components/sheet.tsx",
      "type": "registry:ui",
      "content": "import type { ComponentProps } from \"react\";\nimport { Dialog as SheetPrimitive } from \"radix-ui\";\nimport { cva } from \"class-variance-authority\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\n/** Side panel over the page: details, filters, mobile navigation. Always give it a `SheetTitle`. */\nfunction Sheet(props: ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n}\n\nfunction SheetTrigger(props: ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\nfunction SheetClose(props: ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\nfunction SheetOverlay({ className, ...props }: ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-overlay data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst sheetContentVariants = cva(\n  \"fixed z-50 flex flex-col gap-4 bg-popover text-popover-foreground shadow-overlay outline-none\",\n  {\n    variants: {\n      side: {\n        right:\n          \"inset-y-0 right-0 h-full w-3/4 border-l border-border sm:max-w-sm data-[state=open]:animate-slide-in-right data-[state=closed]:animate-slide-out-right\",\n        left: \"inset-y-0 left-0 h-full w-3/4 border-r border-border sm:max-w-sm data-[state=open]:animate-slide-in-left data-[state=closed]:animate-slide-out-left\",\n        top: \"inset-x-0 top-0 h-auto border-b border-border data-[state=open]:animate-slide-in-top data-[state=closed]:animate-slide-out-top\",\n        bottom:\n          \"inset-x-0 bottom-0 h-auto border-t border-border data-[state=open]:animate-slide-in-bottom data-[state=closed]:animate-slide-out-bottom\",\n      },\n    },\n    defaultVariants: { side: \"right\" },\n  },\n);\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  closeLabel = \"Close\",\n  ...props\n}: ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  showCloseButton?: boolean;\n  /** Accessible name of the close button. */\n  closeLabel?: string;\n}) {\n  return (\n    <SheetPrimitive.Portal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(sheetContentVariants({ side }), className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton ? (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            className=\"press-icon absolute top-3 right-3 inline-flex size-7 items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-foreground/4 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50\"\n          >\n            <X aria-hidden=\"true\" className=\"size-4\" />\n            <span className=\"sr-only\">{closeLabel}</span>\n          </SheetPrimitive.Close>\n        ) : null}\n      </SheetPrimitive.Content>\n    </SheetPrimitive.Portal>\n  );\n}\n\nfunction SheetHeader({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-4 pr-12\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetFooter({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetTitle({ className, ...props }: ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-base font-semibold text-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n};\n"
    }
  ]
}