gridsmith-ui 0.6.1 → 0.6.3

package/dist/index.d.ts

@@ -658,15 +658,18 @@ interface TagProps {
 declare const Tag: react.ForwardRefExoticComponent<TagProps & react.RefAttributes<HTMLSpanElement>>;
 
 type AvatarStatus = "online" | "away" | "busy" | "offline";
+type AvatarColor = "auto" | "accent" | "neutral" | 1 | 2 | 3 | 4 | 5;
 interface AvatarProps {
     initials?: string;
     src?: string;
     alt?: string;
     size?: "sm" | "md" | "lg";
     status?: AvatarStatus;
+    /** Initials background. "auto" (default) derives a stable palette tint from alt/initials so groups vary; use "accent" sparingly. */
+    color?: AvatarColor;
     className?: string;
 }
-declare function Avatar({ initials, src, alt, size, status, className }: AvatarProps): react_jsx_runtime.JSX.Element;
+declare function Avatar({ initials, src, alt, size, status, color, className }: AvatarProps): react_jsx_runtime.JSX.Element;
 
 interface AvatarGroupItem {
     /** Display name — used for the tooltip and, when initials are omitted, to derive them. */
@@ -675,6 +678,7 @@ interface AvatarGroupItem {
     src?: string;
     alt?: string;
     status?: AvatarStatus;
+    color?: AvatarColor;
 }
 interface AvatarGroupProps {
     items: AvatarGroupItem[];
@@ -879,12 +883,17 @@ interface Tab {
     disabled?: boolean;
     /** Truncate long labels and show tooltip on hover. */
     truncate?: boolean;
+    /** Section heading in vertical layouts; becomes the option group in the mobile Dropdown. */
+    group?: string;
 }
 interface TabsArrayProps {
     tabs: Tab[];
     activeTab: string;
     onTabChange: (id: string) => void;
-    orientation?: "horizontal" | "vertical";
+    /** "responsive" renders vertical from the md breakpoint up and collapses to a Dropdown below it. */
+    orientation?: "horizontal" | "vertical" | "responsive";
+    /** Below md, tabs either side-scroll (default) or collapse to a Dropdown. "responsive" implies "dropdown". */
+    mobile?: "scroll" | "dropdown";
     variant?: TabsVariant;
     fullWidth?: boolean;
     overflow?: TabsOverflow;

package/dist/index.js

@@ -1,14 +1,14 @@
-import { Skeleton } from './chunk-OUYJXVLQ.js';
-export { Skeleton } from './chunk-OUYJXVLQ.js';
-import { Badge } from './chunk-UYGTAVKR.js';
-export { Badge } from './chunk-UYGTAVKR.js';
+import { Skeleton } from './chunk-QGBG72OB.js';
+export { Skeleton } from './chunk-QGBG72OB.js';
+import { Badge } from './chunk-TYU2LQGK.js';
+export { Badge } from './chunk-TYU2LQGK.js';
 import { useBreakpoint } from './chunk-DPF6776I.js';
 export { BreakpointWidthProvider, useBreakpoint } from './chunk-DPF6776I.js';
-import { Tooltip, useTextOverflow, usePosition, Slot } from './chunk-CHNY75QI.js';
-export { Tooltip, useTextOverflow } from './chunk-CHNY75QI.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, GLASS_BACKDROP, GLASS_DROPDOWN, lockBodyScroll, unlockBodyScroll, GLASS_OVERLAY } from './chunk-IUBWNDUK.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';
 
@@ -324,7 +324,7 @@ function Input({ className, size = "md", error = false, prefix, suffix, ...props
           "rounded-[var(--ds-radius-md)]",
           "shadow-[var(--ds-input-shadow)]",
           hoverBorder,
-          "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--ds-input-focus-ring)] has-[:focus-visible]:border-[var(--ds-input-focus-ring)]",
+          HAS_FOCUS_RING,
           "transition-colors duration-[var(--ds-transition-speed)]",
           props.disabled && "cursor-not-allowed opacity-disabled",
           props.readOnly && "bg-[var(--ds-bg-muted)] cursor-default",
@@ -366,7 +366,7 @@ function Input({ className, size = "md", error = false, prefix, suffix, ...props
         "shadow-[var(--ds-input-shadow)]",
         "placeholder:text-[var(--ds-text-muted)]",
         hoverBorder,
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ds-input-focus-ring)] focus-visible:border-[var(--ds-input-focus-ring)]",
+        FOCUS_RING,
         "disabled:cursor-not-allowed disabled:opacity-disabled",
         "read-only:bg-[var(--ds-bg-muted)] read-only:text-[var(--ds-text-secondary)] read-only:cursor-default",
         "transition-colors duration-[var(--ds-transition-speed)]",
@@ -406,7 +406,7 @@ function Textarea({ className, autoResize, maxRows, ref, ...props }) {
         "shadow-[var(--ds-input-shadow)]",
         "placeholder:text-[var(--ds-text-muted)]",
         "hover:border-[var(--ds-input-border-hover)]",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ds-input-focus-ring)] focus-visible:border-[var(--ds-input-focus-ring)]",
+        FOCUS_RING,
         "disabled:cursor-not-allowed disabled:opacity-disabled disabled:hover:border-[var(--ds-input-border)]",
         "read-only:bg-[var(--ds-bg-muted)] read-only:text-[var(--ds-text-secondary)] read-only:cursor-default read-only:hover:border-[var(--ds-input-border)]",
         "transition-colors duration-[var(--ds-transition-speed)]",
@@ -677,8 +677,8 @@ function Dropdown({
           "shadow-[var(--ds-input-shadow)]",
           "transition-colors",
           !error && !disabled && !open && "hover:border-[var(--ds-input-border-hover)]",
-          open && !error && "border-[var(--ds-input-focus-ring)] ring-2 ring-[var(--ds-input-focus-ring)]",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ds-input-focus-ring)] focus-visible:border-[var(--ds-input-focus-ring)]",
+          open && !error && ACTIVE_RING,
+          FOCUS_RING,
           "cursor-pointer disabled:cursor-not-allowed disabled:opacity-disabled",
           !selectedValues.length && "text-[var(--ds-text-muted)]"
         ),
@@ -885,7 +885,7 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
           "shadow-[var(--ds-input-shadow)]",
           "transition-colors duration-[var(--ds-transition-speed)]",
           !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
-          "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--ds-input-focus-ring)] has-[:focus-visible]:border-[var(--ds-input-focus-ring)]",
+          HAS_FOCUS_RING,
           disabled && "opacity-disabled pointer-events-none"
         ),
         children: [
@@ -1290,7 +1290,7 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
           "transition-colors cursor-pointer",
           "px-ds-3 py-ds-2",
           !error && !disabled && !open && "hover:border-[var(--ds-input-border-hover)]",
-          open && "border-[var(--ds-accent-primary)] ring-2 ring-[var(--ds-input-focus-ring)]",
+          open && ACTIVE_RING,
           disabled && "opacity-disabled cursor-not-allowed",
           value ? "text-[var(--ds-text-primary)]" : "text-[var(--ds-text-muted)]"
         ),
@@ -1695,8 +1695,8 @@ function DateRangePicker({
           "transition-colors cursor-pointer",
           "px-ds-3 py-ds-2",
           !error && !disabled && !open && "hover:border-[var(--ds-input-border-hover)]",
-          open && "border-[var(--ds-accent-primary)] ring-2 ring-[var(--ds-input-focus-ring)]",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ds-input-focus-ring)]",
+          open && ACTIVE_RING,
+          FOCUS_RING,
           disabled && "opacity-disabled cursor-not-allowed",
           summary ? "text-[var(--ds-text-primary)]" : "text-[var(--ds-text-muted)]"
         ),
@@ -1907,7 +1907,7 @@ function FileUpload({ onFiles, accept, multiple = true, maxSize, className, erro
           "flex flex-col items-center justify-center gap-ds-2 cursor-pointer group",
           "border-2 border-dashed rounded-[var(--ds-radius-md)]",
           "transition-colors",
-          error ? "border-[var(--ds-status-error)]" : dragOver ? "border-[var(--ds-accent-primary)] bg-[var(--ds-accent-whisper)]" : "border-[var(--ds-border-default)] hover:border-[var(--ds-accent-primary)] hover:bg-[var(--ds-accent-whisper)]"
+          error ? "border-[var(--ds-status-error)]" : dragOver ? `${ACTIVE_RING} bg-[var(--ds-accent-whisper)]` : "border-[var(--ds-border-default)] hover:border-[var(--ds-accent-primary)] hover:bg-[var(--ds-accent-whisper)]"
         ),
         style: { padding: "var(--ds-space-8) var(--ds-space-4)" },
         children: [
@@ -2190,7 +2190,7 @@ function TimePicker({
           "transition-colors cursor-pointer",
           "px-ds-3 py-ds-2",
           !error && !disabled && !open && "hover:border-[var(--ds-input-border-hover)]",
-          open && "border-[var(--ds-accent-primary)] ring-2 ring-[var(--ds-input-focus-ring)]",
+          open && ACTIVE_RING,
           disabled && "opacity-disabled cursor-not-allowed",
           value ? "text-[var(--ds-text-primary)]" : "text-[var(--ds-text-muted)]"
         ),
@@ -2382,7 +2382,8 @@ function NumberInput({
         "bg-[var(--ds-input-bg)]",
         "transition-colors duration-[var(--ds-transition-speed)]",
         !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
-        "focus-within:ring-2 focus-within:ring-[var(--ds-input-focus-ring)] focus-within:border-[var(--ds-input-focus-ring)] focus-within:hover:border-[var(--ds-input-focus-ring)]",
+        FOCUS_WITHIN_RING,
+        "focus-within:hover:border-[var(--ds-border-focus)]",
         disabled && "opacity-disabled cursor-not-allowed",
         className
       ),
@@ -2654,7 +2655,7 @@ function TagInput({
         "shadow-[var(--ds-input-shadow)]",
         "transition-colors duration-[var(--ds-transition-speed)] cursor-text",
         !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
-        "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--ds-input-focus-ring)] has-[:focus-visible]:border-[var(--ds-input-focus-ring)]",
+        HAS_FOCUS_RING,
         disabled && "opacity-disabled cursor-not-allowed",
         className
       ),
@@ -2796,7 +2797,7 @@ function PinInput({
             "shadow-[var(--ds-input-shadow)]",
             "transition-colors",
             !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ds-input-focus-ring)] focus-visible:border-[var(--ds-input-focus-ring)]",
+            FOCUS_RING,
             "placeholder:text-[var(--ds-text-muted)]",
             sizes3[size],
             disabled && "opacity-disabled cursor-not-allowed"
@@ -3157,7 +3158,7 @@ function ColorPicker({
                 "border-[length:var(--ds-border-width)] border-[var(--ds-input-border)]",
                 "rounded-[var(--ds-radius-sm)]",
                 "hover:border-[var(--ds-input-border-hover)]",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ds-input-focus-ring)] focus-visible:border-[var(--ds-input-focus-ring)]"
+                FOCUS_RING
               )
             }
           )
@@ -3175,7 +3176,7 @@ function ColorPicker({
               "border-[length:var(--ds-border-width)]",
               "hover:scale-110 transition-transform",
               "focus-visible:shadow-[var(--ds-shadow-focus)] outline-none",
-              swatch.toLowerCase() === value.toLowerCase() ? "border-[var(--ds-accent-primary)] ring-1 ring-[var(--ds-accent-primary)]" : "border-[var(--ds-border-default)]"
+              swatch.toLowerCase() === value.toLowerCase() ? ACTIVE_RING : "border-[var(--ds-border-default)]"
             ),
             style: { backgroundColor: swatch },
             "aria-label": swatch
@@ -3579,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)]",
@@ -3604,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
@@ -3766,7 +3784,7 @@ function MentionInput({
           "shadow-[var(--ds-input-shadow)]",
           "placeholder:text-[var(--ds-text-muted)]",
           "hover:border-[var(--ds-input-border-hover)]",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ds-input-focus-ring)] focus-visible:border-[var(--ds-input-focus-ring)]",
+          FOCUS_RING,
           "disabled:cursor-not-allowed disabled:opacity-disabled disabled:hover:border-[var(--ds-input-border)]",
           "transition-colors duration-[var(--ds-transition-speed)]"
         )
@@ -3990,8 +4008,8 @@ var Card = forwardRef(function Card2({
         isSelectable && !disabled && "cursor-pointer select-none transition-all duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
         isSelectable && !disabled && !selected && "hover:border-[var(--ds-accent-primary)]",
         isSelectable && "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-        showRing && "border-[var(--ds-accent-primary)] ring-1 ring-[var(--ds-accent-primary)]",
-        hasSelectType && selected && "border-[var(--ds-accent-primary)] bg-[var(--ds-accent-subtle)]",
+        (showRing || hasSelectType && selected) && ACTIVE_RING,
+        hasSelectType && selected && "bg-[var(--ds-accent-subtle)]",
         disabled && "opacity-disabled cursor-not-allowed",
         className
       ),
@@ -4536,7 +4554,7 @@ function Table({
             "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
             "rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-surface)]",
             "p-ds-4 space-y-ds-2",
-            isSelected && "ring-1 ring-[var(--ds-accent-primary)]",
+            isSelected && ACTIVE_RING,
             onRowClick && "cursor-pointer hover:bg-[var(--ds-bg-muted)] focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]"
           ),
           onClick: onRowClick ? () => onRowClick(row, originalIdx) : void 0,
@@ -6343,6 +6361,7 @@ function AvatarGroup({ items, max = 4, size = "sm", ring = "canvas", onOverflowC
           initials,
           size,
           status: item.status,
+          color: item.color,
           className: ringClass
         },
         i
@@ -7109,7 +7128,7 @@ function ChatInputBar({ onSend }) {
         "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
         "bg-[var(--ds-input-bg)]",
         "shadow-[var(--ds-input-shadow)]",
-        "focus-within:ring-2 focus-within:ring-[var(--ds-input-focus-ring)] focus-within:border-[var(--ds-input-focus-ring)]",
+        FOCUS_WITHIN_RING,
         "transition-colors duration-[var(--ds-transition-speed)]"
       ),
       children: [
@@ -7560,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",
         {
@@ -7573,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))
         }
       );
     }
@@ -7590,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,
@@ -8103,9 +8149,9 @@ function StepCircle({ status, index, onClick, clickable }) {
         clickable && "cursor-pointer",
         !clickable && "cursor-default",
         status === "complete" && "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] text-[var(--ds-text-on-primary)]",
-        status === "current" && "border-2 border-[var(--ds-accent-primary)] text-[var(--ds-accent-primary)] bg-[var(--ds-bg-surface)]",
+        status === "current" && `border-2 ${ACTIVE_RING} text-[var(--ds-accent-primary)] bg-[var(--ds-bg-surface)]`,
         status === "error" && "bg-[var(--ds-status-error)] text-[var(--ds-text-on-primary)]",
-        status === "loading" && "border-2 border-[var(--ds-accent-primary)] text-[var(--ds-accent-primary)] bg-[var(--ds-bg-surface)] animate-pulse",
+        status === "loading" && `border-2 ${ACTIVE_RING} text-[var(--ds-accent-primary)] bg-[var(--ds-bg-surface)] animate-pulse`,
         status === "upcoming" && "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)] text-[var(--ds-text-muted)] bg-[var(--ds-bg-surface)]"
       ),
       children: status === "complete" ? /* @__PURE__ */ jsx(Icon, { name: "check", size: 14 }) : status === "error" ? /* @__PURE__ */ jsx(Icon, { name: "warning", size: 14 }) : index + 1