@timmbr/ui 1.5.0 → 1.6.0

package/dist/components/ResponsiveDialog/ResponsiveDialog.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useMediaQuery } from '@timmbr/hooks';
+import { cn } from '@timmbr/utils';
+import { DialogClose, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../Dialog/Dialog.js';
+import { DrawerBody, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle } from '../Drawer/Drawer.js';
+
+const DIALOG_SIZE = { sm: "max-w-md", md: "max-w-lg", lg: "max-w-2xl" };
+const RESPONSIVE_DIALOG_BREAKPOINT = "(min-width: 640px)";
+const ModeContext = React.createContext("dialog");
+const useResponsiveDialogMode = () => React.useContext(ModeContext);
+function ResponsiveDialog({ breakpoint = RESPONSIVE_DIALOG_BREAKPOINT, children, ...props }) {
+  const isSmall = useMediaQuery(`not all and ${breakpoint}`);
+  const mode = isSmall ? "drawer" : "dialog";
+  return /* @__PURE__ */ jsx(ModeContext.Provider, { value: mode, children: /* @__PURE__ */ jsx(Dialog, { ...props, children }) });
+}
+ResponsiveDialog.displayName = "ResponsiveDialog";
+const ResponsiveDialogContent = React.forwardRef(
+  ({ className, dialogClassName, drawerClassName, size = "md", ...props }, ref) => {
+    const mode = useResponsiveDialogMode();
+    return mode === "drawer" ? /* @__PURE__ */ jsx(
+      DrawerContent,
+      {
+        ref,
+        side: "bottom",
+        "data-mode": "drawer",
+        className: cn(className, drawerClassName),
+        ...props
+      }
+    ) : /* @__PURE__ */ jsx(
+      DialogContent,
+      {
+        ref,
+        "data-mode": "dialog",
+        className: cn(DIALOG_SIZE[size], className, dialogClassName),
+        ...props
+      }
+    );
+  }
+);
+ResponsiveDialogContent.displayName = "ResponsiveDialogContent";
+const ResponsiveDialogHeader = (props) => useResponsiveDialogMode() === "drawer" ? /* @__PURE__ */ jsx(DrawerHeader, { ...props }) : /* @__PURE__ */ jsx(DialogHeader, { ...props });
+ResponsiveDialogHeader.displayName = "ResponsiveDialogHeader";
+const ResponsiveDialogBody = (props) => useResponsiveDialogMode() === "drawer" ? /* @__PURE__ */ jsx(DrawerBody, { ...props }) : /* @__PURE__ */ jsx(DialogBody, { ...props });
+ResponsiveDialogBody.displayName = "ResponsiveDialogBody";
+const ResponsiveDialogFooter = ({ className, ...props }) => useResponsiveDialogMode() === "drawer" ? /* @__PURE__ */ jsx(DrawerFooter, { className: cn("-mx-6 border-t border-border px-6", className), ...props }) : /* @__PURE__ */ jsx(DialogFooter, { className, ...props });
+ResponsiveDialogFooter.displayName = "ResponsiveDialogFooter";
+const ResponsiveDialogTitle = React.forwardRef(
+  (props, ref) => useResponsiveDialogMode() === "drawer" ? /* @__PURE__ */ jsx(DrawerTitle, { ref, ...props }) : /* @__PURE__ */ jsx(DialogTitle, { ref, ...props })
+);
+ResponsiveDialogTitle.displayName = "ResponsiveDialogTitle";
+const ResponsiveDialogDescription = React.forwardRef(
+  (props, ref) => useResponsiveDialogMode() === "drawer" ? /* @__PURE__ */ jsx(DrawerDescription, { ref, ...props }) : /* @__PURE__ */ jsx(DialogDescription, { ref, ...props })
+);
+ResponsiveDialogDescription.displayName = "ResponsiveDialogDescription";
+const ResponsiveDialogForm = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const mode = useResponsiveDialogMode();
+    return /* @__PURE__ */ jsx(
+      "form",
+      {
+        ref,
+        "data-slot": "responsive-dialog-form",
+        className: cn("flex min-h-0 flex-1 flex-col", mode === "drawer" && "gap-4", className),
+        ...props
+      }
+    );
+  }
+);
+ResponsiveDialogForm.displayName = "ResponsiveDialogForm";
+const ResponsiveDialogClose = DialogClose;
+
+export { RESPONSIVE_DIALOG_BREAKPOINT, ResponsiveDialog, ResponsiveDialogBody, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogForm, ResponsiveDialogHeader, ResponsiveDialogTitle, useResponsiveDialogMode };

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

