{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "separator",
  "title": "Separator",
  "description": "The line draws itself from the centre outward, then its label fades 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/separator.tsx",
      "content": "\"use client\"\n\n/* Animated drop-in for `@ui-sdk/react/separator`: same part, same props. Swap the import and keep your\n   code. This file adds motion only. Colours, radii, shadows and spacing stay yours. */\n\nimport { Separator as SeparatorPart } from \"@ui-sdk/react/separator\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport * from \"@ui-sdk/react/separator\"\n\n/* UI SDK accepts a class name or a function of state; keep both working. */\nfunction withClass<S>(base: string, className: string | ((state: S) => string | undefined) | undefined) {\n  return typeof className === \"function\" ? (state: S) => cn(base, className(state)) : cn(base, className)\n}\n\n/* Keyframes rather than transitions: a separator has no earlier state to transition from when it\n   first appears, and an animation replays every time it mounts. */\nconst keyframes =\n  \"@keyframes kf-separator-x{from{scale:0 1}}@keyframes kf-separator-y{from{scale:1 0}}@keyframes kf-separator-label{from{opacity:0;scale:0.9;filter:blur(4px)}}\"\n\n/* Draw: the line grows out from its centre on a spring as it enters; a vertical line draws from\n   the top down. Lines next to a `SeparatorLabel` grow outward from the label instead, so an\n   \"or\" divider opens from the word. Several lines in one row follow one another by 40ms. */\nfunction Separator({ className, ...props }: React.ComponentProps<typeof SeparatorPart>) {\n  return (\n    <>\n      <style href=\"kf-separator\" precedence=\"default\">\n        {keyframes}\n      </style>\n      <SeparatorPart\n        className={withClass(\n          cn(\n            \"origin-center motion-reduce:animate-none! animate-[kf-separator-x_calc(720ms*var(--kf-speed,1))_var(--ease-spring)_backwards]\",\n            \"data-[orientation=vertical]:origin-top data-[orientation=vertical]:animate-[kf-separator-y_calc(640ms*var(--kf-speed,1))_var(--ease-spring)_backwards]\",\n            \"has-[+[data-slot=separator-label]]:origin-right [[data-slot=separator-label]+&]:origin-left\",\n            \"[animation-delay:calc((min(sibling-index(),10)-1)*calc(40ms*var(--kf-speed,1)))]\",\n            \"motion-reduce:animate-none!\",\n          ),\n          className,\n        )}\n        {...props}\n      />\n    </>\n  )\n}\n\n/* Extra: a word in the middle of a divider (\"or\"). It clears out of a soft blur once the lines\n   beside it are mostly drawn. */\nfunction SeparatorLabel({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"separator-label\"\n      className={cn(\n        \"motion-reduce:animate-none! animate-[kf-separator-label_calc(420ms*var(--kf-speed,1))_var(--ease-house)_calc(320ms*var(--kf-speed,1))_backwards]\",\n        \"motion-reduce:animate-none!\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator, SeparatorLabel }\n",
      "type": "registry:component",
      "target": "components/keyframery/primitives/separator.tsx"
    },
    {
      "path": "registry/components/keyframery/separator.tsx",
      "content": "\"use client\"\n\n/* Styled separator: the animated primitive plus the Keyframery look. */\n\nimport * as React from \"react\"\n\nimport {\n  Separator as SeparatorPrimitive,\n  SeparatorLabel as SeparatorLabelPrimitive,\n} from \"@/components/keyframery/primitives/separator\"\nimport { cn } from \"@/lib/utils\"\n\n/* A hairline in the border colour: full width when horizontal, the row's height when vertical. */\nfunction Separator({ className, ...props }: React.ComponentProps<typeof SeparatorPrimitive>) {\n  return (\n    <SeparatorPrimitive\n      className={cn(\n        \"shrink-0 bg-border\",\n        \"data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full\",\n        \"data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch\",\n        \"[[data-slot=separator-label]+&]:flex-1 has-[+[data-slot=separator-label]]:flex-1\",\n        className as string,\n      )}\n      {...props}\n    />\n  )\n}\n\n/* The word between two lines, as a hint. */\nfunction SeparatorLabel({ className, ...props }: React.ComponentProps<typeof SeparatorLabelPrimitive>) {\n  return (\n    <SeparatorLabelPrimitive\n      className={cn(\"shrink-0 px-3 text-[12px] leading-none text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Separator, SeparatorLabel }\n",
      "type": "registry:component",
      "target": "components/keyframery/separator.tsx"
    }
  ],
  "type": "registry:component"
}