{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sheet",
  "title": "Sheet",
  "description": "A shadcn-style sheet component built with Ark UI primitives.",
  "dependencies": ["@ark-ui/react", "lucide-react", "class-variance-authority"],
  "registryDependencies": ["scroll-area"],
  "files": [
    {
      "path": "src/components/ui/sheet.tsx",
      "content": "\"use client\";\n\nimport { Dialog as SheetPrimitive } from \"@ark-ui/react/dialog\";\nimport { ark } from \"@ark-ui/react/factory\";\nimport { Portal } from \"@ark-ui/react/portal\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { XIcon } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { cn } from \"@/lib/utils\";\n\nexport type SheetProps = SheetPrimitive.RootProps;\n\nexport const Sheet = (props: SheetProps) => (\n  <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n);\n\nexport const SheetTrigger = (props: SheetPrimitive.TriggerProps) => (\n  <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n);\n\nconst popupVariants = cva(\n  // Explicit rows: without this, align-content: stretch on a full-height grid\n  // stretches implicit `auto` rows equally — header/footer balloon to ~1/3 of the viewport.\n  \"fixed z-[calc(50+var(--layer-index,0))] grid min-h-0 w-full grid-rows-[auto_minmax(0,1fr)_auto] gap-0 border-border bg-popover text-popover-foreground shadow-xl outline-none transition-all duration-200 data-[state=closed]:opacity-0 data-[state=open]:opacity-100 data-has-nested:data-[state=open]:scale-[calc(1-var(--nested-layer-count,0)*0.05)]\",\n  {\n    compoundVariants: [\n      {\n        className:\n          \"inset-y-0 right-0 h-dvh max-w-[min(92vw,32rem)] border-l data-[state=closed]:translate-x-full data-[state=open]:translate-x-0\",\n        side: \"right\",\n        variant: \"default\",\n      },\n      {\n        className:\n          \"inset-y-0 left-0 h-dvh max-w-[min(92vw,32rem)] border-r data-[state=closed]:-translate-x-full data-[state=open]:translate-x-0\",\n        side: \"left\",\n        variant: \"default\",\n      },\n      {\n        className:\n          \"top-0 inset-x-0 max-h-[min(88dvh,30rem)] border-b data-[state=closed]:-translate-y-full data-[state=open]:translate-y-0\",\n        side: \"top\",\n        variant: \"default\",\n      },\n      {\n        className:\n          \"bottom-0 inset-x-0 max-h-[min(88dvh,30rem)] border-t data-[state=closed]:translate-y-full data-[state=open]:translate-y-0\",\n        side: \"bottom\",\n        variant: \"default\",\n      },\n      {\n        className:\n          \"right-3 top-3 bottom-3 max-w-[min(92vw,32rem)] rounded-xl border data-[state=closed]:translate-x-full data-[state=open]:translate-x-0 sm:right-6 sm:top-6 sm:bottom-6\",\n        side: \"right\",\n        variant: \"inset\",\n      },\n      {\n        className:\n          \"left-3 top-3 bottom-3 max-w-[min(92vw,32rem)] rounded-xl border data-[state=closed]:-translate-x-full data-[state=open]:translate-x-0 sm:left-6 sm:top-6 sm:bottom-6\",\n        side: \"left\",\n        variant: \"inset\",\n      },\n      {\n        className:\n          \"left-3 right-3 top-3 w-auto max-w-none min-w-0 max-h-[min(88dvh,30rem)] overflow-hidden rounded-xl border data-[state=closed]:-translate-y-full data-[state=open]:translate-y-0 sm:left-6 sm:right-6 sm:top-6\",\n        side: \"top\",\n        variant: \"inset\",\n      },\n      {\n        className:\n          \"left-3 right-3 bottom-3 w-auto max-w-none min-w-0 max-h-[min(88dvh,30rem)] overflow-hidden rounded-xl border data-[state=closed]:translate-y-full data-[state=open]:translate-y-0 sm:left-6 sm:right-6 sm:bottom-6\",\n        side: \"bottom\",\n        variant: \"inset\",\n      },\n    ],\n    defaultVariants: {\n      side: \"right\",\n      variant: \"default\",\n    },\n    variants: {\n      side: {\n        bottom: \"\",\n        left: \"\",\n        right: \"\",\n        top: \"\",\n      },\n      variant: {\n        default: \"\",\n        inset: \"\",\n      },\n    },\n  },\n);\n\nexport type SheetPopupProps = SheetPrimitive.ContentProps &\n  VariantProps<typeof popupVariants> & {\n    backdropClassName?: string;\n    closeProps?: SheetPrimitive.CloseTriggerProps;\n    showCloseButton?: boolean;\n  };\n\nexport const SheetPopup = ({\n  backdropClassName,\n  children,\n  className,\n  closeProps,\n  showCloseButton = true,\n  side = \"right\",\n  variant = \"default\",\n  ...contentProps\n}: SheetPopupProps) => {\n  const {\n    className: closeClassName,\n    children: closeChildren,\n    ...closeRest\n  } = closeProps ?? {};\n\n  return (\n    <Portal>\n      <SheetPrimitive.Backdrop\n        className={cn(\n          \"fixed inset-0 z-[calc(50+var(--layer-index,0))] bg-black/40 backdrop-blur-md transition-[opacity,backdrop-filter] duration-200 dark:bg-black/50 dark:backdrop-blur-lg data-[state=closed]:opacity-0 data-[state=open]:opacity-100 supports-backdrop-filter:bg-black/25 supports-backdrop-filter:dark:bg-black/35\",\n          backdropClassName,\n        )}\n        data-slot=\"sheet-backdrop\"\n      />\n      <SheetPrimitive.Positioner\n        className=\"fixed inset-0 z-[calc(50+var(--layer-index,0))]\"\n        data-slot=\"sheet-positioner\"\n      >\n        <SheetPrimitive.Content\n          className={cn(popupVariants({ side, variant }), className)}\n          data-slot=\"sheet-content\"\n          {...contentProps}\n        >\n          {showCloseButton ? (\n            <SheetPrimitive.CloseTrigger\n              aria-label=\"Close\"\n              className={cn(\n                \"absolute top-3 inset-e-3 z-10 inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background\",\n                closeClassName,\n              )}\n              {...closeRest}\n            >\n              {closeChildren ?? <XIcon className=\"size-4\" />}\n            </SheetPrimitive.CloseTrigger>\n          ) : null}\n          {children}\n        </SheetPrimitive.Content>\n      </SheetPrimitive.Positioner>\n    </Portal>\n  );\n};\n\nexport const SheetContent = SheetPopup;\n\nexport const SheetHeader = ({\n  className,\n  ...props\n}: ComponentProps<typeof ark.div>) => (\n  <ark.div\n    className={cn(\n      \"flex shrink-0 flex-col gap-1.5 border-border border-b px-6 pt-6 pb-4 text-start\",\n      className,\n    )}\n    data-slot=\"sheet-header\"\n    {...props}\n  />\n);\n\nconst footerVariants = cva(\n  \"mt-auto flex shrink-0 flex-col-reverse gap-2 border-border border-t px-6 py-4 sm:flex-row sm:justify-end\",\n  {\n    defaultVariants: {\n      variant: \"default\",\n    },\n    variants: {\n      variant: {\n        bare: \"border-t-0 pt-0\",\n        default: \"bg-muted/35\",\n      },\n    },\n  },\n);\n\nexport const SheetFooter = ({\n  className,\n  variant,\n  ...props\n}: ComponentProps<\"div\"> & VariantProps<typeof footerVariants>) => (\n  <ark.div\n    className={cn(footerVariants({ variant }), className)}\n    data-slot=\"sheet-footer\"\n    {...props}\n  />\n);\n\nexport const SheetTitle = ({\n  className,\n  ...props\n}: SheetPrimitive.TitleProps) => (\n  <SheetPrimitive.Title\n    className={cn(\"font-semibold text-lg leading-none\", className)}\n    data-slot=\"sheet-title\"\n    {...props}\n  />\n);\n\nexport const SheetDescription = ({\n  className,\n  ...props\n}: SheetPrimitive.DescriptionProps) => (\n  <SheetPrimitive.Description\n    className={cn(\"text-muted-foreground text-sm\", className)}\n    data-slot=\"sheet-description\"\n    {...props}\n  />\n);\n\nexport const SheetPanel = ({\n  className,\n  scrollFade = true,\n  ...props\n}: ComponentProps<\"div\"> & {\n  scrollFade?: boolean;\n}) => (\n  <ScrollArea\n    className=\"min-h-0 flex-1 rounded-none border-0 bg-transparent\"\n    scrollFade={scrollFade}\n    scrollbarGutter\n  >\n    <ark.div\n      className={cn(\"grid gap-4 px-6 py-4\", className)}\n      data-slot=\"sheet-panel\"\n      {...props}\n    />\n  </ScrollArea>\n);\n\nexport const SheetClose = (props: SheetPrimitive.CloseTriggerProps) => (\n  <SheetPrimitive.CloseTrigger data-slot=\"sheet-close\" {...props} />\n);\n\nexport const SheetPortal = Portal;\nexport const SheetBackdrop = SheetPrimitive.Backdrop;\nexport const SheetOverlay = SheetBackdrop;\n\nexport const SheetContext = SheetPrimitive.Context;\n\nexport const SheetRootProvider = (props: SheetPrimitive.RootProviderProps) => (\n  <SheetPrimitive.RootProvider {...props} />\n);\n\nexport {\n  useDialog as useSheet,\n  useDialogContext as useSheetContext,\n} from \"@ark-ui/react/dialog\";\n",
      "type": "registry:ui",
      "target": "src/components/ui/sheet.tsx"
    }
  ],
  "type": "registry:ui"
}