{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "signup-flow",
  "title": "UI Signup Flow",
  "description": "A signup card composition: a real shadcn-style card (header, labeled Full Name / Email / Password / Confirm fields, primary + Google-outline buttons, sign-in footer) whose cursor fills each field top-to-bottom, then clicks Create account (hover → press → loading → success) as a success toast slides in. A pure orchestrator — every channel comes from a composed primitive's transition hook.",
  "dependencies": ["remotion"],
  "registryDependencies": [
    "@remocn/remocn-ui",
    "@remocn/cursor",
    "@remocn/input",
    "@remocn/button",
    "@remocn/toast",
    "@remocn/field",
    "@remocn/blur-in"
  ],
  "files": [
    {
      "path": "registry/remocn-ui/signup-flow/index.tsx",
      "content": "\"use client\";\n\nimport { BlurIn } from \"@/components/remocn/blur-in\";\nimport { Button } from \"@/components/remocn/button\";\nimport { Cursor } from \"@/components/remocn/cursor\";\nimport {\n  Field,\n  FieldControl,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/components/remocn/field\";\nimport { Input } from \"@/components/remocn/input\";\nimport { Toast } from \"@/components/remocn/toast\";\nimport { useBlurInTransition } from \"@/components/remocn/use-blur-in-transition\";\nimport { useButtonTransition } from \"@/components/remocn/use-button-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 { type RemocnTheme, useRemocnTheme } from \"@/lib/remocn-ui\";\n\nexport interface SignupFlowProps {\n  title?: string;\n  description?: string;\n  fullName?: string;\n  email?: string;\n  password?: string;\n  createLabel?: string;\n  googleLabel?: string;\n  signinText?: string;\n  toastTitle?: string;\n  theme?: Partial<RemocnTheme>;\n}\n\nconst STAGE_W = 1280;\nconst CARD_W = 376;\nconst CARD_TOP = 48;\nconst CARD_LEFT = (STAGE_W - CARD_W) / 2;\nconst CENTER_X = STAGE_W / 2;\n\nconst NAME_Y = 216;\nconst EMAIL_Y = 296;\nconst PASS_Y = 398;\nconst CONFIRM_Y = 500;\nconst CREATE_Y = 564;\n\nexport function SignupFlow({\n  title = \"Create an account\",\n  description = \"Enter your information below to create your account\",\n  fullName = \"John Doe\",\n  email = \"m@example.com\",\n  password = \"••••••••\",\n  createLabel = \"Create account\",\n  toastTitle = \"Account created\",\n  theme,\n}: SignupFlowProps) {\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 enterName = useBlurInTransition([\n    { at: 24, state: \"revealed\", duration: 16 },\n  ]);\n  const enterEmail = useBlurInTransition([\n    { at: 30, state: \"revealed\", duration: 16 },\n  ]);\n  const enterPass = useBlurInTransition([\n    { at: 36, state: \"revealed\", duration: 16 },\n  ]);\n  const enterConfirm = useBlurInTransition([\n    { at: 42, state: \"revealed\", duration: 16 },\n  ]);\n  const enterButton = useBlurInTransition([\n    { at: 48, state: \"revealed\", duration: 16 },\n  ]);\n\n  const DEMO = 48;\n\n  const cursorStyle = useCursorPath([\n    { at: 0, x: 160, y: 120 },\n    { at: 18 + DEMO, x: CENTER_X, y: NAME_Y, duration: 18, click: true },\n    { at: 52 + DEMO, x: CENTER_X, y: EMAIL_Y, duration: 30, click: true },\n    { at: 96 + DEMO, x: CENTER_X, y: PASS_Y, duration: 40, click: true },\n    { at: 134 + DEMO, x: CENTER_X, y: CONFIRM_Y, duration: 32, click: true },\n    { at: 176 + DEMO, x: CENTER_X, y: CREATE_Y, duration: 38, click: true },\n  ]);\n\n  const nameStyle = useInputTransition(\n    [\n      { at: 18 + DEMO, state: \"active\", duration: 6 },\n      { at: 20 + DEMO, state: \"typing\", duration: 20 },\n      { at: 52 + DEMO, state: \"blur\", duration: 8 },\n    ],\n    opts,\n  );\n  const emailStyle = useInputTransition(\n    [\n      { at: 52 + DEMO, state: \"active\", duration: 6 },\n      { at: 54 + DEMO, state: \"typing\", duration: 28 },\n      { at: 96 + DEMO, state: \"blur\", duration: 8 },\n    ],\n    opts,\n  );\n  const passStyle = useInputTransition(\n    [\n      { at: 96 + DEMO, state: \"active\", duration: 6 },\n      { at: 98 + DEMO, state: \"typing\", duration: 22 },\n      { at: 134 + DEMO, state: \"blur\", duration: 8 },\n    ],\n    opts,\n  );\n  const confirmStyle = useInputTransition(\n    [\n      { at: 134 + DEMO, state: \"active\", duration: 6 },\n      { at: 136 + DEMO, state: \"typing\", duration: 22 },\n      { at: 176 + DEMO, state: \"blur\", duration: 8 },\n    ],\n    opts,\n  );\n\n  const buttonStyle = useButtonTransition(\n    [\n      { at: 176 + DEMO, state: \"hover\", duration: 8 },\n      { at: 186 + DEMO, state: \"press\", duration: 6 },\n      { at: 192 + DEMO, state: \"loading\", duration: 6 },\n      { at: 234 + DEMO, state: \"success\", duration: 16 },\n    ],\n    opts,\n  );\n\n  const toastStyle = useToastTransition(\n    [\n      { at: 234 + DEMO, state: \"visible\", duration: 14 },\n      { at: 300 + DEMO, 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: 580,\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        <FieldGroup gap={16}>\n          <BlurIn display=\"block\" style={enterName}>\n            <Field>\n              <FieldLabel theme={theme}>Full Name</FieldLabel>\n              <FieldControl>\n                <Input\n                  placeholder={fullName}\n                  value={fullName}\n                  style={nameStyle}\n                  theme={theme}\n                />\n              </FieldControl>\n            </Field>\n          </BlurIn>\n\n          <BlurIn display=\"block\" style={enterEmail}>\n            <Field>\n              <FieldLabel theme={theme}>Email</FieldLabel>\n              <FieldControl>\n                <Input\n                  placeholder={email}\n                  value={email}\n                  style={emailStyle}\n                  theme={theme}\n                />\n              </FieldControl>\n              <FieldDescription theme={theme}>\n                We'll use this to contact you.\n              </FieldDescription>\n            </Field>\n          </BlurIn>\n\n          <BlurIn display=\"block\" style={enterPass}>\n            <Field>\n              <FieldLabel theme={theme}>Password</FieldLabel>\n              <FieldControl>\n                <Input\n                  placeholder={password}\n                  value={password}\n                  style={passStyle}\n                  theme={theme}\n                />\n              </FieldControl>\n              <FieldDescription theme={theme}>\n                Must be at least 8 characters long.\n              </FieldDescription>\n            </Field>\n          </BlurIn>\n\n          <BlurIn display=\"block\" style={enterConfirm}>\n            <Field>\n              <FieldLabel theme={theme}>Confirm Password</FieldLabel>\n              <FieldControl>\n                <Input\n                  placeholder={password}\n                  value={password}\n                  style={confirmStyle}\n                  theme={theme}\n                />\n              </FieldControl>\n            </Field>\n          </BlurIn>\n        </FieldGroup>\n\n        <BlurIn display=\"block\" style={enterButton}>\n          <Field gap={10}>\n            <FieldControl>\n              <Button label={createLabel} style={buttonStyle} theme={theme} />\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/signup-flow.tsx"
    }
  ],
  "type": "registry:component"
}