@@ -0,0 +1,27 @@
+import type * as React from 'react';
+import type { DialogProps } from '../Dialog/Dialog.types';
+import type { MotionProp } from '../../types/motion';
+export type ResponsiveDialogMode = 'dialog' | 'drawer';
+export interface ResponsiveDialogProps extends DialogProps {
+    /**
+     * Media query from which the centred dialog is used; below it the content
+     * opens as a bottom sheet. Default `(min-width: 640px)` (Tailwind `sm`).
+     */
+    breakpoint?: string;
+}
+export interface ResponsiveDialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Dialog width on larger screens: sm (28rem), md (32rem, default), lg (42rem). */
+    size?: 'sm' | 'md' | 'lg';
+    /** Extra classes in dialog mode only (e.g. `max-w-2xl`). */
+    dialogClassName?: string;
+    /** Extra classes in bottom-sheet mode only. */
+    drawerClassName?: string;
+    motion?: MotionProp;
+    onOpenAutoFocus?: (event: Event) => void;
+    onCloseAutoFocus?: (event: Event) => void;
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    onInteractOutside?: (event: Event) => void;
+}
+export type ResponsiveDialogSectionProps = React.HTMLAttributes<HTMLDivElement>;
+export type ResponsiveDialogFormProps = React.FormHTMLAttributes<HTMLFormElement>;
+//# sourceMappingURL=ResponsiveDialog.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveDialog.types.d.ts","sourceRoot":"","sources":["../../../src/components/ResponsiveDialog/ResponsiveDialog.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEvD,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,4BAA6B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxF,mFAAmF;IACnF,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,4DAA4D;IAC5D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+CAA+C;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACzC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACjD,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAC5C;AAED,MAAM,MAAM,4BAA4B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEhF,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ResponsiveDialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC"}

