{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "popover",
  "title": "Popover",
  "description": "Unfolds from the button that opened it, then its contents cascade in.",
  "dependencies": [
    "@ui-sdk/core@0.1.0-beta.2",
    "@ui-sdk/react@0.1.0-beta.2"
  ],
  "registryDependencies": [
    "@keyframery/motion"
  ],
  "files": [
    {
      "path": "registry/components/keyframery/primitives/popover.tsx",
      "content": "\"use client\"\n\n/* Animated drop-in for `@ui-sdk/react/popover`: same parts, same props. Swap the import and keep\n   your code. This file adds motion only. Colours, radii, shadows and spacing stay yours. */\n\nimport {\n  PopoverClose as PopoverClosePart,\n  PopoverContent as PopoverContentPart,\n  PopoverTrigger as PopoverTriggerPart,\n} from \"@ui-sdk/react/popover\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport * from \"@ui-sdk/react/popover\"\n\n/* Press: the key gives under the finger and springs back on release. */\nconst press =\n  \"transition-[scale] duration-[calc(200ms*var(--kf-speed,1))] ease-pop not-data-disabled:not-data-pending:active:scale-[0.96] motion-reduce:transition-none!\"\n\n/* Cascade: each direct child of the content rises in out of a blur a little after the one before\n   it. A keyframe animation, since the children have no earlier style to transition from when the\n   content first appears. Arrows and close buttons are left out. */\nconst cascadeKeyframes = \"@keyframes kf-cascade{from{opacity:0;translate:0 8px;filter:blur(4px)}}@media (prefers-reduced-motion:reduce){@keyframes kf-cascade{from{opacity:0}}}\"\n\nfunction PopoverTrigger({ className, ...props }: React.ComponentProps<typeof PopoverTriggerPart>) {\n  return <PopoverTriggerPart className={cn(press, className)} {...props} />\n}\n\nfunction PopoverClose({ className, ...props }: React.ComponentProps<typeof PopoverClosePart>) {\n  return <PopoverClosePart className={cn(press, className)} {...props} />\n}\n\n/* Unfold: the content grows out of its trigger from 0.86, 8px closer to it and out of a 6px blur,\n   settling on a spring; then its rows cascade in. It leaves in 150ms, shrinking only a little. */\nfunction PopoverContent<Payload = unknown>({\n  className,\n  ...props\n}: React.ComponentProps<typeof PopoverContentPart<Payload>>) {\n  return (\n    <>\n      <style href=\"kf-cascade\" precedence=\"default\">\n        {cascadeKeyframes}\n      </style>\n      <PopoverContentPart<Payload>\n        className={cn(\n          \"origin-(--transform-origin) transition-[opacity,scale,translate,filter] duration-[calc(380ms*var(--kf-speed,1))] ease-spring\",\n          \"data-[side=bottom]:[--kf-from:0_-8px] data-[side=left]:[--kf-from:8px_0] data-[side=right]:[--kf-from:-8px_0] data-[side=top]:[--kf-from:0_8px]\",\n          \"data-starting-style:[translate:var(--kf-from,0_0)] data-starting-style:scale-[0.86] data-starting-style:opacity-0 data-starting-style:blur-[6px]\",\n          \"data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-ending-style:blur-[2px] data-ending-style:duration-[calc(150ms*var(--kf-speed,1))] data-ending-style:ease-house\",\n          \"[&>*:not([data-slot$=-close],[data-slot$=-arrow])]:animate-[kf-cascade_calc(420ms*var(--kf-speed,1))_var(--ease-spring)_backwards]\",\n          \"[&>*:not([data-slot$=-close],[data-slot$=-arrow])]:[animation-delay:calc(calc(40ms*var(--kf-speed,1))+(min(sibling-index(),10)-1)*calc(40ms*var(--kf-speed,1)))]\",\n          \"motion-reduce:transition-none! motion-reduce:[&>*]:animate-none\",\n          className,\n        )}\n        {...props}\n      />\n    </>\n  )\n}\n\nexport { PopoverClose, PopoverContent, PopoverTrigger }\n",
      "type": "registry:component",
      "target": "components/keyframery/primitives/popover.tsx"
    },
    {
      "path": "registry/components/keyframery/popover.tsx",
      "content": "\"use client\"\n\n/* Styled popover: the animated primitive plus the Keyframery look. */\n\nimport {\n  Popover as PopoverRoot,\n  PopoverArrow as PopoverArrowPart,\n  PopoverClose as PopoverClosePart,\n  PopoverContent as PopoverContentPart,\n  PopoverDescription as PopoverDescriptionPart,\n  PopoverShortcut as PopoverShortcutPart,\n  PopoverTitle as PopoverTitlePart,\n  PopoverTrigger as PopoverTriggerPart,\n} from \"@/components/keyframery/primitives/popover\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst keyBase = cn(\n  \"inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 leading-none font-medium whitespace-nowrap outline-none select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  /* The primitive presses the key; colour and shadow ride the same 200ms pop. */\n  \"transition-[color,background-color,box-shadow,opacity,scale] duration-[calc(200ms*var(--kf-speed,1))] ease-pop\",\n  \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n  \"data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pending:cursor-progress data-pending:opacity-70\",\n  \"motion-reduce:transition-none!\",\n)\n\nconst keySurface = cn(\n  \"bg-background text-foreground dark:bg-accent\",\n  \"shadow-[0_0_0_1px_rgb(0_0_0/0.06),0_1px_1px_rgb(0_0_0/0.05),0_3px_6px_-2px_rgb(0_0_0/0.1)]\",\n  \"dark:shadow-[0_0_0_1px_rgb(255_255_255/0.07),inset_0_1px_0_rgb(255_255_255/0.08),0_2px_6px_-1px_rgb(0_0_0/0.6)]\",\n  \"not-data-disabled:hover:bg-[color-mix(in_oklab,var(--background),var(--foreground)_3%)]\",\n  \"dark:not-data-disabled:hover:bg-[color-mix(in_oklab,var(--accent),var(--foreground)_7%)]\",\n  \"not-data-disabled:hover:shadow-[0_0_0_1px_rgb(0_0_0/0.1),0_1px_1px_rgb(0_0_0/0.05),0_4px_8px_-2px_rgb(0_0_0/0.12)]\",\n  \"dark:not-data-disabled:hover:shadow-[0_0_0_1px_rgb(255_255_255/0.12),inset_0_1px_0_rgb(255_255_255/0.1),0_2px_6px_-1px_rgb(0_0_0/0.6)]\",\n  \"not-data-disabled:active:shadow-[0_0_0_1px_rgb(0_0_0/0.1),0_1px_1px_rgb(0_0_0/0.04),0_1px_2px_-1px_rgb(0_0_0/0.06)]\",\n  \"dark:not-data-disabled:active:shadow-[0_0_0_1px_rgb(255_255_255/0.09),inset_0_1px_0_rgb(255_255_255/0.04),0_1px_2px_-1px_rgb(0_0_0/0.6)]\",\n)\n\n/* The sheet. The primitive unfolds it out of its trigger and cascades its rows in. */\nconst sheet = cn(\n  \"m-0 max-h-(--available-height) w-72 max-w-[calc(100vw-16px)] overflow-visible border-0 p-4 outline-none\",\n  \"rounded-[14px] bg-popover text-popover-foreground\",\n  \"shadow-[0_0_0_1px_rgb(0_0_0/0.06),0_2px_6px_-2px_rgb(0_0_0/0.08),0_12px_32px_-8px_rgb(0_0_0/0.18)]\",\n  \"dark:shadow-[0_0_0_1px_rgb(255_255_255/0.08),0_12px_32px_-8px_rgb(0_0_0/0.7)]\",\n)\n\nfunction Popover(props: React.ComponentProps<typeof PopoverRoot>) {\n  return <PopoverRoot {...props} />\n}\n\n/* A key by default; it stays lit while its popover is open. Pass `render` for your own button.\n   An svg marked `data-slot=\"popover-chevron\"` inside it turns while open. */\nfunction PopoverTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof PopoverTriggerPart>) {\n  return (\n    <PopoverTriggerPart\n      className={cn(\n        \"group/popover-trigger\",\n        !props.render && [\n          keyBase,\n          keySurface,\n          \"h-8 rounded-[9px] px-3 text-[13px] [&_svg]:size-4\",\n          \"data-open:bg-[color-mix(in_oklab,var(--background),var(--foreground)_3%)] dark:data-open:bg-[color-mix(in_oklab,var(--accent),var(--foreground)_7%)]\",\n        ],\n        props.render && \"outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n        \"[&_[data-slot=popover-chevron]]:text-muted-foreground [&_[data-slot=popover-chevron]]:transition-transform [&_[data-slot=popover-chevron]]:duration-[calc(380ms*var(--kf-speed,1))] [&_[data-slot=popover-chevron]]:ease-spring\",\n        \"data-open:[&_[data-slot=popover-chevron]]:rotate-180 motion-reduce:[&_[data-slot=popover-chevron]]:transition-none\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverContent<Payload = unknown>({\n  className,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof PopoverContentPart<Payload>>) {\n  return (\n    <PopoverContentPart<Payload>\n      sideOffset={sideOffset}\n      className={cn(sheet, className)}\n      {...props}\n    />\n  )\n}\n\n/* A small point toward the trigger, drawn with the sheet's own fill and hairline. */\nfunction PopoverArrow({\n  className,\n  ...props\n}: React.ComponentProps<typeof PopoverArrowPart>) {\n  return (\n    <PopoverArrowPart\n      className={cn(\n        \"pointer-events-none h-[7px] w-3.5 text-popover\",\n        \"data-[side=bottom]:bottom-full data-[side=top]:top-full\",\n        \"data-[side=left]:left-full data-[side=left]:h-3.5 data-[side=left]:w-[7px] data-[side=right]:right-full data-[side=right]:h-3.5 data-[side=right]:w-[7px]\",\n        \"[&>svg]:absolute [&>svg]:top-1/2 [&>svg]:left-1/2 [&>svg]:h-[7px] [&>svg]:w-3.5 [&>svg]:-translate-1/2\",\n        \"data-[side=top]:[&>svg]:rotate-180 data-[side=left]:[&>svg]:rotate-90 data-[side=right]:[&>svg]:-rotate-90\",\n        className,\n      )}\n      {...props}\n    >\n      <svg viewBox=\"0 0 14 7\" aria-hidden className=\"overflow-visible\">\n        <path\n          d=\"M0 7.5 L5.6 1.2 Q7 -0.3 8.4 1.2 L14 7.5\"\n          fill=\"currentColor\"\n          className=\"stroke-black/[0.06] dark:stroke-white/[0.08]\"\n          strokeWidth=\"1\"\n        />\n      </svg>\n    </PopoverArrowPart>\n  )\n}\n\nfunction PopoverTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof PopoverTitlePart>) {\n  return (\n    <PopoverTitlePart\n      className={cn(\"text-[14px] leading-5 font-semibold tracking-tight\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof PopoverDescriptionPart>) {\n  return (\n    <PopoverDescriptionPart\n      className={cn(\"text-[12px] leading-4 text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\n/* A key. Pass `render` for a button of your own. */\nfunction PopoverClose({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof PopoverClosePart> & { variant?: \"default\" | \"primary\" }) {\n  return (\n    <PopoverClosePart\n      data-variant={variant}\n      className={cn(\n        !props.render && [\n          keyBase,\n          \"h-8 rounded-[9px] px-3 text-[13px] [&_svg]:size-4\",\n          variant === \"default\" && keySurface,\n          variant === \"primary\" && [\n            \"bg-primary text-primary-foreground\",\n            \"shadow-[inset_0_1px_0_rgb(255_255_255/0.14),0_1px_2px_rgb(0_0_0/0.25)]\",\n            \"dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.7),0_1px_2px_rgb(0_0_0/0.5)]\",\n            \"not-data-disabled:hover:bg-[color-mix(in_oklab,var(--primary),var(--background)_14%)]\",\n            \"not-data-disabled:active:shadow-[inset_0_1px_0_rgb(255_255_255/0.08),0_0_1px_rgb(0_0_0/0.3)]\",\n          ],\n        ],\n        props.render && \"outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverShortcut({\n  className,\n  ...props\n}: React.ComponentProps<typeof PopoverShortcutPart>) {\n  return (\n    <PopoverShortcutPart\n      className={cn(\n        \"ms-1 text-[12px] leading-none tracking-[0.04em] text-muted-foreground tabular-nums\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverArrow,\n  PopoverClose,\n  PopoverContent,\n  PopoverDescription,\n  PopoverShortcut,\n  PopoverTitle,\n  PopoverTrigger,\n}\n",
      "type": "registry:component",
      "target": "components/keyframery/popover.tsx"
    }
  ],
  "type": "registry:component"
}