@olympusoss/canvas 2.20.1 → 4.0.0

package/src/components/molecules/secret-field.tsx

@@ -1,158 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Icon } from "../atoms/icon";
-import { Input } from "../atoms/input";
-import { Label } from "../atoms/label";
-
-export type SecretFieldStatus = "idle" | "validating" | "valid" | "invalid";
-
-export interface SecretFieldProps {
-	id: string;
-	value: string;
-	onChange: (value: string) => void;
-	/**
-	 * Async validator. Return `true` (or any string) on success; throw or return
-	 * `false` on failure. The thrown message is shown below the input.
-	 */
-	onValidate?: (value: string) => Promise<boolean | string>;
-	/**
-	 * Called after successful validation with the validated value.
-	 * Use this to persist the value once it's confirmed valid.
-	 */
-	onSave?: (value: string) => void;
-	/**
-	 * Notifies when the validation status changes. Useful for parent state.
-	 */
-	onStatusChange?: (status: SecretFieldStatus) => void;
-	placeholder?: string;
-	label?: string;
-	disabled?: boolean;
-	/** Minimum length before auto-validation starts. Default 3. */
-	minLength?: number;
-	/** Show the reveal (eye) toggle. Default true. */
-	revealable?: boolean;
-	className?: string;
-}
-
-export function SecretField({
-	id,
-	value,
-	onChange,
-	onValidate,
-	onSave,
-	onStatusChange,
-	placeholder,
-	label,
-	disabled,
-	minLength = 3,
-	revealable = true,
-	className,
-}: SecretFieldProps) {
-	const [visible, setVisible] = React.useState(false);
-	const [status, setStatus] = React.useState<SecretFieldStatus>("idle");
-	const [error, setError] = React.useState("");
-	const debounceRef = React.useRef(0);
-	const lastValidatedRef = React.useRef("");
-
-	React.useEffect(() => {
-		onStatusChange?.(status);
-	}, [status, onStatusChange]);
-
-	React.useEffect(() => {
-		if (!onValidate) return;
-		if (!value || value.length < minLength) {
-			setStatus("idle");
-			setError("");
-			return;
-		}
-		/* c8 ignore next -- race-condition guard: only triggered by rapid input */
-		if (value === lastValidatedRef.current) return;
-
-		const id = ++debounceRef.current;
-		setStatus("validating");
-		setError("");
-
-		const timer = setTimeout(async () => {
-			/* c8 ignore next -- race-condition guard: debounce re-entry unreachable in tests */
-			if (id !== debounceRef.current) return;
-			try {
-				const result = await onValidate(value);
-				/* c8 ignore next -- race-condition guard: await-resolved stale id unreachable in tests */
-				if (id !== debounceRef.current) return;
-				if (result === true || typeof result === "string") {
-					setStatus("valid");
-					setError("");
-					lastValidatedRef.current = value;
-					onSave?.(value);
-				} else {
-					setStatus("invalid");
-					setError("Validation failed");
-				}
-			} catch (err) {
-				/* c8 ignore next -- race-condition guard: await-rejected stale id unreachable in tests */
-				if (id !== debounceRef.current) return;
-				setStatus("invalid");
-				setError(err instanceof Error ? err.message : "Validation failed");
-			}
-		}, 800);
-
-		return () => clearTimeout(timer);
-	}, [value, minLength, onValidate, onSave]);
-
-	const handleChange = (v: string) => {
-		onChange(v);
-		if (error) setError("");
-		lastValidatedRef.current = "";
-	};
-
-	return (
-		<div className={cn("space-y-1", className)}>
-			{label && (
-				<Label htmlFor={id} className="text-xs">
-					{label}
-				</Label>
-			)}
-			<div className="relative">
-				<Input
-					id={id}
-					type={visible ? "text" : "password"}
-					value={value}
-					onChange={(e) => handleChange(e.target.value)}
-					placeholder={placeholder}
-					className={cn(
-						"font-mono text-sm",
-						revealable && "pr-16",
-						!revealable && "pr-10",
-						status === "invalid" && "border-destructive",
-						status === "valid" && "border-green-500/50",
-					)}
-					disabled={disabled}
-				/>
-				<div className="absolute right-2.5 top-1/2 -translate-y-1/2 flex items-center gap-1.5">
-					{status === "validating" && (
-						<Icon name="LoaderCircle" className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
-					)}
-					{status === "valid" && <Icon name="CircleCheck" className="h-3.5 w-3.5 text-green-500" />}
-					{status === "invalid" && <Icon name="CircleX" className="h-3.5 w-3.5 text-destructive" />}
-					{revealable && (
-						<button
-							type="button"
-							onClick={() => setVisible((v) => !v)}
-							aria-label={visible ? "Hide value" : "Show value"}
-							className="text-muted-foreground hover:text-foreground transition-colors"
-							tabIndex={-1}
-						>
-							<Icon name={visible ? "EyeOff" : "Eye"} className="h-4 w-4" />
-						</button>
-					)}
-				</div>
-			</div>
-			{error && <p className="text-xs text-destructive">{error}</p>}
-		</div>
-	);
-}
-
-SecretField.displayName = "SecretField";

