asheeui 1.1.0 → 2.0.0

package/dist/components/split/Split.d.ts

@@ -0,0 +1,68 @@
+import { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { SplitConfig } from './split-config';
+type BaseSplitProps = SplitConfig & Omit<HTMLAttributes<HTMLDivElement>, "color">;
+/**
+ * Props for the Split component.
+ */
+export interface SplitProps extends BaseSplitProps {
+    /**
+     * The first pane.
+     * Left out when the layout has one pane only, which is what a page that grows
+     * a second pane at a breakpoint starts as.
+     */
+    start?: ReactNode;
+    /**
+     * The second pane.
+     * Left out when the layout has one pane only.
+     */
+    end?: ReactNode;
+    /**
+     * Element to render.
+     * Defaults to a `div`.
+     *
+     * @default "div"
+     */
+    as?: ElementType;
+}
+/**
+ * Two panes that stack on a narrow screen and sit side by side on a wide one.
+ *
+ * Split resolves its options through the standard configuration cascade, so
+ * `components.split` states the application's breakpoint and ratio once. It
+ * carries no width, no gutter and no background of its own: panes are as wide as
+ * the layout allows, and the content inside them decides its own presentation.
+ *
+ * The primitive never hides a pane. Below the breakpoint the panes stack, so
+ * everything stays in the document, reachable with the keyboard and read by a
+ * screen reader in a sensible order.
+ *
+ * @param props - Split configuration options and element attributes.
+ * @param props.start - The first pane.
+ * @param props.end - The second pane.
+ * @param props.stackAt - Breakpoint from which the panes sit side by side.
+ * Defaults to "lg".
+ * @param props.ratio - How the panes divide the width. Defaults to "equal".
+ * @param props.gap - Space between the panes. Defaults to "lg".
+ * @param props.align - Cross-axis alignment. Defaults to "stretch".
+ * @param props.divider - Draw a rule between the panes. Defaults to false.
+ * @param props.stickyEnd - Keep the second pane in view. Defaults to false.
+ * @param props.as - Element to render. Defaults to "div".
+ * @returns The rendered layout.
+ *
+ * @example
+ * ```tsx
+ * <Split
+ *   stackAt="xl"
+ *   ratio="start"
+ *   start={<Typography role="body-md">The article.</Typography>}
+ *   end={<TableOfContents items={items} />}
+ *   stickyEnd
+ * />
+ * ```
+ *
+ * @see Grid - The two-dimensional layout, for more than two regions.
+ * @see SidebarLayout - The application shell, when a pane is navigation.
+ */
+export declare const Split: import('react').ForwardRefExoticComponent<SplitProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=Split.d.ts.map

package/dist/components/split/Split.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Split.d.ts","sourceRoot":"","sources":["../../../src/components/split/Split.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,EACL,KAAK,WAAW,EAEhB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,EAAyB,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAWzE,KAAK,cAAc,GAAG,WAAW,GAC/B,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC;IAEhB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,KAAK,uGAwDjB,CAAC"}

package/dist/components/split/Split.js

@@ -0,0 +1,36 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { SPACE_GAP_CLASS as t } from "../../shared/spacing.js";
+import { useAsheeConfig as n } from "../../libs/context.js";
+import { resolveConfigCascade as r } from "../../utils/resolve-token.js";
+import { FALLBACK_SPLIT_CONFIG as i } from "./split-config.js";
+import { SPLIT_ALIGN_CLASS as a, SPLIT_BASE_CLASS as o, SPLIT_DIVIDER_CLASS as s, SPLIT_PANE_WIDTH_CLASS as c, SPLIT_STACK_CLASS as l } from "./split-styles.js";
+import { forwardRef as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/split/Split.tsx
+var p = u(({ as: u, start: p, end: m, stackAt: h, ratio: g, gap: _, align: v, divider: y, stickyEnd: b, className: x, ...S }, C) => {
+	let w = n(), T = r({
+		stackAt: h,
+		ratio: g,
+		gap: _,
+		align: v,
+		divider: y,
+		stickyEnd: b
+	}, w.components?.split, i), E = c[T.stackAt][T.ratio];
+	return /* @__PURE__ */ f(u ?? "div", {
+		ref: C,
+		className: e(o, l[T.stackAt], a[T.align], t[T.gap], T.divider && s[T.stackAt], x),
+		...S,
+		children: [p !== void 0 && /* @__PURE__ */ d("div", {
+			className: e("w-full min-w-0", E.start),
+			children: p
+		}), m !== void 0 && /* @__PURE__ */ d("div", {
+			className: e("w-full min-w-0", E.end, T.stickyEnd && "sticky top-0 self-start"),
+			children: m
+		})]
+	});
+});
+p.displayName = "Split";
+//#endregion
+export { p as Split };

package/dist/components/split/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Split';
+export * from './split-config';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/split/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/split/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC"}

package/dist/components/split/index.js

@@ -0,0 +1,3 @@
+export * from "./Split.js";
+export * from "./split-config.js";
+export * from "./split-styles.js";

package/dist/components/split/split-config.d.ts

@@ -0,0 +1,83 @@
+import { Space } from '../../shared';
+/**
+ * The breakpoints at which two panes stop stacking.
+ * `sm` is a wide phone in landscape, `md` a tablet, `lg` a laptop and `xl` a
+ * large desktop, which are the framework's shared breakpoints.
+ */
+export type SplitStackAt = "sm" | "md" | "lg" | "xl";
+/**
+ * How the two panes divide the width once they sit side by side.
+ *
+ * - `equal`: the panes share the width, for a comparison or a media pair.
+ * - `start`: the first pane takes two thirds, for a content column beside a
+ *   narrower aside.
+ * - `end`: the second pane takes two thirds, for a narrow navigation column
+ *   beside a wide content column.
+ */
+export type SplitRatio = "equal" | "start" | "end";
+/**
+ * Cross-axis alignment of the two panes on the wide layout.
+ */
+export type SplitAlign = "start" | "center" | "stretch";
+/**
+ * Theme configuration options for the Split component.
+ *
+ * Set under `components.split` in the AsheeUI config. Values feed the
+ * component-level tier of the theme cascade.
+ */
+export interface SplitConfig {
+    /**
+     * Breakpoint from which the panes sit side by side instead of stacking.
+     *
+     * @default "lg"
+     */
+    stackAt?: SplitStackAt;
+    /**
+     * How the panes divide the width.
+     *
+     * @default "equal"
+     */
+    ratio?: SplitRatio;
+    /**
+     * Space between the two panes.
+     *
+     * @default "lg"
+     */
+    gap?: Space;
+    /**
+     * Cross-axis alignment of the panes.
+     *
+     * @default "stretch"
+     */
+    align?: SplitAlign;
+    /**
+     * Whether a border is drawn between the panes on the wide layout.
+     * On the narrow layout the panes stack, so there is nothing to separate.
+     *
+     * @default false
+     */
+    divider?: boolean;
+    /**
+     * Whether the second pane sticks to the top of the viewport while the first
+     * pane scrolls. It suits a table of contents or a summary column.
+     *
+     * @default false
+     */
+    stickyEnd?: boolean;
+}
+/**
+ * Default config values registered for the Split component.
+ * The breakpoint and the ratio are pinned; alignment, divider and stickiness
+ * stay unset so a consumer's own value is the only one the cascade sees.
+ */
+export declare const defaultSplitConfig: SplitConfig;
+declare module "../../libs/registry" {
+    interface ComponentTypeConfigRegistry {
+        split: SplitConfig;
+    }
+}
+/**
+ * Hard fallback values used when no config tier provides a value.
+ */
+export declare const FALLBACK_SPLIT_CONFIG: Required<SplitConfig>;
+//# sourceMappingURL=split-config.d.ts.map

package/dist/components/split/split-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-config.d.ts","sourceRoot":"","sources":["../../../src/components/split/split-config.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAE1C;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErD;;;;;;;;GAQG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAExD;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB;;;;OAIG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC;IAEZ;;;;OAIG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,EAAE,WAKhC,CAAC;AAEF,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,KAAK,EAAE,WAAW,CAAC;KACpB;CACF;AAID;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,QAAQ,CAAC,WAAW,CAOvD,CAAC"}

package/dist/components/split/split-config.js

@@ -0,0 +1,20 @@
+"use client";
+import { registerComponentDefaults as e } from "../../libs/registry.js";
+//#region src/components/split/split-config.ts
+var t = {
+	stackAt: "lg",
+	ratio: "equal",
+	gap: "lg",
+	align: "stretch"
+};
+e("split", t);
+var n = {
+	stackAt: "lg",
+	ratio: "equal",
+	gap: "lg",
+	align: "stretch",
+	divider: !1,
+	stickyEnd: !1
+};
+//#endregion
+export { n as FALLBACK_SPLIT_CONFIG, t as defaultSplitConfig };

package/dist/components/split/split-styles.d.ts

@@ -0,0 +1,36 @@
+import { SplitAlign, SplitRatio, SplitStackAt } from './split-config';
+/** Shared classes for every split. */
+export declare const SPLIT_BASE_CLASS = "flex w-full min-w-0";
+/**
+ * Stacking classes per breakpoint.
+ * Below the breakpoint the panes are a column, so a narrow screen reads the
+ * panes in the order they are written rather than side by side.
+ */
+export declare const SPLIT_STACK_CLASS: Record<SplitStackAt, string>;
+/** Cross-axis alignment classes for the wide layout. */
+export declare const SPLIT_ALIGN_CLASS: Record<SplitAlign, string>;
+/** Shared classes for every pane. */
+export declare const SPLIT_PANE_BASE_CLASS = "w-full min-w-0";
+/**
+ * Width each pane takes once the panes sit side by side, per breakpoint and
+ * ratio. `flex-basis` decides the main size of a flex item, so it settles the
+ * division of the width without the panes having to grow.
+ */
+export declare const SPLIT_PANE_WIDTH_CLASS: Record<SplitStackAt, Record<SplitRatio, {
+    start: string;
+    end: string;
+}>>;
+/**
+ * Divider classes per breakpoint.
+ * Stacked panes are separated by a horizontal rule; side-by-side panes by a
+ * vertical one, which the same utility produces because it follows the flex
+ * direction.
+ */
+export declare const SPLIT_DIVIDER_CLASS: Record<SplitStackAt, string>;
+/**
+ * Sticky classes for a pane that stays in view.
+ * A sticky flex item also needs to stop stretching, or it has no room to move
+ * within its parent.
+ */
+export declare const SPLIT_STICKY_CLASS = "sticky top-0 self-start";
+//# sourceMappingURL=split-styles.d.ts.map

package/dist/components/split/split-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-styles.d.ts","sourceRoot":"","sources":["../../../src/components/split/split-styles.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE3E,sCAAsC;AACtC,eAAO,MAAM,gBAAgB,wBAAwB,CAAC;AAEtD;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAK1D,CAAC;AAEF,wDAAwD;AACxD,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAIxD,CAAC;AAEF,qCAAqC;AACrC,eAAO,MAAM,qBAAqB,mBAAmB,CAAC;AAEtD;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,MAAM,CACzC,YAAY,EACZ,MAAM,CAAC,UAAU,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC,CAsBnD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAK5D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,4BAA4B,CAAC"}

package/dist/components/split/split-styles.js

@@ -0,0 +1,76 @@
+"use client";
+//#region src/components/split/split-styles.ts
+var e = "flex w-full min-w-0", t = {
+	sm: "flex-col sm:flex-row",
+	md: "flex-col md:flex-row",
+	lg: "flex-col lg:flex-row",
+	xl: "flex-col xl:flex-row"
+}, n = {
+	start: "items-start",
+	center: "items-center",
+	stretch: "items-stretch"
+}, r = "w-full min-w-0", i = {
+	sm: {
+		equal: {
+			start: "sm:basis-1/2",
+			end: "sm:basis-1/2"
+		},
+		start: {
+			start: "sm:basis-2/3",
+			end: "sm:basis-1/3"
+		},
+		end: {
+			start: "sm:basis-1/3",
+			end: "sm:basis-2/3"
+		}
+	},
+	md: {
+		equal: {
+			start: "md:basis-1/2",
+			end: "md:basis-1/2"
+		},
+		start: {
+			start: "md:basis-2/3",
+			end: "md:basis-1/3"
+		},
+		end: {
+			start: "md:basis-1/3",
+			end: "md:basis-2/3"
+		}
+	},
+	lg: {
+		equal: {
+			start: "lg:basis-1/2",
+			end: "lg:basis-1/2"
+		},
+		start: {
+			start: "lg:basis-2/3",
+			end: "lg:basis-1/3"
+		},
+		end: {
+			start: "lg:basis-1/3",
+			end: "lg:basis-2/3"
+		}
+	},
+	xl: {
+		equal: {
+			start: "xl:basis-1/2",
+			end: "xl:basis-1/2"
+		},
+		start: {
+			start: "xl:basis-2/3",
+			end: "xl:basis-1/3"
+		},
+		end: {
+			start: "xl:basis-1/3",
+			end: "xl:basis-2/3"
+		}
+	}
+}, a = {
+	sm: "divide-y divide-border sm:divide-y-0 sm:divide-x",
+	md: "divide-y divide-border md:divide-y-0 md:divide-x",
+	lg: "divide-y divide-border lg:divide-y-0 lg:divide-x",
+	xl: "divide-y divide-border xl:divide-y-0 xl:divide-x"
+}, o = "sticky top-0 self-start";
+//#endregion
+export { n as SPLIT_ALIGN_CLASS, e as SPLIT_BASE_CLASS, a as SPLIT_DIVIDER_CLASS, r as SPLIT_PANE_BASE_CLASS, i as SPLIT_PANE_WIDTH_CLASS, t as SPLIT_STACK_CLASS, o as SPLIT_STICKY_CLASS };

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

@@ -0,0 +1,94 @@
+import { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { StepperConfig } from './stepper-config';
+/**
+ * One step of a stepper.
+ */
+export interface StepperStep {
+    /**
+     * Stable identifier of the step.
+     */
+    key: string;
+    /**
+     * Name of the step.
+     */
+    label: ReactNode;
+    /**
+     * What the step asks for, shown under the label when descriptions are on.
+     */
+    description?: ReactNode;
+}
+type BaseStepperProps = StepperConfig & Omit<HTMLAttributes<HTMLOListElement>, "color">;
+/**
+ * Props for the Stepper component.
+ */
+export interface StepperProps extends BaseStepperProps {
+    /**
+     * The steps, in order.
+     */
+    steps: StepperStep[];
+    /**
+     * Zero-based index of the step the reader is on.
+     */
+    currentStep: number;
+    /**
+     * Called with the index of the step a reader asked for.
+     * Its presence is what makes the steps the reader has not reached yet
+     * interactive; without it the stepper only reports progress.
+     */
+    onStepChange?: (index: number) => void;
+    /**
+     * Name of the list, for a page that has more than one.
+     */
+    label?: string;
+    /**
+     * Element to render.
+     * Defaults to an `ol`, which is what makes the sequence a list.
+     *
+     * @default "ol"
+     */
+    as?: ElementType;
+}
+/**
+ * The reader's progress through a sequence of steps.
+ *
+ * Each step reports its own state: the steps before the current one are
+ * complete, the current one carries `aria-current="step"`, and the rest are
+ * upcoming. The state is carried by the marker's colour and by text as well, so
+ * the sequence does not depend on colour alone.
+ *
+ * The arrangement follows the breakpoint rather than a fixed choice: by default
+ * the steps are a column on a narrow screen and a row from the `md` breakpoint,
+ * which is the shape a checkout summary takes without a media query at each use.
+ *
+ * @param props - Stepper configuration options and list attributes.
+ * @param props.steps - The steps, in order.
+ * @param props.currentStep - Zero-based index of the current step.
+ * @param props.onStepChange - Called with the index a reader asked for.
+ * @param props.orientation - How the steps are arranged. Defaults to
+ * "responsive".
+ * @param props.size - Density of markers and labels. Defaults to "md".
+ * @param props.showDescriptions - Show each step's description. Defaults to
+ * true.
+ * @param props.label - Name of the list, for a page with more than one.
+ * @param props.as - Element to render. Defaults to "ol".
+ * @returns The rendered stepper.
+ *
+ * @example
+ * ```tsx
+ * <Stepper
+ *   currentStep={1}
+ *   onStepChange={setStep}
+ *   steps={[
+ *     { key: "cart", label: "Cart" },
+ *     { key: "address", label: "Address", description: "Where it ships" },
+ *     { key: "payment", label: "Payment" },
+ *   ]}
+ * />
+ * ```
+ *
+ * @see Tabs - Switching between panels rather than reporting progress.
+ * @see Pagination - Moving through pages of a collection.
+ */
+export declare const Stepper: import('react').ForwardRefExoticComponent<StepperProps & import('react').RefAttributes<HTMLOListElement>>;
+export {};
+//# sourceMappingURL=Stepper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/stepper/Stepper.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,EACL,KAAK,WAAW,EAEhB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAMf,OAAO,EAA2B,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAe/E;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,KAAK,gBAAgB,GAAG,aAAa,GACnC,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,gBAAgB;IACpD;;OAEG;IACH,KAAK,EAAE,WAAW,EAAE,CAAC;IAErB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;OAKG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,OAAO,2GAwHnB,CAAC"}

package/dist/components/stepper/Stepper.js

@@ -0,0 +1,71 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { useAsheeConfig as t } from "../../libs/context.js";
+import { resolveConfigCascade as n } from "../../utils/resolve-token.js";
+import { CheckIcon as r } from "../../icons/CheckIcon.js";
+import { Typography as i } from "../typography/Typography.js";
+import { FALLBACK_STEPPER_CONFIG as a } from "./stepper-config.js";
+import { STEPPER_CONNECTOR_CLASS as o, STEPPER_ITEM_BUTTON_CLASS as s, STEPPER_ITEM_CLASS as c, STEPPER_LABEL_CLASS as l, STEPPER_LIST_CLASS as u, STEPPER_MARKER_CLASS as d, STEPPER_MARKER_SIZE_CLASS as f, STEPPER_MARKER_STATE_CLASS as p, STEPPER_STATE_TEXT_CLASS as m } from "./stepper-styles.js";
+import { forwardRef as h } from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/components/stepper/Stepper.tsx
+var y = h(({ steps: h, currentStep: y, onStepChange: b, label: x, orientation: S, size: C, showDescriptions: w, as: T, className: E, ...D }, O) => {
+	let k = t(), A = n({
+		orientation: S,
+		size: C,
+		showDescriptions: w
+	}, k.components?.stepper, a);
+	return /* @__PURE__ */ _(T ?? "ol", {
+		ref: O,
+		"aria-label": x,
+		className: e(u[A.orientation], E),
+		...D,
+		children: h.map((t, n) => {
+			let a = n < y ? "complete" : n === y ? "current" : "upcoming", u = !!b && a !== "current", x = n === h.length - 1, S = /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("span", {
+				"aria-hidden": "true",
+				className: e(d, f[A.size], p[a]),
+				children: a === "complete" ? /* @__PURE__ */ _(r, { className: "size-4" }) : n + 1
+			}), /* @__PURE__ */ v("span", {
+				className: "flex min-w-0 flex-col",
+				children: [/* @__PURE__ */ _(i, {
+					as: "span",
+					role: "label",
+					className: l[a],
+					children: t.label
+				}), A.showDescriptions && t.description && /* @__PURE__ */ _(i, {
+					as: "span",
+					role: "caption",
+					className: "text-xs text-foreground/60",
+					children: t.description
+				})]
+			})] });
+			return /* @__PURE__ */ v("li", {
+				"aria-current": a === "current" ? "step" : void 0,
+				className: c,
+				children: [
+					/* @__PURE__ */ _("span", {
+						className: m,
+						children: a === "complete" ? "Completed:" : a === "current" ? "Current step:" : "Not started:"
+					}),
+					u ? /* @__PURE__ */ _("button", {
+						type: "button",
+						className: s,
+						onClick: () => b?.(n),
+						children: S
+					}) : /* @__PURE__ */ _("span", {
+						className: "flex min-w-0 items-center gap-2",
+						children: S
+					}),
+					!x && /* @__PURE__ */ _("span", {
+						"aria-hidden": "true",
+						className: o[A.orientation]
+					})
+				]
+			}, t.key);
+		})
+	});
+});
+y.displayName = "Stepper";
+//#endregion
+export { y as Stepper };

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

