@beautinique/frontend-components 1.0.6 → 1.0.8

package/dist/resend/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../src/resend/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC"}

package/dist/resend/index.d.ts

@@ -0,0 +1,2 @@
+export { type IResend, Resend } from './Resend.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/resend/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/resend/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC"}

package/dist/resend/index.js

@@ -0,0 +1,136 @@
+import { useState, useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/lib/countdown.ts
+var toSeconds = /* @__PURE__ */ __name((seconds) => Number.isFinite(seconds) ? Math.max(Math.ceil(seconds), 0) : 0, "toSeconds");
+var getSecondsLeft = /* @__PURE__ */ __name((endsAt, now) => Math.max(Math.ceil((endsAt - now) / 1e3), 0), "getSecondsLeft");
+var isPromiseLike = /* @__PURE__ */ __name((value) => typeof value === "object" && value !== null && "then" in value && typeof value.then === "function", "isPromiseLike");
+var BASE_CSS = "text-fill-transparent w-fit";
+var FORCED_COLORS_CSS = "forced-colors:bg-none forced-colors:[-webkit-text-fill-color:currentColor]";
+var GRADIENT_CSS = {
+  accent: "bg-accent-duo",
+  silver: "bg-silver-duo"
+};
+var GradientText = /* @__PURE__ */ __name(({
+  as,
+  type,
+  text,
+  children,
+  className = "",
+  ...rest
+}) => {
+  const Component = as ?? "span";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...rest,
+      className: `${BASE_CSS} ${GRADIENT_CSS[type]} ${FORCED_COLORS_CSS} ${className}`,
+      children: children ?? text
+    }
+  );
+}, "GradientText");
+var defaultFormatSeconds = /* @__PURE__ */ __name((seconds) => `${String(seconds)}s`, "defaultFormatSeconds");
+var BUTTON_CSS = "cursor-pointer rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-crayola-c disabled:cursor-wait disabled:opacity-60";
+var Resend = /* @__PURE__ */ __name(({
+  label,
+  count,
+  onResend,
+  resendLabel = "Resend",
+  countdownLabel = "Resend in",
+  sendingLabel = "Sending\u2026",
+  readyLabel = "You can resend now",
+  formatSeconds = defaultFormatSeconds,
+  className = "",
+  ...pProps
+}) => {
+  const [wait, setWait] = useState(() => ({ seconds: toSeconds(count) }));
+  const [secondsLeft, setSecondsLeft] = useState(wait.seconds);
+  const [isReady, setIsReady] = useState(false);
+  const [isSending, setIsSending] = useState(false);
+  const isSendingRef = useRef(false);
+  const countRef = useRef(count);
+  useEffect(() => {
+    countRef.current = count;
+  }, [count]);
+  useEffect(() => {
+    if (wait.seconds <= 0) return;
+    const endsAt = Date.now() + wait.seconds * 1e3;
+    let shown = wait.seconds;
+    const update = /* @__PURE__ */ __name(() => {
+      const left = getSecondsLeft(endsAt, Date.now());
+      if (left !== shown) {
+        shown = left;
+        setSecondsLeft(left);
+      }
+      if (left > 0) return;
+      window.clearInterval(timer);
+      setIsReady(true);
+    }, "update");
+    const timer = window.setInterval(update, 250);
+    document.addEventListener("visibilitychange", update);
+    return () => {
+      window.clearInterval(timer);
+      document.removeEventListener("visibilitychange", update);
+    };
+  }, [wait]);
+  const startWait = /* @__PURE__ */ __name(() => {
+    const seconds = toSeconds(countRef.current);
+    setIsReady(false);
+    setSecondsLeft(seconds);
+    setWait({ seconds });
+  }, "startWait");
+  const resend = /* @__PURE__ */ __name(async () => {
+    if (isSendingRef.current) return;
+    const result = onResend();
+    if (!isPromiseLike(result)) {
+      startWait();
+      return;
+    }
+    isSendingRef.current = true;
+    setIsSending(true);
+    try {
+      await result;
+      startWait();
+    } finally {
+      isSendingRef.current = false;
+      setIsSending(false);
+    }
+  }, "resend");
+  return /* @__PURE__ */ jsxs("p", { ...pProps, className: `space-x-2 ${className}`, children: [
+    /* @__PURE__ */ jsx(GradientText, { text: label, type: "silver", className: "text-xs sm:text-sm" }),
+    secondsLeft > 0 ? /* @__PURE__ */ jsxs("span", { role: "timer", className: "text-muted text-xs sm:text-sm", children: [
+      /* @__PURE__ */ jsx(GradientText, { text: countdownLabel, type: "silver" }),
+      " ",
+      /* @__PURE__ */ jsx(GradientText, { text: formatSeconds(secondsLeft), type: "accent", className: "font-semibold" })
+    ] }) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled: isSending,
+        "aria-busy": isSending || void 0,
+        onClick: () => {
+          resend().catch((error) => {
+            reportError(error);
+          });
+        },
+        className: BUTTON_CSS,
+        children: /* @__PURE__ */ jsx(
+          GradientText,
+          {
+            type: "accent",
+            text: isSending ? sendingLabel : resendLabel,
+            className: "text-xs font-semibold sm:text-sm"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: isReady ? readyLabel : "" })
+  ] });
+}, "Resend");
+
+export { Resend };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/resend/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/countdown.ts","../../src/ui/GradientText.tsx","../../src/resend/Resend.tsx"],"names":["jsx"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * A number of seconds to wait as a whole number that is never negative. A value that is not a number\n * of seconds (`NaN`, `Infinity`, a negative one) is no wait at all: a countdown that cannot end would\n * lock the button for good.\n */\nexport const toSeconds = (seconds: number) =>\n  Number.isFinite(seconds) ? Math.max(Math.ceil(seconds), 0) : 0;\n\n/**\n * The whole seconds left until `endsAt` (a time in ms, as `Date.now()` gives), counted up: 0.2 s left\n * is shown as 1, so the countdown shows 0 only once it is over.\n */\nexport const getSecondsLeft = (endsAt: number, now: number) =>\n  Math.max(Math.ceil((endsAt - now) / 1000), 0);\n\nexport const isPromiseLike = (value: unknown): value is PromiseLike<unknown> =>\n  typeof value === 'object' &&\n  value !== null &&\n  'then' in value &&\n  typeof value.then === 'function';\n","import type { ComponentPropsWithRef, ElementType, ReactNode } from 'react';\n\n/** `accent`: the blue gradient of the brand. `silver`: the quiet grey one. */\nexport type TGradientTextType = 'accent' | 'silver';\n\n/** The text is given as `text`, or as `children` (anything React can show), not both. */\ntype TGradientTextContent =\n  { text: string; children?: never } | { children: ReactNode; text?: never };\n\ninterface IGradientTextOwnProps<TAs extends ElementType> {\n  /**\n   * What renders the text: an element (`'a'`, `'p'`, ...) or a component, e.g. the `Link` of the\n   * router, which then gets its own props (`to`) next to these.\n   * @default 'span'\n   */\n  as?: TAs;\n  type: TGradientTextType;\n  className?: string;\n}\n\nexport type IGradientText<TAs extends ElementType = 'span'> = IGradientTextOwnProps<TAs> &\n  TGradientTextContent &\n  Omit<ComponentPropsWithRef<TAs>, 'as' | 'type' | 'className' | 'text' | 'children'>;\n\nconst BASE_CSS = 'text-fill-transparent w-fit';\n// In forced-colors mode (Windows high contrast) the browser draws no background, so a text that is\n// only a transparent fill over a gradient would vanish: there it takes the colour of the system.\nconst FORCED_COLORS_CSS =\n  'forced-colors:bg-none forced-colors:[-webkit-text-fill-color:currentColor]';\n\nconst GRADIENT_CSS: Record<TGradientTextType, string> = {\n  accent: 'bg-accent-duo',\n  silver: 'bg-silver-duo',\n};\n\n/**\n * Text filled with a gradient. A link is a text that is rendered by a link component:\n * `<GradientText as={Link} to=\"/terms\" type=\"accent\" text=\"Terms\" />`; the router is the app's, not\n * this package's.\n */\nexport const GradientText = <TAs extends ElementType = 'span'>({\n  as,\n  type,\n  text,\n  children,\n  className = '',\n  ...rest\n}: IGradientText<TAs>) => {\n  const Component: ElementType = as ?? 'span';\n\n  return (\n    <Component\n      {...rest}\n      className={`${BASE_CSS} ${GRADIENT_CSS[type]} ${FORCED_COLORS_CSS} ${className}`}\n    >\n      {children ?? text}\n    </Component>\n  );\n};\n","import { type ComponentProps, useEffect, useRef, useState } from 'react';\n\nimport { getSecondsLeft, isPromiseLike, toSeconds } from '../lib/countdown.js';\nimport { GradientText } from '../ui/GradientText.js';\n\nexport interface IResend extends Omit<ComponentProps<'p'>, 'children'> {\n  /** What is said before the countdown or the button, e.g. `\"Didn't get the code?\"`. */\n  label: string;\n  /**\n   * How many seconds to wait before it can be asked again. The wait starts when the component is\n   * shown (the thing was just sent) and again after each resend, with the `count` of that moment, so\n   * an app can stop making people wait after a few tries by passing 0. A change of `count` in the\n   * middle of a wait does not change that wait; to start over (a new email address), give the\n   * component a new `key`.\n   */\n  count: number;\n  /**\n   * Asks again. When it returns a promise, the button waits for it (it cannot be pressed twice, and\n   * says it is sending) and the wait starts when it resolves; if it rejects there is no wait, the\n   * button can be pressed again and the error is reported to the window like any uncaught error.\n   * Handle the errors you can recover from (a toast) inside it.\n   */\n  onResend: () => unknown;\n  /** @default 'Resend' */\n  resendLabel?: string;\n  /** What comes before the seconds while waiting. @default 'Resend in' */\n  countdownLabel?: string;\n  /** The button while `onResend` is waiting for its promise. @default 'Sending…' */\n  sendingLabel?: string;\n  /** Read out by assistive technology when the wait ends. @default 'You can resend now' */\n  readyLabel?: string;\n  /** How the seconds are written. @default (seconds) => `${seconds}s` */\n  formatSeconds?: (seconds: number) => string;\n}\n\nconst defaultFormatSeconds = (seconds: number) => `${String(seconds)}s`;\n\n// No `outline-hidden` here: in Tailwind v4 it sets `--tw-outline-style: none`, which the\n// `focus-visible:outline-2` below uses for its style, so the ring would never be drawn. A button only\n// shows the browser's own ring for the keyboard anyway (`:focus-visible`), never for a click.\nconst BUTTON_CSS =\n  'cursor-pointer rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-crayola-c disabled:cursor-wait disabled:opacity-60';\n\n/**\n * \"Didn't get the code? Resend in 30s\" and, once the wait is over, a button to ask again. The wait is\n * measured against the clock, not counted tick by tick, so a tab that was in the background or a\n * laptop that slept does not leave people waiting longer than the time that really went by.\n */\nexport const Resend = ({\n  label,\n  count,\n  onResend,\n  resendLabel = 'Resend',\n  countdownLabel = 'Resend in',\n  sendingLabel = 'Sending…',\n  readyLabel = 'You can resend now',\n  formatSeconds = defaultFormatSeconds,\n  className = '',\n  ...pProps\n}: IResend) => {\n  // What is rendered first is the same on the server and in the browser: the wait starts when the\n  // component is on the page (the effect below), never from the time the render happened.\n  const [wait, setWait] = useState(() => ({ seconds: toSeconds(count) }));\n  const [secondsLeft, setSecondsLeft] = useState(wait.seconds);\n  const [isReady, setIsReady] = useState(false);\n  const [isSending, setIsSending] = useState(false);\n  const isSendingRef = useRef(false);\n  const countRef = useRef(count);\n\n  useEffect(() => {\n    countRef.current = count;\n  }, [count]);\n\n  useEffect(() => {\n    if (wait.seconds <= 0) return;\n\n    const endsAt = Date.now() + wait.seconds * 1000;\n    let shown = wait.seconds;\n\n    const update = () => {\n      const left = getSecondsLeft(endsAt, Date.now());\n\n      // Several ticks fall in every second; the state is only set (and React only asked to render,\n      // which it sometimes does even for a value that is the same) when the second changes.\n      if (left !== shown) {\n        shown = left;\n        setSecondsLeft(left);\n      }\n      if (left > 0) return;\n\n      window.clearInterval(timer);\n      setIsReady(true);\n    };\n\n    // Several times a second, not once: a tick that comes a little late still shows the right second.\n    const timer = window.setInterval(update, 250);\n    // A background tab runs timers rarely; come back to the right number as soon as it is seen.\n    document.addEventListener('visibilitychange', update);\n\n    return () => {\n      window.clearInterval(timer);\n      document.removeEventListener('visibilitychange', update);\n    };\n  }, [wait]);\n\n  const startWait = () => {\n    const seconds = toSeconds(countRef.current);\n\n    setIsReady(false);\n    setSecondsLeft(seconds);\n    setWait({ seconds });\n  };\n\n  const resend = async () => {\n    if (isSendingRef.current) return;\n\n    const result = onResend();\n\n    // `onResend` that does not return a promise (most) starts the wait at once, as the click.\n    if (!isPromiseLike(result)) {\n      startWait();\n\n      return;\n    }\n\n    isSendingRef.current = true;\n    setIsSending(true);\n\n    try {\n      await result;\n      startWait();\n    } finally {\n      isSendingRef.current = false;\n      setIsSending(false);\n    }\n  };\n\n  return (\n    <p {...pProps} className={`space-x-2 ${className}`}>\n      <GradientText text={label} type=\"silver\" className=\"text-xs sm:text-sm\" />\n\n      {secondsLeft > 0 ? (\n        <span role=\"timer\" className=\"text-muted text-xs sm:text-sm\">\n          <GradientText text={countdownLabel} type=\"silver\" />{' '}\n          <GradientText text={formatSeconds(secondsLeft)} type=\"accent\" className=\"font-semibold\" />\n        </span>\n      ) : (\n        <button\n          type=\"button\"\n          disabled={isSending}\n          aria-busy={isSending || undefined}\n          onClick={() => {\n            // `reportError` is what the browser does for an error nobody caught: it is reported to\n            // `window` (and to the error tracker of the app) instead of vanishing in a dropped promise.\n            resend().catch((error: unknown) => {\n              reportError(error);\n            });\n          }}\n          className={BUTTON_CSS}\n        >\n          <GradientText\n            type=\"accent\"\n            text={isSending ? sendingLabel : resendLabel}\n            className=\"text-xs font-semibold sm:text-sm\"\n          />\n        </button>\n      )}\n\n      {/* Said once, when the wait ends: a person using a screen reader cannot see the button appear. */}\n      <span role=\"status\" className=\"sr-only\">\n        {isReady ? readyLabel : ''}\n      </span>\n    </p>\n  );\n};\n"]}

