{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sheet-motion", "title": "Motion sheet", "description": "Styled sheet: the Motion set. 5 decorative sheet variations (SlideSheet, SpringSheet, FadeSheet, ScaleSheet, OvershootSheet) 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-motion.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/* Motion sheet family: 5 showy side panels. They all open from the RIGHT edge; the\n panel itself is plain (bg-card) and the DIFFERENCE is the character of the\n enter/exit animation. Each export is a complete sheet: internal open/closed state\n (uncontrolled defaultOpen or controlled open/onOpenChange), NO radix or portal -\n a self-contained fixed backdrop + a fixed panel pinned to the edge. It closes on\n a backdrop click, Escape or the close button. The panel takes focus on open.\n AnimatePresence handles enter/exit; under reduced motion ALL transforms drop away\n and only an opacity fade remains. Color comes ONLY from tokens, via alpha\n color-mix. The essentials mechanism is preserved: sliding from the right edge via\n data-slot + slideOffset. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\ntype Edge = \"right\"\n\nconst widthSize: Record = {\n sm: \"w-72\",\n md: \"w-80\",\n lg: \"w-96\",\n xl: \"w-[32rem]\",\n}\n\nconst edgeAnchor: Record = {\n right: \"inset-y-0 right-0\",\n}\n\n/* The offset the panel is pushed past the edge by when closed. +x for the right edge. */\nfunction slideOffset(edge: Edge) {\n switch (edge) {\n case \"right\":\n return { x: \"100%\" }\n }\n}\n\n/* The enter/exit definition each export carries. Combined with slideOffset. */\ninterface SheetMotion {\n initial: Record\n animate: Record\n exit: Record\n transition: Record\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\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 SheetProps {\n edge: Edge\n slot: string\n panelClassName: string\n backdropClassName: string\n sheetMotion: SheetMotion\n}\n\n/* Shared shell: trigger plus an AnimatePresence backdrop plus panel. sheetMotion carries the enter/exit animation supplied from outside; it differs in every export. The Essentials slideOffset mechanism is preserved: the closed position is pushed past the edge. */\nfunction SheetShell({\n edge,\n slot,\n panelClassName,\n backdropClassName,\n sheetMotion,\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 sizeClass = cn(\"h-full\", widthSize[size])\n const offset = slideOffset(edge)\n\n /* Reduced motion: every transform is dropped, only the opacity fade remains. */\n const fade = {\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n exit: { opacity: 0 },\n transition: { duration: 0 },\n }\n const active = reduce\n ? fade\n : {\n initial: { ...offset, ...sheetMotion.initial },\n animate: { x: 0, y: 0, ...sheetMotion.animate },\n exit: { ...offset, ...sheetMotion.exit },\n transition: sheetMotion.transition,\n }\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={active.initial}\n animate={active.animate}\n exit={active.exit}\n transition={active.transition}\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)]\"\nconst panelLook = \"border-l border-border bg-card text-card-foreground\"\n\n/* Slide: duz kayma, yumusak ease. Overshoot yok, sabit sureli tween. */\nexport function SlideSheet(props: SheetProps) {\n return (\n \n )\n}\n\n/* Spring: a springy entrance that settles with a slight overshoot. */\nexport function SpringSheet(props: SheetProps) {\n return (\n \n )\n}\n\n/* Fade: kayma ile opacity fade birlikte; panel kayarken belirir. */\nexport function FadeSheet(props: SheetProps) {\n return (\n \n )\n}\n\n/* Scale: kayarken hafif buyume; kapalikken az kuculmus gelir. */\nexport function ScaleSheet(props: SheetProps) {\n return (\n \n )\n}\n\n/* Overshoot: agresif yay, dusuk damping ile kenardan gecip geri seker. */\nexport function OvershootSheet(props: SheetProps) {\n return (\n \n )\n}\n", "type": "registry:component", "target": "components/ui/sheet-motion.tsx" } ], "categories": [ "styled", "sheet" ], "type": "registry:component" }