gridsmith-ui 0.6.2 → 0.6.3

package/dist/index.js

@@ -7,8 +7,8 @@ export { BreakpointWidthProvider, useBreakpoint } from './chunk-DPF6776I.js';
 import { Tooltip, useTextOverflow, usePosition, Slot } from './chunk-R5QGJURZ.js';
 export { Tooltip, useTextOverflow } from './chunk-R5QGJURZ.js';
 import { Icon } from './chunk-GX6O72IV.js';
-import { cn, GLASS_SURFACE, ACTIVE_RING, GLASS_BACKDROP, GLASS_DROPDOWN, lockBodyScroll, unlockBodyScroll, GLASS_OVERLAY, HAS_FOCUS_RING, FOCUS_RING, FOCUS_WITHIN_RING } from './chunk-TTZSZNJ6.js';
-import { createContext, forwardRef, useContext, useState, useRef, useEffect, useCallback, useId, isValidElement, cloneElement, useMemo, Children, Fragment as Fragment$1, useLayoutEffect } from 'react';
+import { cn, GLASS_SURFACE, ACTIVE_RING, GLASS_BACKDROP, GLASS_DROPDOWN, lockBodyScroll, unlockBodyScroll, GLASS_OVERLAY, FOCUS_RING, HAS_FOCUS_RING, FOCUS_WITHIN_RING } from './chunk-TTZSZNJ6.js';
+import { createContext, forwardRef, useContext, useState, useRef, useEffect, useCallback, useId, isValidElement, cloneElement, Fragment as Fragment$1, useMemo, Children, useLayoutEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
@@ -3580,13 +3580,30 @@ var sizeStyles3 = {
   md: "h-10 w-10 text-sm",
   lg: "h-12 w-12 text-base"
 };
+var paletteStyles = {
+  1: "bg-[var(--ds-palette-1-bg,var(--ds-bg-muted))] text-[var(--ds-palette-1-text,var(--ds-text-secondary))]",
+  2: "bg-[var(--ds-palette-2-bg,var(--ds-bg-muted))] text-[var(--ds-palette-2-text,var(--ds-text-secondary))]",
+  3: "bg-[var(--ds-palette-3-bg,var(--ds-bg-muted))] text-[var(--ds-palette-3-text,var(--ds-text-secondary))]",
+  4: "bg-[var(--ds-palette-4-bg,var(--ds-bg-muted))] text-[var(--ds-palette-4-text,var(--ds-text-secondary))]",
+  5: "bg-[var(--ds-palette-5-bg,var(--ds-bg-muted))] text-[var(--ds-palette-5-text,var(--ds-text-secondary))]"
+};
+function paletteFor(seed) {
+  let h = 0;
+  for (const ch of seed) h = h * 31 + ch.charCodeAt(0) >>> 0;
+  return h % 5 + 1;
+}
+function colorStyles(color, seed) {
+  if (color === "accent") return "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]";
+  if (color === "neutral") return "bg-[var(--ds-bg-muted)] text-[var(--ds-text-secondary)]";
+  return paletteStyles[color === "auto" ? paletteFor(seed) : color];
+}
 var statusVariantMap = {
   online: "success",
   away: "warning",
   busy: "error",
   offline: "offline"
 };
-function Avatar({ initials, src, alt, size = "md", status, className }) {
+function Avatar({ initials, src, alt, size = "md", status, color = "auto", className }) {
   const base = cn(
     "inline-flex items-center justify-center font-medium shrink-0",
     "rounded-[var(--ds-radius-full)]",
@@ -3605,7 +3622,7 @@ function Avatar({ initials, src, alt, size = "md", status, className }) {
     {
       className: cn(
         base,
-        "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]",
+        colorStyles(color, alt ?? initials ?? ""),
         "border-[length:var(--ds-border-width)] border-transparent"
       ),
       children: initials
@@ -6344,6 +6361,7 @@ function AvatarGroup({ items, max = 4, size = "sm", ring = "canvas", onOverflowC
           initials,
           size,
           status: item.status,
+          color: item.color,
           className: ringClass
         },
         i
@@ -7561,9 +7579,23 @@ function TabsRoot(props) {
     overflow = "scroll",
     className
   } = props;
+  const isMobile = useBreakpoint("md");
+  const effectiveOrientation = orientation === "responsive" ? "vertical" : orientation;
   if ("tabs" in props && props.tabs) {
-    const { tabs } = props;
-    if (orientation === "vertical") {
+    const { tabs, mobile = "scroll" } = props;
+    const collapseToDropdown = isMobile && (orientation === "responsive" || mobile === "dropdown");
+    if (collapseToDropdown) {
+      return /* @__PURE__ */ jsx(
+        Dropdown,
+        {
+          options: tabs.filter((t) => !t.disabled).map((t) => ({ id: t.id, label: t.label, group: t.group })),
+          value: activeTab,
+          onChange: (v) => onTabChange(v),
+          className
+        }
+      );
+    }
+    if (effectiveOrientation === "vertical") {
       return /* @__PURE__ */ jsx(
         "div",
         {
@@ -7574,7 +7606,20 @@ function TabsRoot(props) {
             variant === "underline" && "border-r-[length:var(--ds-border-width)] border-[var(--ds-border-default)] pr-ds-1",
             className
           ),
-          children: tabs.map((tab) => /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, orientation, variant, activeTab, onTabChange, fullWidth, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, orientation, onTabChange) }, tab.id))
+          children: tabs.map((tab, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            tab.group && tab.group !== tabs[i - 1]?.group && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: cn(
+                  "px-ds-3 pb-ds-1 text-xs font-semibold uppercase tracking-wider text-[var(--ds-text-muted)]",
+                  i > 0 && "mt-ds-3"
+                ),
+                children: tab.group
+              }
+            ),
+            /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, orientation: effectiveOrientation, variant, activeTab, onTabChange, fullWidth, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, effectiveOrientation, onTabChange) })
+          ] }, tab.id))
         }
       );
     }
@@ -7591,11 +7636,11 @@ function TabsRoot(props) {
           fullWidth && "w-full",
           className
         ),
-        children: tabs.map((tab) => /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, orientation, variant, activeTab, onTabChange, fullWidth, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, orientation, onTabChange) }, tab.id))
+        children: tabs.map((tab) => /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, orientation: effectiveOrientation, variant, activeTab, onTabChange, fullWidth, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, effectiveOrientation, onTabChange) }, tab.id))
       }
     );
   }
-  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { activeTab, onTabChange, orientation, variant, fullWidth, overflow }, children: /* @__PURE__ */ jsx("div", { className, children: props.children }) });
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { activeTab, onTabChange, orientation: effectiveOrientation, variant, fullWidth, overflow }, children: /* @__PURE__ */ jsx("div", { className, children: props.children }) });
 }
 var Tabs = Object.assign(TabsRoot, {
   List: TabsList,