gridsmith-ui 0.2.18 → 0.3.0

package/dist/index.d.ts

@@ -928,13 +928,12 @@ interface PageHeaderProps {
     onBack?: () => void;
     actions?: ReactNode;
     avatar?: ReactNode;
-    stats?: ReactNode;
     filters?: ReactNode;
     bannerImage?: string;
     as?: HeadingLevel;
     className?: string;
 }
-declare function PageHeader({ title, description, badge, breadcrumbs, onBack, actions, avatar, stats, filters, bannerImage, as: Heading, className, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
+declare function PageHeader({ title, description, badge, breadcrumbs, onBack, actions, avatar, filters, bannerImage, as: Heading, className, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
 
 interface DockItem {
     id: string;

package/dist/index.js

@@ -1,8 +1,8 @@
-import { cn, GLASS_BACKDROP, lockBodyScroll, unlockBodyScroll, GLASS_OVERLAY, GLASS_DROPDOWN, GLASS_SURFACE } from './chunk-5XIPPVH7.js';
+import { cn, GLASS_BACKDROP, GLASS_DROPDOWN, lockBodyScroll, unlockBodyScroll, GLASS_OVERLAY, GLASS_SURFACE } from './chunk-5XIPPVH7.js';
 import { Icon } from './chunk-H2XI6OUB.js';
 import { __commonJS, __toESM } from './chunk-5WRI5ZAA.js';
 import * as React6 from 'react';
-import React6__default, { createContext, forwardRef, useState, useCallback, useRef, useContext, useId, useMemo, useEffect, createElement, Fragment as Fragment$1, useLayoutEffect, isValidElement, cloneElement, useDebugValue, memo, useReducer, useSyncExternalStore as useSyncExternalStore$1, useImperativeHandle } from 'react';
+import React6__default, { createContext, forwardRef, useState, useCallback, useRef, useContext, useId, useMemo, useEffect, useLayoutEffect, isValidElement, cloneElement, createElement, Fragment as Fragment$1, useDebugValue, memo, useReducer, useSyncExternalStore as useSyncExternalStore$1, useImperativeHandle } from 'react';
 import ReactDOM, { createPortal, unstable_batchedUpdates, flushSync } from 'react-dom';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
@@ -1545,6 +1545,17 @@ var require_core = __commonJS({
     highlight.default = highlight;
   }
 });
+function mergeRefs(...refs) {
+  const filtered = refs.filter(Boolean);
+  if (filtered.length === 0) return void 0;
+  if (filtered.length === 1) return filtered[0];
+  return (node) => {
+    for (const ref of filtered) {
+      if (typeof ref === "function") ref(node);
+      else if (ref && typeof ref === "object") ref.current = node;
+    }
+  };
+}
 function Slot({ children, ref, ...slotProps }) {
   if (!isValidElement(children)) {
     console.warn("Slot: expected a single React element child.");
@@ -1570,7 +1581,8 @@ function Slot({ children, ref, ...slotProps }) {
     }
   }
   if (ref) {
-    mergedProps.ref = ref;
+    const childRef = children.ref ?? childProps.ref;
+    mergedProps.ref = mergeRefs(ref, childRef);
   }
   return cloneElement(children, mergedProps);
 }
@@ -2230,7 +2242,7 @@ function Dropdown({
           "rounded-[var(--ds-radius-md)]",
           "shadow-[var(--ds-input-shadow)]",
           "transition-colors",
-          !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
+          !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)]",
           "cursor-pointer disabled:cursor-not-allowed disabled:opacity-disabled",
@@ -2781,7 +2793,7 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
           "shadow-[var(--ds-input-shadow)]",
           "transition-colors cursor-pointer",
           "px-ds-3 py-ds-2",
-          !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
+          !error && !disabled && !open && "hover:border-[var(--ds-input-border-hover)]",
           open && "border-[var(--ds-accent-primary)] ring-2 ring-[var(--ds-input-focus-ring)]",
           disabled && "opacity-disabled cursor-not-allowed",
           value ? "text-[var(--ds-text-primary)]" : "text-[var(--ds-text-muted)]"
@@ -2997,14 +3009,17 @@ function FileUpload({ onFiles, accept, multiple = true, maxSize, className, erro
         onClick: () => inputRef.current?.click(),
         "aria-invalid": error || void 0,
         className: cn(
-          "flex flex-col items-center justify-center gap-ds-2 cursor-pointer",
+          "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-primary)]/5" : "border-[var(--ds-border-default)] hover:border-[var(--ds-border-strong)]"
+          error ? "border-[var(--ds-status-error)]" : dragOver ? "border-[var(--ds-accent-primary)] bg-[var(--ds-accent-primary)]/5" : "border-[var(--ds-border-default)] hover:border-[var(--ds-accent-primary)] hover:bg-[var(--ds-accent-primary)]/5"
         ),
         style: { padding: "var(--ds-space-8) var(--ds-space-4)" },
         children: [
-          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-10 h-10 rounded-[var(--ds-radius-full)] bg-[var(--ds-bg-muted)]", children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 20, className: "text-[var(--ds-text-muted)]" }) }),
+          /* @__PURE__ */ jsx("div", { className: cn(
+            "flex items-center justify-center w-10 h-10 rounded-[var(--ds-radius-full)] transition-colors",
+            "bg-[var(--ds-bg-muted)] group-hover:bg-[var(--ds-accent-primary)]/10"
+          ), children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 20, className: "text-[var(--ds-text-muted)] group-hover:text-[var(--ds-accent-primary)] transition-colors" }) }),
           /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
             /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: "Drop files here or click to browse" }),
             /* @__PURE__ */ jsxs("p", { className: "text-xs text-[var(--ds-text-muted)] mt-ds-1", children: [
@@ -3134,15 +3149,15 @@ function SliderRange({
               "aria-invalid": error || void 0,
               onPointerDown: handlePointerDown("low"),
               className: cn(
-                "absolute w-ds-4 h-ds-4 rounded-[var(--ds-radius-full)]",
+                "absolute w-ds-4 h-ds-4 -translate-x-1/2 rounded-[var(--ds-radius-full)]",
                 "bg-[var(--ds-bg-surface)] border-2",
                 error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-accent-primary)]",
                 "shadow-[var(--ds-shadow-sm)]",
-                "transition-shadow",
+                "transition-[shadow,transform] duration-200 ease-out",
                 "focus-visible:shadow-[var(--ds-shadow-focus)]",
-                !disabled && "cursor-grab active:cursor-grabbing"
+                !disabled && "cursor-grab active:cursor-grabbing hover:scale-125 active:scale-150"
               ),
-              style: { left: `${pct(low)}%`, transform: "translateX(-50%)" }
+              style: { left: `${pct(low)}%` }
             }
           ),
           /* @__PURE__ */ jsx(
@@ -3156,15 +3171,15 @@ function SliderRange({
               "aria-invalid": error || void 0,
               onPointerDown: handlePointerDown("high"),
               className: cn(
-                "absolute w-ds-4 h-ds-4 rounded-[var(--ds-radius-full)]",
+                "absolute w-ds-4 h-ds-4 -translate-x-1/2 rounded-[var(--ds-radius-full)]",
                 "bg-[var(--ds-bg-surface)] border-2",
                 error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-accent-primary)]",
                 "shadow-[var(--ds-shadow-sm)]",
-                "transition-shadow",
+                "transition-[shadow,transform] duration-200 ease-out",
                 "focus-visible:shadow-[var(--ds-shadow-focus)]",
-                !disabled && "cursor-grab active:cursor-grabbing"
+                !disabled && "cursor-grab active:cursor-grabbing hover:scale-125 active:scale-150"
               ),
-              style: { left: `${pct(high)}%`, transform: "translateX(-50%)" }
+              style: { left: `${pct(high)}%` }
             }
           )
         ]
@@ -3259,7 +3274,7 @@ function TimePicker({
           "shadow-[var(--ds-input-shadow)]",
           "transition-colors cursor-pointer",
           "px-ds-3 py-ds-2",
-          !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
+          !error && !disabled && !open && "hover:border-[var(--ds-input-border-hover)]",
           open && "border-[var(--ds-accent-primary)] ring-2 ring-[var(--ds-input-focus-ring)]",
           disabled && "opacity-disabled cursor-not-allowed",
           value ? "text-[var(--ds-text-primary)]" : "text-[var(--ds-text-muted)]"
@@ -3357,6 +3372,7 @@ function NumberInput({
 }) {
   const intervalRef = useRef(void 0);
   const timeoutRef = useRef(void 0);
+  const inputRef = useRef(null);
   const clamp = useCallback(
     (v) => Math.min(max2, Math.max(min2, v)),
     [min2, max2]
@@ -3413,7 +3429,7 @@ function NumberInput({
         "bg-[var(--ds-input-bg)]",
         "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)]",
+        "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)]",
         disabled && "opacity-disabled cursor-not-allowed",
         className
       ),
@@ -3424,7 +3440,11 @@ function NumberInput({
             type: "button",
             tabIndex: -1,
             disabled: disabled || atMin,
-            onMouseDown: () => !disabled && !atMin && startRepeat(decrement),
+            onMouseDown: (e) => {
+              e.preventDefault();
+              inputRef.current?.focus();
+              !disabled && !atMin && startRepeat(decrement);
+            },
             onMouseUp: stopRepeat,
             onMouseLeave: stopRepeat,
             className: cn(
@@ -3446,6 +3466,7 @@ function NumberInput({
           /* @__PURE__ */ jsx(
             "input",
             {
+              ref: inputRef,
               id,
               type: "text",
               inputMode: "decimal",
@@ -3473,7 +3494,11 @@ function NumberInput({
             type: "button",
             tabIndex: -1,
             disabled: disabled || atMax,
-            onMouseDown: () => !disabled && !atMax && startRepeat(increment),
+            onMouseDown: (e) => {
+              e.preventDefault();
+              inputRef.current?.focus();
+              !disabled && !atMax && startRepeat(increment);
+            },
             onMouseUp: stopRepeat,
             onMouseLeave: stopRepeat,
             className: cn(
@@ -22881,7 +22906,7 @@ function createCustomEqual(options = {}) {
   const equals2 = createCustomInternalComparator ? createCustomInternalComparator(comparator) : createInternalEqualityComparator(comparator);
   return createIsEqual({ circular, comparator, createState, equals: equals2, strict });
 }
-var mergeRefs = (...refs) => {
+var mergeRefs2 = (...refs) => {
   return (node) => {
     refs.forEach((ref) => {
       if (typeof ref === "function") {
@@ -22997,7 +23022,7 @@ var PureEditorContent = class extends React6__default.Component {
   render() {
     const { editor, innerRef, ...rest } = this.props;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { ref: mergeRefs(innerRef, this.editorContentRef), ...rest }),
+      /* @__PURE__ */ jsx("div", { ref: mergeRefs2(innerRef, this.editorContentRef), ...rest }),
       (editor == null ? void 0 : editor.contentComponent) && /* @__PURE__ */ jsx(Portals, { contentComponent: editor.contentComponent })
     ] });
   }
@@ -82438,7 +82463,7 @@ function Table2({
         className
       ),
       children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
-        /* @__PURE__ */ jsx("thead", { className: cn(stickyHeader && "sticky top-0 z-10 bg-[var(--ds-bg-surface)]"), children: /* @__PURE__ */ jsxs("tr", { className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: [
+        /* @__PURE__ */ jsx("thead", { className: cn("bg-[var(--ds-bg-muted)]", stickyHeader && "sticky top-0 z-10"), children: /* @__PURE__ */ jsxs("tr", { className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: [
           selectable && /* @__PURE__ */ jsx("th", { className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3"), children: /* @__PURE__ */ jsx(
             Checkbox,
             {
@@ -84089,10 +84114,10 @@ function EmptyState({ icon, title, description, action, variant = "empty", class
   );
 }
 var dotVariant = {
-  default: "bg-[var(--ds-accent-primary)]",
-  success: "bg-[var(--ds-status-success)]",
-  warning: "bg-[var(--ds-status-warning)]",
-  error: "bg-[var(--ds-status-error)]"
+  default: "bg-[var(--ds-accent-primary)] shadow-[0_0_0_3px_var(--ds-accent-primary)]/20",
+  success: "bg-[var(--ds-status-success)] shadow-[0_0_0_3px_var(--ds-status-success)]/20",
+  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") {
@@ -84474,7 +84499,7 @@ function TreeNodeRow({
         className: cn(
           "flex items-center gap-ds-2 py-ds-1.5 px-ds-2 rounded-[var(--ds-radius-md)] cursor-pointer transition-colors",
           "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-          isSelected ? "bg-[var(--ds-sidebar-item-active)] text-[var(--ds-accent-primary)] font-medium" : "text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]",
+          isSelected ? "bg-[var(--ds-tab-active-bg)] text-[var(--ds-accent-primary)] font-medium border-l-2 border-[var(--ds-accent-primary)]" : "text-[var(--ds-text-primary)] hover:bg-[var(--ds-tab-hover-bg)] hover:text-[var(--ds-text-primary)]",
           node.disabled && "opacity-disabled pointer-events-none"
         ),
         style: { paddingLeft: `calc(var(--ds-space-5) * ${depth} + var(--ds-space-2))` },
@@ -84668,7 +84693,7 @@ function Carousel({
               disabled: !canPrev,
               "aria-label": "Previous slide",
               className: cn(
-                "absolute left-2 top-1/2 -translate-y-1/2 z-10",
+                "absolute left-4 top-1/2 -translate-y-1/2 z-10",
                 "flex items-center justify-center w-8 h-8",
                 "rounded-[var(--ds-radius-full)]",
                 "bg-[var(--ds-bg-surface-elevated)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
@@ -84687,7 +84712,7 @@ function Carousel({
               disabled: !canNext,
               "aria-label": "Next slide",
               className: cn(
-                "absolute right-2 top-1/2 -translate-y-1/2 z-10",
+                "absolute right-4 top-1/2 -translate-y-1/2 z-10",
                 "flex items-center justify-center w-8 h-8",
                 "rounded-[var(--ds-radius-full)]",
                 "bg-[var(--ds-bg-surface-elevated)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
@@ -87638,7 +87663,7 @@ function DataGrid({
           "bg-[var(--ds-bg-surface)]"
         ),
         children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
-          /* @__PURE__ */ jsx("thead", { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsx("tr", { className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: hg.headers.map((header) => {
+          /* @__PURE__ */ jsx("thead", { className: "bg-[var(--ds-bg-muted)]", children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsx("tr", { className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: hg.headers.map((header) => {
             const canSort = header.column.getCanSort();
             const sorted = header.column.getIsSorted();
             return /* @__PURE__ */ jsx(
@@ -94149,26 +94174,29 @@ var Sidebar = forwardRef(function Sidebar2({
           }
         ),
         /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children }),
-        showCollapse && /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => handleCollapsedChange(!collapsed),
-            "aria-expanded": !collapsed,
-            "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
-            className: cn(
-              "flex items-center gap-ds-2 py-ds-2 mx-ds-2 text-sm rounded-[var(--ds-radius-md)]",
-              "transition-colors cursor-pointer",
-              "text-[var(--ds-sidebar-text-muted)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]",
-              "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-              collapsed ? "justify-center px-0" : "px-ds-3"
-            ),
-            style: { marginBottom: footer ? 0 : "var(--ds-space-3)" },
-            children: [
-              /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 16, className: cn("transition-transform", !collapsed && "rotate-180") }),
-              !collapsed && /* @__PURE__ */ jsx("span", { children: "Collapse" })
-            ]
-          }
-        ),
+        showCollapse && (() => {
+          const collapseButton = /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => handleCollapsedChange(!collapsed),
+              "aria-expanded": !collapsed,
+              "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+              className: cn(
+                "flex items-center gap-ds-2 py-ds-2 mx-ds-2 text-sm rounded-[var(--ds-radius-md)]",
+                "transition-colors cursor-pointer",
+                "text-[var(--ds-sidebar-text-muted)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]",
+                "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+                collapsed ? "justify-center px-0" : "px-ds-3"
+              ),
+              style: { marginBottom: footer ? 0 : "var(--ds-space-3)" },
+              children: [
+                /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 16, className: cn("transition-transform", !collapsed && "rotate-180") }),
+                !collapsed && /* @__PURE__ */ jsx("span", { children: "Collapse" })
+              ]
+            }
+          );
+          return collapsed ? /* @__PURE__ */ jsx(Tooltip, { content: "Expand sidebar", side: "right", delay: 100, container: portalEl ?? void 0, children: collapseButton }) : collapseButton;
+        })(),
         footer && /* @__PURE__ */ jsx(
           "div",
           {
@@ -94765,7 +94793,6 @@ function PageHeader({
   onBack,
   actions,
   avatar,
-  stats,
   filters,
   bannerImage,
   as: Heading2 = "h1",
@@ -94847,7 +94874,6 @@ function PageHeader({
             ] }),
             actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions })
           ] }),
-          stats && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-6 mt-ds-3", children: stats }),
           filters && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-3 mt-ds-4", children: filters })
         ] })
       ]