@timmbr/ui 1.5.0 → 1.7.0

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SubNav.d.ts","sourceRoot":"","sources":["../../../src/components/SubNav/SubNav.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,iBAAiB,EAAmB,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAUtF,uEAAuE;AACvE,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAK7E;AAED;;;;;GAKG;AACH,eAAO,MAAM,MAAM,iFAgElB,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,YAAY,6FAmBxB,CAAC"}

package/dist/components/SubNav/SubNav.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@timmbr/utils';
+import { subNavIconVariants, subNavItemVariants, subNavListVariants, subNavFooterVariants } from './SubNav.styles.js';
+import { Spinner } from '../Spinner/Spinner.js';
+
+const DefaultLink = ({ href, className, children, ...rest }) => /* @__PURE__ */ jsx("a", { href, className, ...rest, children });
+const trimSlash = (path) => path.length > 1 ? path.replace(/\/+$/, "") : path;
+function isSubNavItemActive(href, activeHref) {
+  if (!activeHref) return false;
+  const item = trimSlash(href);
+  const current = trimSlash(activeHref.split(/[?#]/)[0] ?? "");
+  return current === item || current.startsWith(`${item}/`);
+}
+const SubNav = 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) => isSubNavItemActive(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": "sub-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(subNavListVariants({ 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: subNavItemVariants({ active }),
+                children: [
+                  item.icon && /* @__PURE__ */ jsx("span", { className: subNavIconVariants(), "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: subNavFooterVariants(), "data-slot": "sub-nav-footer", children: footer })
+        ]
+      }
+    );
+  }
+);
+SubNav.displayName = "SubNav";
+const SubNavAction = React.forwardRef(
+  ({ icon, tone = "default", loading = false, disabled, className, children, type = "button", ...props }, ref) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type,
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      "data-slot": "sub-nav-action",
+      className: cn(subNavItemVariants({ tone }), className),
+      ...props,
+      children: [
+        (icon || loading) && /* @__PURE__ */ jsx("span", { className: subNavIconVariants(), "aria-hidden": "true", children: loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : icon }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children })
+      ]
+    }
+  )
+);
+SubNavAction.displayName = "SubNavAction";
+
+export { SubNav, SubNavAction, isSubNavItemActive };

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

@@ -0,0 +1,18 @@
+import { type VariantProps } from 'class-variance-authority';
+/** Desktop (lg): a vertical list. Small screens: a scrolling row or wrapped lines. */
+export declare const subNavListVariants: (props?: ({
+    mobileLayout?: "scroll" | "wrap" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Items and footer actions share this shape so their icons and labels line up.
+ * Active: dark brand text on a light brand tint (about 7:1) plus a bar on the
+ * inline-start edge on desktop, so the state never relies on colour alone.
+ */
+export declare const subNavItemVariants: (props?: ({
+    active?: boolean | null | undefined;
+    tone?: "default" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const subNavIconVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const subNavFooterVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export type SubNavItemVariants = VariantProps<typeof subNavItemVariants>;
+//# sourceMappingURL=SubNav.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SubNav.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SubNav/SubNav.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,sFAAsF;AACtF,eAAO,MAAM,kBAAkB;;8EAQ7B,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,kBAAkB;;;8EAe9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,oFAA8E,CAAC;AAE9G,eAAO,MAAM,oBAAoB,oFAEhC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/dist/components/SubNav/SubNav.styles.js

@@ -0,0 +1,33 @@
+import { cva } from 'class-variance-authority';
+
+const subNavListVariants = 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 subNavItemVariants = cva(
+  "relative flex w-full items-center gap-3 whitespace-nowrap rounded-md px-3 py-2 lg:py-2.5 text-start font-sans text-body-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      active: {
+        true: "bg-muted font-semibold text-secondary-foreground lg:before:absolute lg:before:inset-y-2 lg:before:start-0 lg:before:w-1 lg:before:rounded-full lg:before:bg-primary",
+        false: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+      },
+      tone: {
+        default: "",
+        destructive: "text-destructive hover:bg-destructive/10 hover:text-destructive"
+      }
+    },
+    defaultVariants: { active: false, tone: "default" }
+  }
+);
+const subNavIconVariants = cva("flex size-5 shrink-0 items-center justify-center [&_svg]:size-[18px]");
+const subNavFooterVariants = cva(
+  "flex shrink-0 flex-col lg:mt-2 lg:border-t lg:border-border lg:pt-2"
+);
+
+export { subNavFooterVariants, subNavIconVariants, subNavItemVariants, subNavListVariants };

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

@@ -0,0 +1,45 @@
+import type * as React from 'react';
+export interface SubNavItem {
+    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 SubNavLinkProps {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+    'aria-current'?: 'page';
+}
+export interface SubNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
+    items: SubNavItem[];
+    /**
+     * 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<SubNavLinkProps>;
+    /**
+     * 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;
+}
+export interface SubNavActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Leading icon, aligned with the item icons. */
+    icon?: React.ReactNode;
+    /** `destructive` for actions such as Log out. */
+    tone?: 'default' | 'destructive';
+    /** Shows a spinner in place of the icon and disables the button. */
+    loading?: boolean;
+}
+//# sourceMappingURL=SubNav.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SubNav.types.d.ts","sourceRoot":"","sources":["../../../src/components/SubNav/SubNav.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,UAAU;IACzB,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,eAAe;IAC9B,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,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IACtF,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uEAAuE;IACvE,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACrD;;;;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;AAED,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACtF,iDAAiD;IACjD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,iDAAiD;IACjD,IAAI,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACjC,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SubNav/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC"}

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

@@ -1,9 +1,9 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const switchVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | "md" | null | undefined;
+    size?: "sm" | "md" | "lg" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const switchThumbVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | "md" | null | undefined;
+    size?: "sm" | "md" | "lg" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type SwitchVariants = VariantProps<typeof switchVariants>;
 //# sourceMappingURL=Switch.styles.d.ts.map

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

@@ -4,7 +4,7 @@ export declare const tableContainerVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const tableVariants: (props?: ({
     variant?: "default" | "bordered" | "striped" | null | undefined;
-    size?: "default" | "sm" | null | undefined;
+    size?: "sm" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const tableRowVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const tableHeadVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EACV,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EACjB,MAAM,cAAc,CAAC;AAmBtB,eAAO,MAAM,IAAI,kFA4DhB,CAAC;AAGF,eAAO,MAAM,QAAQ,sFAgBnB,CAAC;AAGH,eAAO,MAAM,WAAW,4FA2EvB,CAAC;AAGF,eAAO,MAAM,WAAW,yFAoBtB,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,KAAK,EACV,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EACjB,MAAM,cAAc,CAAC;AAmBtB,eAAO,MAAM,IAAI,kFA4DhB,CAAC;AA6BF,eAAO,MAAM,QAAQ,sFA6EnB,CAAC;AAGH,eAAO,MAAM,WAAW,4FA2EvB,CAAC;AAGF,eAAO,MAAM,WAAW,yFAoBtB,CAAC"}

package/dist/components/Tabs/Tabs.js

@@ -4,8 +4,9 @@ import * as React from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { cn } from '@timmbr/utils';
 import { motion } from '@timmbr/motion';
+import { ChevronLeft, ChevronRight } from '@timmbr/icons';
 import { resolveMotion } from '../../types/motion.js';
-import { tabsContentVariants, tabsListVariants, tabsTriggerVariants } from './Tabs.styles.js';
+import { tabsContentVariants, TABS_SCROLL_FADE, tabsListVariants, tabsScrollButtonVariants, tabsScrollEdgeVariants, tabsTriggerVariants } from './Tabs.styles.js';
 import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
 
 const TabsContext = React.createContext({
@@ -71,19 +72,85 @@ const Tabs = React.forwardRef(
   }
 );
 Tabs.displayName = TabsPrimitive.Root.displayName;
-const TabsList = React.forwardRef(({ className, variant: localVariant, size: localSize, ...props }, ref) => {
+function useScrollEdges(ref, enabled) {
+  const [edges, setEdges] = React.useState({ start: false, end: false });
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!enabled || !el) return;
+    const measure = () => {
+      const max = el.scrollWidth - el.clientWidth;
+      const next = { start: el.scrollLeft > 1, end: el.scrollLeft < max - 1 };
+      setEdges((prev) => prev.start === next.start && prev.end === next.end ? prev : next);
+    };
+    const frame = requestAnimationFrame(measure);
+    el.addEventListener("scroll", measure, { passive: true });
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    observer?.observe(el);
+    return () => {
+      cancelAnimationFrame(frame);
+      el.removeEventListener("scroll", measure);
+      observer?.disconnect();
+    };
+  }, [ref, enabled]);
+  return edges;
+}
+const TabsList = React.forwardRef(({ className, variant: localVariant, size: localSize, scrollable = false, scrollLabels, loading = false, ...props }, ref) => {
   const context = React.useContext(TabsContext);
   const variant = localVariant ?? context.variant;
   const size = localSize ?? context.size;
-  return /* @__PURE__ */ jsx(
+  const listRef = React.useRef(null);
+  const edges = useScrollEdges(listRef, scrollable);
+  const setRefs = (node) => {
+    listRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  const fade = scrollable && (edges.start || edges.end) ? `linear-gradient(to right, ${edges.start ? "transparent" : "#000"}, #000 ${edges.start ? TABS_SCROLL_FADE : "0px"}, #000 calc(100% - ${edges.end ? TABS_SCROLL_FADE : "0px"}), ${edges.end ? "transparent" : "#000"})` : void 0;
+  const list = /* @__PURE__ */ jsx(
     TabsPrimitive.List,
     {
-      ref,
+      ref: setRefs,
       "data-slot": "tabs-list",
-      className: cn(tabsListVariants({ variant, size }), className),
-      ...props
+      "aria-busy": loading || void 0,
+      className: cn(
+        tabsListVariants({ variant, size }),
+        loading && "opacity-70 transition-opacity",
+        scrollable && "max-w-full justify-start overflow-x-auto overflow-y-hidden scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&>*]:shrink-0",
+        className
+      ),
+      ...props,
+      style: fade ? { ...props.style, maskImage: fade, WebkitMaskImage: fade } : props.style
     }
   );
+  if (!scrollable) return list;
+  const scrollByPage = (direction) => listRef.current?.scrollBy({ left: direction * listRef.current.clientWidth * 0.7, behavior: "smooth" });
+  return /* @__PURE__ */ jsxs("div", { className: "relative", "data-slot": "tabs-scroll", children: [
+    edges.start && /* @__PURE__ */ jsx("div", { className: tabsScrollEdgeVariants({ side: "start" }), children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        "aria-label": scrollLabels?.previous ?? "Scroll tabs back",
+        "data-slot": "tabs-scroll-previous",
+        className: tabsScrollButtonVariants(),
+        onClick: () => scrollByPage(-1),
+        children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" })
+      }
+    ) }),
+    list,
+    edges.end && /* @__PURE__ */ jsx("div", { className: tabsScrollEdgeVariants({ side: "end" }), children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        "aria-label": scrollLabels?.next ?? "Scroll tabs forward",
+        "data-slot": "tabs-scroll-next",
+        className: tabsScrollButtonVariants(),
+        onClick: () => scrollByPage(1),
+        children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })
+      }
+    ) })
+  ] });
 });
 TabsList.displayName = TabsPrimitive.List.displayName;
 const TabsTrigger = React.forwardRef(

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

@@ -1,12 +1,20 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const tabsListVariants: (props?: ({
     variant?: "underline" | "outline" | "pills" | null | undefined;
-    size?: "default" | "sm" | "lg" | "md" | null | undefined;
+    size?: "sm" | "md" | "lg" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const tabsTriggerVariants: (props?: ({
     variant?: "underline" | "outline" | "pills" | null | undefined;
-    size?: "default" | "sm" | "lg" | "md" | null | undefined;
+    size?: "sm" | "md" | "lg" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Round chevron shown at an edge of a `scrollable` TabsList while there is more to scroll. */
+export declare const tabsScrollButtonVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** Holds a scroll button at one edge (the tabs under it are faded out with a mask). */
+export declare const tabsScrollEdgeVariants: (props?: ({
+    side?: "start" | "end" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Width of the faded strip under a scroll button. */
+export declare const TABS_SCROLL_FADE = "56px";
 export declare const tabsContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export type TabsListVariants = VariantProps<typeof tabsListVariants>;
 export type TabsTriggerVariants = VariantProps<typeof tabsTriggerVariants>;

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,gBAAgB;;;8EAwB5B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;8EAwB/B,CAAC;AAEF,eAAO,MAAM,mBAAmB,oFAE/B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AACrE,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,gBAAgB;;;8EAwB5B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;8EAwB/B,CAAC;AAEF,+FAA+F;AAC/F,eAAO,MAAM,wBAAwB,oFAEpC,CAAC;AAEF,uFAAuF;AACvF,eAAO,MAAM,sBAAsB;;8EAUlC,CAAC;AAEF,sDAAsD;AACtD,eAAO,MAAM,gBAAgB,SAAS,CAAC;AAEvC,eAAO,MAAM,mBAAmB,oFAE/B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AACrE,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dist/components/Tabs/Tabs.styles.js

@@ -6,7 +6,7 @@ const tabsListVariants = cva(
     variants: {
       variant: {
         pills: "rounded-md bg-grey-100 dark:bg-grey-800 p-1 text-muted-foreground",
-        underline: "border-b border-grey-200 dark:border-grey-700 bg-transparent p-0 gap-6 w-full justify-start",
+        underline: "border-b border-grey-200 dark:border-grey-700 bg-transparent p-0 gap-1 w-full justify-start",
         outline: "rounded-md border border-grey-200 dark:border-grey-700 bg-transparent p-1 gap-1"
       },
       size: {
@@ -44,8 +44,23 @@ const tabsTriggerVariants = cva(
     }
   }
 );
+const tabsScrollButtonVariants = cva(
+  "pointer-events-auto flex size-8 shrink-0 items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm transition-colors hover:bg-accent [&_svg]:size-4"
+);
+const tabsScrollEdgeVariants = cva(
+  "pointer-events-none absolute inset-y-0 z-10 flex items-center",
+  {
+    variants: {
+      side: {
+        start: "start-0",
+        end: "end-0"
+      }
+    }
+  }
+);
+const TABS_SCROLL_FADE = "56px";
 const tabsContentVariants = cva(
   "mt-3 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary font-sans text-foreground data-[state=active]:animate-tab-slide"
 );
 
-export { tabsContentVariants, tabsListVariants, tabsTriggerVariants };
+export { TABS_SCROLL_FADE, tabsContentVariants, tabsListVariants, tabsScrollButtonVariants, tabsScrollEdgeVariants, tabsTriggerVariants };

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

@@ -19,6 +19,19 @@ export interface TabsProps extends TabsPrimitive.TabsProps {
     motion?: MotionProp;
 }
 export interface TabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>, TabsListVariants {
+    /**
+     * Let the tabs scroll sideways when they don't fit (e.g. on phones). Round
+     * chevron buttons appear at the edges while there is more to scroll.
+     * @default false
+     */
+    scrollable?: boolean;
+    /** Accessible names of the scroll buttons. */
+    scrollLabels?: {
+        previous?: string;
+        next?: string;
+    };
+    /** Content for the selected tab is loading (e.g. after a URL change): dims the tabs and sets aria-busy. */
+    loading?: boolean;
 }
 export interface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, TabsTriggerVariants {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.types.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,aAAa,MAAM,sBAAsB,CAAC;AAC3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,SAAU,SAAQ,aAAa,CAAC,SAAS;IACxD;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,SAAS,CAAC;IAC5C;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,EAC/D,gBAAgB;CAAG;AAEvB,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,EAClE,mBAAmB;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC;IACpE;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB"}
+{"version":3,"file":"Tabs.types.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,aAAa,MAAM,sBAAsB,CAAC;AAC3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,SAAU,SAAQ,aAAa,CAAC,SAAS;IACxD;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,SAAS,CAAC;IAC5C;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,EAC/D,gBAAgB;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8CAA8C;IAC9C,YAAY,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,2GAA2G;IAC3G,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,EAClE,mBAAmB;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC;IACpE;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB"}

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

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,eAAO,MAAM,IAAI,+EAyChB,CAAC"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,eAAO,MAAM,IAAI,+EA6ChB,CAAC"}