package/dist/stepper/Stepper.d.cts

@@ -0,0 +1,35 @@
+import type { ComponentProps } from 'react';
+export interface IStepperStep {
+    title: string;
+    description?: string;
+    /**
+     * An Iconify name (`'solar:user-linear'`) shown in the circle while the step is not completed; the
+     * step's number if left out. Iconify downloads it the first time it is shown and draws it in the
+     * browser, not on a server: to have it without a network, bundle it in the app (`addCollection`).
+     */
+    icon?: string;
+    /** Cannot be clicked. Only matters when `onStepClick` is given. */
+    disabled?: boolean;
+}
+export interface IStepper extends ComponentProps<'div'> {
+    steps: readonly IStepperStep[];
+    /** The index of the current step: the ones before it are completed, the ones after it are upcoming. */
+    activeStep: number;
+    /** Makes the steps buttons. It gets the index of the step that was clicked. */
+    onStepClick?: (step: number) => void;
+    /** Names the list of steps for assistive technology, e.g. `"Checkout progress"`. */
+    label?: string;
+    /**
+     * What assistive technology reads before the title of a completed step, which otherwise only shows
+     * a tick.
+     * @default 'Completed'
+     */
+    completedLabel?: string;
+}
+/**
+ * A row of steps with the current one marked, for a checkout, a sign-up or any other wizard. The
+ * steps are an ordered list; the current one has `aria-current="step"`. With `onStepClick` the steps
+ * are buttons, and the content in `children` is shown under them.
+ */
+export declare const Stepper: ({ steps, activeStep, onStepClick, label, completedLabel, className, children, ...divProps }: IStepper) => import("react").JSX.Element;
+//# sourceMappingURL=Stepper.d.cts.map

