{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sheet-styled", "title": "Sheet essentials", "description": "Styled sheet: the essentials set. 5 decorative sheet variations (RightSheet, LeftSheet, TopSheet, BottomSheet, GlassSheet) 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/sheet-styled.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/* Sheet family: 5 decorative side panels. Self-contained - no radix, no portal.\n A fixed inset-0 backdrop + a fixed panel pinned to the edge (z-50) sliding in\n from that edge. Internal state (defaultOpen) or controlled (open + onOpenChange).\n A backdrop click / Escape / the close button closes it. The panel takes focus on\n open. The slide runs through AnimatePresence; instant/fade under reduced-motion.\n Color comes ONLY from tokens, with transparency via color-mix. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\ntype Edge = \"right\" | \"left\" | \"top\" | \"bottom\"\n\nconst widthSize: Record = {\n sm: \"w-72\",\n md: \"w-80\",\n lg: \"w-96\",\n xl: \"w-[32rem]\",\n}\n\nconst heightSize: Record = {\n sm: \"h-40\",\n md: \"h-64\",\n lg: \"h-80\",\n xl: \"h-[32rem]\",\n}\n\nconst edgeAnchor: Record = {\n right: \"inset-y-0 right-0\",\n left: \"inset-y-0 left-0\",\n top: \"inset-x-0 top-0\",\n bottom: \"inset-x-0 bottom-0\",\n}\n\nfunction slideOffset(edge: Edge) {\n switch (edge) {\n case \"right\":\n return { x: \"100%\" }\n case \"left\":\n return { x: \"-100%\" }\n case \"top\":\n return { y: \"-100%\" }\n case \"bottom\":\n return { y: \"100%\" }\n }\n}\n\ninterface SheetProps {\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\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 SheetProps {\n edge: Edge\n slot: string\n panelClassName: string\n backdropClassName: string\n}\n\nfunction SheetShell({\n edge,\n slot,\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 horizontal = edge === \"left\" || edge === \"right\"\n const sizeClass = horizontal ? cn(\"h-full\", widthSize[size]) : cn(\"w-full\", heightSize[size])\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 {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 shadow-lg outline-none\",\n edgeAnchor[edge],\n sizeClass,\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: sagdan kayan klasik panel. */\nexport function RightSheet(props: SheetProps) {\n return (\n \n )\n}\n\n/* Left: soldan kayan panel. */\nexport function LeftSheet(props: SheetProps) {\n return (\n \n )\n}\n\n/* Top: ustten asagi inen panel. */\nexport function TopSheet(props: SheetProps) {\n return (\n \n )\n}\n\n/* Bottom: alttan yukari cikan panel. */\nexport function BottomSheet(props: SheetProps) {\n return (\n \n )\n}\n\n/* Glass: sag kenar, buzlu cam panel + backdrop-blur. */\nexport function GlassSheet(props: SheetProps) {\n return (\n \n )\n}\n", "type": "registry:component", "target": "components/ui/sheet-styled.tsx" } ], "categories": [ "styled", "sheet" ], "type": "registry:component" }