{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkout-flow",
  "title": "UI Checkout Flow",
  "description": "A cursor-driven checkout card: the card and its fields blur-in, then the pointer flips a billing-cycle toggle, types a card number, ticks the terms checkbox, and presses Pay through to success, ending in a toast. A pure orchestrator — every channel comes from a composed primitive's transition hook.",
  "dependencies": ["remotion"],
  "registryDependencies": [
    "@remocn/remocn-ui",
    "@remocn/toggle-group",
    "@remocn/input",
    "@remocn/checkbox",
    "@remocn/button",
    "@remocn/field",
    "@remocn/blur-in",
    "@remocn/cursor",
    "@remocn/toast"
  ],
  "files": [
    {
      "path": "registry/remocn-ui/checkout-flow/index.tsx",
      "content": "\"use client\";\n\nimport { BlurIn } from \"@/components/remocn/blur-in\";\nimport { Button } from \"@/components/remocn/button\";\nimport { Checkbox } from \"@/components/remocn/checkbox\";\nimport { Cursor } from \"@/components/remocn/cursor\";\nimport {\n  Field,\n  FieldControl,\n  FieldGroup,\n  FieldLabel,\n} from \"@/components/remocn/field\";\nimport { Input } from \"@/components/remocn/input\";\nimport { Toast } from \"@/components/remocn/toast\";\nimport {\n  ToggleGroup,\n  type ToggleGroupItem,\n} from \"@/components/remocn/toggle-group\";\nimport { useBlurInTransition } from \"@/components/remocn/use-blur-in-transition\";\nimport { useButtonTransition } from \"@/components/remocn/use-button-transition\";\nimport { useCheckboxTransition } from \"@/components/remocn/use-checkbox-transition\";\nimport { useCursorPath } from \"@/components/remocn/use-cursor-path\";\nimport { useInputTransition } from \"@/components/remocn/use-input-transition\";\nimport { useToastTransition } from \"@/components/remocn/use-toast-transition\";\nimport { useToggleGroupTransition } from \"@/components/remocn/use-toggle-group-transition\";\nimport { type RemocnTheme, useRemocnTheme } from \"@/lib/remocn-ui\";\n\nconst DEFAULT_PLANS: ToggleGroupItem[] = [\n  { value: \"monthly\", label: \"Monthly\" },\n  { value: \"yearly\", label: \"Yearly\" },\n];\n\nconst STAGE_W = 1280;\nconst CARD_W = 420;\nconst CARD_PAD = 28;\nconst CARD_TOP = 96;\nconst CARD_LEFT = (STAGE_W - CARD_W) / 2;\nconst CENTER_X = STAGE_W / 2;\nconst CONTENT_LEFT = CARD_LEFT + CARD_PAD;\nconst CONTENT_RIGHT = CARD_LEFT + CARD_W - CARD_PAD;\n\nconst TOGGLE_Y = 222;\nconst YEARLY_X = CONTENT_LEFT + 4 + 88 + 44;\nconst CARD_X = CENTER_X;\nconst CARD_Y = 312;\nconst TERMS_X = CONTENT_LEFT + 12;\nconst TERMS_Y = 376;\nconst PAY_X = CONTENT_RIGHT - 48;\nconst PAY_Y = 442;\n\nexport interface CheckoutFlowProps {\n  title?: string;\n  description?: string;\n  plans?: ToggleGroupItem[];\n  cardLabel?: string;\n  cardPlaceholder?: string;\n  termsLabel?: string;\n  payLabel?: string;\n  toastTitle?: string;\n  theme?: Partial<RemocnTheme>;\n}\n\nexport function CheckoutFlow({\n  title = \"Upgrade your plan\",\n  description = \"Complete your purchase to unlock every feature.\",\n  plans = DEFAULT_PLANS,\n  cardLabel = \"Card number\",\n  cardPlaceholder = \"4242 4242 4242 4242\",\n  termsLabel = \"I accept the terms and conditions\",\n  payLabel = \"Pay $49\",\n  toastTitle = \"Payment successful\",\n  theme,\n}: CheckoutFlowProps) {\n  const resolved = useRemocnTheme(theme);\n  const opts = { theme };\n\n  const cardEnter = useBlurInTransition(\n    [{ at: 0, state: \"revealed\", duration: 18 }],\n    { distance: 0 },\n  );\n  const enterHeader = useBlurInTransition([\n    { at: 18, state: \"revealed\", duration: 16 },\n  ]);\n  const enterToggle = useBlurInTransition([\n    { at: 24, state: \"revealed\", duration: 16 },\n  ]);\n  const enterCard = useBlurInTransition([\n    { at: 30, state: \"revealed\", duration: 16 },\n  ]);\n  const enterTerms = useBlurInTransition([\n    { at: 36, state: \"revealed\", duration: 16 },\n  ]);\n  const enterButton = useBlurInTransition([\n    { at: 42, state: \"revealed\", duration: 16 },\n  ]);\n\n  const cursorStyle = useCursorPath([\n    { at: 0, x: 140, y: 90 },\n    { at: 64, x: YEARLY_X, y: TOGGLE_Y, duration: 22, click: true },\n    { at: 96, x: CARD_X, y: CARD_Y, duration: 24, click: true },\n    { at: 150, x: TERMS_X, y: TERMS_Y, duration: 30, click: true },\n    { at: 180, x: PAY_X, y: PAY_Y, duration: 26, click: true },\n  ]);\n\n  const toggleStyle = useToggleGroupTransition(\n    [{ at: 64, state: plans[1]?.value ?? \"yearly\", duration: 16 }],\n    { items: plans, ...opts },\n  );\n\n  const cardStyle = useInputTransition(\n    [\n      { at: 96, state: \"active\", duration: 6 },\n      { at: 100, state: \"typing\", duration: 40 },\n      { at: 150, state: \"blur\", duration: 8 },\n    ],\n    opts,\n  );\n\n  const checkboxStyle = useCheckboxTransition(\n    [{ at: 150, state: \"checked\", duration: 14 }],\n    opts,\n  );\n\n  const payStyle = useButtonTransition(\n    [\n      { at: 172, state: \"hover\", duration: 8 },\n      { at: 180, state: \"press\", duration: 6 },\n      { at: 186, state: \"loading\", duration: 6 },\n      { at: 224, state: \"success\", duration: 16 },\n    ],\n    opts,\n  );\n\n  const toastStyle = useToastTransition(\n    [\n      { at: 224, state: \"visible\", duration: 14 },\n      { at: 286, state: \"hidden\", duration: 14 },\n    ],\n    {},\n  );\n\n  return (\n    <div\n      style={{\n        position: \"relative\",\n        width: \"100%\",\n        height: \"100%\",\n        background: \"transparent\",\n        fontFamily:\n          \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\",\n      }}\n    >\n      <div\n        style={{\n          position: \"absolute\",\n          left: CARD_LEFT,\n          top: CARD_TOP,\n          width: CARD_W,\n          height: 420,\n          boxSizing: \"border-box\",\n          padding: 28,\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: 24,\n          background: resolved.background,\n          border: `1px solid ${resolved.border}`,\n          borderRadius: 14,\n          boxShadow:\n            \"0 10px 30px -12px rgba(0,0,0,0.22), 0 2px 8px -3px rgba(0,0,0,0.10)\",\n          opacity: cardEnter.opacity,\n          filter: cardEnter.blur > 0 ? `blur(${cardEnter.blur}px)` : \"none\",\n        }}\n      >\n        <BlurIn display=\"block\" style={enterHeader}>\n          <div style={{ display: \"flex\", flexDirection: \"column\", gap: 4 }}>\n            <div\n              style={{\n                fontSize: 22,\n                lineHeight: \"28px\",\n                fontWeight: 600,\n                letterSpacing: \"-0.02em\",\n                color: resolved.cardForeground,\n              }}\n            >\n              {title}\n            </div>\n            <div\n              style={{\n                fontSize: 14,\n                lineHeight: \"20px\",\n                color: resolved.mutedForeground,\n              }}\n            >\n              {description}\n            </div>\n          </div>\n        </BlurIn>\n\n        <BlurIn display=\"block\" style={enterToggle}>\n          <FieldControl height={44}>\n            <ToggleGroup\n              style={toggleStyle}\n              items={plans}\n              align=\"start\"\n              theme={theme}\n            />\n          </FieldControl>\n        </BlurIn>\n\n        <FieldGroup gap={24}>\n          <BlurIn display=\"block\" style={enterCard}>\n            <Field>\n              <FieldLabel theme={theme}>{cardLabel}</FieldLabel>\n              <FieldControl>\n                <Input\n                  placeholder={cardPlaceholder}\n                  value={cardPlaceholder}\n                  style={cardStyle}\n                  fullWidth\n                  theme={theme}\n                />\n              </FieldControl>\n            </Field>\n          </BlurIn>\n\n          <BlurIn display=\"block\" style={enterTerms}>\n            <FieldControl>\n              <Checkbox\n                label={termsLabel}\n                style={checkboxStyle}\n                align=\"start\"\n                theme={theme}\n              />\n            </FieldControl>\n          </BlurIn>\n        </FieldGroup>\n\n        <BlurIn display=\"block\" style={enterButton}>\n          <Field gap={10}>\n            <FieldControl height={44}>\n              <Button\n                label={payLabel}\n                style={payStyle}\n                align=\"end\"\n                theme={theme}\n              />\n            </FieldControl>\n          </Field>\n        </BlurIn>\n      </div>\n\n      <div style={{ position: \"absolute\", right: 32, bottom: 32 }}>\n        <Toast\n          title={toastTitle}\n          variant=\"success\"\n          style={toastStyle}\n          theme={theme}\n        />\n      </div>\n\n      <Cursor style={cursorStyle} variant=\"pointer\" theme={theme} />\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/checkout-flow.tsx"
    }
  ],
  "type": "registry:component"
}