import * as React from "react"; import { FormBlockProgressiveSaasOnboardingTwo } from "@/registry/form-block-progressive-saas-onboarding-two/form-block-progressive-saas-onboarding-two"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof FormBlockProgressiveSaasOnboardingTwo >; type OnboardingStepDefinition = NonNullable[number]; type OnboardingFormValues = Parameters< NonNullable >[0]; type FeatureToggleOption = NonNullable< ComponentProps["featureToggles"] >[number]; type InvitationRoleOption = NonNullable< ComponentProps["invitationRoles"] >[number]; const STEPS: OnboardingStepDefinition[] = [ { id: "profile", title: "Profile", subtitle: "Signal who is orchestrating rollout", eta: "45s", }, { id: "workspace", title: "Workspace", subtitle: "Dial-in workspace structure", eta: "90s", }, { id: "invitations", title: "Invitations", subtitle: "Bring team-mates into the ritual", optional: true, eta: "60s", }, ]; const FEATURE_TOGGLES: FeatureToggleOption[] = [ { id: "enableAnalytics", label: "Lifecycle analytics", description: "Real-time dashboards aligned to activation milestones.", defaultEnabled: true, }, { id: "enableAutomation", label: "Automation recipes", description: "Sequenced rituals that trigger off health scoring events.", defaultEnabled: true, }, { id: "enableGuidedTasks", label: "Guided tasks", description: "Curated checklist for first-time collaborators.", helper: "You can re-order tasks later.", }, ]; const ROLES: InvitationRoleOption[] = [ { id: "admin", label: "Admin", description: "Full access, billing, governance", }, { id: "creator", label: "Creator", }, { id: "viewer", label: "Viewer", }, ]; export function FormBlockProgressiveSaasOnboardingTwoDemo() { const [submitted, setSubmitted] = React.useState( null, ); return (

{ await new Promise((resolve) => setTimeout(resolve, 800)); setSubmitted(values); }} /> {submitted ? (

          {JSON.stringify(submitted, null, 2)}

) : null}

); } export default FormBlockProgressiveSaasOnboardingTwoDemo;

Simple