package/dist/stepper/Stepper.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.cts","sourceRoot":"","sources":["../../src/stepper/Stepper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAiB,MAAM,OAAO,CAAC;AAM3D,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,QAAS,SAAQ,cAAc,CAAC,KAAK,CAAC;IACrD,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,uGAAuG;IACvG,UAAU,EAAE,MAAM,CAAC;IACnB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAuCD;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,6FASrB,QAAQ,gCA8FV,CAAC"}

package/dist/stepper/Stepper.d.ts

@@ -0,0 +1,35 @@
+import type { ComponentProps } from 'react';
+export interface IStepperStep {
+    title: string;
+    description?: string;
+    /**
+     * An Iconify name (`'solar:user-linear'`) shown in the circle while the step is not completed; the
+     * step's number if left out. Iconify downloads it the first time it is shown and draws it in the
+     * browser, not on a server: to have it without a network, bundle it in the app (`addCollection`).
+     */
+    icon?: string;
+    /** Cannot be clicked. Only matters when `onStepClick` is given. */
+    disabled?: boolean;
+}
+export interface IStepper extends ComponentProps<'div'> {
+    steps: readonly IStepperStep[];
+    /** The index of the current step: the ones before it are completed, the ones after it are upcoming. */
+    activeStep: number;
+    /** Makes the steps buttons. It gets the index of the step that was clicked. */
+    onStepClick?: (step: number) => void;
+    /** Names the list of steps for assistive technology, e.g. `"Checkout progress"`. */
+    label?: string;
+    /**
+     * What assistive technology reads before the title of a completed step, which otherwise only shows
+     * a tick.
+     * @default 'Completed'
+     */
+    completedLabel?: string;
+}
+/**
+ * A row of steps with the current one marked, for a checkout, a sign-up or any other wizard. The
+ * steps are an ordered list; the current one has `aria-current="step"`. With `onStepClick` the steps
+ * are buttons, and the content in `children` is shown under them.
+ */
+export declare const Stepper: ({ steps, activeStep, onStepClick, label, completedLabel, className, children, ...divProps }: IStepper) => import("react").JSX.Element;
+//# sourceMappingURL=Stepper.d.ts.map

