@timmbr/ui 1.4.2 → 1.6.0

package/dist/components/Spinner/Spinner.js

@@ -3,14 +3,16 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { cn } from '@timmbr/utils';
 import { Loader2 } from '@timmbr/icons';
-import { spinnerVariants } from './Spinner.styles.js';
+import { spinnerIconVariants, spinnerVariants } from './Spinner.styles.js';
 
 const Spinner = React.forwardRef(
   ({
     className,
+    iconClassName,
     size = "md",
     variant = "default",
     label = "Loading...",
+    decorative = false,
     children,
     ...props
   }, ref) => {
@@ -18,22 +20,22 @@ const Spinner = React.forwardRef(
       "span",
       {
         ref,
-        role: "status",
-        "aria-label": label,
+        role: decorative ? void 0 : "status",
+        "aria-hidden": decorative || void 0,
         "data-slot": "spinner-container",
-        className: cn("inline-flex items-center gap-2 font-sans", className),
+        className: cn(spinnerVariants({ variant }), className),
         ...props,
         children: [
           /* @__PURE__ */ jsx(
             Loader2,
             {
-              className: spinnerVariants({ size, variant }),
+              className: cn(spinnerIconVariants({ size }), iconClassName),
               "aria-hidden": "true",
               "data-slot": "spinner"
             }
           ),
-          children && /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground font-medium select-none", "data-slot": "spinner-label", children }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+          children && /* @__PURE__ */ jsx("span", { className: "text-body-3 font-medium select-none", "data-slot": "spinner-label", children }),
+          !decorative && /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
         ]
       }
     );

package/dist/components/Spinner/Spinner.styles.d.ts

@@ -1,7 +1,13 @@
 import { type VariantProps } from 'class-variance-authority';
+/**
+ * Colour lives on the wrapper and the icon inherits it (`currentColor`), so a
+ * consumer `className="text-grey-50"` reliably recolours the spinner.
+ */
 export declare const spinnerVariants: (props?: ({
-    size?: "sm" | "lg" | "md" | "xl" | "xs" | null | undefined;
     variant?: "default" | "white" | "primary" | "secondary" | "muted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export type SpinnerVariants = VariantProps<typeof spinnerVariants>;
+export declare const spinnerIconVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type SpinnerVariants = VariantProps<typeof spinnerVariants> & VariantProps<typeof spinnerIconVariants>;
 //# sourceMappingURL=Spinner.styles.d.ts.map

package/dist/components/Spinner/Spinner.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,eAAe;;;8EAwB3B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}
+{"version":3,"file":"Spinner.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE;;;GAGG;AACH,eAAO,MAAM,eAAe;;8EAa1B,CAAC;AAEH,eAAO,MAAM,mBAAmB;;8EAa9B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,GAChE,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dist/components/Spinner/Spinner.styles.js

@@ -1,29 +1,32 @@
 import { cva } from 'class-variance-authority';
 
-const spinnerVariants = cva(
-  "inline-flex shrink-0 animate-spin text-current font-sans",
-  {
-    variants: {
-      size: {
-        xs: "size-3",
-        sm: "size-4",
-        md: "size-5",
-        lg: "size-7",
-        xl: "size-10"
-      },
-      variant: {
-        default: "text-primary",
-        primary: "text-primary",
-        secondary: "text-secondary-foreground",
-        white: "text-white",
-        muted: "text-muted-foreground"
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      variant: "default"
+const spinnerVariants = cva("inline-flex items-center gap-2", {
+  variants: {
+    variant: {
+      default: "text-primary",
+      primary: "text-primary",
+      secondary: "text-primary-1000",
+      white: "text-grey-50",
+      muted: "text-grey-500"
     }
+  },
+  defaultVariants: {
+    variant: "default"
   }
-);
+});
+const spinnerIconVariants = cva("shrink-0 animate-spin", {
+  variants: {
+    size: {
+      xs: "size-3",
+      sm: "size-4",
+      md: "size-5",
+      lg: "size-7",
+      xl: "size-10"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
 
-export { spinnerVariants };
+export { spinnerIconVariants, spinnerVariants };

package/dist/components/Spinner/Spinner.types.d.ts

@@ -9,5 +9,14 @@ export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement>, Spi
      * Visible companion text rendered next to the spinner.
      */
     children?: React.ReactNode;
+    /**
+     * Extra classes for the icon itself (the wrapper gets `className`).
+     */
+    iconClassName?: string;
+    /**
+     * Purely visual: no status role or label. Use inside a control that already
+     * communicates its busy state (e.g. a button with `aria-busy`).
+     */
+    decorative?: boolean;
 }
 //# sourceMappingURL=Spinner.types.d.ts.map

package/dist/components/Spinner/Spinner.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.types.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD,MAAM,WAAW,YACf,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAC3C,eAAe;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}
+{"version":3,"file":"Spinner.types.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD,MAAM,WAAW,YACf,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAC3C,eAAe;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}

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

@@ -1 +1 @@
-{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,eAAO,MAAM,KAAK,mFA2CjB,CAAC"}
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAqBhD,eAAO,MAAM,KAAK,mFA4CjB,CAAC"}

package/dist/components/Stack/Stack.js

@@ -6,11 +6,26 @@ import { cn } from '@timmbr/utils';
 import { formatGap } from '../../utils/gap.js';
 import { stackVariants } from './Stack.styles.js';
 
+const DIRECTION = {
+  base: { column: "flex-col", row: "flex-row" },
+  sm: { column: "sm:flex-col", row: "sm:flex-row" },
+  md: { column: "md:flex-col", row: "md:flex-row" },
+  lg: { column: "lg:flex-col", row: "lg:flex-row" }
+};
+function directionClasses(direction) {
+  if (!direction) return void 0;
+  if (typeof direction === "string") return DIRECTION.base[direction];
+  return Object.keys(DIRECTION).map((bp) => {
+    const value = direction[bp];
+    return value ? DIRECTION[bp][value] : void 0;
+  }).filter(Boolean).join(" ");
+}
 const Stack = React.forwardRef(
   ({
     className,
     style,
     gap = 4,
+    direction,
     align = "stretch",
     justify = "start",
     divider,
@@ -35,7 +50,7 @@ const Stack = React.forwardRef(
         "data-slot": "stack",
         "data-testid": "timmbr-stack",
         style,
-        className: cn(stackVariants({ align, justify }), gapClass, className),
+        className: cn(stackVariants({ align, justify }), directionClasses(direction), gapClass, className),
         ...props,
         children: renderChildren()
       }

package/dist/components/Stack/Stack.types.d.ts

@@ -1,10 +1,23 @@
 import type * as React from 'react';
 import type { StackVariants } from './Stack.styles';
+import type { GapValue } from '../../utils/gap';
+/** Direction per breakpoint (`base` = all sizes). */
+export interface ResponsiveDirection {
+    base?: 'column' | 'row';
+    sm?: 'column' | 'row';
+    md?: 'column' | 'row';
+    lg?: 'column' | 'row';
+}
 export interface StackProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'gap'>, Omit<StackVariants, 'gap'> {
     /**
      * Gap between items. Translates standard Tailwind tokens, any number (px), or custom string.
      */
-    gap?: number | string;
+    gap?: GapValue;
+    /**
+     * Stack direction: a column by default; e.g. `{ sm: 'row' }` lays the
+     * items out in a row from the `sm` breakpoint.
+     */
+    direction?: 'column' | 'row' | ResponsiveDirection;
     /**
      * Optional divider element rendered between each child in the stack.
      */

package/dist/components/Stack/Stack.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.types.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,EACvD,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC;IAC5B;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"Stack.types.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD,qDAAqD;AACrD,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACxB,EAAE,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACtB,EAAE,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACtB,EAAE,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CACvB;AAED,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,EACvD,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC;IAC5B;;OAEG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,mBAAmB,CAAC;IACnD;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/components/Stat/Stat.styles.js

@@ -16,16 +16,16 @@ const statVariants = cva(
   }
 );
 const statLabelVariants = cva(
-  "text-xs font-semibold text-muted-foreground uppercase tracking-wider select-none"
+  "text-body-3 font-semibold text-muted-foreground uppercase tracking-wider select-none"
 );
 const statValueVariants = cva(
-  "text-3xl font-display font-semibold text-foreground tracking-tight"
+  "text-h3 font-semibold text-foreground tracking-tight"
 );
 const statHelpTextVariants = cva(
-  "flex items-center gap-1.5 text-xs text-muted-foreground mt-1"
+  "flex items-center gap-1.5 text-body-3 text-muted-foreground mt-1"
 );
 const statIndicatorVariants = cva(
-  "inline-flex items-center gap-1 font-semibold text-xs",
+  "inline-flex items-center gap-1 font-semibold text-body-3",
   {
     variants: {
       type: {

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { StepperProps } from './Stepper.types';
+/**
+ * Progress through a sequence of steps (order tracking, checkout, onboarding).
+ * Steps before `current` are complete; `status="error"` marks the current
+ * step as failed (e.g. a cancelled order).
+ */
+export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLOListElement>>;
+//# 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,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAa,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAQ/D;;;;GAIG;AACH,eAAO,MAAM,OAAO,uFA0EnB,CAAC"}

package/dist/components/Stepper/Stepper.js

@@ -0,0 +1,81 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@timmbr/utils';
+import { Check, X } from '@timmbr/icons';
+import { stepConnectorVariants, stepIndicatorVariants, stepperVariants } from './Stepper.styles.js';
+
+function stateOf(index, current, status) {
+  if (index < current) return "complete";
+  if (index === current) return status === "error" ? "error" : "current";
+  return "upcoming";
+}
+const Stepper = React.forwardRef(
+  ({ steps, current, status = "default", orientation = "horizontal", className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "ol",
+    {
+      ref,
+      "data-slot": "stepper",
+      "data-orientation": orientation,
+      className: cn(stepperVariants({ orientation }), className),
+      ...props,
+      children: steps.map((step, index) => {
+        const state = stateOf(index, current, status);
+        const isLast = index === steps.length - 1;
+        return /* @__PURE__ */ jsxs(
+          "li",
+          {
+            "data-state": state,
+            "aria-current": state === "current" || state === "error" ? "step" : void 0,
+            className: cn(
+              "relative flex min-w-0",
+              orientation === "horizontal" ? "flex-1 flex-col items-center text-center" : "gap-3 pb-6 last:pb-0"
+            ),
+            children: [
+              !isLast && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: stepConnectorVariants({
+                    orientation,
+                    complete: state === "complete"
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: stepIndicatorVariants({ state }), "aria-hidden": "true", children: state === "complete" ? /* @__PURE__ */ jsx(Check, { size: 14, strokeWidth: 3 }) : state === "error" ? /* @__PURE__ */ jsx(X, { size: 14, strokeWidth: 3 }) : index + 1 }),
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: cn(
+                    "min-w-0",
+                    orientation === "horizontal" ? "mt-2 px-1" : "pt-0.5"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        className: cn(
+                          "block text-body-2 font-medium",
+                          state === "upcoming" ? "text-muted-foreground" : "text-foreground",
+                          state === "error" && "text-destructive"
+                        ),
+                        children: [
+                          step.label,
+                          /* @__PURE__ */ jsx("span", { className: "sr-only", children: state === "complete" ? " (completed)" : state === "error" ? " (failed)" : "" })
+                        ]
+                      }
+                    ),
+                    step.description && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-caption-lg text-muted-foreground", children: step.description })
+                  ]
+                }
+              )
+            ]
+          },
+          step.id ?? index
+        );
+      })
+    }
+  )
+);
+Stepper.displayName = "Stepper";
+
+export { Stepper };

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

@@ -0,0 +1,14 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const stepperVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const stepIndicatorVariants: (props?: ({
+    state?: "current" | "error" | "complete" | "upcoming" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Line to the next step, behind the indicators. */
+export declare const stepConnectorVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    complete?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type StepperVariants = VariantProps<typeof stepperVariants>;
+//# 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,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,eAAe;;8EAQ1B,CAAC;AAEH,eAAO,MAAM,qBAAqB;;8EAajC,CAAC;AAEF,oDAAoD;AACpD,eAAO,MAAM,qBAAqB;;;8EAYhC,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/dist/components/Stepper/Stepper.styles.js

@@ -0,0 +1,40 @@
+import { cva } from 'class-variance-authority';
+
+const stepperVariants = cva("font-sans", {
+  variants: {
+    orientation: {
+      horizontal: "flex items-start",
+      vertical: "flex flex-col"
+    }
+  },
+  defaultVariants: { orientation: "horizontal" }
+});
+const stepIndicatorVariants = cva(
+  "relative z-10 flex size-7 shrink-0 items-center justify-center rounded-full border-2 text-caption-lg font-semibold tabular-nums transition-colors",
+  {
+    variants: {
+      state: {
+        complete: "border-primary bg-primary text-primary-foreground",
+        current: "border-primary bg-background text-primary",
+        error: "border-destructive bg-destructive text-destructive-foreground",
+        upcoming: "border-muted-foreground/40 bg-background text-muted-foreground"
+      }
+    },
+    defaultVariants: { state: "upcoming" }
+  }
+);
+const stepConnectorVariants = cva("absolute", {
+  variants: {
+    orientation: {
+      horizontal: "left-1/2 top-3.5 h-0.5 w-full",
+      vertical: "left-3.5 top-7 h-full w-0.5 -translate-x-1/2"
+    },
+    complete: {
+      true: "bg-primary",
+      false: "bg-border"
+    }
+  },
+  defaultVariants: { orientation: "horizontal", complete: false }
+});
+
+export { stepConnectorVariants, stepIndicatorVariants, stepperVariants };

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

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+export type StepState = 'complete' | 'current' | 'error' | 'upcoming';
+export interface StepItem {
+    id?: string;
+    label: React.ReactNode;
+    /** Secondary line, e.g. a date. */
+    description?: React.ReactNode;
+}
+export interface StepperProps extends React.OlHTMLAttributes<HTMLOListElement> {
+    steps: StepItem[];
+    /** Index of the current step. Steps before it are complete. */
+    current: number;
+    /** `error` marks the current step as failed. */
+    status?: 'default' | 'error';
+    orientation?: 'horizontal' | 'vertical';
+}
+//# sourceMappingURL=Stepper.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.types.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;AAEtE,MAAM,WAAW,QAAQ;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,mCAAmC;IACnC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,CAAC;IAC5E,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,+DAA+D;IAC/D,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC7B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC"}

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

@@ -0,0 +1,4 @@
+export * from './Stepper';
+export * from './Stepper.types';
+export * from './Stepper.styles';
+//# 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,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC"}

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { StepsProps } from './Steps.types';
+/**
+ * Progress through a sequence of steps (order tracking, checkout, onboarding).
+ * Steps before `current` are complete; `status="error"` marks the current
+ * step as failed (e.g. a cancelled order).
+ */
+export declare const Steps: React.ForwardRefExoticComponent<StepsProps & React.RefAttributes<HTMLOListElement>>;
+//# 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":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAa,UAAU,EAAE,MAAM,eAAe,CAAC;AAQ3D;;;;GAIG;AACH,eAAO,MAAM,KAAK,qFA0EjB,CAAC"}

package/dist/components/Steps/Steps.js

@@ -0,0 +1,81 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@timmbr/utils';
+import { Check, X } from '@timmbr/icons';
+import { stepConnectorVariants, stepIndicatorVariants, stepsVariants } from './Steps.styles.js';
+
+function stateOf(index, current, status) {
+  if (index < current) return "complete";
+  if (index === current) return status === "error" ? "error" : "current";
+  return "upcoming";
+}
+const Steps = React.forwardRef(
+  ({ steps, current, status = "default", orientation = "horizontal", className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "ol",
+    {
+      ref,
+      "data-slot": "steps",
+      "data-orientation": orientation,
+      className: cn(stepsVariants({ orientation }), className),
+      ...props,
+      children: steps.map((step, index) => {
+        const state = stateOf(index, current, status);
+        const isLast = index === steps.length - 1;
+        return /* @__PURE__ */ jsxs(
+          "li",
+          {
+            "data-state": state,
+            "aria-current": state === "current" || state === "error" ? "step" : void 0,
+            className: cn(
+              "relative flex min-w-0",
+              orientation === "horizontal" ? "flex-1 flex-col items-center text-center" : "gap-3 pb-6 last:pb-0"
+            ),
+            children: [
+              !isLast && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: stepConnectorVariants({
+                    orientation,
+                    complete: state === "complete"
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: stepIndicatorVariants({ state }), "aria-hidden": "true", children: state === "complete" ? /* @__PURE__ */ jsx(Check, { size: 14, strokeWidth: 3 }) : state === "error" ? /* @__PURE__ */ jsx(X, { size: 14, strokeWidth: 3 }) : index + 1 }),
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: cn(
+                    "min-w-0",
+                    orientation === "horizontal" ? "mt-2 px-1" : "pt-0.5"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        className: cn(
+                          "block text-body-2 font-medium",
+                          state === "upcoming" ? "text-muted-foreground" : "text-foreground",
+                          state === "error" && "text-destructive"
+                        ),
+                        children: [
+                          step.label,
+                          /* @__PURE__ */ jsx("span", { className: "sr-only", children: state === "complete" ? " (completed)" : state === "error" ? " (failed)" : "" })
+                        ]
+                      }
+                    ),
+                    step.description && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-caption-lg text-muted-foreground", children: step.description })
+                  ]
+                }
+              )
+            ]
+          },
+          step.id ?? index
+        );
+      })
+    }
+  )
+);
+Steps.displayName = "Steps";
+
+export { Steps };

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

@@ -0,0 +1,14 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const stepsVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const stepIndicatorVariants: (props?: ({
+    state?: "current" | "error" | "complete" | "upcoming" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Line to the next step, behind the indicators. */
+export declare const stepConnectorVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    complete?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type StepsVariants = VariantProps<typeof stepsVariants>;
+//# sourceMappingURL=Steps.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Steps.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/Steps.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,aAAa;;8EAQxB,CAAC;AAEH,eAAO,MAAM,qBAAqB;;8EAajC,CAAC;AAEF,oDAAoD;AACpD,eAAO,MAAM,qBAAqB;;;8EAYhC,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}

package/dist/components/Steps/Steps.styles.js

@@ -0,0 +1,40 @@
+import { cva } from 'class-variance-authority';
+
+const stepsVariants = cva("font-sans", {
+  variants: {
+    orientation: {
+      horizontal: "flex items-start",
+      vertical: "flex flex-col"
+    }
+  },
+  defaultVariants: { orientation: "horizontal" }
+});
+const stepIndicatorVariants = cva(
+  "relative z-10 flex size-7 shrink-0 items-center justify-center rounded-full border-2 text-caption-lg font-semibold tabular-nums transition-colors",
+  {
+    variants: {
+      state: {
+        complete: "border-primary bg-primary text-primary-foreground",
+        current: "border-primary bg-background text-primary",
+        error: "border-destructive bg-destructive text-destructive-foreground",
+        upcoming: "border-grey-300 bg-background text-muted-foreground dark:border-grey-700"
+      }
+    },
+    defaultVariants: { state: "upcoming" }
+  }
+);
+const stepConnectorVariants = cva("absolute", {
+  variants: {
+    orientation: {
+      horizontal: "left-1/2 top-3.5 h-0.5 w-full",
+      vertical: "left-3.5 top-7 h-full w-0.5 -translate-x-1/2"
+    },
+    complete: {
+      true: "bg-primary",
+      false: "bg-grey-200 dark:bg-grey-800"
+    }
+  },
+  defaultVariants: { orientation: "horizontal", complete: false }
+});
+
+export { stepConnectorVariants, stepIndicatorVariants, stepsVariants };

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

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+export type StepState = 'complete' | 'current' | 'error' | 'upcoming';
+export interface StepItem {
+    id?: string;
+    label: React.ReactNode;
+    /** Secondary line, e.g. a date. */
+    description?: React.ReactNode;
+}
+export interface StepsProps extends React.OlHTMLAttributes<HTMLOListElement> {
+    steps: StepItem[];
+    /** Index of the current step. Steps before it are complete. */
+    current: number;
+    /** `error` marks the current step as failed. */
+    status?: 'default' | 'error';
+    orientation?: 'horizontal' | 'vertical';
+}
+//# sourceMappingURL=Steps.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Steps.types.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/Steps.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;AAEtE,MAAM,WAAW,QAAQ;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,mCAAmC;IACnC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,CAAC;IAC1E,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,+DAA+D;IAC/D,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC7B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC"}

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

@@ -0,0 +1,4 @@
+export * from './Steps';
+export * from './Steps.types';
+export * from './Steps.styles';
+//# 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,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC"}

package/dist/components/SubNav/SubNav.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { SubNavActionProps, SubNavProps } from './SubNav.types';
+/** Exact match, or nested under the item (`/orders/1` → `/orders`). */
+export declare function isSubNavItemActive(href: string, activeHref?: string): boolean;
+/**
+ * In-page section navigation (account, settings, help centre…): a vertical
+ * list on desktop and a horizontally scrolling row on small screens.
+ * Unlike `SideBarNavigation` it's not an app shell: no branding, collapse or
+ * full-height frame.
+ */
+export declare const SubNav: React.ForwardRefExoticComponent<SubNavProps & React.RefAttributes<HTMLElement>>;
+/**
+ * A button for the `footer` slot (e.g. Log out), shaped like the items so
+ * its icon and label line up with them.
+ */
+export declare const SubNavAction: React.ForwardRefExoticComponent<SubNavActionProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=SubNav.d.ts.map