package/src/components/molecules/section-card.tsx

@@ -1,91 +0,0 @@
-import type * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Icon } from "../atoms/icon";
-import { Alert, AlertDescription } from "./alert";
-import { Card, CardContent, CardHeader } from "./card";
-
-export interface SectionCardProps {
-	title?: string | React.ReactNode;
-	subtitle?: string;
-	/**
-	 * Icon rendered to the left of the title (16px Lucide via the Canvas
-	 * `<Icon>` atom is the canonical pattern).
-	 */
-	icon?: React.ReactNode;
-	/** Right-aligned action slot inside the header. */
-	actions?: React.ReactNode;
-	/** @deprecated Use `actions`. */
-	headerActions?: React.ReactNode;
-	children?: React.ReactNode;
-	loading?: boolean;
-	error?: string | boolean | null;
-	emptyMessage?: string;
-	padding?: boolean;
-	className?: string;
-}
-
-export function SectionCard({
-	title,
-	subtitle,
-	icon,
-	actions,
-	headerActions,
-	children,
-	loading = false,
-	error,
-	emptyMessage,
-	padding = true,
-	className,
-}: SectionCardProps) {
-	const resolvedActions = actions ?? headerActions;
-	const hasHeader = title || subtitle || icon || resolvedActions;
-	return (
-		<Card className={className}>
-			{hasHeader && (
-				<>
-					<CardHeader className="flex flex-row items-center justify-between space-y-0 px-5 pb-3 pt-[18px]">
-						<div className="flex flex-1 flex-col gap-1">
-							{(title || icon) && (
-								<div className="flex items-center gap-2">
-									{icon}
-									{title &&
-										(typeof title === "string" ? (
-											<span className="text-[15px] font-semibold leading-none">{title}</span>
-										) : (
-											title
-										))}
-								</div>
-							)}
-							{subtitle && <p className="text-sm text-muted-foreground">{subtitle}</p>}
-						</div>
-						{resolvedActions && <div className="flex items-center gap-2">{resolvedActions}</div>}
-					</CardHeader>
-					<div data-slot="card-divider" className="mx-5 mb-3.5 h-px bg-border" />
-				</>
-			)}
-			<CardContent className={cn(padding ? "px-5 pb-[18px] pt-0" : "p-0")}>
-				{loading ? (
-					<div className="flex items-center justify-center py-8">
-						<Icon name="LoaderCircle" className="h-6 w-6 animate-spin text-muted-foreground" />
-					</div>
-				) : error ? (
-					<Alert variant="destructive">
-						<Icon name="CircleX" className="h-4 w-4" />
-						<AlertDescription>
-							{typeof error === "string" ? error : "An error occurred"}
-						</AlertDescription>
-					</Alert>
-				) : emptyMessage && !children ? (
-					<div className="flex items-center justify-center py-8 text-center">
-						<p className="text-sm text-muted-foreground">{emptyMessage}</p>
-					</div>
-				) : (
-					children
-				)}
-			</CardContent>
-		</Card>
-	);
-}
-
-SectionCard.displayName = "SectionCard";

