@timmbr/ui 1.4.2 → 1.5.0

package/dist/components/SideBarNavigation/subcomponents/SidebarProfile.js

@@ -15,7 +15,7 @@ const SidebarProfile = ({
   const { shouldAnimate } = useSidebarContext();
   if (!profile) return null;
   const fallbackInitials = profile.fallback || profile.name.split(" ").map((part) => part[0]).join("").slice(0, 2).toUpperCase();
-  const avatarElement = profile.avatar ? /* @__PURE__ */ jsx("div", { className: "size-8 rounded-full overflow-hidden shrink-0 flex items-center justify-center", children: profile.avatar }) : /* @__PURE__ */ jsx("div", { className: "size-8 rounded-full bg-grey-200 border border-grey-300 flex items-center justify-center shrink-0 font-medium text-xs text-grey-700", children: fallbackInitials });
+  const avatarElement = profile.avatar ? /* @__PURE__ */ jsx("div", { className: "size-8 rounded-full overflow-hidden shrink-0 flex items-center justify-center", children: profile.avatar }) : /* @__PURE__ */ jsx("div", { className: "size-8 rounded-full bg-grey-200 border border-grey-300 flex items-center justify-center shrink-0 font-medium text-body-3 text-grey-700", children: fallbackInitials });
   const hasItems = Boolean(profile.items && profile.items.length > 0);
   const menuContent = hasItems && /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
     DropdownMenuPrimitive.Content,
@@ -24,13 +24,13 @@ const SidebarProfile = ({
       align: collapsed ? "end" : "center",
       sideOffset: collapsed ? 12 : 8,
       className: cn(
-        "z-50 min-w-56 rounded-lg bg-white p-1.5 text-grey-900 shadow-md border border-grey-200 outline-none animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        "z-50 min-w-56 rounded-lg bg-grey-50 p-1.5 text-grey-900 shadow-md border border-grey-200 outline-none animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
         !shouldAnimate && "animate-none transition-none"
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "px-2.5 py-2 border-b border-grey-100 mb-1", children: [
-          /* @__PURE__ */ jsx("p", { className: "font-semibold text-xs text-grey-900 truncate", children: profile.name }),
-          profile.email && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-grey-500 truncate mt-0.5", children: profile.email })
+          /* @__PURE__ */ jsx("p", { className: "font-semibold text-body-3 text-grey-900 truncate", children: profile.name }),
+          profile.email && /* @__PURE__ */ jsx("p", { className: "text-caption-lg text-grey-500 truncate mt-0.5", children: profile.email })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: profile.items?.map((item) => {
           const itemContent = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -38,8 +38,8 @@ const SidebarProfile = ({
             /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label })
           ] });
           const itemClass = cn(
-            "flex items-center gap-2.5 w-full rounded-md px-2.5 py-1.5 text-xs transition-colors duration-150 select-none cursor-pointer outline-none focus-visible:bg-grey-100",
-            item.destructive ? "text-red-600 hover:bg-red-50 hover:text-red-700" : "text-grey-700 hover:bg-grey-100 hover:text-grey-900",
+            "flex items-center gap-2.5 w-full rounded-md px-2.5 py-1.5 text-body-3 transition-colors duration-150 select-none cursor-pointer outline-none focus-visible:bg-grey-100",
+            item.destructive ? "text-destructive hover:bg-destructive/10 hover:text-destructive/80" : "text-grey-700 hover:bg-grey-100 hover:text-grey-900",
             item.disabled && "opacity-50 pointer-events-none"
           );
           if (item.href) {
@@ -98,8 +98,8 @@ const SidebarProfile = ({
             className: "flex items-center min-w-0 flex-1 overflow-hidden",
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0 flex-1 overflow-hidden", children: [
-                /* @__PURE__ */ jsx("span", { className: "font-semibold text-xs text-grey-900 truncate", children: profile.name }),
-                profile.email && /* @__PURE__ */ jsx("span", { className: "text-[11px] text-grey-500 truncate block", children: profile.email })
+                /* @__PURE__ */ jsx("span", { className: "font-semibold text-body-3 text-grey-900 truncate", children: profile.name }),
+                profile.email && /* @__PURE__ */ jsx("span", { className: "text-caption-lg text-grey-500 truncate block", children: profile.email })
               ] }),
               hasItems && /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 text-grey-400 shrink-0 ml-auto" })
             ]
@@ -109,7 +109,7 @@ const SidebarProfile = ({
       ]
     }
   );
-  return /* @__PURE__ */ jsx("div", { className: "p-3 border-t border-grey-200 bg-white shrink-0 overflow-hidden", children: hasItems ? /* @__PURE__ */ jsxs(DropdownMenuPrimitive.Root, { children: [
+  return /* @__PURE__ */ jsx("div", { className: "p-3 border-t border-grey-200 bg-grey-50 shrink-0 overflow-hidden", children: hasItems ? /* @__PURE__ */ jsxs(DropdownMenuPrimitive.Root, { children: [
     /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { asChild: true, children: expandedTrigger }),
     menuContent
   ] }) : expandedTrigger });

package/dist/components/SideBarNavigation/subcomponents/SidebarSubItem.js

@@ -17,8 +17,8 @@ const SidebarSubItem = ({
       "span",
       {
         className: cn(
-          "ml-auto inline-flex items-center justify-center rounded-full px-1.5 py-0.2 text-[10px] font-semibold",
-          item.badgeVariant === "destructive" ? "bg-red-500 text-white" : "bg-grey-200 text-grey-800"
+          "ml-auto inline-flex items-center justify-center rounded-full px-1.5 py-0.2 text-caption font-semibold",
+          item.badgeVariant === "destructive" ? "bg-destructive text-grey-50" : "bg-grey-200 text-grey-800"
         ),
         children: item.badge
       }

package/dist/components/Skeleton/Skeleton.styles.js

@@ -12,7 +12,7 @@ const skeletonVariants = cva(
       },
       animation: {
         pulse: "animate-pulse",
-        wave: "relative overflow-hidden before:absolute before:inset-0 before:content-[''] before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-white/60 dark:before:via-white/15 before:to-transparent",
+        wave: "relative overflow-hidden before:absolute before:inset-0 before:content-[''] before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-grey-50/60 dark:before:via-grey-50/15 before:to-transparent",
         none: ""
       }
     },

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,eAAO,MAAM,OAAO,sFAmCnB,CAAC"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,eAAO,MAAM,OAAO,sFAqCnB,CAAC"}

package/dist/components/Spinner/Spinner.js

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/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.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.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.js

@@ -122,11 +122,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.js

@@ -10,10 +10,10 @@ const tabsListVariants = cva(
         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: {

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;;;;;;8EAgDvB,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC"}

package/dist/components/Text/Text.styles.js

@@ -1,18 +1,19 @@
 import { cva } from 'class-variance-authority';
 
-const textVariants = cva("font-sans transition-colors leading-[1.3]", {
+const textVariants = cva("transition-colors", {
   variants: {
     variant: {
-      "body-1": "text-[16px] font-normal",
-      "body-2": "text-[14px] font-normal",
-      "body-2-medium": "text-[14px] font-medium",
-      "body-2-semibold": "text-[14px] font-semibold",
-      "body-2-light": "text-[14px] font-light",
-      "body-3": "text-[12px] font-normal",
-      "body-3-light": "text-[12px] font-light",
-      "subtitle-1": "text-[18px] font-semibold",
-      "subtitle-2": "text-[18px] font-semibold",
-      caption: "text-[11px] font-normal tracking-wide"
+      // Each variant is the matching @timmbr/theme text style (size, line-height, weight, font).
+      "body-1": "text-body-1",
+      "body-2": "text-body-2",
+      "body-2-medium": "text-body-2-medium",
+      "body-2-semibold": "text-body-2-semibold",
+      "body-2-light": "text-body-2-light",
+      "body-3": "text-body-3",
+      "body-3-light": "text-body-3-light",
+      "subtitle-1": "text-subtitle-1",
+      "subtitle-2": "text-subtitle-2",
+      caption: "text-caption-lg tracking-wide"
     },
     foreground: {
       default: "text-foreground",
@@ -21,13 +22,14 @@ const textVariants = cva("font-sans transition-colors leading-[1.3]", {
       primary: "text-primary",
       secondary: "text-secondary-foreground",
       destructive: "text-destructive",
-      white: "text-white",
+      white: "text-grey-50",
       inherit: "text-inherit"
     },
     font: {
-      sans: "font-sans",
-      display: "font-display",
-      title: "font-title"
+      // Text styles already use the sans font; other families override it.
+      sans: "",
+      display: "font-display!",
+      title: "font-title!"
     },
     weight: {
       light: "font-light",

package/dist/components/Textarea/Textarea.js

@@ -84,7 +84,7 @@ const Textarea = React.forwardRef(
             "label",
             {
               htmlFor: id,
-              className: "text-xs font-semibold text-foreground tracking-wide select-none text-left",
+              className: "text-body-3 font-semibold text-foreground tracking-wide select-none text-left",
               children: label
             }
           ),
@@ -95,7 +95,7 @@ const Textarea = React.forwardRef(
                 htmlFor: id,
                 className: cn(
                   "absolute pointer-events-none transition-all duration-200 select-none z-10 truncate max-w-[calc(100%-24px)]",
-                  isFloatingActive ? "-top-2.5 left-2.5 px-1 bg-white dark:bg-grey-900 text-[11px] font-semibold leading-none rounded-xs" : "top-3 left-3 text-sm text-muted-foreground leading-none"
+                  isFloatingActive ? "-top-2.5 left-2.5 px-1 bg-grey-50 dark:bg-grey-900 text-caption-lg font-semibold leading-none rounded-xs" : "top-3 left-3 text-body-2 text-muted-foreground leading-none"
                 ),
                 style: {
                   color: isFloatingActive ? isError ? "var(--color-destructive)" : "var(--color-primary)" : void 0
@@ -145,7 +145,7 @@ const Textarea = React.forwardRef(
               {
                 id: `${id}-desc`,
                 className: cn(
-                  "text-xs mt-1 flex items-center gap-1.5 flex-1",
+                  "text-body-3 mt-1 flex items-center gap-1.5 flex-1",
                   isError ? "text-destructive font-medium" : "text-muted"
                 ),
                 children: [
@@ -154,7 +154,7 @@ const Textarea = React.forwardRef(
                 ]
               }
             ) : /* @__PURE__ */ jsx("span", {}),
-            showCount && maxLength && /* @__PURE__ */ jsxs("span", { className: "text-[11px] font-mono text-muted shrink-0 select-none", children: [
+            showCount && maxLength && /* @__PURE__ */ jsxs("span", { className: "text-caption-lg tabular-nums text-muted shrink-0 select-none", children: [
               currentValue.length,
               "/",
               maxLength

package/dist/components/Textarea/Textarea.styles.js

@@ -5,15 +5,15 @@ const textareaVariants = cva(
   {
     variants: {
       variant: {
-        outline: "border-grey-300 dark:border-grey-700 bg-white dark:bg-grey-900 focus:border-primary focus:ring-1 focus:ring-primary",
-        filled: "border-transparent bg-grey-100 dark:bg-grey-800 focus:bg-white dark:focus:bg-grey-900 focus:border-primary focus:ring-1 focus:ring-primary",
+        outline: "border-grey-300 dark:border-grey-700 bg-grey-50 dark:bg-grey-900 focus:border-primary focus:ring-1 focus:ring-primary",
+        filled: "border-transparent bg-grey-100 dark:bg-grey-800 focus:bg-grey-50 dark:focus:bg-grey-900 focus:border-primary focus:ring-1 focus:ring-primary",
         subtle: "border-grey-200 dark:border-grey-800 bg-grey-50 dark:bg-grey-900/50 focus:border-primary focus:ring-1 focus:ring-primary"
       },
       size: {
-        sm: "p-2 text-xs min-h-[72px]",
-        default: "p-3 text-sm min-h-[96px]",
-        md: "p-3 text-sm min-h-[96px]",
-        lg: "p-4 text-base min-h-[120px]"
+        sm: "p-2 text-body-3 min-h-[72px]",
+        default: "p-3 text-body-2 min-h-[96px]",
+        md: "p-3 text-body-2 min-h-[96px]",
+        lg: "p-4 text-body-1 min-h-[120px]"
       },
       resize: {
         none: "resize-none",

package/dist/components/Toast/Toast.js

@@ -70,7 +70,7 @@ const ToastAction = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
     ref,
     "data-slot": "toast-action",
     className: cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-[2px] border bg-transparent px-3 text-xs font-semibold ring-offset-background transition-colors hover:bg-grey-100 dark:hover:bg-grey-800 focus:outline-none focus:ring-2 focus:ring-primary disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-[2px] border bg-transparent px-3 text-body-3 font-semibold ring-offset-background transition-colors hover:bg-grey-100 dark:hover:bg-grey-800 focus:outline-none focus:ring-2 focus:ring-primary disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
       className
     ),
     ...props
@@ -97,7 +97,7 @@ const ToastTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE
   {
     ref,
     "data-slot": "toast-title",
-    className: cn("text-sm font-semibold leading-none", className),
+    className: cn("text-body-2 font-semibold leading-none", className),
     ...props
   }
 ));
@@ -107,7 +107,7 @@ const ToastDescription = React.forwardRef(({ className, ...props }, ref) => /* @
   {
     ref,
     "data-slot": "toast-description",
-    className: cn("text-xs text-muted-foreground mt-1 leading-relaxed", className),
+    className: cn("text-body-3 text-muted-foreground mt-1 leading-relaxed", className),
     ...props
   }
 ));

package/dist/components/Toast/Toast.styles.js

@@ -5,11 +5,11 @@ const toastVariants = cva(
   {
     variants: {
       variant: {
-        default: "border-grey-200 dark:border-grey-800 bg-white dark:bg-grey-900 text-foreground",
-        destructive: "destructive group border-destructive bg-destructive text-white",
-        success: "border-success bg-white dark:bg-grey-900 text-foreground border-l-4 border-l-success",
-        warning: "border-warning bg-white dark:bg-grey-900 text-foreground border-l-4 border-l-warning",
-        info: "border-info bg-white dark:bg-grey-900 text-foreground border-l-4 border-l-info"
+        default: "border-grey-200 dark:border-grey-800 bg-grey-50 dark:bg-grey-900 text-foreground",
+        destructive: "destructive group border-destructive bg-destructive text-grey-50",
+        success: "border-success bg-grey-50 dark:bg-grey-900 text-foreground border-l-4 border-l-success",
+        warning: "border-warning bg-grey-50 dark:bg-grey-900 text-foreground border-l-4 border-l-warning",
+        info: "border-info bg-grey-50 dark:bg-grey-900 text-foreground border-l-4 border-l-info"
       }
     },
     defaultVariants: {

package/dist/components/Toast/ToastContainer.js

@@ -82,7 +82,7 @@ const ToastContainer = ({ config }) => {
               /* @__PURE__ */ jsx(
                 Icon,
                 {
-                  className: `size-4.5 shrink-0 mt-0.5 ${isDestructive ? "text-white" : "text-current opacity-90"}`
+                  className: `size-4.5 shrink-0 mt-0.5 ${isDestructive ? "text-grey-50" : "text-current opacity-90"}`
                 }
               ),
               /* @__PURE__ */ jsxs(Stack, { gap: "2xs", className: "flex-1 min-w-0", children: [

package/dist/components/Tooltip/Tooltip.styles.js

@@ -1,7 +1,7 @@
 import { cva } from 'class-variance-authority';
 
 const tooltipContentVariants = cva(
-  "z-50 overflow-hidden rounded-md bg-grey-900 dark:bg-grey-100 px-3 py-1.5 text-xs text-white dark:text-grey-900 shadow-md font-sans transition-all duration-150 data-[state=delayed-open]:animate-scale-in data-[state=closed]:animate-scale-out"
+  "z-50 overflow-hidden rounded-md bg-grey-900 dark:bg-grey-100 px-3 py-1.5 text-body-3 text-grey-50 dark:text-grey-900 shadow-md transition-all duration-150 data-[state=delayed-open]:animate-scale-in data-[state=closed]:animate-scale-out"
 );
 
 export { tooltipContentVariants };

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export * from './components/RangeSlider';
 export * from './components/Label';
 export * from './components/FormField';
 export * from './components/ImageUpload';
+export * from './components/OtpInput';
 export * from './components/AlertDialog';
 export * from './components/Dialog';
 export * from './components/Drawer';
@@ -26,6 +27,7 @@ export * from './components/Tabs';
 export * from './components/SideBarNavigation';
 export * from './components/NavHeader';
 export * from './components/NavFooter';
+export * from './components/AuthModal';
 export * from './components/Button';
 export * from './components/LinkButton';
 export * from './components/Accordion';