{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "drawer-side", "title": "Side drawer", "description": "Styled drawer: the Side set. 5 decorative drawer variations (RightDrawer, LeftDrawer, RightInsetDrawer, LeftInsetDrawer, CornerDrawer) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.", "dependencies": [ "motion@^12.42.2", "lucide-react@^1.23.0" ], "registryDependencies": [ "@ai2/tokens" ], "files": [ { "path": "registry/ai2/styled/drawer-side.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { motion, AnimatePresence, useReducedMotion } from \"motion/react\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Side drawer family: 5 decorative drawers opening FROM THE SIDE. The essentials\n drawer was vertical (bottom/top); this family slides in from the horizontal edges\n (right/left). Each export is a complete drawer: internal open/closed state\n (uncontrolled defaultOpen or controlled open + onOpenChange), NO radix/vaul/portal,\n a self-contained fixed backdrop + a fixed panel positioned at the edge (z-50). It\n closes on a backdrop click, Escape or the close button (X). The panel takes focus\n on open. The slide runs through AnimatePresence; only a fade under\n reduced-motion. Color comes ONLY from tokens, with transparency via color-mix. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\n/* The edge that determines the slide direction. Right and left are full-height drawers; bottom is used only for the corner card rising from below. */\ntype Edge = \"right\" | \"left\" | \"bottom\"\n\nconst widthSize: Record = {\n sm: \"w-72\",\n md: \"w-80\",\n lg: \"w-96\",\n xl: \"w-[32rem]\",\n}\n\n/* On a panel with an inset margin a 100% translation leaves a sliver the size of that margin; an extra 2rem is added to clear the gap completely. It does no harm on a flush panel either, it just slides a little further away. */\nfunction slideOffset(edge: Edge) {\n switch (edge) {\n case \"right\":\n return { x: \"calc(100% + 2rem)\" }\n case \"left\":\n return { x: \"calc(-100% - 2rem)\" }\n case \"bottom\":\n return { y: \"calc(100% + 2rem)\" }\n }\n}\n\ninterface DrawerProps {\n size?: StyledSize\n trigger?: React.ReactNode\n title?: React.ReactNode\n children?: React.ReactNode\n className?: string\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?: (o: boolean) => void\n}\n\n/* Controlled/uncontrolled acik durum yonetimi. */\nfunction useControllableOpen(\n open: boolean | undefined,\n defaultOpen: boolean | undefined,\n onOpenChange: ((o: boolean) => void) | undefined\n) {\n const [uncontrolled, setUncontrolled] = React.useState(defaultOpen ?? false)\n const isControlled = open !== undefined\n const value = isControlled ? open : uncontrolled\n const setValue = React.useCallback(\n (next: boolean) => {\n if (!isControlled) setUncontrolled(next)\n onOpenChange?.(next)\n },\n [isControlled, onOpenChange]\n )\n return [value, setValue] as const\n}\n\ninterface ShellProps extends DrawerProps {\n edge: Edge\n /* Konum + koseler (or. \"inset-y-0 right-0 rounded-l-2xl\"). */\n anchorClassName: string\n panelClassName: string\n backdropClassName: string\n}\n\n/* Shared shell: trigger plus an AnimatePresence backdrop plus a panel positioned at the edge. edge decides the slide direction, anchorClassName the position and corners. */\nfunction DrawerShell({\n edge,\n anchorClassName,\n panelClassName,\n backdropClassName,\n size = \"md\",\n trigger,\n title,\n children,\n className,\n open,\n defaultOpen,\n onOpenChange,\n}: ShellProps) {\n const reduce = useReducedMotion()\n const [isOpen, setOpen] = useControllableOpen(open, defaultOpen, onOpenChange)\n const panelRef = React.useRef(null)\n\n React.useEffect(() => {\n if (!isOpen) return\n const onKey = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") setOpen(false)\n }\n window.addEventListener(\"keydown\", onKey)\n return () => window.removeEventListener(\"keydown\", onKey)\n }, [isOpen, setOpen])\n\n const enter = slideOffset(edge)\n\n return (\n
\n {/* The ARIA state lives on the REAL trigger. There used to be a\n `` wrapper, which produced two\n buttons in the AX tree: one carrying the state (not focusable) and\n one that took focus (stateless). A screen-reader user never heard\n \"has dialog\" or \"expanded\" - measured with the CDP AX tree. */}\n {/* data-slot is not passed to cloneElement: ButtonHTMLAttributes does not accept an unknown `data-*` key (TS2769), and overriding the consumer's own slot would be wrong anyway. It is preserved on the default button. */}\n {React.isValidElement>(trigger) ? (\n React.cloneElement(trigger, {\n \"aria-haspopup\": \"dialog\",\n \"aria-expanded\": isOpen,\n onClick: (event: React.MouseEvent) => {\n trigger.props.onClick?.(event)\n setOpen(true)\n },\n })\n ) : (\n setOpen(true)}\n className=\"inline-flex h-9 shrink-0 select-none items-center justify-center gap-2 rounded-lg border border-border bg-secondary px-4 text-sm font-medium text-secondary-foreground outline-none whitespace-nowrap transition-[color,background-color] duration-(--motion-fast) ease-(--motion-ease) hover:bg-surface-3 focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_i]:text-base [&_i]:leading-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\"\n >\n {trigger ?? \"Open\"}\n \n )}\n\n \n {isOpen ? (\n
\n setOpen(false)}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: reduce ? 0 : 0.2, ease: [0.4, 0, 0.2, 1] }}\n className={cn(\"absolute inset-0\", backdropClassName)}\n />\n panelRef.current?.focus()}\n initial={reduce ? { opacity: 0 } : enter}\n animate={reduce ? { opacity: 1 } : { x: 0, y: 0 }}\n exit={reduce ? { opacity: 0 } : enter}\n transition={\n reduce\n ? { duration: 0 }\n : { type: \"spring\", stiffness: 320, damping: 34 }\n }\n className={cn(\n \"fixed flex flex-col gap-4 p-6 outline-none\",\n anchorClassName,\n widthSize[size],\n panelClassName,\n className\n )}\n >\n
\n {title ? (\n

\n {title}\n

\n ) : (\n \n )}\n setOpen(false)}\n aria-label=\"Close\"\n className=\"relative -m-1 inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none transition-[color,background-color] duration-(--motion-fast) ease-(--motion-ease) hover:bg-surface-3 hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 after:absolute after:-inset-2 [&_i]:text-base [&_i]:leading-none [&_svg]:size-4\"\n >\n \n \n
\n
{children}
\n \n
\n ) : null}\n \n
\n )\n}\n\nconst solidBackdrop = \"bg-[color-mix(in_oklab,var(--color-foreground)_50%,transparent)]\"\n\n/* Right: sag kenardan tam boy kayar, ic koseler rounded-l-2xl, solda kenarlik. */\nexport function RightDrawer(props: DrawerProps) {\n return (\n \n )\n}\n\n/* Left: sol kenardan tam boy kayar, ic koseler rounded-r-2xl, sagda kenarlik. */\nexport function LeftDrawer(props: DrawerProps) {\n return (\n \n )\n}\n\n/* Right inset: sagdan m-4 boslukla yuzen panel, tum koseler rounded-2xl. */\nexport function RightInsetDrawer(props: DrawerProps) {\n return (\n \n )\n}\n\n/* Left inset: soldan m-4 boslukla yuzen panel, tum koseler rounded-2xl. */\nexport function LeftInsetDrawer(props: DrawerProps) {\n return (\n \n )\n}\n\n/* Corner: a card sitting in the bottom right corner that grows with its content; it slides up from below. Not full height - capped at max-h-[70vh] and scrolls when the content needs it. */\nexport function CornerDrawer(props: DrawerProps) {\n return (\n \n )\n}\n", "type": "registry:component", "target": "components/ui/drawer-side.tsx" } ], "categories": [ "styled", "drawer" ], "type": "registry:component" }