package/src/components/molecules/social-buttons.tsx

@@ -1,165 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Button } from "../atoms/button";
-
-/* ──────────────────────────────────────────────────────────────────
-   Brand glyphs. Tiny, currentColor for monochrome marks
-   (GitHub, Microsoft outline, generic SSO). Multi-color marks
-   (Google, Apple) inline their official palette.
-   ────────────────────────────────────────────────────────────────── */
-
-const GitHubGlyph = () => (
-	<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
-		<title>GitHub</title>
-		<path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.1.79-.25.79-.56v-2c-3.2.69-3.87-1.54-3.87-1.54-.52-1.33-1.27-1.69-1.27-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.75 1.18 1.75 1.18 1.02 1.75 2.68 1.24 3.34.95.1-.74.4-1.24.72-1.52-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.28 1.18-3.08-.12-.29-.51-1.46.11-3.04 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.78 0c2.21-1.49 3.18-1.18 3.18-1.18.62 1.58.23 2.75.11 3.04.74.8 1.18 1.82 1.18 3.08 0 4.42-2.69 5.39-5.26 5.68.41.35.77 1.04.77 2.11v3.13c0 .31.21.67.79.56A11.51 11.51 0 0 0 23.5 12c0-6.35-5.15-11.5-11.5-11.5z" />
-	</svg>
-);
-
-const GoogleGlyph = () => (
-	<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden>
-		<title>Google</title>
-		<path
-			fill="#4285F4"
-			d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.76h3.56c2.08-1.92 3.28-4.74 3.28-8.09z"
-		/>
-		<path
-			fill="#34A853"
-			d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.56-2.76c-.98.66-2.24 1.06-3.72 1.06-2.86 0-5.29-1.93-6.15-4.53H2.18v2.84A11 11 0 0 0 12 23z"
-		/>
-		<path
-			fill="#FBBC05"
-			d="M5.85 14.11A6.6 6.6 0 0 1 5.5 12c0-.73.13-1.44.35-2.11V7.05H2.18A11 11 0 0 0 1 12c0 1.78.43 3.46 1.18 4.95l3.67-2.84z"
-		/>
-		<path
-			fill="#EA4335"
-			d="M12 5.38c1.62 0 3.06.56 4.2 1.64l3.15-3.15C17.45 2.1 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.05l3.67 2.84C6.71 7.31 9.14 5.38 12 5.38z"
-		/>
-	</svg>
-);
-
-const AppleGlyph = () => (
-	<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
-		<title>Apple</title>
-		<path d="M17.05 12.04c-.03-2.85 2.32-4.22 2.43-4.29-1.32-1.94-3.39-2.21-4.12-2.24-1.75-.18-3.42 1.03-4.31 1.03-.9 0-2.27-1.01-3.74-.98-1.92.03-3.7 1.12-4.69 2.83-2.01 3.47-.51 8.6 1.43 11.43.96 1.38 2.09 2.93 3.56 2.87 1.44-.06 1.98-.92 3.71-.92 1.73 0 2.22.92 3.74.89 1.54-.03 2.52-1.4 3.46-2.79 1.1-1.6 1.55-3.15 1.58-3.23-.03-.01-3.03-1.16-3.05-4.6zM14.27 3.65c.79-.96 1.32-2.29 1.18-3.62-1.14.05-2.52.76-3.34 1.71-.73.84-1.37 2.19-1.2 3.49 1.27.1 2.57-.65 3.36-1.58z" />
-	</svg>
-);
-
-const MicrosoftGlyph = () => (
-	<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden>
-		<title>Microsoft</title>
-		<path fill="#F25022" d="M1 1h10v10H1z" />
-		<path fill="#7FBA00" d="M13 1h10v10H13z" />
-		<path fill="#00A4EF" d="M1 13h10v10H1z" />
-		<path fill="#FFB900" d="M13 13h10v10H13z" />
-	</svg>
-);
-
-const SsoGlyph = () => (
-	<svg
-		width="16"
-		height="16"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		strokeWidth={2}
-		strokeLinecap="round"
-		strokeLinejoin="round"
-		aria-hidden
-	>
-		<title>SSO</title>
-		<rect x="3" y="11" width="18" height="11" rx="2" />
-		<path d="M7 11V7a5 5 0 0 1 10 0v4" />
-	</svg>
-);
-
-/**
- * Known social/SSO providers. Each entry pairs a glyph with a default
- * label; the caller can override the label per-button if needed.
- */
-export type SocialProvider = "github" | "google" | "apple" | "microsoft" | "sso";
-
-interface ProviderMeta {
-	glyph: React.ReactNode;
-	label: string;
-}
-
-const PROVIDERS: Record<SocialProvider, ProviderMeta> = {
-	github: { glyph: <GitHubGlyph />, label: "Continue with GitHub" },
-	google: { glyph: <GoogleGlyph />, label: "Continue with Google" },
-	apple: { glyph: <AppleGlyph />, label: "Continue with Apple" },
-	microsoft: { glyph: <MicrosoftGlyph />, label: "Continue with Microsoft" },
-	sso: { glyph: <SsoGlyph />, label: "Continue with SSO" },
-};
-
-export interface SocialButtonProps
-	extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
-	/** Provider identifier. Picks the glyph and default label. */
-	provider: SocialProvider;
-	/** Override the default label (e.g. "Continue with Okta"). */
-	label?: string;
-}
-
-/**
- * Single provider button. Outline variant with the provider glyph on the
- * leading edge. Use directly when you want one provider, or compose
- * several inside `SocialButtons`.
- */
-const SocialButton = React.forwardRef<HTMLButtonElement, SocialButtonProps>(
-	({ provider, label, className, ...props }, ref) => {
-		const meta = PROVIDERS[provider];
-		return (
-			<Button
-				ref={ref}
-				type="button"
-				variant="outline"
-				className={cn("w-full justify-center gap-2", className)}
-				{...props}
-			>
-				{meta.glyph}
-				<span>{label ?? meta.label}</span>
-			</Button>
-		);
-	},
-);
-SocialButton.displayName = "SocialButton";
-
-export interface SocialButtonsProps extends React.HTMLAttributes<HTMLDivElement> {
-	/**
-	 * Provider list rendered vertically. Pass `["github", "google"]` for the
-	 * common CIAM case, or `["sso"]` for a single corporate SSO button.
-	 * Defaults to `["github", "google"]`.
-	 */
-	providers?: SocialProvider[];
-	/** Per-provider click handler. Receives the provider id. */
-	onProviderClick?: (provider: SocialProvider) => void;
-	/** When true, all buttons render disabled (e.g. while signing in). */
-	disabled?: boolean;
-}
-
-/**
- * Vertical stack of social/SSO provider buttons. Typically placed at the
- * top of a sign-in or sign-up card, above an `OrSeparator`.
- *
- * Stays purely presentational: the consumer wires `onProviderClick` to
- * the OAuth2 initiation flow.
- */
-const SocialButtons = React.forwardRef<HTMLDivElement, SocialButtonsProps>(
-	({ providers = ["github", "google"], onProviderClick, disabled, className, ...props }, ref) => (
-		<div ref={ref} className={cn("flex flex-col gap-2.5", className)} {...props}>
-			{providers.map((p) => (
-				<SocialButton
-					key={p}
-					provider={p}
-					disabled={disabled}
-					onClick={() => onProviderClick?.(p)}
-				/>
-			))}
-		</div>
-	),
-);
-SocialButtons.displayName = "SocialButtons";
-
-export { SocialButton, SocialButtons };

