gridsmith-ui 0.3.2 → 0.3.3

package/README.md

@@ -1,6 +1,6 @@
 # gridsmith-ui
 
-77 React components with a CSS custom property theming engine.
+82 React components with a CSS custom property theming engine.
 
 ## Installation
 

package/dist/index.js

@@ -82103,9 +82103,9 @@ function Card({ variant = "default", loading = false, selected, selectable, onSe
       children: [
         selected && !loading && /* @__PURE__ */ jsx("div", { className: "absolute top-ds-3 right-ds-3 w-5 h-5 rounded-[var(--ds-radius-full)] bg-[var(--ds-accent-primary)] flex items-center justify-center", children: /* @__PURE__ */ jsx(Icon, { name: "check", size: 12, className: "text-[var(--ds-text-on-primary)]" }) }),
         loading ? /* @__PURE__ */ jsxs("div", { className: "space-y-ds-3", children: [
-          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/3" }),
-          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-full" }),
-          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-2/3" })
+          /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-4 w-1/3" }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-3 w-full" }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-3 w-2/3" })
         ] }) : children
       ]
     }
@@ -82124,7 +82124,7 @@ function CardTitle({ className, children, ...props }) {
   return /* @__PURE__ */ jsx(
     "h3",
     {
-      className: cn("font-[family-name:var(--ds-font-display)] text-xl font-[var(--ds-weight-heading)] leading-tight tracking-tight text-[var(--ds-text-primary)] truncate", className),
+      className: cn("font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] truncate", className),
       ...props,
       children
     }
@@ -82154,7 +82154,7 @@ function StatsCard({ value, label, trend, icon, layout = "card", interactive, on
     {
       "data-card": "",
       className: cn(
-        "flex flex-col p-ds-5",
+        "flex flex-col p-ds-5 min-w-0",
         "bg-[var(--ds-bg-surface)] rounded-[var(--ds-radius-md)]",
         "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
         isInteractive ? [
@@ -82179,8 +82179,8 @@ function StatsCard({ value, label, trend, icon, layout = "card", interactive, on
         }
       } : void 0,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-ds-2", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--ds-text-muted)] uppercase tracking-wider", children: label }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-ds-2 min-w-0", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--ds-text-muted)] uppercase tracking-wider truncate min-w-0", title: label, children: label }),
           icon && /* @__PURE__ */ jsx("div", { className: "shrink-0 flex items-center justify-center w-8 h-8 rounded-[var(--ds-radius-sm)] bg-[var(--ds-bg-muted)]", children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 16, className: "text-[var(--ds-text-muted)]" }) })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-ds-2 mt-ds-2 flex-wrap", children: [
@@ -84137,50 +84137,50 @@ var dotVariant = {
   warning: "bg-[var(--ds-status-warning)] shadow-[0_0_0_3px_var(--ds-status-warning)]/20",
   error: "bg-[var(--ds-status-error)] shadow-[0_0_0_3px_var(--ds-status-error)]/20"
 };
-function Timeline({ items, orientation = "vertical", className, ref }) {
-  if (orientation === "horizontal") {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-start", className), children: items.map((item, i) => {
-      const isFirst = i === 0;
-      const isLast = i === items.length - 1;
-      return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center min-w-[100px]", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full", children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "flex-1 h-[2px] transition-colors",
-                isFirst ? "bg-transparent" : "bg-[var(--ds-border-subtle)]"
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "shrink-0 w-3 h-3 rounded-[var(--ds-radius-full)]",
-                dotVariant[item.variant ?? "default"]
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "flex-1 h-[2px] transition-colors",
-                isLast ? "bg-transparent" : "bg-[var(--ds-border-subtle)]"
-              )
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "text-center mt-ds-2", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: item.title }),
-          item.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--ds-text-muted)] mt-ds-0.5", children: item.description }),
-          item.timestamp && /* @__PURE__ */ jsx("p", { className: "text-2xs text-[var(--ds-text-muted)] mt-ds-0.5 tabular-nums", children: item.timestamp })
-        ] })
-      ] }, i);
-    }) });
-  }
-  return /* @__PURE__ */ jsx("div", { ref, className: cn("relative", className), children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-ds-4", children: [
+function TimelineHorizontal({ items, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-start", className), children: items.map((item, i) => {
+    const isFirst = i === 0;
+    const isLast = i === items.length - 1;
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center min-w-[100px]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex-1 h-[2px] transition-colors",
+              isFirst ? "bg-transparent" : "bg-[var(--ds-border-subtle)]"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "shrink-0 w-3 h-3 rounded-[var(--ds-radius-full)]",
+              dotVariant[item.variant ?? "default"]
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex-1 h-[2px] transition-colors",
+              isLast ? "bg-transparent" : "bg-[var(--ds-border-subtle)]"
+            )
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "text-center mt-ds-2 px-ds-3", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: item.title }),
+        item.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--ds-text-muted)] mt-ds-0.5", children: item.description }),
+        item.timestamp && /* @__PURE__ */ jsx("p", { className: "text-2xs text-[var(--ds-text-muted)] mt-ds-0.5 tabular-nums", children: item.timestamp })
+      ] })
+    ] }, i);
+  }) });
+}
+function TimelineVertical({ items, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("relative", className), children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-ds-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
       /* @__PURE__ */ jsx(
         "div",
@@ -84200,6 +84200,18 @@ function Timeline({ items, orientation = "vertical", className, ref }) {
     ] })
   ] }, i)) });
 }
