// axi0 Motion 0.2.0: Stepper. A flow in steps: numbered marks joined by lines that fill, a ring that glides to the current step and panels that slide in from the side they come from.
// Generated from src/stepper/meta.json by motion-pack: a thin wrapper. The loader (motion.js) must be on the page once;
// it starts the effect on the element this renders. Options left out keep the effect's own defaults.
import { createElement } from "react";
import type { HTMLAttributes, ReactNode } from "react";

export interface StepperProps extends HTMLAttributes<HTMLElement> {
  /** marks in a row above the panel, or in a column beside it (default "horizontal") */
  layout?: "horizontal" | "vertical";
  /** the Back button's text (default "Back") */
  back?: string;
  /** the Continue button's text (default "Continue") */
  next?: string;
  /** the last step's button text (default "Complete") */
  finish?: string;
  /** the name of the list of steps (default "Progress") */
  label?: string;
  /** The element to render (default "div") */
  as?: string;
  children?: ReactNode;
}

const s = (v: unknown) => (v === undefined ? undefined : String(v));

export function Stepper({ as = "div", layout, back, next, finish, label, ...rest }: StepperProps) {
  return createElement(as, { ...rest, "data-motion": "stepper", "data-motion-layout": s(layout), "data-motion-back": s(back), "data-motion-next": s(next), "data-motion-finish": s(finish), "data-motion-label": s(label) });
}

export default Stepper;