@@ -0,0 +1,3 @@
+export * from './Stepper';
+export * from './stepper-config';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/stepper/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC"}

package/dist/components/stepper/index.js

@@ -0,0 +1,3 @@
+export * from "./Stepper.js";
+export * from "./stepper-config.js";
+export * from "./stepper-styles.js";

package/dist/components/stepper/stepper-config.d.ts

@@ -0,0 +1,51 @@
+import { Size } from '../../shared';
+/**
+ * How the steps are arranged.
+ *
+ * - `responsive`: a column on a narrow screen and a row from the `md`
+ *   breakpoint, which is the arrangement a checkout summary wants.
+ * - `horizontal`: a row at every width, for a stepper of two or three short
+ *   steps.
+ * - `vertical`: a column at every width, for a long sequence or a sidebar.
+ */
+export type StepperOrientation = "responsive" | "horizontal" | "vertical";
+/**
+ * Theme configuration options for the Stepper component.
+ *
+ * Set under `components.stepper` in the AsheeUI config. Values feed the
+ * component-level tier of the theme cascade.
+ */
+export interface StepperConfig {
+    /**
+     * How the steps are arranged.
+     *
+     * @default "responsive"
+     */
+    orientation?: StepperOrientation;
+    /**
+     * Density of the step markers and their labels.
+     *
+     * @default "md"
+     */
+    size?: Size;
+    /**
+     * Whether each step's description is shown under its label.
+     *
+     * @default true
+     */
+    showDescriptions?: boolean;
+}
+/**
+ * Default config values registered for the Stepper component.
+ */
+export declare const defaultStepperConfig: StepperConfig;
+declare module "../../libs/registry" {
+    interface ComponentTypeConfigRegistry {
+        stepper: StepperConfig;
+    }
+}
+/**
+ * Hard fallback values used when no config tier provides a value.
+ */
+export declare const FALLBACK_STEPPER_CONFIG: Required<StepperConfig>;
+//# sourceMappingURL=stepper-config.d.ts.map

