{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "drawer", "title": "Drawer", "author": "AniBT ", "description": "AniBT phone drawer on vaul: draggable floating paper with a grab handle, a stitched header, one scrolling DrawerBody and a footer clear of the home indicator.", "dependencies": [ "vaul" ], "registryDependencies": [ "@anibt/theme" ], "files": [ { "path": "registry/anibt/ui/drawer.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * Drawer — AniBT 「贴纸手账」: the phone's container for \"one record\", dragged\n * up from the bottom edge (vaul).\n *\n * The same floating paper and scrim as Dialog, rounded only on the corners\n * away from its edge. A bottom drawer carries a grab handle and clears the\n * home-indicator inset, so its footer stays tappable. `DrawerHeader` is\n * parted from the content by the dashed stitch, `DrawerBody` is the one\n * region that scrolls, and `DrawerFooter` stacks full-width buttons.\n *\n * Export names and props are shadcn's, so this file can replace\n * `components/ui/drawer.tsx`.\n */\n\ntype RenderCompat = {\n /** Base UI's `asChild`: render this element instead, with the part's props. */\n render?: React.ReactElement\n /** Base UI compatibility; ignored (Radix decides from the rendered element). */\n nativeButton?: boolean\n}\n\n/** Maps Base UI's `render` onto Radix's `asChild`. */\nfunction renderAsChild

({\n render,\n nativeButton: _nativeButton,\n ...props\n}: P & RenderCompat): P {\n void _nativeButton\n if (!render) return props as P\n const children = props.children === undefined ? render : React.cloneElement(render, undefined, props.children)\n return { ...props, asChild: true, children } as P\n}\n\nfunction Drawer({ ...props }: React.ComponentProps) {\n return \n}\n\nfunction DrawerTrigger(props: React.ComponentProps & RenderCompat) {\n return \n}\n\nfunction DrawerPortal({ ...props }: React.ComponentProps) {\n return \n}\n\nfunction DrawerClose(props: React.ComponentProps & RenderCompat) {\n return \n}\n\nfunction DrawerOverlay({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\n/** The grab handle on a bottom drawer: a 36×4 pill in the control-edge ink. */\nfunction DrawerSwipeHandle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction DrawerContent({ className, children, ...props }: React.ComponentProps) {\n return (\n \n \n \n \n {children}\n \n \n )\n}\n\n/** Title and description over the stitch; centred on a bottom or top drawer. */\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\n/** The one scrolling region of a drawer; the footer stays reachable. */\nfunction DrawerBody({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\n/** Full-width buttons, stacked, the action first. */\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\n/** 16/800 ink. */\nfunction DrawerTitle({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\n/** 12, muted. */\nfunction DrawerDescription({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n Drawer,\n DrawerPortal,\n DrawerOverlay,\n DrawerSwipeHandle,\n DrawerTrigger,\n DrawerClose,\n DrawerContent,\n DrawerBody,\n DrawerHeader,\n DrawerFooter,\n DrawerTitle,\n DrawerDescription,\n}\n", "type": "registry:ui" } ], "categories": [ "overlay" ], "type": "registry:ui" }