{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "branch",
  "title": "Branch",
  "description": "Flip between regenerated versions of a reply.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json",
    "https://ui.cuelark.com/r/motion.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/branch.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\n\nimport { gsap, motionScale } from \"@/lib/motion\";\nimport { cn } from \"@/lib/utils\";\n\ntype BranchProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  /** Alternative versions of one message (regenerations or edits). */\n  versions: React.ReactNode[];\n  defaultIndex?: number;\n  onIndexChange?: (index: number) => void;\n};\n\n/** Flip between regenerated versions of a reply (\"2 / 3\"); the new version slides in from the side you moved toward. */\nfunction Branch({ versions, defaultIndex, onIndexChange, className, ...props }: BranchProps) {\n  const [index, setIndex] = React.useState(defaultIndex ?? versions.length - 1);\n  const body = React.useRef<HTMLDivElement>(null);\n  const go = (d: number) => {\n    const next = Math.min(versions.length - 1, Math.max(0, index + d));\n    if (next === index) return;\n    setIndex(next);\n    onIndexChange?.(next);\n    const el = body.current;\n    if (el && motionScale(el)) gsap.fromTo(el, { opacity: 0, x: 10 * d }, { opacity: 1, x: 0, duration: 0.25, ease: \"cue\" });\n  };\n  const btn = \"grid size-6 place-items-center rounded-md text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 disabled:opacity-30 [&_svg]:size-3.5\";\n  return (\n    <div data-slot=\"branch\" className={cn(\"grid gap-2\", className)} {...props}>\n      <div ref={body} aria-live=\"polite\">\n        {versions[index]}\n      </div>\n      {versions.length > 1 && (\n        <div className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n          <button type=\"button\" aria-label=\"Previous version\" disabled={index === 0} onClick={() => go(-1)} className={btn}>\n            <ChevronLeftIcon />\n          </button>\n          <span className=\"font-mono tabular-nums\">\n            {index + 1} / {versions.length}\n          </span>\n          <button type=\"button\" aria-label=\"Next version\" disabled={index === versions.length - 1} onClick={() => go(1)} className={btn}>\n            <ChevronRightIcon />\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport { Branch };\nexport type { BranchProps };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/branch",
  "categories": [
    "agents"
  ],
  "type": "registry:ui"
}