{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-sheet",
  "title": "Glass Sheet",
  "description": "A liquid glass styled sheet/drawer with slide animations.",
  "dependencies": [
    "@radix-ui/react-dialog",
    "class-variance-authority",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/liquid-glass/glass-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 { X } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\nconst GlassSheet = SheetPrimitive.Root\n\nconst GlassSheetTrigger = SheetPrimitive.Trigger\n\nconst GlassSheetClose = SheetPrimitive.Close\n\nconst GlassSheetPortal = SheetPrimitive.Portal\n\nconst GlassSheetOverlay = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Overlay\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/60 backdrop-blur-sm\",\n      \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n      \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className,\n    )}\n    {...props}\n    ref={ref}\n  />\n))\nGlassSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n  cn(\n    \"fixed z-50 gap-4 p-6\",\n    \"bg-white/10 backdrop-blur-2xl border border-white/20\",\n    \"shadow-[0_8px_32px_rgba(0,0,0,0.4)]\",\n    \"transition ease-in-out duration-300\",\n    \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n    \"before:absolute before:inset-0\",\n    \"before:bg-gradient-to-b before:from-white/15 before:to-transparent before:pointer-events-none\",\n  ),\n  {\n    variants: {\n      side: {\n        top: cn(\n          \"inset-x-0 top-0 border-b rounded-b-2xl\",\n          \"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n        ),\n        bottom: cn(\n          \"inset-x-0 bottom-0 border-t rounded-t-2xl\",\n          \"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n        ),\n        left: cn(\n          \"inset-y-0 left-0 h-full w-3/4 border-r rounded-r-2xl sm:max-w-sm\",\n          \"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left\",\n        ),\n        right: cn(\n          \"inset-y-0 right-0 h-full w-3/4 border-l rounded-l-2xl sm:max-w-sm\",\n          \"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right\",\n        ),\n      },\n    },\n    defaultVariants: {\n      side: \"right\",\n    },\n  },\n)\n\ninterface GlassSheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n    VariantProps<typeof sheetVariants> {}\n\nconst GlassSheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, GlassSheetContentProps>(\n  ({ side = \"right\", className, children, ...props }, ref) => (\n    <GlassSheetPortal>\n      <GlassSheetOverlay />\n      <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>\n        <div className=\"relative z-10\">{children}</div>\n        <SheetPrimitive.Close className=\"absolute right-4 top-4 rounded-lg p-1 text-white/60 transition-all hover:text-white hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white/50\">\n          <X className=\"h-4 w-4\" />\n          <span className=\"sr-only\">Close</span>\n        </SheetPrimitive.Close>\n      </SheetPrimitive.Content>\n    </GlassSheetPortal>\n  ),\n)\nGlassSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst GlassSheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn(\"flex flex-col gap-2 text-left\", className)} {...props} />\n)\nGlassSheetHeader.displayName = \"GlassSheetHeader\"\n\nconst GlassSheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn(\"flex flex-row justify-end gap-2\", className)} {...props} />\n)\nGlassSheetFooter.displayName = \"GlassSheetFooter\"\n\nconst GlassSheetTitle = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Title ref={ref} className={cn(\"text-lg font-semibold text-white\", className)} {...props} />\n))\nGlassSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst GlassSheetDescription = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Description ref={ref} className={cn(\"text-sm text-white/60\", className)} {...props} />\n))\nGlassSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n  GlassSheet,\n  GlassSheetPortal,\n  GlassSheetOverlay,\n  GlassSheetTrigger,\n  GlassSheetClose,\n  GlassSheetContent,\n  GlassSheetHeader,\n  GlassSheetFooter,\n  GlassSheetTitle,\n  GlassSheetDescription,\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}