gridsmith-ui 0.6.0 → 0.6.2

package/dist/index.js

@@ -1,13 +1,13 @@
-import { Skeleton } from './chunk-OUYJXVLQ.js';
-export { Skeleton } from './chunk-OUYJXVLQ.js';
-import { Badge } from './chunk-4SDKQDYV.js';
-export { Badge } from './chunk-4SDKQDYV.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 { Icon } from './chunk-XUBVMRIE.js';
-import { cn, GLASS_SURFACE, GLASS_BACKDROP, GLASS_DROPDOWN, lockBodyScroll, unlockBodyScroll, GLASS_OVERLAY } from './chunk-IUBWNDUK.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 { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
@@ -81,6 +81,7 @@ var Button = forwardRef(function Button2({ variant = "default", size: sizeProp,
     "button",
     {
       ref,
+      "data-variant": variant,
       className: cn(
         "relative inline-flex items-center justify-center gap-ds-2 whitespace-nowrap font-medium",
         isLink ? cn(
@@ -323,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",
@@ -365,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)]",
@@ -405,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)]",
@@ -598,12 +599,13 @@ function Dropdown({
         focusOption(current < 0 ? els.length - 1 : current - 1);
         return;
       }
-      if (e.key === "Home") {
+      const inSearch = document.activeElement === searchRef.current;
+      if (e.key === "Home" && !inSearch) {
         e.preventDefault();
         focusOption(0);
         return;
       }
-      if (e.key === "End") {
+      if (e.key === "End" && !inSearch) {
         e.preventDefault();
         focusOption(els.length - 1);
         return;
@@ -675,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)]"
         ),
@@ -883,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: [
@@ -1152,6 +1154,38 @@ function RadioGroup({ value, onChange, options, orientation = "vertical", classN
     )
   ] });
 }
+var FOCUSABLE = 'a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])';
+var FIELD = "input, select, textarea, [contenteditable='true']";
+var SAFE_BUTTON = 'button:not([data-variant="destructive"])';
+var OVERLAY_CLOSE_ATTR = "data-overlay-close";
+function focusInitial(root, opts = {}) {
+  if (!root) return false;
+  const all = Array.from(root.querySelectorAll(FOCUSABLE));
+  if (!all.length) return false;
+  const candidates = all.filter((el) => !el.hasAttribute(OVERLAY_CLOSE_ATTR));
+  if (opts.destructive) {
+    const safe = candidates.find((el) => el.matches(SAFE_BUTTON));
+    if (safe) {
+      safe.focus();
+      return true;
+    }
+  }
+  const target = candidates.find((el) => el.matches(FIELD)) ?? candidates[0] ?? all[0];
+  target.focus();
+  return true;
+}
+function useReturnFocus(open) {
+  const triggerRef = useRef(null);
+  useEffect(() => {
+    if (open) {
+      triggerRef.current = document.activeElement;
+      return;
+    }
+    const el = triggerRef.current;
+    triggerRef.current = null;
+    if (el && el.isConnected && typeof el.focus === "function") el.focus();
+  }, [open]);
+}
 var DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
 var MONTHS = [
   "January",
@@ -1214,6 +1248,10 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
   const nextMonth = () => setViewDate(new Date(year, month + 1, 1));
   const startOf = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
   const isDisabledDay = (d) => !!min && d < startOf(min) || !!max && d > startOf(max);
+  useReturnFocus(open);
+  useEffect(() => {
+    if (open) requestAnimationFrame(() => focusInitial(panelRef.current));
+  }, [open]);
   const selectDay = (day) => {
     const d = new Date(year, month, day);
     if (isDisabledDay(d)) return;
@@ -1252,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)]"
         ),
@@ -1589,6 +1627,10 @@ function DateRangePicker({
   const pos = usePosition(triggerRef, panelRef, open, { side: "bottom", align: "start", offset: 4, flip: true });
   const today = useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
   const dayNames = getOrderedDayNamesShort(weekStartsOn);
+  useReturnFocus(open);
+  useEffect(() => {
+    if (open) requestAnimationFrame(() => focusInitial(panelRef.current));
+  }, [open]);
   useEffect(() => {
     if (!open) return;
     const onMouse = (e) => {
@@ -1653,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)]"
         ),
@@ -1865,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: [
@@ -2148,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)]"
         ),
@@ -2340,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
       ),
@@ -2612,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
       ),
@@ -2754,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"
@@ -3115,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
               )
             }
           )
