{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "drawer-blur", "title": "Blur drawer", "description": "Styled drawer: the Blur set. 5 decorative drawer variations (SoftBlurDrawer, HeavyBlurDrawer, DarkBlurDrawer, TintBlurDrawer, GradientBlurDrawer) 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-blur.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Blur drawer family: 5 decorative bottom drawers. The panel always stays\n CLEAR/opaque (bg-card) - unlike the frosted Glass PANEL in essentials. The whole\n difference is on the BACKDROP: each variant carries a different scrim + blur\n technique (light blur, strong blur, dark scrim, primary tint, a top-to-bottom\n gradient). They all slide up from the bottom edge. Self-contained - no radix, no\n vaul, no portal. A fixed inset-0 backdrop + a fixed panel pinned to the bottom\n edge (z-50). Internal state (defaultOpen) or controlled (open + onOpenChange). A\n backdrop click / Escape / the close button closes it. The panel takes focus on\n open. The slide runs through AnimatePresence; under reduced-motion there is no\n slide, only a fade. Color comes ONLY from tokens, with transparency via\n color-mix. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst panelHeight: Record = {\n sm: \"h-[35vh]\",\n md: \"h-[50vh]\",\n lg: \"h-[68vh]\",\n xl: \"h-[82vh]\",\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 backdropClassName: string\n}\n\n/* Shared shell: trigger plus an AnimatePresence backdrop plus an opaque panel pinned to the bottom edge. The bottom-edge slide and close mechanism is kept from the Essentials drawer. */\nfunction DrawerShell({\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 const id = window.requestAnimationFrame(() => panelRef.current?.focus())\n return () => {\n window.removeEventListener(\"keydown\", onKey)\n window.cancelAnimationFrame(id)\n }\n }, [isOpen, setOpen])\n\n /* Bottom edge: the panel slides up from below (y 100%). No slide under reduced. */\n const enter = { y: \"100%\" }\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 {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 \n {/* Top handle bar: the identity of a bottom drawer (same as Essentials). */}\n
\n \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\n
\n {children}\n
\n \n
\n ) : null}\n \n
\n )\n}\n\n/* SoftBlur: hafif backdrop-blur-sm + dusuk scrim. */\nexport function SoftBlurDrawer(props: DrawerProps) {\n return (\n \n )\n}\n\n/* HeavyBlur: guclu backdrop-blur-xl + orta scrim. */\nexport function HeavyBlurDrawer(props: DrawerProps) {\n return (\n \n )\n}\n\n/* DarkBlur: koyu scrim (foreground yuksek yuzde) + orta blur. */\nexport function DarkBlurDrawer(props: DrawerProps) {\n return (\n \n )\n}\n\n/* TintBlur: primary tonlu transluent scrim + blur. */\nexport function TintBlurDrawer(props: DrawerProps) {\n return (\n \n )\n}\n\n/* GradientBlur: ustten alta gradient scrim + blur. */\nexport function GradientBlurDrawer(props: DrawerProps) {\n return (\n \n )\n}\n", "type": "registry:component", "target": "components/ui/drawer-blur.tsx" } ], "categories": [ "styled", "drawer" ], "type": "registry:component" }