{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "popover-motion", "title": "Motion popover", "description": "Styled popover: the Motion set. 5 decorative popover variations (FadePopover, ScalePopover, SlidePopover, PopPopover, SpringPopover) 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" ], "registryDependencies": [ "@ai2/tokens" ], "files": [ { "path": "registry/ai2/styled/popover-motion.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Motion popover family: 5 anchored panels where the entrance animation makes the\n DIFFERENCE. The panel is plain (bg-popover) and identical in every export; the\n only thing that changes is the enter/exit motion. Each export is a complete\n popover: internal open/closed state (uncontrolled defaultOpen or controlled\n open/onOpenChange), NO radix or portal - a relative inline-flex wrapper + a panel\n absolutely positioned BELOW the trigger (top-full mt-2). The trigger toggles on\n CLICK; it closes on an outside click (window pointerdown, with inner clicks\n ignored via the wrapper ref) and on Escape. The trigger is a real button.\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. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst panelSize: Record = {\n sm: \"w-56\",\n md: \"w-64\",\n lg: \"w-72\",\n xl: \"w-80\",\n}\n\ninterface PopoverProps {\n size?: StyledSize\n trigger?: React.ReactNode\n children?: React.ReactNode\n className?: string\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?: (o: boolean) => void\n}\n\nconst panelBase =\n \"absolute left-0 top-full z-50 mt-2 origin-top rounded-xl border border-border bg-popover p-4 text-sm text-popover-foreground shadow-lg outline-none\"\n\nconst triggerBtn =\n \"inline-flex h-9 shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg border border-border bg-secondary px-4 text-sm font-medium text-secondary-foreground outline-none transition-colors hover:bg-[color-mix(in_oklab,var(--color-foreground)_6%,transparent)] focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none\"\n\n/* Controlled/uncontrolled acik durum yonetimi. */\nfunction usePopoverState(props: PopoverProps) {\n const { open, defaultOpen, onOpenChange } = props\n const isControlled = open !== undefined\n const [internal, setInternal] = React.useState(defaultOpen ?? false)\n const isOpen = isControlled ? open : internal\n\n const setOpen = React.useCallback(\n (next: boolean) => {\n if (!isControlled) setInternal(next)\n onOpenChange?.(next)\n },\n [isControlled, onOpenChange]\n )\n\n return { isOpen, setOpen }\n}\n\n/* Shared shell: a relative wrapper plus trigger plus an AnimatePresence panel. panelMotion carries the enter/exit animation supplied from outside; it differs in every export. */\nfunction PopoverShell({\n props,\n panelClassName,\n panelMotion,\n children,\n}: {\n props: PopoverProps\n panelClassName?: string\n panelMotion?: {\n initial: Record\n animate: Record\n exit: Record\n transition?: Record\n }\n children: React.ReactNode | ((close: () => void) => React.ReactNode)\n}) {\n const { size = \"md\", trigger, className } = props\n const { isOpen, setOpen } = usePopoverState(props)\n const reduce = useReducedMotion()\n const wrapperRef = 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 const onPointer = (e: PointerEvent) => {\n const node = wrapperRef.current\n if (node && e.target instanceof Node && !node.contains(e.target)) {\n setOpen(false)\n }\n }\n window.addEventListener(\"keydown\", onKey)\n window.addEventListener(\"pointerdown\", onPointer)\n return () => {\n window.removeEventListener(\"keydown\", onKey)\n window.removeEventListener(\"pointerdown\", onPointer)\n }\n }, [isOpen, setOpen])\n\n const fade = { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }\n const motionProps = reduce || !panelMotion ? fade : panelMotion\n\n return (\n
\n setOpen(!isOpen)}\n >\n {trigger ?? (\n \n )}\n \n\n \n {isOpen ? (\n \n {typeof children === \"function\" ? children(() => setOpen(false)) : children}\n \n ) : null}\n \n
\n )\n}\n\nconst defaultBody = \"A self-contained popover with a distinct entrance animation.\"\n\n/* Fade: it appears softly with opacity alone, no transform. */\nexport function FadePopover(props: PopoverProps) {\n return (\n \n {props.children ?? defaultBody}\n \n )\n}\n\n/* Scale: it opens by growing slightly from its origin above (scale 0.92 -> 1). */\nexport function ScalePopover(props: PopoverProps) {\n return (\n \n {props.children ?? defaultBody}\n \n )\n}\n\n/* Slide: enters sliding downwards from under the trigger (y -10 -> 0). */\nexport function SlidePopover(props: PopoverProps) {\n return (\n \n {props.children ?? defaultBody}\n \n )\n}\n\n/* Pop: dusuk damping'li yay ile buyuyup hafif overshoot yaparak patlar. */\nexport function PopPopover(props: PopoverProps) {\n return (\n \n {props.children ?? defaultBody}\n \n )\n}\n\n/* Spring: yumusak yay ile hem kayip hem buyuyerek yerlesir (y + scale). */\nexport function SpringPopover(props: PopoverProps) {\n return (\n \n {props.children ?? defaultBody}\n \n )\n}\n", "type": "registry:component", "target": "components/ui/popover-motion.tsx" } ], "categories": [ "styled", "popover" ], "type": "registry:component" }