@@ -3133,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
@@ -3724,7 +3767,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)]"
         )
@@ -3948,8 +3991,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
       ),
@@ -4494,7 +4537,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,
@@ -7067,7 +7110,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: [
@@ -7776,7 +7819,7 @@ function Popover({ open, onOpenChange, trigger, children, side = "bottom", align
     };
   }, [open, onOpenChange]);
   useEffect(() => {
-    if (open) floatingRef.current?.querySelector("a, button, input, [tabindex]")?.focus();
+    if (open) focusInitial(floatingRef.current);
   }, [open]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -8061,9 +8104,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
@@ -9910,11 +9953,12 @@ function Drawer({ open, onClose, position = "right", width = "400px", title, chi
       if (!container) unlockBodyScroll();
     };
   }, [open, container]);
+  useReturnFocus(open);
   useEffect(() => {
-    if (!open) return;
-    const focusable = panelRef.current?.querySelector("a, button, input, [tabindex]");
-    focusable?.focus();
-  }, [open]);
+    if (!open || !mounted) return;
+    const raf = requestAnimationFrame(() => focusInitial(panelRef.current));
+    return () => cancelAnimationFrame(raf);
+  }, [open, mounted]);
   if (!mounted) return null;
   const slide = slideClasses[position];
   const isHorizontal = position === "left" || position === "right";
@@ -9984,6 +10028,7 @@ function Drawer({ open, onClose, position = "right", width = "400px", title, chi
                         "button",
                         {
                           onClick: onClose,
+                          ...{ [OVERLAY_CLOSE_ATTR]: "" },
                           className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
                           "aria-label": "Close",
                           children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 18 })
@@ -10552,7 +10597,6 @@ var sizeClasses = {
   xl: "max-w-4xl",
   full: "max-w-[calc(100vw-2rem)]"
 };
-var FOCUSABLE = 'a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])';
 function Dialog({ open, onClose, title, description, children, footer, variant = "default", size = "md", alert = false, container, onSubmit }) {
   const titleId = useId();
   const descriptionId = useId();
@@ -10584,14 +10628,7 @@ function Dialog({ open, onClose, title, description, children, footer, variant =
     if (!open) return;
     triggerRef.current = document.activeElement;
     requestAnimationFrame(() => {
-      const focusable = dialogRef.current?.querySelectorAll(FOCUSABLE);
-      if (focusable?.length) {
-        if (variant === "destructive" && focusable.length > 1) {
-          focusable[focusable.length - 1].focus();
-        } else {
-          focusable[0].focus();
-        }
-      }
+      focusInitial(dialogRef.current, { destructive: variant === "destructive" });
     });
   }, [open, variant]);
   useEffect(() => {
@@ -10662,6 +10699,7 @@ function Dialog({ open, onClose, title, description, children, footer, variant =
                       {
                         type: "button",
                         onClick: onClose,
+                        ...{ [OVERLAY_CLOSE_ATTR]: "" },
                         className: "absolute right-4 top-4 text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
                         "aria-label": "Close",
                         children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 18 })
@@ -11070,6 +11108,12 @@ function Sheet({ open, onClose, title, children, footer, snapPoints = [0.5, 0.92
   function handleTransitionEnd() {
     if (!open) setMounted(false);
   }
+  useReturnFocus(open);
+  useEffect(() => {
+    if (!open || !mounted) return;
+    const raf = requestAnimationFrame(() => focusInitial(panelRef.current));
+    return () => cancelAnimationFrame(raf);
+  }, [open, mounted]);
   useEffect(() => {
     if (!open) return;
     const onKeyDown = (e) => {
@@ -11182,6 +11226,7 @@ function Sheet({ open, onClose, title, children, footer, snapPoints = [0.5, 0.92
                         "button",
                         {
                           onClick: onClose,
+                          ...{ [OVERLAY_CLOSE_ATTR]: "" },
                           className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
                           "aria-label": "Close",
                           children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 18 })
@@ -11953,8 +11998,6 @@ var toastSeq = 0;
 function ToastProvider({ children, maxVisible = 3, position = "bottom-right", duration = 3e3, mode, pauseOnHover = true }) {
   const [queue, setQueue] = useState([]);
   const isMobile = useBreakpoint("sm");
-  const queueRef = useRef(queue);
-  queueRef.current = queue;
   const dismiss = useCallback((id) => {
     setQueue((q) => q.filter((t) => t.id !== id));
   }, []);