{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "onboarding-stepper-flow",
  "title": "UI Onboarding Stepper Flow",
  "description": "A multi-step onboarding composition: a horizontal stepper advances through panels of input, radio, and switch fields, finishing on a Finish button that runs to success. Panel crossfade derives linearly from the stepper's exposed position channel; every other channel comes from a composed primitive's hook.",
  "dependencies": ["remotion"],
  "registryDependencies": [
    "@remocn/remocn-ui",
    "@remocn/stepper",
    "@remocn/input",
    "@remocn/radio",
    "@remocn/switch",
    "@remocn/button"
  ],
  "files": [
    {
      "path": "registry/remocn-ui/onboarding-stepper-flow/index.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@/components/remocn/button\";\nimport { Input } from \"@/components/remocn/input\";\nimport { Radio } from \"@/components/remocn/radio\";\nimport { Stepper } from \"@/components/remocn/stepper\";\nimport { Switch } from \"@/components/remocn/switch\";\nimport { useButtonTransition } from \"@/components/remocn/use-button-transition\";\nimport { useInputTransition } from \"@/components/remocn/use-input-transition\";\nimport { useRadioTransition } from \"@/components/remocn/use-radio-transition\";\nimport { useStepperTransition } from \"@/components/remocn/use-stepper-transition\";\nimport { useSwitchTransition } from \"@/components/remocn/use-switch-transition\";\nimport { clamp01, type RemocnTheme } from \"@/lib/remocn-ui\";\n\nconst DEFAULT_STEPS = [\"Account\", \"Plan\", \"Settings\"];\nconst DEFAULT_PLANS = [\"Free\", \"Pro\", \"Team\"];\n\nconst CONTENT_TOP = 300;\nconst CONTENT_HEIGHT = 220;\nconst NAV_TOP = 540;\n\nexport interface OnboardingStepperFlowProps {\n  steps?: string[];\n  name?: string;\n  plans?: string[];\n  nextLabel?: string;\n  finishLabel?: string;\n  theme?: Partial<RemocnTheme>;\n}\n\nexport function OnboardingStepperFlow({\n  steps = DEFAULT_STEPS,\n  name = \"jane@acme.com\",\n  plans = DEFAULT_PLANS,\n  nextLabel = \"Next\",\n  finishLabel = \"Finish\",\n  theme,\n}: OnboardingStepperFlowProps) {\n  const opts = { theme };\n\n  const stepperStyle = useStepperTransition([\n    { at: 0, index: 0 },\n    { at: 64, index: 1, duration: 20 },\n    { at: 104, index: 2, duration: 20 },\n  ]);\n\n  const nameStyle = useInputTransition(\n    [\n      { at: 2, state: \"active\", duration: 8 },\n      { at: 10, state: \"typing\", duration: 45 },\n    ],\n    opts,\n  );\n\n  const planStyle = useRadioTransition(\n    [{ at: 90, state: \"checked\", duration: 14 }],\n    opts,\n  );\n\n  const settingsStyle = useSwitchTransition(\n    [{ at: 130, state: \"checked\", duration: 14 }],\n    opts,\n  );\n\n  const navStyle = useButtonTransition(\n    [\n      { at: 60, state: \"press\", duration: 6 },\n      { at: 64, state: \"idle\", duration: 6 },\n      { at: 100, state: \"press\", duration: 6 },\n      { at: 104, state: \"idle\", duration: 6 },\n      { at: 150, state: \"press\", duration: 6 },\n      { at: 156, state: \"success\", duration: 14 },\n    ],\n    opts,\n  );\n\n  const position = stepperStyle.position;\n  const panelOpacity = (i: number) => clamp01(1 - Math.abs(position - i));\n\n  const navLabel = position >= steps.length - 1 ? finishLabel : nextLabel;\n\n  return (\n    <div style={{ position: \"relative\", width: \"100%\", height: \"100%\" }}>\n      {}\n      <div\n        style={{\n          position: \"absolute\",\n          left: 0,\n          right: 0,\n          top: 96,\n          height: 100,\n        }}\n      >\n        <Stepper style={stepperStyle} steps={steps} theme={theme} />\n      </div>\n\n      {}\n      <div\n        style={{\n          position: \"absolute\",\n          left: 0,\n          right: 0,\n          top: CONTENT_TOP,\n          height: CONTENT_HEIGHT,\n        }}\n      >\n        {}\n        <div\n          style={{ position: \"absolute\", inset: 0, opacity: panelOpacity(0) }}\n        >\n          <Input\n            style={nameStyle}\n            placeholder={name}\n            value={name}\n            theme={theme}\n          />\n        </div>\n\n        {}\n        <div\n          style={{ position: \"absolute\", inset: 0, opacity: panelOpacity(1) }}\n        >\n          <Radio style={planStyle} label={plans[1] ?? \"Pro\"} theme={theme} />\n        </div>\n\n        {}\n        <div\n          style={{ position: \"absolute\", inset: 0, opacity: panelOpacity(2) }}\n        >\n          <Switch\n            style={settingsStyle}\n            label=\"Email notifications\"\n            theme={theme}\n          />\n        </div>\n      </div>\n\n      {}\n      <div\n        style={{\n          position: \"absolute\",\n          left: 0,\n          right: 0,\n          top: NAV_TOP,\n          height: 64,\n        }}\n      >\n        <Button label={navLabel} style={navStyle} theme={theme} />\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/onboarding-stepper-flow.tsx"
    }
  ],
  "type": "registry:component"
}