package/dist/components/SectionNav/SectionNav.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { SectionNavProps } from './SectionNav.types';
+/** Exact match, or nested under the item (`/orders/1` → `/orders`). */
+export declare function isSectionNavItemActive(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 SectionNav: React.ForwardRefExoticComponent<SectionNavProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=SectionNav.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionNav.d.ts","sourceRoot":"","sources":["../../../src/components/SectionNav/SectionNav.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAuB,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAU/E,uEAAuE;AACvE,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAKjF;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,qFAgEtB,CAAC"}

package/dist/components/SectionNav/SectionNav.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@timmbr/utils';
+import { sectionNavItemVariants, sectionNavListVariants, sectionNavFooterVariants } from './SectionNav.styles.js';
+
+const DefaultLink = ({ href, className, children, ...rest }) => /* @__PURE__ */ jsx("a", { href, className, ...rest, children });
+const trimSlash = (path) => path.length > 1 ? path.replace(/\/+$/, "") : path;
+function isSectionNavItemActive(href, activeHref) {
+  if (!activeHref) return false;
+  const item = trimSlash(href);
+  const current = trimSlash(activeHref.split(/[?#]/)[0] ?? "");
+  return current === item || current.startsWith(`${item}/`);
+}
+const SectionNav = React.forwardRef(
+  ({
+    items,
+    activeHref,
+    linkComponent: Link = DefaultLink,
+    footer,
+    mobileLayout = "scroll",
+    className,
+    "aria-label": ariaLabel = "Section navigation",
+    ...props
+  }, ref) => {
+    const activeId = React.useMemo(() => {
+      const matches = items.filter((item) => isSectionNavItemActive(item.href, activeHref));
+      return matches.sort((a, b) => b.href.length - a.href.length)[0]?.id;
+    }, [items, activeHref]);
+    return /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        ref,
+        "aria-label": ariaLabel,
+        "data-slot": "section-nav",
+        className: cn(
+          "flex gap-2 lg:flex-col lg:items-stretch lg:gap-0",
+          mobileLayout === "wrap" ? "flex-col items-stretch" : "items-center",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("ul", { className: cn(sectionNavListVariants({ mobileLayout }), "min-w-0 flex-1"), role: "list", children: items.map((item) => {
+            const active = item.id === activeId;
+            return /* @__PURE__ */ jsx("li", { className: "shrink-0", children: /* @__PURE__ */ jsxs(
+              Link,
+              {
+                href: item.href,
+                "aria-current": active ? "page" : void 0,
+                className: sectionNavItemVariants({ active }),
+                children: [
+                  item.icon && /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center", "aria-hidden": "true", children: item.icon }),
+                  /* @__PURE__ */ jsx("span", { className: "flex-1", children: item.label }),
+                  item.badge !== void 0 && item.badge !== null && /* @__PURE__ */ jsx("span", { className: "text-caption-lg text-muted-foreground", children: item.badge })
+                ]
+              }
+            ) }, item.id);
+          }) }),
+          footer && /* @__PURE__ */ jsx("div", { className: sectionNavFooterVariants(), "data-slot": "section-nav-footer", children: footer })
+        ]
+      }
+    );
+  }
+);
+SectionNav.displayName = "SectionNav";
+
+export { SectionNav, isSectionNavItemActive };

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

@@ -0,0 +1,11 @@
+import { type VariantProps } from 'class-variance-authority';
+/** Desktop (lg): a vertical list. Small screens: a scrolling row or wrapped lines. */
+export declare const sectionNavListVariants: (props?: ({
+    mobileLayout?: "scroll" | "wrap" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const sectionNavItemVariants: (props?: ({
+    active?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const sectionNavFooterVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export type SectionNavItemVariants = VariantProps<typeof sectionNavItemVariants>;
+//# sourceMappingURL=SectionNav.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionNav.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SectionNav/SectionNav.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,sFAAsF;AACtF,eAAO,MAAM,sBAAsB;;8EAQjC,CAAC;AAEH,eAAO,MAAM,sBAAsB;;8EAWlC,CAAC;AAEF,eAAO,MAAM,wBAAwB,oFAEpC,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC"}

package/dist/components/SectionNav/SectionNav.styles.js

@@ -0,0 +1,28 @@
+import { cva } from 'class-variance-authority';
+
+const sectionNavListVariants = cva("flex gap-1 lg:flex-col lg:flex-nowrap lg:overflow-visible", {
+  variants: {
+    mobileLayout: {
+      scroll: "overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+      wrap: "flex-wrap"
+    }
+  },
+  defaultVariants: { mobileLayout: "scroll" }
+});
+const sectionNavItemVariants = cva(
+  "flex items-center gap-3 whitespace-nowrap rounded-md px-3 py-2 lg:py-2.5 font-sans text-body-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  {
+    variants: {
+      active: {
+        true: "bg-primary-50 text-primary-700 dark:bg-primary-900 dark:text-primary-100",
+        false: "text-grey-700 hover:bg-grey-100 hover:text-foreground dark:text-grey-300 dark:hover:bg-grey-800"
+      }
+    },
+    defaultVariants: { active: false }
+  }
+);
+const sectionNavFooterVariants = cva(
+  "flex shrink-0 items-center lg:mt-2 lg:border-t lg:border-border lg:pt-2"
+);
+
+export { sectionNavFooterVariants, sectionNavItemVariants, sectionNavListVariants };

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

@@ -0,0 +1,37 @@
+import type * as React from 'react';
+export interface SectionNavItem {
+    id: string;
+    label: React.ReactNode;
+    href: string;
+    /** Leading icon (decorative; hidden from screen readers). */
+    icon?: React.ReactNode;
+    /** Trailing count or tag, e.g. a number of items. */
+    badge?: React.ReactNode;
+}
+export interface SectionNavLinkProps {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+    'aria-current'?: 'page';
+}
+export interface SectionNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
+    items: SectionNavItem[];
+    /**
+     * Current path. An item is active when it equals its `href` or is nested
+     * under it (`/account/orders/123` activates `/account/orders`).
+     */
+    activeHref?: string;
+    /** Link to render items with (e.g. `next/link`). Defaults to `<a>`. */
+    linkComponent?: React.ComponentType<SectionNavLinkProps>;
+    /**
+     * Small screens: `scroll` keeps one horizontally scrolling row (good for many
+     * short items); `wrap` wraps the items onto several lines so every one stays
+     * visible (good for a handful of longer labels).
+     */
+    mobileLayout?: 'scroll' | 'wrap';
+    /** Extra content after the items, e.g. a "Log out" button. */
+    footer?: React.ReactNode;
+    /** Accessible name of the navigation landmark. */
+    'aria-label'?: string;
+}
+//# sourceMappingURL=SectionNav.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionNav.types.d.ts","sourceRoot":"","sources":["../../../src/components/SectionNav/SectionNav.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,6DAA6D;IAC7D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,qDAAqD;IACrD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC1F,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uEAAuE;IACvE,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;IACzD;;;;OAIG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACjC,8DAA8D;IAC9D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB"}

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

@@ -0,0 +1,4 @@
+export * from './SectionNav';
+export * from './SectionNav.types';
+export * from './SectionNav.styles';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SectionNav/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC"}

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

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const selectTriggerVariants: (props?: ({
     variant?: "filled" | "outline" | null | undefined;
-    size?: "default" | "sm" | "lg" | "md" | null | undefined;
+    size?: "sm" | "md" | "lg" | "default" | null | undefined;
     isError?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const selectContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

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

@@ -7,7 +7,7 @@ export declare const spinnerVariants: (props?: ({
     variant?: "default" | "white" | "primary" | "secondary" | "muted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const spinnerIconVariants: (props?: ({
-    size?: "sm" | "lg" | "md" | "xl" | "xs" | null | undefined;
+    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/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/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"}