@sixthshift/design-system 0.7.0 → 0.8.0

package/dist/components/ImageGallery/ImageGallery.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useControllableState } from "@sixthshift/design-system/hooks";
+import { cn } from "@sixthshift/design-system/utils";
+import { cva } from "class-variance-authority";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import * as React from "react";
+/**
+ * Geometry only. Every colour reads an `--image-gallery-*` component token
+ * whose value is decided by src/components/ImageGallery/image-gallery.recipe.css.
+ *
+ * `ratio` is the frame's shape, not the images': every slide is cropped to it
+ * with `object-cover`, so a mixed set of uploads still produces a steady
+ * frame that does not jump as you swipe. `portrait` is 4:5, the tallest crop
+ * Instagram allows in a feed — photography shot for the feed lands on it
+ * uncropped.
+ */
+const frameVariants = cva("relative overflow-hidden rounded-lg bg-(--image-gallery-bg)", {
+    variants: {
+        ratio: {
+            square: "aspect-square",
+            portrait: "aspect-[4/5]",
+            landscape: "aspect-[4/3]",
+            wide: "aspect-video",
+        },
+    },
+    defaultVariants: {
+        ratio: "square",
+    },
+});
+function prefersReducedMotion() {
+    return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
+}
+/**
+ * A product photo carousel: one frame, swipeable on touch, with previous/next
+ * buttons, arrow-key navigation and an optional thumbnail strip or dots.
+ *
+ * Swiping is native scrolling — a horizontal `scroll-snap` track, not a
+ * pointer-event reimplementation — so it has the platform's own momentum and
+ * edge behaviour on phones. The shown index follows the scroll position, and
+ * setting the index (by button, key, thumbnail or a controlled `index`)
+ * scrolls the track. Both directions meet at one rule: the effect only scrolls
+ * when the track is not already showing the index, so a swipe that updates
+ * the index never fights itself.
+ *
+ * Controlled or uncontrolled through `index`/`defaultIndex`/`onIndexChange`.
+ *
+ * Follows the WAI-ARIA carousel pattern: the root is a `<section>` with
+ * `aria-roledescription="carousel"` (a landmark region once `label` names
+ * it), each slide a group named "n of total", and slides out of view are
+ * `aria-hidden`. The first image loads eagerly and
+ * the rest lazily, so a gallery of ten costs one download up front.
+ */
+export const ImageGallery = React.forwardRef(({ className, images, index: controlledIndex, defaultIndex = 0, onIndexChange, ratio = "square", indicator = "thumbnails", label, previousLabel = "Previous image", nextLabel = "Next image", placeholder, onKeyDown, ...props }, ref) => {
+    const count = images.length;
+    const [rawIndex, setIndex] = useControllableState({
+        value: controlledIndex,
+        defaultValue: defaultIndex,
+        onChange: onIndexChange,
+    });
+    const index = count === 0 ? 0 : Math.min(Math.max(rawIndex, 0), count - 1);
+    const trackRef = React.useRef(null);
+    // The slide a programmatic scroll is heading for. While set, the slides it
+    // passes on the way are not reported — jumping from 1 to 4 reports 4, not
+    // 2, 3 and 4. Any touch, wheel or pointer on the track hands control back.
+    const scrollTargetRef = React.useRef(null);
+    // Index → scroll. Skipped when the track already shows `index`, which is
+    // always the case right after a swipe reported it.
+    React.useEffect(() => {
+        const track = trackRef.current;
+        if (!track || track.clientWidth === 0)
+            return;
+        if (Math.round(track.scrollLeft / track.clientWidth) === index)
+            return;
+        scrollTargetRef.current = index;
+        track.scrollTo({ left: index * track.clientWidth, behavior: prefersReducedMotion() ? "auto" : "smooth" });
+    }, [index]);
+    // Scroll → index. Rounds, so the index flips at the halfway point of a swipe.
+    const handleScroll = () => {
+        const track = trackRef.current;
+        if (!track || track.clientWidth === 0)
+            return;
+        const shown = Math.round(track.scrollLeft / track.clientWidth);
+        if (scrollTargetRef.current !== null) {
+            if (shown !== scrollTargetRef.current)
+                return;
+            scrollTargetRef.current = null;
+        }
+        if (shown !== index && shown >= 0 && shown < count)
+            setIndex(shown);
+    };
+    const releaseScroll = () => {
+        scrollTargetRef.current = null;
+    };
+    const go = (next) => {
+        if (next >= 0 && next < count && next !== index)
+            setIndex(next);
+    };
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        const targets = { ArrowLeft: index - 1, ArrowRight: index + 1, Home: 0, End: count - 1 };
+        const target = targets[event.key];
+        if (target === undefined)
+            return;
+        event.preventDefault();
+        go(target);
+    };
+    const controlClass = "image-gallery-control focus-visible:ring-(color:--image-gallery-control-ring) absolute top-1/2 flex size-9 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full bg-(--image-gallery-control-bg) text-(--image-gallery-control-fg) shadow transition-opacity hover:bg-(--image-gallery-control-bg-hovered) focus-visible:outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-0 max-sm:hidden [&_svg]:size-5";
+    return (_jsxs("section", { ref: ref, "aria-roledescription": "carousel", "aria-label": label, className: cn("image-gallery flex flex-col gap-3", className), onKeyDown: handleKeyDown, ...props, children: [_jsxs("div", { className: frameVariants({ ratio }), children: [count === 0 ? (_jsx("div", { className: "flex h-full w-full items-center justify-center text-(--image-gallery-placeholder-fg) text-sm", children: placeholder })) : (_jsx("div", { ref: trackRef, onScroll: handleScroll, onPointerDown: releaseScroll, onTouchStart: releaseScroll, onWheel: releaseScroll, 
+                        // Focusable so the arrow keys work without first reaching a button,
+                        // and because a scrollable region must be keyboard-reachable.
+                        // biome-ignore lint/a11y/noNoninteractiveTabindex: scrollable regions must be focusable (axe `scrollable-region-focusable`)
+                        tabIndex: 0, className: "focus-visible:ring-(color:--image-gallery-control-ring) flex h-full w-full snap-x snap-mandatory overflow-x-auto overscroll-x-contain [scrollbar-width:none] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-inset [&::-webkit-scrollbar]:hidden", children: images.map((image, i) => (
+                        // biome-ignore lint/a11y/useSemanticElements: the WAI-ARIA carousel pattern names each slide a `group`; a <fieldset> is for form controls
+                        _jsx("div", { role: "group", "aria-roledescription": "slide", "aria-label": `${i + 1} of ${count}`, "aria-hidden": i !== index, className: "h-full w-full shrink-0 snap-center snap-always", children: _jsx("img", { src: image.src, srcSet: image.srcSet, sizes: image.sizes, width: image.width, height: image.height, alt: image.alt, loading: i === 0 ? "eager" : "lazy", decoding: "async", draggable: false, className: "h-full w-full select-none object-cover" }) }, i))) })), count > 1 && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": previousLabel, disabled: index === 0, onClick: () => go(index - 1), className: cn(controlClass, "left-2"), children: _jsx(ChevronLeft, { "aria-hidden": "true" }) }), _jsx("button", { type: "button", "aria-label": nextLabel, disabled: index === count - 1, onClick: () => go(index + 1), className: cn(controlClass, "right-2"), children: _jsx(ChevronRight, { "aria-hidden": "true" }) })] }))] }), count > 1 && indicator === "thumbnails" && (_jsx("div", { className: "flex gap-2 overflow-x-auto p-0.5", children: images.map((image, i) => (_jsx("button", { type: "button", "aria-label": `Show image ${i + 1} of ${count}`, "aria-current": i === index ? "true" : undefined, "data-selected": i === index, onClick: () => go(i), className: "image-gallery-thumb border-(color:--image-gallery-thumb-border) focus-visible:ring-(color:--image-gallery-control-ring) hover:border-(color:--image-gallery-thumb-border-hovered) size-16 shrink-0 cursor-pointer overflow-hidden rounded-md border-2 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2", children: _jsx("img", { src: image.src, srcSet: image.srcSet, sizes: "64px", alt: "", loading: "lazy", decoding: "async", draggable: false, className: "h-full w-full object-cover" }) }, i))) })), count > 1 && indicator === "dots" && (_jsx("div", { className: "flex justify-center gap-1.5", children: images.map((_, i) => (_jsx("button", { type: "button", "aria-label": `Show image ${i + 1} of ${count}`, "aria-current": i === index ? "true" : undefined, "data-selected": i === index, onClick: () => go(i), className: "image-gallery-dot focus-visible:ring-(color:--image-gallery-control-ring) flex size-6 cursor-pointer items-center justify-center rounded-full focus-visible:outline-hidden focus-visible:ring-2", children: _jsx("span", { "aria-hidden": "true", className: "block size-2 rounded-full bg-(--image-gallery-dot-bg) transition-colors" }) }, i))) }))] }));
+});
+ImageGallery.displayName = "ImageGallery";
+export { frameVariants as imageGalleryFrameVariants };
+//# sourceMappingURL=ImageGallery.js.map

package/dist/components/ImageGallery/ImageGallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGallery.js","sourceRoot":"","sources":["../../../src/components/ImageGallery/ImageGallery.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export { ImageGallery, type ImageGalleryImage, type ImageGalleryProps, type ImageGalleryRatio, imageGalleryFrameVariants, } from "./ImageGallery.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ImageGallery/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,yBAAyB,GAC1B,MAAM,gBAAgB,CAAC"}

package/dist/components/ImageGallery/index.js

@@ -0,0 +1,2 @@
+export { ImageGallery, imageGalleryFrameVariants, } from "./ImageGallery.js";
+//# sourceMappingURL=index.js.map

package/dist/components/ImageGallery/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ImageGallery/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAIZ,yBAAyB,GAC1B,MAAM,gBAAgB,CAAC"}

package/dist/components/NumberStepper/NumberStepper.d.ts

@@ -0,0 +1,78 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+/**
+ * Geometry only. Every colour reads a `--number-stepper-*` component token
+ * whose value is decided by src/components/NumberStepper/number-stepper.recipe.css.
+ *
+ * `size` tracks Input's and Button's heights (`sm` 32px, `md` 36px, `lg`
+ * 40px) so a stepper sits on the same baseline as the fields beside it.
+ */
+declare const numberStepperVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type NumberStepperSize = NonNullable<VariantProps<typeof numberStepperVariants>["size"]>;
+export type NumberStepperProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "size" | "min" | "max" | "step" | "type"> & VariantProps<typeof numberStepperVariants> & {
+    /** Controlled value. */
+    value?: number;
+    /** Initial value in uncontrolled mode. Defaults to `min`, or `0` without one. */
+    defaultValue?: number;
+    /** Called with the new, already-clamped value. */
+    onValueChange?: (value: number) => void;
+    /** Lowest reachable value. Defaults to `0` — quantities are the common case. */
+    min?: number;
+    /** Highest reachable value. Unbounded when omitted. */
+    max?: number;
+    /** Increment for the buttons and arrow keys. `PageUp`/`PageDown` move ten of them. */
+    step?: number;
+    /** Accessible name for the decrement button. */
+    decrementLabel?: string;
+    /** Accessible name for the increment button. */
+    incrementLabel?: string;
+    /** Extra classes for the inner `<input>`; `className` styles the surrounding group. */
+    inputClassName?: string;
+};
+/**
+ * A whole-number field with decrement and increment buttons — a cart
+ * quantity, a guest count, a per-day capacity.
+ *
+ * Implements the WAI-ARIA spinbutton pattern on the `<input>` itself:
+ * `role="spinbutton"` with `aria-valuenow`/`min`/`max`, `ArrowUp`/`ArrowDown`
+ * step, `PageUp`/`PageDown` step by ten, and `Home`/`End` jump to the bounds
+ * that exist. The two buttons are pointer affordances and stay out of the tab
+ * order, so the field is one tab stop — the same reason RadioButtonGroup is.
+ *
+ * Typing is free-form while focused and committed on blur or `Enter`: the
+ * draft is parsed, rounded to the nearest `step` from `min`, and clamped.
+ * Anything unparseable reverts to the last committed value rather than
+ * reporting `NaN`. Every value `onValueChange` receives is in range.
+ *
+ * Controlled or uncontrolled through the `value`/`defaultValue`/
+ * `onValueChange` triad. `name` submits the committed value with a form, since
+ * the input is a real `<input>`. The ref and every unlisted prop land on that
+ * input — so `FormField`'s `id`/`aria-describedby` wiring reaches the control
+ * — while `className` styles the surrounding group.
+ */
+export declare const NumberStepper: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "onChange" | "step" | "size" | "type" | "value" | "max" | "min"> & VariantProps<(props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+    /** Controlled value. */
+    value?: number;
+    /** Initial value in uncontrolled mode. Defaults to `min`, or `0` without one. */
+    defaultValue?: number;
+    /** Called with the new, already-clamped value. */
+    onValueChange?: (value: number) => void;
+    /** Lowest reachable value. Defaults to `0` — quantities are the common case. */
+    min?: number;
+    /** Highest reachable value. Unbounded when omitted. */
+    max?: number;
+    /** Increment for the buttons and arrow keys. `PageUp`/`PageDown` move ten of them. */
+    step?: number;
+    /** Accessible name for the decrement button. */
+    decrementLabel?: string;
+    /** Accessible name for the increment button. */
+    incrementLabel?: string;
+    /** Extra classes for the inner `<input>`; `className` styles the surrounding group. */
+    inputClassName?: string;
+} & React.RefAttributes<HTMLInputElement>>;
+export { numberStepperVariants };
+//# sourceMappingURL=NumberStepper.d.ts.map

package/dist/components/NumberStepper/NumberStepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberStepper.d.ts","sourceRoot":"","sources":["../../../src/components/NumberStepper/NumberStepper.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;GAMG;AACH,QAAA,MAAM,qBAAqB;;8EAe1B,CAAC;AAgBF,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAEhG,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CACjF,GACC,YAAY,CAAC,OAAO,qBAAqB,CAAC,GAAG;IAC3C,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gFAAgF;IAChF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uDAAuD;IACvD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sFAAsF;IACtF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gDAAgD;IAChD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uFAAuF;IACvF,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAOJ;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,aAAa;;;IA9CtB,wBAAwB;YAChB,MAAM;IACd,iFAAiF;mBAClE,MAAM;IACrB,kDAAkD;oBAClC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IACvC,gFAAgF;UAC1E,MAAM;IACZ,uDAAuD;UACjD,MAAM;IACZ,sFAAsF;WAC/E,MAAM;IACb,gDAAgD;qBAC/B,MAAM;IACvB,gDAAgD;qBAC/B,MAAM;IACvB,uFAAuF;qBACtE,MAAM;0CAyJ1B,CAAC;AAGF,OAAO,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/components/NumberStepper/NumberStepper.js

@@ -0,0 +1,129 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useControllableState } from "@sixthshift/design-system/hooks";
+import { cn } from "@sixthshift/design-system/utils";
+import { cva } from "class-variance-authority";
+import { Minus, Plus } from "lucide-react";
+import * as React from "react";
+/**
+ * Geometry only. Every colour reads a `--number-stepper-*` component token
+ * whose value is decided by src/components/NumberStepper/number-stepper.recipe.css.
+ *
+ * `size` tracks Input's and Button's heights (`sm` 32px, `md` 36px, `lg`
+ * 40px) so a stepper sits on the same baseline as the fields beside it.
+ */
+const numberStepperVariants = cva(
+// One literal, deliberately — see Button.tsx for why a `+` concatenation is a trap.
+"number-stepper border-(color:--number-stepper-border) focus-within:ring-(color:--number-stepper-ring) inline-flex w-fit items-stretch overflow-hidden rounded-md border bg-(--number-stepper-bg) text-(--number-stepper-fg) shadow-xs transition-colors focus-within:ring-2 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50", {
+    variants: {
+        size: {
+            sm: "h-8 text-xs [&_svg]:size-3.5",
+            md: "h-9 text-sm [&_svg]:size-4",
+            lg: "h-10 text-sm [&_svg]:size-4",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+    },
+});
+/** Button width per size — square against the field's height. */
+const buttonGeometry = {
+    sm: "w-8",
+    md: "w-9",
+    lg: "w-10",
+};
+/** Input width per size — room for three digits before it grows. */
+const inputGeometry = {
+    sm: "w-10",
+    md: "w-12",
+    lg: "w-14",
+};
+function clamp(value, min, max) {
+    const floored = Math.max(min, value);
+    return max === undefined ? floored : Math.min(max, floored);
+}
+/**
+ * A whole-number field with decrement and increment buttons — a cart
+ * quantity, a guest count, a per-day capacity.
+ *
+ * Implements the WAI-ARIA spinbutton pattern on the `<input>` itself:
+ * `role="spinbutton"` with `aria-valuenow`/`min`/`max`, `ArrowUp`/`ArrowDown`
+ * step, `PageUp`/`PageDown` step by ten, and `Home`/`End` jump to the bounds
+ * that exist. The two buttons are pointer affordances and stay out of the tab
+ * order, so the field is one tab stop — the same reason RadioButtonGroup is.
+ *
+ * Typing is free-form while focused and committed on blur or `Enter`: the
+ * draft is parsed, rounded to the nearest `step` from `min`, and clamped.
+ * Anything unparseable reverts to the last committed value rather than
+ * reporting `NaN`. Every value `onValueChange` receives is in range.
+ *
+ * Controlled or uncontrolled through the `value`/`defaultValue`/
+ * `onValueChange` triad. `name` submits the committed value with a form, since
+ * the input is a real `<input>`. The ref and every unlisted prop land on that
+ * input — so `FormField`'s `id`/`aria-describedby` wiring reaches the control
+ * — while `className` styles the surrounding group.
+ */
+export const NumberStepper = React.forwardRef(({ className, inputClassName, size = "md", value: controlledValue, defaultValue, onValueChange, min = 0, max, step = 1, disabled = false, readOnly = false, decrementLabel = "Decrease", incrementLabel = "Increase", onKeyDown, onBlur, onFocus, ...props }, ref) => {
+    const [value, setValue] = useControllableState({
+        value: controlledValue,
+        defaultValue: clamp(defaultValue ?? min, min, max),
+        onChange: onValueChange,
+    });
+    // The text being typed, or `null` when the field shows the committed value.
+    const [draft, setDraft] = React.useState(null);
+    const commit = (next) => {
+        const snapped = min + Math.round((next - min) / step) * step;
+        const clamped = clamp(snapped, min, max);
+        if (clamped !== value)
+            setValue(clamped);
+    };
+    const commitDraft = () => {
+        if (draft === null)
+            return;
+        const parsed = Number.parseFloat(draft);
+        setDraft(null);
+        if (Number.isFinite(parsed))
+            commit(parsed);
+    };
+    const interactive = !disabled && !readOnly;
+    const atMin = value <= min;
+    const atMax = max !== undefined && value >= max;
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || !interactive)
+            return;
+        const moves = {
+            ArrowUp: () => value + step,
+            ArrowDown: () => value - step,
+            PageUp: () => value + step * 10,
+            PageDown: () => value - step * 10,
+            Home: () => min,
+            End: max === undefined ? undefined : () => max,
+        };
+        const move = moves[event.key];
+        if (event.key === "Enter") {
+            commitDraft();
+            return;
+        }
+        if (!move)
+            return;
+        event.preventDefault();
+        setDraft(null);
+        commit(move());
+    };
+    const handleBlur = (event) => {
+        commitDraft();
+        onBlur?.(event);
+    };
+    const stepBy = (direction) => {
+        setDraft(null);
+        commit(value + step * direction);
+    };
+    const buttonClass = cn("number-stepper-button flex shrink-0 cursor-pointer items-center justify-center text-(--number-stepper-button-fg) transition-colors enabled:active:bg-(--number-stepper-button-bg-pressed) enabled:hover:bg-(--number-stepper-button-bg-hovered) disabled:cursor-not-allowed disabled:text-(--number-stepper-button-fg-disabled)", buttonGeometry[size ?? "md"]);
+    return (
+    // biome-ignore lint/a11y/useSemanticElements: a <fieldset> brings a border, min-width and legend semantics this inline control does not want; role="group" only ties the buttons to the field
+    _jsxs("div", { role: "group", "data-disabled": disabled, className: numberStepperVariants({ size, className }), children: [_jsx("button", { type: "button", tabIndex: -1, "aria-label": decrementLabel, disabled: !interactive || atMin, onClick: () => stepBy(-1), className: buttonClass, children: _jsx(Minus, { "aria-hidden": "true" }) }), _jsx("input", { ref: ref, type: "text", inputMode: "numeric", role: "spinbutton", autoComplete: "off", "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max, disabled: disabled, readOnly: readOnly, value: draft ?? String(value), onChange: (event) => setDraft(event.target.value), onKeyDown: handleKeyDown, onBlur: handleBlur, onFocus: onFocus, className: cn("border-(color:--number-stepper-divider-border) min-w-0 border-x bg-transparent text-center text-[length:inherit] tabular-nums outline-hidden disabled:cursor-not-allowed", inputGeometry[size ?? "md"], inputClassName), ...props }), _jsx("button", { type: "button", tabIndex: -1, "aria-label": incrementLabel, disabled: !interactive || atMax, onClick: () => stepBy(1), className: buttonClass, children: _jsx(Plus, { "aria-hidden": "true" }) })] }));
+});
+NumberStepper.displayName = "NumberStepper";
+export { numberStepperVariants };
+//# sourceMappingURL=NumberStepper.js.map

package/dist/components/NumberStepper/NumberStepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberStepper.js","sourceRoot":"","sources":["../../../src/components/NumberStepper/NumberStepper.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export { NumberStepper, type NumberStepperProps, type NumberStepperSize, numberStepperVariants } from "./NumberStepper.js";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/NumberStepper/index.js

@@ -0,0 +1,2 @@
+export { NumberStepper, numberStepperVariants } from "./NumberStepper.js";
+//# sourceMappingURL=index.js.map

package/dist/components/NumberStepper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/NumberStepper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAmD,qBAAqB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/Steps/Steps.d.ts

@@ -0,0 +1,65 @@
+import * as React from "react";
+/**
+ * Geometry only. Every colour reads a `--steps-*` component token whose value
+ * is decided by src/components/Steps/steps.recipe.css, selected by the
+ * `data-state` each item renders (`complete`, `current`, `upcoming`).
+ */
+declare const stepsVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type StepsOrientation = "horizontal" | "vertical";
+/** Where a step sits relative to `current`. Rendered as `data-state`. */
+export type StepState = "complete" | "current" | "upcoming";
+export type StepItem = {
+    /** Visible step name. */
+    label: React.ReactNode;
+    /** Secondary line under the label. */
+    description?: React.ReactNode;
+};
+export type StepsProps = Omit<React.OlHTMLAttributes<HTMLOListElement>, "children"> & {
+    /** The steps, in order. */
+    steps: readonly StepItem[];
+    /** Zero-based index of the step in progress. `steps.length` marks every step complete. */
+    current: number;
+    /**
+     * Makes completed steps clickable, for going back in a wizard. Upcoming
+     * steps never are — skipping ahead is the flow's decision, not the
+     * indicator's.
+     */
+    onStepClick?: (index: number) => void;
+    /** Layout direction. `horizontal` collapses labels to the current step's on narrow screens. */
+    orientation?: StepsOrientation;
+};
+/**
+ * Progress through a fixed sequence — checkout, onboarding, a multi-page
+ * form. Display-only: the step in progress is the `current` prop, owned by
+ * whatever runs the flow, so there is no internal state to control.
+ *
+ * Renders an `<ol>` (pass `aria-label`, e.g. "Checkout progress"); the
+ * current item carries `aria-current="step"`, and each indicator has a
+ * visually hidden status ("completed", "current") so the sequence reads
+ * correctly without the colours.
+ *
+ * With `onStepClick`, completed steps become buttons. Current and upcoming
+ * steps stay plain text: a step indicator that let you jump forward would be
+ * making the flow's validation decisions for it.
+ *
+ * Horizontally, every label shows from `sm` up; below that only the current
+ * step's label does, so four steps still fit a phone.
+ */
+export declare const Steps: React.ForwardRefExoticComponent<Omit<React.OlHTMLAttributes<HTMLOListElement>, "children"> & {
+    /** The steps, in order. */
+    steps: readonly StepItem[];
+    /** Zero-based index of the step in progress. `steps.length` marks every step complete. */
+    current: number;
+    /**
+     * Makes completed steps clickable, for going back in a wizard. Upcoming
+     * steps never are — skipping ahead is the flow's decision, not the
+     * indicator's.
+     */
+    onStepClick?: (index: number) => void;
+    /** Layout direction. `horizontal` collapses labels to the current step's on narrow screens. */
+    orientation?: StepsOrientation;
+} & React.RefAttributes<HTMLOListElement>>;
+export { stepsVariants };
+//# sourceMappingURL=Steps.d.ts.map

package/dist/components/Steps/Steps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Steps.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/Steps.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;GAIG;AACH,QAAA,MAAM,aAAa;;8EAUjB,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG,UAAU,CAAC;AAEzD,yEAAyE;AACzE,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC;AAE5D,MAAM,MAAM,QAAQ,GAAG;IACrB,yBAAyB;IACzB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,sCAAsC;IACtC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,GAAG;IACpF,2BAA2B;IAC3B,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAC;IAC3B,0FAA0F;IAC1F,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,+FAA+F;IAC/F,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAChC,CAAC;AAQF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,KAAK;IArChB,2BAA2B;WACpB,SAAS,QAAQ,EAAE;IAC1B,0FAA0F;aACjF,MAAM;IACf;;;;OAIG;kBACW,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IACrC,+FAA+F;kBACjF,gBAAgB;0CAiG9B,CAAC;AAGH,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/Steps/Steps.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "@sixthshift/design-system/utils";
+import { cva } from "class-variance-authority";
+import { Check } from "lucide-react";
+import * as React from "react";
+/**
+ * Geometry only. Every colour reads a `--steps-*` component token whose value
+ * is decided by src/components/Steps/steps.recipe.css, selected by the
+ * `data-state` each item renders (`complete`, `current`, `upcoming`).
+ */
+const stepsVariants = cva("steps flex", {
+    variants: {
+        orientation: {
+            horizontal: "w-full flex-row items-start",
+            vertical: "flex-col",
+        },
+    },
+    defaultVariants: {
+        orientation: "horizontal",
+    },
+});
+function stateOf(index, current) {
+    if (index < current)
+        return "complete";
+    if (index === current)
+        return "current";
+    return "upcoming";
+}
+/**
+ * Progress through a fixed sequence — checkout, onboarding, a multi-page
+ * form. Display-only: the step in progress is the `current` prop, owned by
+ * whatever runs the flow, so there is no internal state to control.
+ *
+ * Renders an `<ol>` (pass `aria-label`, e.g. "Checkout progress"); the
+ * current item carries `aria-current="step"`, and each indicator has a
+ * visually hidden status ("completed", "current") so the sequence reads
+ * correctly without the colours.
+ *
+ * With `onStepClick`, completed steps become buttons. Current and upcoming
+ * steps stay plain text: a step indicator that let you jump forward would be
+ * making the flow's validation decisions for it.
+ *
+ * Horizontally, every label shows from `sm` up; below that only the current
+ * step's label does, so four steps still fit a phone.
+ */
+export const Steps = React.forwardRef(({ className, steps, current, onStepClick, orientation = "horizontal", ...props }, ref) => {
+    const isHorizontal = orientation === "horizontal";
+    return (_jsx("ol", { ref: ref, "data-orientation": orientation, className: stepsVariants({ orientation, className }), ...props, children: steps.map((step, index) => {
+            const state = stateOf(index, current);
+            const isLast = index === steps.length - 1;
+            const clickable = state === "complete" && onStepClick !== undefined;
+            const indicator = (_jsx("span", { className: "steps-indicator border-(color:--steps-indicator-border) relative z-10 flex size-8 shrink-0 items-center justify-center rounded-full border-2 bg-(--steps-indicator-bg) font-semibold text-(--steps-indicator-fg) text-sm transition-colors", children: state === "complete" ? _jsx(Check, { "aria-hidden": "true", className: "size-4", strokeWidth: 3 }) : index + 1 }));
+            const text = (_jsxs("span", { className: cn("flex min-w-0 flex-col", isHorizontal ? "items-center text-center" : "pt-1", isHorizontal && state !== "current" && "max-sm:sr-only"), children: [_jsx("span", { className: "font-medium text-(--steps-label-fg) text-sm", children: step.label }), step.description !== undefined && _jsx("span", { className: "text-(--steps-description-fg) text-xs", children: step.description }), state !== "upcoming" && _jsx("span", { className: "sr-only", children: state === "complete" ? "(completed)" : "(current)" })] }));
+            const body = (_jsxs(_Fragment, { children: [indicator, text] }));
+            const bodyClass = cn("flex gap-2", isHorizontal ? "flex-col items-center" : "flex-row items-start gap-3");
+            return (_jsxs("li", { "data-state": state, "aria-current": state === "current" ? "step" : undefined, className: cn("steps-item relative", isHorizontal ? "flex flex-1 justify-center" : "flex pb-6 last:pb-0"), children: [!isLast && (_jsx("span", { "aria-hidden": "true", className: cn("steps-connector absolute bg-(--steps-connector-bg)", isHorizontal ? "top-4 left-1/2 h-0.5 w-full -translate-y-1/2" : "top-8 bottom-0 left-4 w-0.5 -translate-x-1/2") })), clickable ? (_jsx("button", { type: "button", onClick: () => onStepClick(index), className: cn(bodyClass, "focus-visible:ring-(color:--steps-ring) cursor-pointer rounded-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 [&:hover_.steps-indicator]:bg-(--steps-indicator-bg-hovered)"), children: body })) : (_jsx("span", { className: bodyClass, children: body }))] }, index));
+        }) }));
+});
+Steps.displayName = "Steps";
+export { stepsVariants };
+//# sourceMappingURL=Steps.js.map

package/dist/components/Steps/Steps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Steps.js","sourceRoot":"","sources":["../../../src/components/Steps/Steps.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export { type StepItem, type StepState, Steps, type StepsOrientation, type StepsProps, stepsVariants } from "./Steps.js";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/Steps/index.js

@@ -0,0 +1,2 @@
+export { Steps, stepsVariants } from "./Steps.js";
+//# sourceMappingURL=index.js.map

package/dist/components/Steps/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Steps/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,EAA0C,aAAa,EAAE,MAAM,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sixthshift/design-system",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Personal design system - tokens, theme, and component library",
   "license": "MIT",
   "publishConfig": {
@@ -314,6 +314,26 @@
     "./bar-chart": {
       "types": "./dist/components/BarChart/index.d.ts",
       "import": "./dist/components/BarChart/index.js"
+    },
+    "./data-table": {
+      "types": "./dist/components/DataTable/index.d.ts",
+      "import": "./dist/components/DataTable/index.js"
+    },
+    "./file-dropzone": {
+      "types": "./dist/components/FileDropzone/index.d.ts",
+      "import": "./dist/components/FileDropzone/index.js"
+    },
+    "./image-gallery": {
+      "types": "./dist/components/ImageGallery/index.d.ts",
+      "import": "./dist/components/ImageGallery/index.js"
+    },
+    "./number-stepper": {
+      "types": "./dist/components/NumberStepper/index.d.ts",
+      "import": "./dist/components/NumberStepper/index.js"
+    },
+    "./steps": {
+      "types": "./dist/components/Steps/index.d.ts",
+      "import": "./dist/components/Steps/index.js"
     }
   },
   "scripts": {