+function Timeline({ items, orientation = "vertical", className, ref }) {
+  if (orientation === "horizontal") {
+    return /* @__PURE__ */ jsx("div", { ref, className, children: /* @__PURE__ */ jsx(TimelineHorizontal, { items }) });
+  }
+  if (orientation === "responsive") {
+    return /* @__PURE__ */ jsxs("div", { ref, className, children: [
+      /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx(TimelineHorizontal, { items }) }),
+      /* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsx(TimelineVertical, { items }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { ref, className, children: /* @__PURE__ */ jsx(TimelineVertical, { items }) });
+}
 function CodeBlock2({
   code,
   language,
@@ -93500,6 +93512,7 @@ function VirtualizedList({
 var StackedList = forwardRef(function StackedList2({
   items,
   divided = true,
+  flush = false,
   className
 }, ref) {
   return /* @__PURE__ */ jsx(
@@ -93515,14 +93528,14 @@ var StackedList = forwardRef(function StackedList2({
         "div",
         {
           className: cn(
-            "flex items-center gap-ds-3",
+            "flex items-center gap-ds-3 py-ds-3",
+            flush ? "px-0" : "px-ds-5",
             item.onClick && [
               "cursor-pointer transition-all duration-[var(--ds-interactive-hover-speed)] ease-[var(--ds-interactive-hover-ease)]",
               "hover:bg-[var(--ds-bg-muted)]",
               "rounded-[var(--ds-radius-md)]"
             ]
           ),
-          style: { padding: "var(--ds-space-3) var(--ds-space-4)" },
           onClick: item.onClick,
           role: item.onClick ? "button" : void 0,
           tabIndex: item.onClick ? 0 : void 0,
@@ -94266,6 +94279,13 @@ function collectInitialExpanded(items, prefix = "") {
 function makeKey(label, parentKey) {
   return parentKey ? `${parentKey}/${label}` : label;
 }
+var FLYOUT_BRIDGE_PX = 12;
+function computeCompactFlyoutPos(anchorEl, itemsLength) {
+  const rect = anchorEl.getBoundingClientRect();
+  const flyoutHeight = itemsLength * 32 + 28;
+  const top = Math.min(rect.top, window.innerHeight - flyoutHeight - 8);
+  return { top: Math.max(8, top), left: rect.right - (FLYOUT_BRIDGE_PX - 4) };
+}
 function CompactFlyout({
   parentLabel,
   items,
@@ -94276,12 +94296,9 @@ function CompactFlyout({
   onMouseEnter,
   onMouseLeave
 }) {
-  const [pos, setPos] = useState({ top: 0, left: 0 });
-  useEffect(() => {
-    const rect = anchorEl.getBoundingClientRect();
-    const flyoutHeight = items.length * 32 + 28;
-    const top = Math.min(rect.top, window.innerHeight - flyoutHeight - 8);
-    setPos({ top: Math.max(8, top), left: rect.right + 4 });
+  const [pos, setPos] = useState(() => computeCompactFlyoutPos(anchorEl, items.length));
+  useLayoutEffect(() => {
+    setPos(computeCompactFlyoutPos(anchorEl, items.length));
   }, [anchorEl, items.length]);
   useEffect(() => {
     function handler(e) {
@@ -94290,44 +94307,47 @@ function CompactFlyout({
     document.addEventListener("keydown", handler);
     return () => document.removeEventListener("keydown", handler);
   }, [onClose]);
-  const content = /* @__PURE__ */ jsxs(
+  const content = /* @__PURE__ */ jsx(
     "div",
     {
-      role: "menu",
       onMouseEnter,
       onMouseLeave,
-      className: cn(
-        "fixed z-50 min-w-[160px] py-ds-1",
-        "bg-[var(--ds-sidebar-bg)] rounded-[var(--ds-radius-md)]",
-        "shadow-[var(--ds-shadow-dropdown)]",
-        "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]"
-      ),
-      style: { top: pos.top, left: pos.left, pointerEvents: "auto" },
-      children: [
-        /* @__PURE__ */ jsx("p", { className: "px-ds-2 pt-ds-1 pb-ds-1.5 text-2xs font-semibold uppercase tracking-wider text-[var(--ds-sidebar-text-muted)]", children: parentLabel }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-col px-ds-1", style: { gap: "var(--ds-space-0\\.5)" }, children: items.map((child, i) => /* @__PURE__ */ jsxs(
-          "a",
-          {
-            href: child.href ?? "#",
-            role: "menuitem",
-            onClick: (e) => {
-              e.preventDefault();
-              onItemClick?.(child, i);
-              onClose();
+      className: "fixed z-50",
+      style: { top: pos.top, left: pos.left, paddingLeft: FLYOUT_BRIDGE_PX, pointerEvents: "auto" },
+      children: /* @__PURE__ */ jsxs("div", {
+        role: "menu",
+        className: cn(
+          "min-w-[160px] py-ds-1",
+          "bg-[var(--ds-sidebar-bg)] rounded-[var(--ds-radius-md)]",
+          "shadow-[var(--ds-shadow-dropdown)]",
+          "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "px-ds-2 pt-ds-1 pb-ds-1.5 text-2xs font-semibold uppercase tracking-wider text-[var(--ds-sidebar-text-muted)]", children: parentLabel }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col px-ds-1", style: { gap: "var(--ds-space-0\\.5)" }, children: items.map((child, i) => /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: child.href ?? "#",
+              role: "menuitem",
+              onClick: (e) => {
+                e.preventDefault();
+                onItemClick?.(child, i);
+                onClose();
+              },
+              className: cn(
+                "flex items-center gap-ds-2 px-ds-2 py-ds-1.5 text-xs rounded-[var(--ds-radius-sm)] transition-colors cursor-pointer",
+                child.active ? "bg-sidebar-accent-subtle text-[var(--ds-sidebar-accent)] font-medium" : "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
+              ),
+              children: [
+                child.icon && /* @__PURE__ */ jsx(Icon, { name: child.icon, size: 14 }),
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: child.label }),
+                child.badge && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: child.badge })
+              ]
             },
-            className: cn(
-              "flex items-center gap-ds-2 px-ds-2 py-ds-1.5 text-xs rounded-[var(--ds-radius-sm)] transition-colors cursor-pointer",
-              child.active ? "bg-sidebar-accent-subtle text-[var(--ds-sidebar-accent)] font-medium" : "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
-            ),
-            children: [
-              child.icon && /* @__PURE__ */ jsx(Icon, { name: child.icon, size: 14 }),
-              /* @__PURE__ */ jsx("span", { className: "truncate", children: child.label }),
-              child.badge && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: child.badge })
-            ]
-          },
-          child.label
-        )) })
-      ]
+            child.label
+          )) })
+        ]
+      })
     }
   );
   return createPortal(content, portalContainer ?? document.body);
@@ -94361,6 +94381,8 @@ function SidebarNav({
     () => new Set(collectInitialExpanded(allItems))
   );
   const [openFlyout, setOpenFlyout] = useState(null);
+  const openFlyoutRef = useRef(null);
+  const flyoutCloseTimer = useRef(null);
   const toggleExpand = useCallback((key2) => {
     setExpandedItems((prev) => {
       const next = new Set(prev);
@@ -94369,7 +94391,31 @@ function SidebarNav({
       return next;
     });
   }, []);
-  const closeFlyout = useCallback(() => setOpenFlyout(null), []);
+  const cancelFlyoutClose = useCallback(() => {
+    if (flyoutCloseTimer.current) {
+      clearTimeout(flyoutCloseTimer.current);
+      flyoutCloseTimer.current = null;
+    }
+  }, []);
+  const closeFlyout = useCallback(() => {
+    cancelFlyoutClose();
+    setOpenFlyout(null);
+    openFlyoutRef.current = null;
+  }, [cancelFlyoutClose]);
+  const openFlyoutFor = useCallback((key2) => {
+    cancelFlyoutClose();
+    setOpenFlyout(key2);
+    openFlyoutRef.current = key2;
+  }, [cancelFlyoutClose]);
+  const scheduleFlyoutClose = useCallback((key2) => {
+    cancelFlyoutClose();
+    flyoutCloseTimer.current = setTimeout(() => {
+      if (openFlyoutRef.current === key2) {
+        setOpenFlyout(null);
+        openFlyoutRef.current = null;
+      }
+    }, 400);
+  }, [cancelFlyoutClose]);
   const isCompact = sidebarType === "compact";
   const isMinimal = sidebarType === "minimal";
   function renderLeaf(item, depth, index) {
@@ -94423,8 +94469,11 @@ function SidebarNav({
         hasChildren,
         childActive,
         isOpen,
-        onOpen: () => setOpenFlyout(key2),
+        flyoutKey: key2,
+        onOpen: openFlyoutFor,
         onClose: closeFlyout,
+        onScheduleClose: scheduleFlyoutClose,
+        onCancelClose: cancelFlyoutClose,
         portalContainer,
         onItemClick,
         mobile,
@@ -94479,7 +94528,8 @@ function SidebarNav({
                   name: "chevron-right",
                   size: 12,
                   className: cn(
-                    "shrink-0 transition-transform text-[var(--ds-sidebar-text-muted)]",
+                    "shrink-0 transition-transform",
+                    item.active || childActive ? "text-[var(--ds-sidebar-accent)]" : "text-[var(--ds-sidebar-text-muted)]",
                     isExpanded && "rotate-90"
                   )
                 }
@@ -94602,8 +94652,11 @@ function CompactNavItem({
   hasChildren,
   childActive,
   isOpen,
+  flyoutKey,
   onOpen,
   onClose,
+  onScheduleClose,
+  onCancelClose,
   portalContainer,
   onItemClick,
   mobile,
@@ -94611,22 +94664,13 @@ function CompactNavItem({
   onToggleExpand
 }) {
   const triggerRef = useRef(null);
-  const closeTimer = useRef(null);
-  const cancelClose = useCallback(() => {
-    if (closeTimer.current) {
-      clearTimeout(closeTimer.current);
-      closeTimer.current = null;
-    }
-  }, []);
-  const scheduleClose = useCallback(() => {
-    cancelClose();
-    closeTimer.current = setTimeout(onClose, 300);
-  }, [onClose, cancelClose]);
   const handleMouseEnter = useCallback(() => {
-    cancelClose();
-    if (hasChildren && !isOpen) onOpen();
-  }, [hasChildren, isOpen, onOpen, cancelClose]);
-  useEffect(() => () => cancelClose(), [cancelClose]);
+    onCancelClose();
+    if (hasChildren && !isOpen) onOpen(flyoutKey);
+  }, [hasChildren, isOpen, onOpen, onCancelClose, flyoutKey]);
+  const handleMouseLeave = useCallback(() => {
+    onScheduleClose(flyoutKey);
+  }, [onScheduleClose, flyoutKey]);
   const handleClick2 = () => {
     if (mobile && hasChildren) {
       onToggleExpand?.();
@@ -94640,7 +94684,7 @@ function CompactNavItem({
       {
         ref: triggerRef,
         onMouseEnter: !mobile && hasChildren ? handleMouseEnter : void 0,
-        onMouseLeave: !mobile && hasChildren && isOpen ? scheduleClose : void 0,
+        onMouseLeave: !mobile && hasChildren && isOpen ? handleMouseLeave : void 0,
         onClick: handleClick2,
         "aria-expanded": hasChildren ? mobile ? expanded : isOpen : void 0,
         className: cn(
@@ -94663,7 +94707,8 @@ function CompactNavItem({
               name: mobile ? "chevron-down" : "chevron-right",
               size: 10,
               className: cn(
-                "absolute right-1 top-1/2 -translate-y-1/2 text-[var(--ds-sidebar-text-muted)] transition-transform",
+                "absolute right-1 top-1/2 -translate-y-1/2 transition-transform",
+                item.active || childActive ? "text-[var(--ds-sidebar-accent)]" : "text-[var(--ds-sidebar-text-muted)]",
                 mobile && expanded && "rotate-180"
               )
             }
@@ -94680,8 +94725,8 @@ function CompactNavItem({
         portalContainer,
         onItemClick,
         onClose,
-        onMouseEnter: cancelClose,
-        onMouseLeave: scheduleClose
+        onMouseEnter: onCancelClose,
+        onMouseLeave: handleMouseLeave
       }
     ),
     mobile && expanded && hasChildren && item.children && /* @__PURE__ */ jsx("div", { className: "w-full flex flex-col gap-ds-1 pb-ds-1", children: item.children.map((child, ci) => /* @__PURE__ */ jsxs(
@@ -95155,7 +95200,7 @@ function Drawer({ open, onClose, position = "right", width = "400px", title, chi
                       minHeight: "calc(var(--ds-space-unit) * 6 + 1.75rem + 2px + var(--ds-border-width))"
                     },
                     children: [
-                      /* @__PURE__ */ jsx("h2", { id: titleId, className: "text-base font-[var(--ds-weight-heading)]", children: title }),
+                      /* @__PURE__ */ jsx("h2", { id: titleId, className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] truncate", children: title }),
                       /* @__PURE__ */ jsx(
                         "button",
                         {
@@ -96350,7 +96395,7 @@ function Sheet({ open, onClose, title, children, footer, snapPoints = [0.5, 0.92
                     className: "flex items-center justify-between shrink-0 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
                     style: { padding: "var(--ds-space-2) var(--ds-space-5)" },
                     children: [
-                      /* @__PURE__ */ jsx("h2", { id: titleId, className: "text-base font-[var(--ds-weight-heading)]", children: title }),
+                      /* @__PURE__ */ jsx("h2", { id: titleId, className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] truncate", children: title }),
                       /* @__PURE__ */ jsx(
                         "button",
                         {

package/dist/roots.css

@@ -151,16 +151,16 @@
   --ds-border-width-thicker: calc(var(--ds-border-base) * 2.5);
   --ds-divider-width: var(--ds-border-width);
 
-  /* ── L2: Derived Type Scale ─────────────────────────────────────── */
+  /* ── L2: Derived Type Scale (Tailwind-aligned ratios × --ds-text-base) ── */
 
-  --ds-font-size-2xs: calc(var(--ds-text-base) * 0.714);
-  --ds-font-size-xs: calc(var(--ds-text-base) * 0.786);
-  --ds-font-size-sm: calc(var(--ds-text-base) * 0.929);
+  --ds-font-size-2xs: calc(var(--ds-text-base) * 0.625);
+  --ds-font-size-xs: calc(var(--ds-text-base) * 0.75);
+  --ds-font-size-sm: calc(var(--ds-text-base) * 0.875);
   --ds-font-size-body: var(--ds-text-base);
-  --ds-font-size-lg: calc(var(--ds-text-base) * 1.286);
-  --ds-font-size-xl: calc(var(--ds-text-base) * 1.571);
-  --ds-font-size-2xl: calc(var(--ds-text-base) * 2);
-  --ds-font-size-3xl: calc(var(--ds-text-base) * 2.571);
+  --ds-font-size-lg: calc(var(--ds-text-base) * 1.125);
+  --ds-font-size-xl: calc(var(--ds-text-base) * 1.25);
+  --ds-font-size-2xl: calc(var(--ds-text-base) * 1.5);
+  --ds-font-size-3xl: calc(var(--ds-text-base) * 1.875);
   --ds-line-height-body: 1.5;
   --ds-line-height-tight: 1.25;
 

package/dist/tailwind.css

@@ -22,14 +22,6 @@
   --spacing-ds-10: var(--ds-space-10);
   --spacing-ds-12: var(--ds-space-12);
 
-  --font-size-xs: var(--ds-font-size-xs);
-  --font-size-sm: var(--ds-font-size-sm);
-  --font-size-base: var(--ds-font-size-body);
-  --font-size-lg: var(--ds-font-size-lg);
-  --font-size-xl: var(--ds-font-size-xl);
-  --font-size-2xl: var(--ds-font-size-2xl);
-  --font-size-3xl: var(--ds-font-size-3xl);
-
   --font-weight-normal: var(--ds-weight-base);
   --font-weight-medium: var(--ds-weight-emphasis);
   --font-weight-semibold: var(--ds-weight-strong);
@@ -41,6 +33,16 @@
   --color-sidebar-accent-subtle: var(--ds-sidebar-accent-subtle);
 }
 
+@theme inline {
+  --text-xs: var(--ds-font-size-xs);
+  --text-sm: var(--ds-font-size-sm);
+  --text-base: var(--ds-font-size-body);
+  --text-lg: var(--ds-font-size-lg);
+  --text-xl: var(--ds-font-size-xl);
+  --text-2xl: var(--ds-font-size-2xl);
+  --text-3xl: var(--ds-font-size-3xl);
+}
+
 @utility text-2xs {
   font-size: var(--ds-font-size-2xs);
 }

package/dist-static/tailwind.css

@@ -22,14 +22,6 @@
   --spacing-ds-10: var(--ds-space-10);
   --spacing-ds-12: var(--ds-space-12);
 
-  --font-size-xs: var(--ds-font-size-xs);
-  --font-size-sm: var(--ds-font-size-sm);
-  --font-size-base: var(--ds-font-size-body);
-  --font-size-lg: var(--ds-font-size-lg);
-  --font-size-xl: var(--ds-font-size-xl);
-  --font-size-2xl: var(--ds-font-size-2xl);
-  --font-size-3xl: var(--ds-font-size-3xl);
-
   --font-weight-normal: var(--ds-weight-base);
   --font-weight-medium: var(--ds-weight-emphasis);
   --font-weight-semibold: var(--ds-weight-strong);
@@ -41,6 +33,16 @@
   --color-sidebar-accent-subtle: var(--ds-sidebar-accent-subtle);
 }
 
+@theme inline {
+  --text-xs: var(--ds-font-size-xs);
+  --text-sm: var(--ds-font-size-sm);
+  --text-base: var(--ds-font-size-body);
+  --text-lg: var(--ds-font-size-lg);
+  --text-xl: var(--ds-font-size-xl);
+  --text-2xl: var(--ds-font-size-2xl);
+  --text-3xl: var(--ds-font-size-3xl);
+}
+
 @utility text-2xs {
   font-size: var(--ds-font-size-2xs);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gridsmith-ui",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Gridsmith component library — 82 React components with design tokens and a CSS custom property theming engine",
   "type": "module",
   "sideEffects": [