package/src/components/molecules/stat-card.tsx

@@ -1,100 +0,0 @@
-import { ArrowDown, ArrowUp } from "lucide-react";
-import type * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Card, CardContent } from "./card";
-
-export interface StatCardProps {
-	title: string;
-	value: React.ReactNode;
-	icon?: React.ReactNode;
-	colorVariant?: "primary" | "blue" | "purple" | "success" | "warning" | "amber" | "destructive";
-	/** Optional delta line shown under the value (e.g. "+4.2%"). */
-	delta?: React.ReactNode;
-	/** Tone for the delta — `up` is green, `down` is red, `neutral` is muted. */
-	deltaTone?: "up" | "down" | "neutral";
-	/** Caption shown next to the delta (e.g. "vs. last 7d"). */
-	deltaCaption?: React.ReactNode;
-	/**
-	 * When `true` (default) and `delta` is a string, prepend an ArrowUp /
-	 * ArrowDown icon based on `deltaTone`. Pass `false` to opt out, or pass
-	 * `delta` as ReactNode to fully control rendering yourself.
-	 */
-	deltaArrow?: boolean;
-	/** Optional content rendered below the delta row (e.g. a sparkline or mini chart). */
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const COLOR: Record<NonNullable<StatCardProps["colorVariant"]>, string> = {
-	primary: "bg-primary/10 text-primary",
-	blue: "bg-[hsl(var(--stat-blue)/0.1)] text-[hsl(var(--stat-blue))]",
-	purple: "bg-[hsl(var(--stat-purple)/0.1)] text-[hsl(var(--stat-purple))]",
-	success: "bg-[hsl(var(--stat-success)/0.1)] text-[hsl(var(--stat-success))]",
-	warning: "bg-[hsl(var(--stat-amber)/0.1)] text-[hsl(var(--stat-amber))]",
-	amber: "bg-[hsl(var(--stat-amber)/0.1)] text-[hsl(var(--stat-amber))]",
-	destructive: "bg-[hsl(var(--stat-destructive)/0.1)] text-[hsl(var(--stat-destructive))]",
-};
-
-const DELTA_TONE: Record<NonNullable<StatCardProps["deltaTone"]>, string> = {
-	up: "text-green-600 dark:text-green-500",
-	down: "text-red-600 dark:text-red-500",
-	neutral: "text-muted-foreground",
-};
-
-export function StatCard({
-	title,
-	value,
-	icon,
-	colorVariant = "primary",
-	delta,
-	deltaTone = "up",
-	deltaCaption,
-	deltaArrow = true,
-	children,
-	className,
-}: StatCardProps) {
-	const showArrow = deltaArrow && typeof delta === "string" && deltaTone !== "neutral";
-	const ArrowGlyph = deltaTone === "down" ? ArrowDown : ArrowUp;
-	return (
-		<Card className={className}>
-			<CardContent className="p-5">
-				<div className="flex items-start justify-between gap-3">
-					<div className="min-w-0 flex-1">
-						<p className="truncate text-[13px] font-medium text-muted-foreground">{title}</p>
-						<p className="mt-1 text-[28px] font-semibold leading-tight tracking-[-0.02em]">
-							{value}
-						</p>
-					</div>
-					{icon && (
-						<div
-							className={cn(
-								"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg",
-								COLOR[colorVariant],
-							)}
-						>
-							{icon}
-						</div>
-					)}
-				</div>
-				{delta != null && (
-					<div className="mt-3 flex items-center gap-1.5 text-xs">
-						<span
-							className={cn(
-								"inline-flex items-center gap-0.5 font-mono font-medium",
-								DELTA_TONE[deltaTone],
-							)}
-						>
-							{showArrow && <ArrowGlyph className="h-3 w-3" aria-hidden />}
-							{delta}
-						</span>
-						{deltaCaption != null && <span className="text-muted-foreground">{deltaCaption}</span>}
-					</div>
-				)}
-				{children != null && <div className="mt-3">{children}</div>}
-			</CardContent>
-		</Card>
-	);
-}
-
-StatCard.displayName = "StatCard";

package/src/components/molecules/status-badge.tsx

@@ -1,42 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const statusBadgeVariants = cva(
-	"inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium",
-	{
-		variants: {
-			status: {
-				success: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
-				warning: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400",
-				error: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
-				info: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
-				neutral: "bg-muted text-muted-foreground",
-			},
-		},
-		defaultVariants: {
-			status: "neutral",
-		},
-	},
-);
-
-export interface StatusBadgeProps
-	extends React.HTMLAttributes<HTMLSpanElement>,
-		VariantProps<typeof statusBadgeVariants> {
-	dot?: boolean;
-}
-
-const StatusBadge = React.forwardRef<HTMLSpanElement, StatusBadgeProps>(
-	({ status, dot = true, className, children, ...props }, ref) => {
-		return (
-			<span ref={ref} className={cn(statusBadgeVariants({ status }), className)} {...props}>
-				{dot && <span className="h-1.5 w-1.5 rounded-full bg-current" />}
-				{children}
-			</span>
-		);
-	},
-);
-StatusBadge.displayName = "StatusBadge";
-
-export { StatusBadge, statusBadgeVariants };

package/src/components/molecules/stepper.tsx

@@ -1,96 +0,0 @@
-"use client";
-
-import type * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Icon } from "../atoms/icon";
-
-export type StepStatus = "pending" | "active" | "complete" | "error";
-
-export interface StepperStep {
-	id: string;
-	label: string;
-	status: StepStatus;
-	/** Optional icon override (atoms/icon IconName or React node). */
-	icon?: React.ReactNode;
-	disabled?: boolean;
-}
-
-export interface StepperProps {
-	steps: StepperStep[];
-	orientation?: "horizontal" | "vertical";
-	onStepClick?: (id: string) => void;
-	className?: string;
-}
-
-const STATUS_STYLES: Record<StepStatus, { dot: string; label: string }> = {
-	pending: {
-		dot: "border-muted-foreground/30 text-muted-foreground",
-		label: "text-muted-foreground",
-	},
-	active: {
-		dot: "border-primary bg-primary text-primary-foreground",
-		label: "text-foreground font-medium",
-	},
-	complete: {
-		dot: "border-green-500 bg-green-500 text-white",
-		label: "text-foreground",
-	},
-	error: {
-		dot: "border-destructive bg-destructive text-destructive-foreground",
-		label: "text-destructive",
-	},
-};
-
-export function Stepper({ steps, orientation = "vertical", onStepClick, className }: StepperProps) {
-	const vertical = orientation === "vertical";
-	return (
-		<ol
-			className={cn("flex", vertical ? "flex-col gap-1" : "flex-row items-center gap-2", className)}
-		>
-			{steps.map((step, i) => {
-				const styles = STATUS_STYLES[step.status];
-				const clickable = !!onStepClick && !step.disabled;
-				return (
-					<li key={step.id} className={cn("flex items-center gap-3", vertical ? "py-2" : "flex-1")}>
-						<button
-							type="button"
-							disabled={!clickable}
-							onClick={() => clickable && onStepClick(step.id)}
-							className={cn(
-								"flex items-center gap-3 rounded-md transition-colors",
-								vertical && "w-full px-2 py-1 text-left",
-								clickable && "hover:bg-accent/50",
-							)}
-						>
-							<span
-								className={cn(
-									"flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-border text-xs",
-									styles.dot,
-								)}
-							>
-								{step.icon ? (
-									typeof step.icon === "string" ? (
-										<Icon name={step.icon as never} className="h-3.5 w-3.5" />
-									) : (
-										step.icon
-									)
-								) : step.status === "complete" ? (
-									<Icon name="Check" className="h-3.5 w-3.5" />
-								) : step.status === "error" ? (
-									<Icon name="X" className="h-3.5 w-3.5" />
-								) : (
-									i + 1
-								)}
-							</span>
-							<span className={cn("text-sm", styles.label)}>{step.label}</span>
-						</button>
-						{!vertical && i < steps.length - 1 && <span className="mx-2 h-px flex-1 bg-border" />}
-					</li>
-				);
-			})}
-		</ol>
-	);
-}
-
-Stepper.displayName = "Stepper";