{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "drawer",
  "title": "Pixelact Drawer",
  "description": "A pixel art styled drawer component built on top of vaul Drawer.",
  "registryDependencies": [
    "drawer"
  ],
  "files": [
    {
      "path": "components/ui/pixelact-ui/drawer.tsx",
      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\nimport { Drawer as DrawerPrimitive } from \"vaul\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Drawer as ShadcnDrawer,\n  DrawerClose as ShadcnDrawerClose,\n  DrawerDescription as ShadcnDrawerDescription,\n  DrawerFooter as ShadcnDrawerFooter,\n  DrawerHeader as ShadcnDrawerHeader,\n  DrawerOverlay as ShadcnDrawerOverlay,\n  DrawerPortal as ShadcnDrawerPortal,\n  DrawerTitle as ShadcnDrawerTitle,\n  DrawerTrigger as ShadcnDrawerTrigger,\n} from \"@/components/ui/drawer\";\n\nimport \"@/components/ui/pixelact-ui/styles/styles.css\";\n\nconst Drawer = ShadcnDrawer;\n\nconst DrawerPortal = ShadcnDrawerPortal;\n\nconst DrawerOverlay = ShadcnDrawerOverlay;\n\nconst DrawerClose = ShadcnDrawerClose;\n\nfunction DrawerTitle({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <ShadcnDrawerTitle className={cn(className)} {...props}>\n      {children}\n    </ShadcnDrawerTitle>\n  );\n}\n\nfunction DrawerDescription({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <ShadcnDrawerDescription className={cn(className)} {...props}>\n      {children}\n    </ShadcnDrawerDescription>\n  );\n}\n\nfunction DrawerTrigger({\n  className,\n  children,\n  asChild,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return (\n    <ShadcnDrawerTrigger\n      className={cn(\n        // Only apply default trigger styling when NOT using asChild\n        !asChild &&\n          \"border-foreground dark:border-ring hover:bg-transparent active:bg-transparent focus:bg-transparent rounded-none border-4 focus:border-foreground hover:border-foreground dark:focus:border-ring bg-transparent data-[state=open]:bg-transparent data-[state=open]:border-foreground dark:data-[state=open]:border-ring\",\n        className\n      )}\n      asChild={asChild}\n      {...props}\n    >\n      {children}\n    </ShadcnDrawerTrigger>\n  );\n}\n\nexport const drawerVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      pixel: \"pixel-font\",\n    },\n  },\n  defaultVariants: {\n    font: \"pixel\",\n  },\n});\n\nexport type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Content> &\n  VariantProps<typeof drawerVariants> & {\n    side?: \"right\" | \"bottom\" | \"left\";\n  };\n\nfunction DrawerContent({\n  className,\n  children,\n  side = \"bottom\",\n  ...props\n}: DrawerProps) {\n  return (\n    <ShadcnDrawerPortal data-slot=\"drawer-portal\">\n      <ShadcnDrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"border-foreground/20 border-dashed rounded-none\",\n          \"group/drawer-content bg-background fixed z-50 flex h-auto flex-col\",\n          side === \"right\" &&\n            \"border-l-4 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 sm:max-w-sm\",\n          side === \"left\" &&\n            \"border-r-4 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 sm:max-w-sm\",\n          side === \"bottom\" &&\n            \"border-t-4 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-none group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </ShadcnDrawerPortal>\n  );\n}\n\nfunction DrawerHeader({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <ShadcnDrawerHeader className={cn(\"\", className)} {...props}>\n      {children}\n    </ShadcnDrawerHeader>\n  );\n}\n\nfunction DrawerFooter({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <ShadcnDrawerFooter className={cn(\"\", className)} {...props}>\n      {children}\n    </ShadcnDrawerFooter>\n  );\n}\n\nexport {\n  Drawer,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerClose,\n  DrawerTrigger,\n  DrawerContent,\n  DrawerOverlay,\n  DrawerPortal,\n  DrawerTitle,\n  DrawerDescription,\n};\n",
      "type": "registry:component",
      "target": "components/ui/pixelact-ui/drawer.tsx"
    },
    {
      "path": "components/ui/pixelact-ui/styles/styles.css",
      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n:root {\n  --box-shadow-width: 4px;\n  --pixel-box-shadow: calc(-1 * (var(--box-shadow-width))) 0 0 0 black,\n    var(--box-shadow-width) 0 0 0 black, 0 var(--box-shadow-width) 0 0 black,\n    0 calc(-1 * (var(--box-shadow-width))) 0 0 black;\n  --pixel-box-shadow-destructive: calc(-1 * (var(--box-shadow-width))) 0 0 0\n      var(--destructive),\n    var(--box-shadow-width) 0 0 0 var(--destructive),\n    0 var(--box-shadow-width) 0 0 var(--destructive),\n    0 calc(-1 * (var(--box-shadow-width))) 0 0 var(--destructive);\n  --default-inner-border-color: rgb(200, 200, 200);\n}\n\n.dark {\n  --pixel-box-shadow: calc(-1 * (var(--box-shadow-width))) 0 0 0 var(--ring),\n    var(--box-shadow-width) 0 0 0 var(--ring),\n    0 var(--box-shadow-width) 0 0 var(--ring),\n    0 calc(-1 * (var(--box-shadow-width))) 0 0 var(--ring);\n}\n\n.pixel-font {\n  font-family: \"Press Start 2P\", system-ui, -apple-system, sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n\n.box-shadow-margin {\n  margin: var(--box-shadow-width);\n}\n",
      "type": "registry:style",
      "target": "components/ui/pixelact-ui/styles/styles.css"
    }
  ],
  "type": "registry:component"
}