{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "popover-styled",
  "title": "Popover essentials",
  "description": "Styled popover: the essentials set. 5 decorative popover variations (ArrowPopover, GlassPopover, MenuPopover, FormPopover, RichPopover) 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/popover-styled.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check } from \"lucide-react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Popover family: 5 decorative anchored panels. Each export is a complete popover:\n   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 fade+scale (from above); only a fade under reduced motion. Color\n   comes ONLY from tokens, via alpha color-mix. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst panelSize: Record<StyledSize, string> = {\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. */\nfunction PopoverShell({\n  props,\n  panelClassName,\n  panelMotion,\n  children,\n  role = \"dialog\",\n}: {\n  props: PopoverProps\n  panelClassName?: string\n  panelMotion?: {\n    initial: Record<string, number>\n    animate: Record<string, number>\n    exit: Record<string, number>\n    transition?: Record<string, unknown>\n  }\n  children: React.ReactNode | ((close: () => void) => React.ReactNode)\n  role?: string\n}) {\n  const { size = \"md\", trigger, className } = props\n  const { isOpen, setOpen } = usePopoverState(props)\n  const reduce = useReducedMotion()\n  const wrapperRef = React.useRef<HTMLDivElement>(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    <div ref={wrapperRef} data-slot=\"styled-popover\" className=\"relative inline-flex\">\n      <span\n        data-slot=\"styled-popover-trigger\"\n        className=\"inline-flex\"\n        onClick={() => setOpen(!isOpen)}\n      >\n        {trigger ?? (\n          <button type=\"button\" aria-haspopup=\"dialog\" aria-expanded={isOpen} className={triggerBtn}>\n            Open\n          </button>\n        )}\n      </span>\n\n      <AnimatePresence>\n        {isOpen ? (\n          <motion.div\n            role={role}\n            className={cn(panelBase, panelSize[size], panelClassName, className)}\n            initial={motionProps.initial}\n            animate={motionProps.animate}\n            exit={motionProps.exit}\n            transition={panelMotion?.transition ?? { duration: 0.18, ease: \"easeOut\" }}\n          >\n            {typeof children === \"function\" ? children(() => setOpen(false)) : children}\n          </motion.div>\n        ) : null}\n      </AnimatePresence>\n    </div>\n  )\n}\n\nconst bespokeMotion = {\n  initial: { opacity: 0, scale: 0.96, y: -6 },\n  animate: { opacity: 1, scale: 1, y: 0 },\n  exit: { opacity: 0, scale: 0.96, y: -6 },\n  transition: { type: \"spring\", stiffness: 340, damping: 26 },\n}\n\n/* Arrow: trigger'a dogru bakan kucuk token oklu klasik panel. */\nexport function ArrowPopover(props: PopoverProps) {\n  return (\n    <PopoverShell props={props} panelMotion={bespokeMotion}>\n      <span className=\"absolute -top-1.5 left-5 size-3 rotate-45 rounded-[2px] border-l border-t border-border bg-popover\" />\n      <div className=\"relative\">{props.children ?? \"Popover content anchored below the trigger.\"}</div>\n    </PopoverShell>\n  )\n}\n\n/* Glass: buzlu cam panel + backdrop-blur. */\nexport function GlassPopover(props: PopoverProps) {\n  return (\n    <PopoverShell\n      props={props}\n      panelClassName=\"border-border bg-[color-mix(in_oklab,var(--color-popover)_75%,transparent)] supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-popover)_55%,transparent)] supports-[backdrop-filter]:backdrop-blur-xl shadow-[inset_0_1px_0_color-mix(in_oklab,var(--color-foreground)_12%,transparent)]\"\n      panelMotion={bespokeMotion}\n    >\n      {props.children ?? \"Frosted glass popover with a blurred backdrop.\"}\n    </PopoverShell>\n  )\n}\n\n/* Menu: kucuk dikey menu listesi olarak icerik. items ile satirlar. */\nexport function MenuPopover(props: PopoverProps & { items?: string[] }) {\n  const { items, ...rest } = props\n  const list = items ?? [\"Profile\", \"Settings\", \"Sign out\"]\n  return (\n    <PopoverShell props={rest} panelClassName=\"p-1.5\" panelMotion={bespokeMotion} role=\"menu\">\n      {(close) => (\n        <div className=\"flex flex-col\">\n          {list.map((item, i) => (\n            <button\n              key={`${item}-${i}`}\n              type=\"button\"\n              role=\"menuitem\"\n              className=\"flex w-full items-center rounded-md px-3 py-2 text-left text-sm text-popover-foreground outline-none transition-colors hover:bg-[color-mix(in_oklab,var(--color-foreground)_6%,transparent)] focus-visible:bg-[color-mix(in_oklab,var(--color-foreground)_6%,transparent)] focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n              onClick={close}\n            >\n              {item}\n            </button>\n          ))}\n        </div>\n      )}\n    </PopoverShell>\n  )\n}\n\n/* Form: kompakt form gorunumu - label + input + onay butonu. */\nexport function FormPopover(props: PopoverProps) {\n  return (\n    <PopoverShell props={props} panelMotion={bespokeMotion}>\n      <div className=\"flex flex-col gap-3\">\n        <label className=\"text-sm font-medium text-popover-foreground\">\n          Label\n          <input\n            type=\"text\"\n            placeholder=\"Type a value\"\n            className=\"mt-1.5 flex h-9 w-full rounded-md border border-field-border bg-transparent px-3 text-sm text-foreground shadow-xs outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n          />\n        </label>\n        {props.children}\n        <button\n          type=\"button\"\n          className=\"inline-flex h-9 shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground outline-none transition-colors hover:bg-[color-mix(in_oklab,var(--color-primary)_90%,transparent)] focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none\"\n        >\n          <Check />\n          Confirm\n        </button>\n      </div>\n    </PopoverShell>\n  )\n}\n\n/* Rich: baslik satiri + govde metni + footer aksiyonu. */\nexport function RichPopover(props: PopoverProps) {\n  return (\n    <PopoverShell props={props} panelClassName=\"p-0\" panelMotion={bespokeMotion}>\n      <div className=\"border-b border-border px-4 py-3 text-sm font-semibold text-popover-foreground\">\n        Dimensions\n      </div>\n      <div className=\"px-4 py-3 text-sm text-muted-foreground\">\n        {props.children ?? \"Set the width and height for the selected layer.\"}\n      </div>\n      <div className=\"flex justify-end border-t border-border px-4 py-3\">\n        <button\n          type=\"button\"\n          className=\"inline-flex h-8 shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg border border-border bg-secondary px-3 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\"\n        >\n          Apply\n        </button>\n      </div>\n    </PopoverShell>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/popover-styled.tsx"
    }
  ],
  "categories": [
    "styled",
    "popover"
  ],
  "type": "registry:component"
}