{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-sheet",
  "title": "Glass Sheet",
  "author": "Alex Chih (https://alexchih.com)",
  "description": "Side sheet as a veil — slides from any edge over a soft scrim. Built on Radix Dialog.",
  "dependencies": [
    "radix-ui",
    "lucide-react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "https://washiveil.alexchih.com/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/washiveil/ui/glass-sheet.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Dialog as DialogPrimitive } from 'radix-ui'\nimport { X } from 'lucide-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { cn } from '@/lib/utils'\n\nconst GlassSheet = DialogPrimitive.Root\n\nconst GlassSheetTrigger = DialogPrimitive.Trigger\n\nconst GlassSheetClose = DialogPrimitive.Close\n\nconst GlassSheetPortal = DialogPrimitive.Portal\n\nconst GlassSheetOverlay = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      'fixed inset-0 z-50 bg-deep/20 backdrop-blur-sm dark:bg-black/40 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n      className,\n    )}\n    {...props}\n  />\n))\nGlassSheetOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst glassSheetContentVariants = cva(\n  'fixed z-50 gap-4 bg-glass-stronger backdrop-blur-2xl backdrop-saturate-150 p-6 shadow-[0_16px_48px_rgba(28,25,20,0.12)] transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:duration-300 data-[state=closed]:duration-200',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-2 top-2 rounded-3xl border border-glass-edge data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n        bottom:\n          'inset-x-2 bottom-2 rounded-3xl border border-glass-edge data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n        left: 'inset-y-2 left-2 h-auto w-3/4 max-w-sm rounded-3xl border border-glass-edge data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left',\n        right:\n          'inset-y-2 right-2 h-auto w-3/4 max-w-sm rounded-3xl border border-glass-edge data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  },\n)\n\nexport interface GlassSheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n    VariantProps<typeof glassSheetContentVariants> {}\n\nconst GlassSheetContent = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Content>,\n  GlassSheetContentProps\n>(({ side = 'right', className, children, ...props }, ref) => (\n  <GlassSheetPortal>\n    <GlassSheetOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(glassSheetContentVariants({ side }), className)}\n      {...props}\n    >\n      <DialogPrimitive.Close className=\"absolute right-4 top-4 grid size-6 place-items-center rounded-full text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none\">\n        <X className=\"size-4\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n      {children}\n    </DialogPrimitive.Content>\n  </GlassSheetPortal>\n))\nGlassSheetContent.displayName = DialogPrimitive.Content.displayName\n\nfunction GlassSheetHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />\n}\nGlassSheetHeader.displayName = 'GlassSheetHeader'\n\nfunction GlassSheetFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)} {...props} />\n}\nGlassSheetFooter.displayName = 'GlassSheetFooter'\n\nconst GlassSheetTitle = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn('font-display text-lg font-medium leading-none tracking-tight', className)}\n    {...props}\n  />\n))\nGlassSheetTitle.displayName = DialogPrimitive.Title.displayName\n\nconst GlassSheetDescription = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />\n))\nGlassSheetDescription.displayName = DialogPrimitive.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:ui"
    }
  ],
  "type": "registry:ui"
}