package/dist/components/stepper/stepper-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper-config.d.ts","sourceRoot":"","sources":["../../../src/components/stepper/stepper-config.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC;;;;;;;;GAQG;AACH,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,YAAY,GAAG,UAAU,CAAC;AAE1E;;;;;GAKG;AACH,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;IAEjC;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,aAIlC,CAAC;AAEF,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,OAAO,EAAE,aAAa,CAAC;KACxB;CACF;AAID;;GAEG;AACH,eAAO,MAAM,uBAAuB,EAAE,QAAQ,CAAC,aAAa,CAI3D,CAAC"}

package/dist/components/stepper/stepper-config.js

@@ -0,0 +1,16 @@
+"use client";
+import { registerComponentDefaults as e } from "../../libs/registry.js";
+//#region src/components/stepper/stepper-config.ts
+var t = {
+	orientation: "responsive",
+	size: "md",
+	showDescriptions: !0
+};
+e("stepper", t);
+var n = {
+	orientation: "responsive",
+	size: "md",
+	showDescriptions: !0
+};
+//#endregion
+export { n as FALLBACK_STEPPER_CONFIG, t as defaultStepperConfig };

package/dist/components/stepper/stepper-styles.d.ts

@@ -0,0 +1,30 @@
+import { Size } from '../../shared';
+import { StepperOrientation } from './stepper-config';
+/** The state a step is in, relative to the current step. */
+export type StepperStepState = "complete" | "current" | "upcoming";
+/** The list, which is a column on a narrow screen and a row on a wide one. */
+export declare const STEPPER_LIST_CLASS: Record<StepperOrientation, string>;
+/** Shared classes for one step. */
+export declare const STEPPER_ITEM_CLASS = "flex min-w-0 items-center gap-2";
+/** The control a consumer can move between steps with. */
+export declare const STEPPER_ITEM_BUTTON_CLASS = "flex min-w-0 items-center gap-2 rounded-md text-left outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2";
+/** The marker, which holds a number or a tick. */
+export declare const STEPPER_MARKER_SIZE_CLASS: Record<Size, string>;
+/** Shared classes for the marker. */
+export declare const STEPPER_MARKER_CLASS = "flex shrink-0 items-center justify-center rounded-full border font-medium";
+/** The marker's treatment for each state. */
+export declare const STEPPER_MARKER_STATE_CLASS: Record<StepperStepState, string>;
+/** The label of each step, and the tone that follows its state. */
+export declare const STEPPER_LABEL_CLASS: Record<StepperStepState, string>;
+/** The description under a label. */
+export declare const STEPPER_DESCRIPTION_CLASS = "text-xs text-foreground/60";
+/**
+ * The rule between two steps.
+ * It is drawn only in the row arrangement: stacked, the order of the steps and
+ * their states carry the sequence, and a rule would add noise rather than
+ * information.
+ */
+export declare const STEPPER_CONNECTOR_CLASS: Record<StepperOrientation, string>;
+/** Visually hidden text that states a step's position for assistive technology. */
+export declare const STEPPER_STATE_TEXT_CLASS = "sr-only";
+//# sourceMappingURL=stepper-styles.d.ts.map

package/dist/components/stepper/stepper-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper-styles.d.ts","sourceRoot":"","sources":["../../../src/components/stepper/stepper-styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE3D,4DAA4D;AAC5D,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC;AAEnE,8EAA8E;AAC9E,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAKjE,CAAC;AAEF,mCAAmC;AACnC,eAAO,MAAM,kBAAkB,oCAAoC,CAAC;AAEpE,0DAA0D;AAC1D,eAAO,MAAM,yBAAyB,kJAC2G,CAAC;AAElJ,kDAAkD;AAClD,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAI1D,CAAC;AAEF,qCAAqC;AACrC,eAAO,MAAM,oBAAoB,8EAC4C,CAAC;AAE9E,6CAA6C;AAC7C,eAAO,MAAM,0BAA0B,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAIvE,CAAC;AAEF,mEAAmE;AACnE,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAIhE,CAAC;AAEF,qCAAqC;AACrC,eAAO,MAAM,yBAAyB,+BAA+B,CAAC;AAEtE;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAItE,CAAC;AAEF,mFAAmF;AACnF,eAAO,MAAM,wBAAwB,YAAY,CAAC"}