@timmbr/ui 1.4.2 → 1.6.0

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.js

@@ -51,13 +51,13 @@ const Switch = React.forwardRef(
               {
                 htmlFor: id,
                 className: cn(
-                  "text-sm font-medium text-foreground cursor-pointer select-none leading-snug",
+                  "text-body-2 font-medium text-foreground cursor-pointer select-none leading-snug",
                   disabled && "cursor-not-allowed"
                 ),
                 children: label
               }
             ),
-            description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted leading-normal mt-0.5", children: description })
+            description && /* @__PURE__ */ jsx("p", { className: "text-body-3 text-muted leading-normal mt-0.5", children: description })
           ] }),
           /* @__PURE__ */ jsx("div", { className: "shrink-0 pt-0.5", children: switchElement })
         ]

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/Switch/Switch.styles.js

@@ -17,7 +17,7 @@ const switchVariants = cva(
   }
 );
 const switchThumbVariants = cva(
-  "pointer-events-none block rounded-full bg-white shadow-md ring-0 transition-transform data-[state=unchecked]:translate-x-0",
+  "pointer-events-none block rounded-full bg-grey-50 shadow-md ring-0 transition-transform data-[state=unchecked]:translate-x-0",
   {
     variants: {
       size: {

package/dist/components/Table/Table.js

@@ -94,7 +94,7 @@ const TableCaption = React.forwardRef(
     {
       ref,
       "data-slot": "table-caption",
-      className: cn("mt-4 text-xs text-muted-foreground", className),
+      className: cn("mt-4 text-body-3 text-muted-foreground", className),
       ...props
     }
   )

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/Table/Table.styles.js

@@ -15,7 +15,7 @@ const tableContainerVariants = cva(
   }
 );
 const tableVariants = cva(
-  "w-full caption-bottom text-sm border-collapse font-sans text-left",
+  "w-full caption-bottom text-body-2 border-collapse text-left",
   {
     variants: {
       variant: {
@@ -24,8 +24,8 @@ const tableVariants = cva(
         bordered: "border-collapse border border-grey-200 dark:border-grey-800"
       },
       size: {
-        sm: "[&_td]:py-2 [&_td]:px-3 [&_th]:py-2 [&_th]:px-3 text-xs",
-        default: "[&_td]:py-3.5 [&_td]:px-4 [&_th]:py-3 [&_th]:px-4 text-sm"
+        sm: "[&_td]:py-2 [&_td]:px-3 [&_th]:py-2 [&_th]:px-3 text-body-3",
+        default: "[&_td]:py-3.5 [&_td]:px-4 [&_th]:py-3 [&_th]:px-4 text-body-2"
       }
     },
     defaultVariants: {
@@ -38,7 +38,7 @@ const tableRowVariants = cva(
   "border-b border-grey-200 dark:border-grey-800 transition-colors data-[state=selected]:bg-primary/5 hover:bg-grey-50/80 dark:hover:bg-grey-900/60"
 );
 const tableHeadVariants = cva(
-  "h-10 text-left align-middle font-semibold text-muted-foreground text-xs uppercase tracking-wider select-none bg-grey-100/50 dark:bg-grey-900/30 [&:has([role=checkbox])]:pr-0"
+  "h-10 text-left align-middle font-semibold text-muted-foreground text-body-3 uppercase tracking-wider select-none bg-grey-100/50 dark:bg-grey-900/30 [&:has([role=checkbox])]:pr-0"
 );
 const tableCellVariants = cva(
   "align-middle [&:has([role=checkbox])]:pr-0"
@@ -47,7 +47,7 @@ const tableFooterVariants = cva(
   "border-t border-grey-200 dark:border-grey-800 bg-grey-50/50 dark:bg-grey-900/50 font-medium [&>tr]:last:border-b-0"
 );
 const tablePaginationVariants = cva(
-  "flex flex-col sm:flex-row items-center justify-between gap-3 px-4 py-3 border-t border-grey-200 dark:border-grey-800 text-xs text-grey-600 dark:text-grey-400 font-sans"
+  "flex flex-col sm:flex-row items-center justify-between gap-3 px-4 py-3 border-t border-grey-200 dark:border-grey-800 text-body-3 text-grey-600 dark:text-grey-400"
 );
 
 export { tableCellVariants, tableContainerVariants, tableFooterVariants, tableHeadVariants, tablePaginationVariants, tableRowVariants, tableVariants };

package/dist/components/Table/TablePagination.js

@@ -56,7 +56,7 @@ const TablePagination = React.forwardRef(
                   "aria-label": "Rows per page",
                   value: pageSize,
                   onChange: (e) => onPageSizeChange(Number(e.target.value)),
-                  className: "h-7 rounded-[2px] border border-grey-200 dark:border-grey-700 bg-white dark:bg-grey-900 px-2 py-0 text-xs font-medium text-foreground focus:outline-none focus:ring-1 focus:ring-primary",
+                  className: "h-7 rounded-[2px] border border-grey-200 dark:border-grey-700 bg-grey-50 dark:bg-grey-900 px-2 py-0 text-body-3 font-medium text-foreground focus:outline-none focus:ring-1 focus:ring-primary",
                   children: pageSizeOptions.map((opt) => /* @__PURE__ */ jsx("option", { value: opt, children: opt }, opt))
                 }
               )
@@ -70,14 +70,14 @@ const TablePagination = React.forwardRef(
                 "aria-label": "Previous page",
                 disabled: page <= 1,
                 onClick: () => onPageChange?.(page - 1),
-                className: "inline-flex items-center gap-1 h-8 px-2.5 rounded-[2px] border border-grey-200 dark:border-grey-700 bg-white dark:bg-grey-800 text-xs font-medium text-foreground hover:bg-grey-100 dark:hover:bg-grey-700 disabled:opacity-40 disabled:pointer-events-none transition-colors cursor-pointer",
+                className: "inline-flex items-center gap-1 h-8 px-2.5 rounded-[2px] border border-grey-200 dark:border-grey-700 bg-grey-50 dark:bg-grey-800 text-body-3 font-medium text-foreground hover:bg-grey-100 dark:hover:bg-grey-700 disabled:opacity-40 disabled:pointer-events-none transition-colors cursor-pointer",
                 children: [
                   /* @__PURE__ */ jsx(ChevronLeft, { className: "size-3.5" }),
                   /* @__PURE__ */ jsx("span", { children: "Previous" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs("span", { className: "px-2 text-xs font-medium text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs("span", { className: "px-2 text-body-3 font-medium text-muted-foreground", children: [
               page,
               " / ",
               computedTotalPages
@@ -89,7 +89,7 @@ const TablePagination = React.forwardRef(
                 "aria-label": "Next page",
                 disabled: page >= computedTotalPages,
                 onClick: () => onPageChange?.(page + 1),
-                className: "inline-flex items-center gap-1 h-8 px-2.5 rounded-[2px] border border-grey-200 dark:border-grey-700 bg-white dark:bg-grey-800 text-xs font-medium text-foreground hover:bg-grey-100 dark:hover:bg-grey-700 disabled:opacity-40 disabled:pointer-events-none transition-colors cursor-pointer",
+                className: "inline-flex items-center gap-1 h-8 px-2.5 rounded-[2px] border border-grey-200 dark:border-grey-700 bg-grey-50 dark:bg-grey-800 text-body-3 font-medium text-foreground hover:bg-grey-100 dark:hover:bg-grey-700 disabled:opacity-40 disabled:pointer-events-none transition-colors cursor-pointer",
                 children: [
                   /* @__PURE__ */ jsx("span", { children: "Next" }),
                   /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5" })

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(
@@ -122,11 +189,11 @@ const TabsTrigger = React.forwardRef(
           tabsTriggerVariants({ variant, size }),
           !shouldAnimate && "transition-none active:scale-100",
           // Static active styles when animation is disabled
-          !shouldAnimate && isActive && variant === "pills" && "bg-primary text-white shadow-sm",
+          !shouldAnimate && isActive && variant === "pills" && "bg-primary text-grey-50 shadow-sm",
           !shouldAnimate && isActive && variant === "underline" && "border-b-2 border-primary text-primary font-semibold",
           !shouldAnimate && isActive && variant === "outline" && "bg-grey-200 dark:bg-grey-700 text-foreground",
           // Text styling when active with animation
-          shouldAnimate && isActive && variant === "pills" && "text-white",
+          shouldAnimate && isActive && variant === "pills" && "text-grey-50",
           shouldAnimate && isActive && variant === "underline" && "text-primary font-semibold",
           shouldAnimate && isActive && variant === "outline" && "text-foreground",
           motionClass,

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,14 +6,14 @@ 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: {
-        sm: "h-8 text-xs",
-        default: "h-10 text-sm",
-        md: "h-10 text-sm",
-        lg: "h-12 text-base"
+        sm: "h-8 text-body-3",
+        default: "h-10 text-body-2",
+        md: "h-10 text-body-2",
+        lg: "h-12 text-body-1"
       }
     },
     defaultVariants: {
@@ -32,10 +32,10 @@ const tabsTriggerVariants = cva(
         outline: "rounded-sm px-3 py-1.5 data-[state=inactive]:text-muted-foreground hover:text-foreground"
       },
       size: {
-        sm: "px-2.5 py-1 text-xs",
-        default: "px-3 py-1.5 text-sm",
-        md: "px-3 py-1.5 text-sm",
-        lg: "px-4 py-2 text-base"
+        sm: "px-2.5 py-1 text-body-3",
+        default: "px-3 py-1.5 text-body-2",
+        md: "px-3 py-1.5 text-body-2",
+        lg: "px-4 py-2 text-body-1"
       }
     },
     defaultVariants: {
@@ -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"}

package/dist/components/Text/Text.js

@@ -15,6 +15,8 @@ const Text = React.forwardRef(
     font = "sans",
     weight,
     italic,
+    tabular,
+    truncate,
     asChild = false,
     children,
     ...props
@@ -34,6 +36,8 @@ const Text = React.forwardRef(
             font,
             weight,
             italic,
+            tabular,
+            truncate,
             className
           })
         ),

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

@@ -1,9 +1,11 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const textVariants: (props?: ({
-    variant?: "caption" | "body-1" | "body-2" | "body-2-medium" | "body-2-semibold" | "body-2-light" | "body-3" | "body-3-light" | "subtitle-1" | "subtitle-2" | null | undefined;
-    foreground?: "default" | "destructive" | "inherit" | "white" | "subtle" | "primary" | "secondary" | "muted" | null | undefined;
+    variant?: "caption" | "overline" | "body-1" | "body-2" | "body-2-medium" | "body-2-semibold" | "body-2-light" | "body-3" | "body-3-light" | "subtitle-1" | "subtitle-2" | null | undefined;
+    foreground?: "default" | "destructive" | "success" | "warning" | "inherit" | "white" | "subtle" | "primary" | "secondary" | "muted" | null | undefined;
     font?: "title" | "display" | "sans" | null | undefined;
     weight?: "bold" | "normal" | "medium" | "light" | "semibold" | null | undefined;
+    tabular?: boolean | null | undefined;
+    truncate?: boolean | null | undefined;
     italic?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type TextVariants = VariantProps<typeof textVariants>;

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

@@ -1 +1 @@
-{"version":3,"file":"Text.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,YAAY;;;;;;8EA8CvB,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC"}
+{"version":3,"file":"Text.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,YAAY;;;;;;;;8EA8DvB,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC"}