package/dist/stepper/Stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../src/stepper/Stepper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAiB,MAAM,OAAO,CAAC;AAM3D,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,QAAS,SAAQ,cAAc,CAAC,KAAK,CAAC;IACrD,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,uGAAuG;IACvG,UAAU,EAAE,MAAM,CAAC;IACnB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAuCD;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,6FASrB,QAAQ,gCA8FV,CAAC"}

package/dist/stepper/index.cjs

@@ -0,0 +1,149 @@
+'use strict';
+
+var react = require('@iconify/react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/lib/content.ts
+var hasContent = /* @__PURE__ */ __name((content) => content !== null && content !== void 0 && content !== false && content !== true && content !== "", "hasContent");
+
+// src/lib/stepper.ts
+var getCurrentStep = /* @__PURE__ */ __name((activeStep, count) => Number.isNaN(activeStep) ? 0 : Math.min(Math.max(Math.trunc(activeStep), 0), Math.max(count - 1, 0)), "getCurrentStep");
+var getStepState = /* @__PURE__ */ __name((index, currentStep) => {
+  if (index < currentStep) return "completed";
+  return index === currentStep ? "active" : "upcoming";
+}, "getStepState");
+var STEPPER_ICON_SETS = [
+  {
+    prefix: "solar",
+    width: 24,
+    height: 24,
+    icons: {
+      "check-read-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M4 12.9L7.14286 16.5L15 7.5"/><path d="M20 7.5625L11.4283 16.5625L11 16"/></g>'
+      }
+    }
+  }
+];
+var registered = false;
+var registerStepperIcons = /* @__PURE__ */ __name(() => {
+  if (registered) return;
+  for (const iconSet of STEPPER_ICON_SETS) react.addCollection(iconSet);
+  registered = true;
+}, "registerStepperIcons");
+STEPPER_ICON_SETS.flatMap(
+  ({ prefix, icons }) => Object.keys(icons).map((name) => `${prefix}:${name}`)
+);
+var ITEM_CSS = "group relative flex min-w-0 items-start gap-3 text-left md:flex-col md:items-center md:gap-3 md:px-2";
+var CLICKABLE_CSS = "cursor-pointer rounded-lg focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-crayola-c disabled:cursor-not-allowed disabled:opacity-50";
+var CIRCLE_CSS = "relative z-1 flex size-10 shrink-0 items-center justify-center rounded-full border text-sm font-semibold transition-all duration-300 motion-reduce:transition-none md:size-11";
+var CIRCLE_STATE_CSS = {
+  completed: "border-blue-crayola-c bg-accent-duo text-white shadow-[0_8px_24px_rgba(var(--blue-crayola-c-rgb),0.28)] forced-colors:border-[Highlight] forced-colors:bg-[Highlight] forced-colors:bg-none forced-colors:text-[HighlightText]",
+  active: "border-blue-crayola-c bg-primary-invert text-primary shadow-[0_0_0_5px_rgba(var(--blue-crayola-c-rgb),0.12)] forced-colors:border-[Highlight] forced-colors:border-4",
+  upcoming: "border-primary/20 bg-primary-invert text-primary/60 forced-colors:border-[GrayText] forced-colors:text-[GrayText]"
+};
+var TITLE_STATE_CSS = {
+  completed: "text-primary/80",
+  active: "text-primary",
+  upcoming: "text-primary/45 forced-colors:text-[GrayText]"
+};
+var DESCRIPTION_STATE_CSS = {
+  completed: "text-primary/35",
+  active: "text-secondary",
+  upcoming: "text-primary/35 forced-colors:text-[GrayText]"
+};
+var CONNECTOR_BASE_CSS = "absolute top-10 left-5 h-4 w-0.5 -translate-x-1/2 md:top-5 md:left-[calc(50%+1.375rem)] md:h-0.5 md:w-[calc(100%-2.75rem)] md:translate-x-0";
+var Stepper = /* @__PURE__ */ __name(({
+  steps,
+  activeStep,
+  onStepClick,
+  label,
+  completedLabel = "Completed",
+  className = "",
+  children,
+  ...divProps
+}) => {
+  registerStepperIcons();
+  const currentStep = getCurrentStep(activeStep, steps.length);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...divProps,
+      className: `flex w-full flex-col gap-6 p-4 shadow-sm sm:p-5 lg:p-6 ${className}`,
+      children: [
+        steps.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "ol",
+          {
+            "aria-label": label,
+            style: { "--steps-count": steps.length },
+            className: "m-0 flex list-none flex-col gap-4 p-0 md:grid md:grid-cols-[repeat(var(--steps-count),minmax(0,1fr))] md:gap-0",
+            children: steps.map((step, index) => {
+              const state = getStepState(index, currentStep);
+              const hasNextStep = index < steps.length - 1;
+              const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                hasNextStep && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: `${CONNECTOR_BASE_CSS} ${state === "completed" ? "bg-accent-duo forced-colors:bg-[Highlight] forced-colors:bg-none" : "bg-primary/20 forced-colors:bg-[GrayText]"}`
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: `${CIRCLE_CSS} ${CIRCLE_STATE_CSS[state]}`, children: state === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "solar:check-read-linear", className: "size-5" }) : step.icon ? /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: step.icon, className: "size-5" }) : index + 1 }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-1 pt-0.5 md:items-center md:pt-0 md:text-center", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "span",
+                    {
+                      className: `line-clamp-1 text-sm font-semibold md:text-[13px] lg:text-sm ${TITLE_STATE_CSS[state]}`,
+                      children: [
+                        state === "completed" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: `${completedLabel}: ` }),
+                        step.title
+                      ]
+                    }
+                  ),
+                  hasContent(step.description) && /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: `line-clamp-1 text-xs leading-4 md:line-clamp-2 ${DESCRIPTION_STATE_CSS[state]}`,
+                      children: step.description
+                    }
+                  )
+                ] })
+              ] });
+              return (
+                // The steps are a fixed order that is never sorted or filtered, and two can have the
+                // same title: the place is what tells them apart.
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "li",
+                  {
+                    "data-state": state,
+                    "aria-current": state === "active" ? "step" : void 0,
+                    children: onStepClick ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        disabled: step.disabled,
+                        onClick: () => {
+                          onStepClick(index);
+                        },
+                        className: `${ITEM_CSS} ${CLICKABLE_CSS} w-full`,
+                        children: content
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${ITEM_CSS} cursor-default`, children: content })
+                  },
+                  index
+                )
+              );
+            })
+          }
+        ),
+        hasContent(children) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-primary/10 border-t pt-5", children })
+      ]
+    }
+  );
+}, "Stepper");
+
+exports.Stepper = Stepper;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/stepper/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/content.ts","../../src/lib/stepper.ts","../../src/stepper/stepper-icons.ts","../../src/stepper/Stepper.tsx"],"names":["addCollection","jsxs","jsx","Fragment","Icon"],"mappings":"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","file":"index.cjs","sourcesContent":["import type { ReactNode } from 'react';\n\n/**\n * Whether React would show something for `content`. `null`, `undefined`, booleans and an empty string\n * show nothing; `0` does show (the text \"0\"), which is why this is not a plain truthiness check.\n */\nexport const hasContent = (content: ReactNode) =>\n  content !== null &&\n  content !== undefined &&\n  content !== false &&\n  content !== true &&\n  content !== '';\n","export type TStepState = 'completed' | 'active' | 'upcoming';\n\n/**\n * The step that is the current one: `activeStep` kept inside the steps. A number past the ends (or\n * with a fraction) is put on the nearest step, and `NaN` is the first, so a wrong value never makes\n * every step look completed or none look current.\n */\nexport const getCurrentStep = (activeStep: number, count: number) =>\n  Number.isNaN(activeStep)\n    ? 0\n    : Math.min(Math.max(Math.trunc(activeStep), 0), Math.max(count - 1, 0));\n\nexport const getStepState = (index: number, currentStep: number): TStepState => {\n  if (index < currentStep) return 'completed';\n\n  return index === currentStep ? 'active' : 'upcoming';\n};\n","import { addCollection, type IconifyJSON } from '@iconify/react';\n\n/*\n * The tick of a completed step. Iconify downloads an icon from its API the first time it is shown,\n * which cannot work offline and leaves an empty circle until it arrives, so the icon is bundled here\n * and registered with Iconify (the same way as the toast icons, see `toast-icons.ts`).\n *\n * An icon a step asks for with `icon: 'solar:...'` is the app's and is downloaded as usual; add it to\n * the app with `addCollection` when it has to show without a network.\n *\n * The data is what `https://api.iconify.design/<prefix>.json?icons=<name>` answers.\n */\nconst STEPPER_ICON_SETS: IconifyJSON[] = [\n  {\n    prefix: 'solar',\n    width: 24,\n    height: 24,\n    icons: {\n      'check-read-linear': {\n        body: '<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M4 12.9L7.14286 16.5L15 7.5\"/><path d=\"M20 7.5625L11.4283 16.5625L11 16\"/></g>',\n      },\n    },\n  },\n];\n\nlet registered = false;\n\n/**\n * Registers the icons above with Iconify. `Stepper` calls it when it renders, not when this file is\n * imported: an app that never renders a stepper never runs it, and nothing depends on the bundler\n * keeping an import that is only there for its effect (see `toast-icons.ts`). Calling it again is\n * harmless.\n */\nexport const registerStepperIcons = () => {\n  if (registered) return;\n\n  for (const iconSet of STEPPER_ICON_SETS) addCollection(iconSet);\n  registered = true;\n};\n\n/** Every icon name registered above, e.g. `solar:check-read-linear`. */\nexport const STEPPER_ICON_NAMES = STEPPER_ICON_SETS.flatMap(({ prefix, icons }) =>\n  Object.keys(icons).map((name) => `${prefix}:${name}`),\n);\n","import { Icon } from '@iconify/react';\nimport type { ComponentProps, CSSProperties } from 'react';\n\nimport { hasContent } from '../lib/content.js';\nimport { getCurrentStep, getStepState, type TStepState } from '../lib/stepper.js';\nimport { registerStepperIcons } from './stepper-icons.js';\n\nexport interface IStepperStep {\n  title: string;\n  description?: string;\n  /**\n   * An Iconify name (`'solar:user-linear'`) shown in the circle while the step is not completed; the\n   * step's number if left out. Iconify downloads it the first time it is shown and draws it in the\n   * browser, not on a server: to have it without a network, bundle it in the app (`addCollection`).\n   */\n  icon?: string;\n  /** Cannot be clicked. Only matters when `onStepClick` is given. */\n  disabled?: boolean;\n}\n\nexport interface IStepper extends ComponentProps<'div'> {\n  steps: readonly IStepperStep[];\n  /** The index of the current step: the ones before it are completed, the ones after it are upcoming. */\n  activeStep: number;\n  /** Makes the steps buttons. It gets the index of the step that was clicked. */\n  onStepClick?: (step: number) => void;\n  /** Names the list of steps for assistive technology, e.g. `\"Checkout progress\"`. */\n  label?: string;\n  /**\n   * What assistive technology reads before the title of a completed step, which otherwise only shows\n   * a tick.\n   * @default 'Completed'\n   */\n  completedLabel?: string;\n}\n\nconst ITEM_CSS =\n  'group relative flex min-w-0 items-start gap-3 text-left md:flex-col md:items-center md:gap-3 md:px-2';\n// No `outline-hidden`: in Tailwind v4 it sets `--tw-outline-style: none`, which the\n// `focus-visible:outline-2` below uses for its style, so the ring would never be drawn. A button only\n// shows the browser's own ring for the keyboard anyway (`:focus-visible`), never for a click.\nconst CLICKABLE_CSS =\n  'cursor-pointer rounded-lg focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-crayola-c disabled:cursor-not-allowed disabled:opacity-50';\n\nconst CIRCLE_CSS =\n  'relative z-1 flex size-10 shrink-0 items-center justify-center rounded-full border text-sm font-semibold transition-all duration-300 motion-reduce:transition-none md:size-11';\n\n// `Record`s: a new state is a type error here until it has a look. Every state also looks different\n// in forced-colors mode (Windows high contrast), where backgrounds and shadows are not drawn.\nconst CIRCLE_STATE_CSS: Record<TStepState, string> = {\n  completed:\n    'border-blue-crayola-c bg-accent-duo text-white shadow-[0_8px_24px_rgba(var(--blue-crayola-c-rgb),0.28)] forced-colors:border-[Highlight] forced-colors:bg-[Highlight] forced-colors:bg-none forced-colors:text-[HighlightText]',\n  active:\n    'border-blue-crayola-c bg-primary-invert text-primary shadow-[0_0_0_5px_rgba(var(--blue-crayola-c-rgb),0.12)] forced-colors:border-[Highlight] forced-colors:border-4',\n  upcoming:\n    'border-primary/20 bg-primary-invert text-primary/60 forced-colors:border-[GrayText] forced-colors:text-[GrayText]',\n};\n\nconst TITLE_STATE_CSS: Record<TStepState, string> = {\n  completed: 'text-primary/80',\n  active: 'text-primary',\n  upcoming: 'text-primary/45 forced-colors:text-[GrayText]',\n};\n\nconst DESCRIPTION_STATE_CSS: Record<TStepState, string> = {\n  completed: 'text-primary/35',\n  active: 'text-secondary',\n  upcoming: 'text-primary/35 forced-colors:text-[GrayText]',\n};\n\nconst CONNECTOR_BASE_CSS =\n  'absolute top-10 left-5 h-4 w-0.5 -translate-x-1/2 md:top-5 md:left-[calc(50%+1.375rem)] md:h-0.5 md:w-[calc(100%-2.75rem)] md:translate-x-0';\n\n/**\n * A row of steps with the current one marked, for a checkout, a sign-up or any other wizard. The\n * steps are an ordered list; the current one has `aria-current=\"step\"`. With `onStepClick` the steps\n * are buttons, and the content in `children` is shown under them.\n */\nexport const Stepper = ({\n  steps,\n  activeStep,\n  onStepClick,\n  label,\n  completedLabel = 'Completed',\n  className = '',\n  children,\n  ...divProps\n}: IStepper) => {\n  registerStepperIcons();\n\n  const currentStep = getCurrentStep(activeStep, steps.length);\n\n  return (\n    <div\n      {...divProps}\n      className={`flex w-full flex-col gap-6 p-4 shadow-sm sm:p-5 lg:p-6 ${className}`}\n    >\n      {steps.length > 0 && (\n        <ol\n          aria-label={label}\n          style={{ '--steps-count': steps.length } as CSSProperties}\n          className=\"m-0 flex list-none flex-col gap-4 p-0 md:grid md:grid-cols-[repeat(var(--steps-count),minmax(0,1fr))] md:gap-0\"\n        >\n          {steps.map((step, index) => {\n            const state = getStepState(index, currentStep);\n            const hasNextStep = index < steps.length - 1;\n\n            const content = (\n              <>\n                {hasNextStep && (\n                  <span\n                    aria-hidden=\"true\"\n                    className={`${CONNECTOR_BASE_CSS} ${\n                      state === 'completed'\n                        ? 'bg-accent-duo forced-colors:bg-[Highlight] forced-colors:bg-none'\n                        : 'bg-primary/20 forced-colors:bg-[GrayText]'\n                    }`}\n                  />\n                )}\n\n                <span aria-hidden=\"true\" className={`${CIRCLE_CSS} ${CIRCLE_STATE_CSS[state]}`}>\n                  {state === 'completed' ? (\n                    <Icon icon=\"solar:check-read-linear\" className=\"size-5\" />\n                  ) : step.icon ? (\n                    <Icon icon={step.icon} className=\"size-5\" />\n                  ) : (\n                    index + 1\n                  )}\n                </span>\n\n                <span className=\"flex min-w-0 flex-1 flex-col gap-1 pt-0.5 md:items-center md:pt-0 md:text-center\">\n                  <span\n                    className={`line-clamp-1 text-sm font-semibold md:text-[13px] lg:text-sm ${TITLE_STATE_CSS[state]}`}\n                  >\n                    {state === 'completed' && (\n                      <span className=\"sr-only\">{`${completedLabel}: `}</span>\n                    )}\n                    {step.title}\n                  </span>\n                  {hasContent(step.description) && (\n                    <span\n                      className={`line-clamp-1 text-xs leading-4 md:line-clamp-2 ${DESCRIPTION_STATE_CSS[state]}`}\n                    >\n                      {step.description}\n                    </span>\n                  )}\n                </span>\n              </>\n            );\n\n            return (\n              // The steps are a fixed order that is never sorted or filtered, and two can have the\n              // same title: the place is what tells them apart.\n              <li\n                key={index}\n                data-state={state}\n                aria-current={state === 'active' ? 'step' : undefined}\n              >\n                {onStepClick ? (\n                  <button\n                    type=\"button\"\n                    disabled={step.disabled}\n                    onClick={() => {\n                      onStepClick(index);\n                    }}\n                    className={`${ITEM_CSS} ${CLICKABLE_CSS} w-full`}\n                  >\n                    {content}\n                  </button>\n                ) : (\n                  <div className={`${ITEM_CSS} cursor-default`}>{content}</div>\n                )}\n              </li>\n            );\n          })}\n        </ol>\n      )}\n\n      {hasContent(children) && <div className=\"border-primary/10 border-t pt-5\">{children}</div>}\n    </div>\n  );\n};\n"]}

package/dist/stepper/index.d.cts

@@ -0,0 +1,2 @@
+export { type IStepper, type IStepperStep, Stepper } from './Stepper.js';
+//# sourceMappingURL=index.d.cts.map

package/dist/stepper/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../src/stepper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,YAAY,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/stepper/index.d.ts

@@ -0,0 +1,2 @@
+export { type IStepper, type IStepperStep, Stepper } from './Stepper.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/stepper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stepper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,YAAY,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/stepper/index.js

@@ -0,0 +1,147 @@
+import { Icon, addCollection } from '@iconify/react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/lib/content.ts
+var hasContent = /* @__PURE__ */ __name((content) => content !== null && content !== void 0 && content !== false && content !== true && content !== "", "hasContent");
+
+// src/lib/stepper.ts
+var getCurrentStep = /* @__PURE__ */ __name((activeStep, count) => Number.isNaN(activeStep) ? 0 : Math.min(Math.max(Math.trunc(activeStep), 0), Math.max(count - 1, 0)), "getCurrentStep");
+var getStepState = /* @__PURE__ */ __name((index, currentStep) => {
+  if (index < currentStep) return "completed";
+  return index === currentStep ? "active" : "upcoming";
+}, "getStepState");
+var STEPPER_ICON_SETS = [
+  {
+    prefix: "solar",
+    width: 24,
+    height: 24,
+    icons: {
+      "check-read-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M4 12.9L7.14286 16.5L15 7.5"/><path d="M20 7.5625L11.4283 16.5625L11 16"/></g>'
+      }
+    }
+  }
+];
+var registered = false;
+var registerStepperIcons = /* @__PURE__ */ __name(() => {
+  if (registered) return;
+  for (const iconSet of STEPPER_ICON_SETS) addCollection(iconSet);
+  registered = true;
+}, "registerStepperIcons");
+STEPPER_ICON_SETS.flatMap(
+  ({ prefix, icons }) => Object.keys(icons).map((name) => `${prefix}:${name}`)
+);
+var ITEM_CSS = "group relative flex min-w-0 items-start gap-3 text-left md:flex-col md:items-center md:gap-3 md:px-2";
+var CLICKABLE_CSS = "cursor-pointer rounded-lg focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-crayola-c disabled:cursor-not-allowed disabled:opacity-50";
+var CIRCLE_CSS = "relative z-1 flex size-10 shrink-0 items-center justify-center rounded-full border text-sm font-semibold transition-all duration-300 motion-reduce:transition-none md:size-11";
+var CIRCLE_STATE_CSS = {
+  completed: "border-blue-crayola-c bg-accent-duo text-white shadow-[0_8px_24px_rgba(var(--blue-crayola-c-rgb),0.28)] forced-colors:border-[Highlight] forced-colors:bg-[Highlight] forced-colors:bg-none forced-colors:text-[HighlightText]",
+  active: "border-blue-crayola-c bg-primary-invert text-primary shadow-[0_0_0_5px_rgba(var(--blue-crayola-c-rgb),0.12)] forced-colors:border-[Highlight] forced-colors:border-4",
+  upcoming: "border-primary/20 bg-primary-invert text-primary/60 forced-colors:border-[GrayText] forced-colors:text-[GrayText]"
+};
+var TITLE_STATE_CSS = {
+  completed: "text-primary/80",
+  active: "text-primary",
+  upcoming: "text-primary/45 forced-colors:text-[GrayText]"
+};
+var DESCRIPTION_STATE_CSS = {
+  completed: "text-primary/35",
+  active: "text-secondary",
+  upcoming: "text-primary/35 forced-colors:text-[GrayText]"
+};
+var CONNECTOR_BASE_CSS = "absolute top-10 left-5 h-4 w-0.5 -translate-x-1/2 md:top-5 md:left-[calc(50%+1.375rem)] md:h-0.5 md:w-[calc(100%-2.75rem)] md:translate-x-0";
+var Stepper = /* @__PURE__ */ __name(({
+  steps,
+  activeStep,
+  onStepClick,
+  label,
+  completedLabel = "Completed",
+  className = "",
+  children,
+  ...divProps
+}) => {
+  registerStepperIcons();
+  const currentStep = getCurrentStep(activeStep, steps.length);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...divProps,
+      className: `flex w-full flex-col gap-6 p-4 shadow-sm sm:p-5 lg:p-6 ${className}`,
+      children: [
+        steps.length > 0 && /* @__PURE__ */ jsx(
+          "ol",
+          {
+            "aria-label": label,
+            style: { "--steps-count": steps.length },
+            className: "m-0 flex list-none flex-col gap-4 p-0 md:grid md:grid-cols-[repeat(var(--steps-count),minmax(0,1fr))] md:gap-0",
+            children: steps.map((step, index) => {
+              const state = getStepState(index, currentStep);
+              const hasNextStep = index < steps.length - 1;
+              const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+                hasNextStep && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: `${CONNECTOR_BASE_CSS} ${state === "completed" ? "bg-accent-duo forced-colors:bg-[Highlight] forced-colors:bg-none" : "bg-primary/20 forced-colors:bg-[GrayText]"}`
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: `${CIRCLE_CSS} ${CIRCLE_STATE_CSS[state]}`, children: state === "completed" ? /* @__PURE__ */ jsx(Icon, { icon: "solar:check-read-linear", className: "size-5" }) : step.icon ? /* @__PURE__ */ jsx(Icon, { icon: step.icon, className: "size-5" }) : index + 1 }),
+                /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-1 pt-0.5 md:items-center md:pt-0 md:text-center", children: [
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: `line-clamp-1 text-sm font-semibold md:text-[13px] lg:text-sm ${TITLE_STATE_CSS[state]}`,
+                      children: [
+                        state === "completed" && /* @__PURE__ */ jsx("span", { className: "sr-only", children: `${completedLabel}: ` }),
+                        step.title
+                      ]
+                    }
+                  ),
+                  hasContent(step.description) && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `line-clamp-1 text-xs leading-4 md:line-clamp-2 ${DESCRIPTION_STATE_CSS[state]}`,
+                      children: step.description
+                    }
+                  )
+                ] })
+              ] });
+              return (
+                // The steps are a fixed order that is never sorted or filtered, and two can have the
+                // same title: the place is what tells them apart.
+                /* @__PURE__ */ jsx(
+                  "li",
+                  {
+                    "data-state": state,
+                    "aria-current": state === "active" ? "step" : void 0,
+                    children: onStepClick ? /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        disabled: step.disabled,
+                        onClick: () => {
+                          onStepClick(index);
+                        },
+                        className: `${ITEM_CSS} ${CLICKABLE_CSS} w-full`,
+                        children: content
+                      }
+                    ) : /* @__PURE__ */ jsx("div", { className: `${ITEM_CSS} cursor-default`, children: content })
+                  },
+                  index
+                )
+              );
+            })
+          }
+        ),
+        hasContent(children) && /* @__PURE__ */ jsx("div", { className: "border-primary/10 border-t pt-5", children })
+      ]
+    }
+  );
+}, "Stepper");
+
+export { Stepper };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map