Step Form

"use client";

import { AnimatedStepForm } from "@/components/premium/step-form";

export function AnimatedStepFormPreview() {
  return (
    <div className="flex min-h-[38rem] w-full items-center justify-center py-4">
      <AnimatedStepForm />
    </div>
  );
}

"use client";

import { StepFormStack } from "@/components/premium/step-form";

export function StepFormStackPreview() {
  return (
    <div className="flex min-h-[38rem] w-full items-center justify-center py-4">
      <StepFormStack />
    </div>
  );
}

"use client";

import { StepFormInline } from "@/components/premium/step-form";

export function StepFormInlinePreview() {
  return (
    <div className="flex min-h-[34rem] w-full items-center justify-center py-4">
      <StepFormInline />
    </div>
  );
}

"use client";

import { useState } from "react";
import { Button } from "@/components/motion/button";
import {
  StepFormOnboarding,
  type StepFormOnboardingProps,
} from "@/components/premium/step-form";

export function StepFormOnboardingPreview() {
  const [progressStyle, setProgressStyle] =
    useState<NonNullable<StepFormOnboardingProps["progressStyle"]>>("steps");
  return (
    <div className="flex min-h-[43rem] w-full flex-col items-center justify-center py-4">
      <fieldset className="flex gap-2">
        <legend className="sr-only">Progress style</legend>
        {(["steps", "compact"] as const).map((style) => (
          <Button
            key={style}
            type="button"
            variant={progressStyle === style ? "outline" : "ghost"}
            aria-pressed={progressStyle === style}
            className="h-9 rounded-full px-3 text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
            onClick={() => setProgressStyle(style)}
          >
            {style === "steps" ? "Numbered steps" : "Compact progress"}
          </Button>
        ))}
      </fieldset>
      <StepFormOnboarding progressStyle={progressStyle} />
    </div>
  );
}