gridsmith-ui 0.3.0 → 0.3.2

package/dist/index.js

@@ -1,5 +1,5 @@
 import { cn, GLASS_BACKDROP, GLASS_DROPDOWN, lockBodyScroll, unlockBodyScroll, GLASS_OVERLAY, GLASS_SURFACE } from './chunk-5XIPPVH7.js';
-import { Icon } from './chunk-H2XI6OUB.js';
+import { Icon } from './chunk-WVB3SRXW.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, useLayoutEffect, isValidElement, cloneElement, createElement, Fragment as Fragment$1, useDebugValue, memo, useReducer, useSyncExternalStore as useSyncExternalStore$1, useImperativeHandle } from 'react';
@@ -1731,7 +1731,7 @@ function Spinner({ size = "md", color = "default", label = "Loading", className
   );
 }
 var variantStyles = {
-  default: "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] text-[var(--ds-text-on-primary)] border-transparent hover:bg-[var(--ds-accent-primary-hover)] hover:brightness-110",
+  default: "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] [background-origin:border-box] text-[var(--ds-text-on-primary)] border-transparent hover:bg-[var(--ds-accent-primary-hover)] hover:brightness-110",
   secondary: "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)] border-[var(--ds-border-default)] hover:bg-[var(--ds-bg-muted)]",
   tertiary: "bg-[var(--ds-bg-muted)] text-[var(--ds-text-primary)] border-transparent hover:brightness-95",
   outline: "bg-[var(--ds-input-bg)] text-[var(--ds-text-primary)] border-[var(--ds-border-default)] hover:bg-[var(--ds-bg-muted)]",
@@ -2093,51 +2093,64 @@ function Label({ className, children, ...props }) {
     }
   );
 }
-function Toggle({ checked, onChange, label, disabled, error = false, "aria-labelledby": ariaLabelledBy, ...rest }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between gap-ds-4", disabled && "opacity-disabled"), children: [
-    label && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: label }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        role: "switch",
-        "aria-checked": checked,
-        "aria-label": !label && !ariaLabelledBy ? "Toggle" : void 0,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-invalid": error || void 0,
-        disabled,
-        onClick: () => !disabled && onChange(!checked),
-        ...rest,
-        className: cn(
-          "relative inline-flex shrink-0 items-center overflow-hidden",
-          "border-[length:var(--ds-border-width)]",
-          "rounded-[var(--ds-radius-full)]",
-          "transition-colors duration-[var(--ds-transition-speed)]",
-          "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-          disabled ? "cursor-not-allowed" : "cursor-pointer",
-          checked ? "bg-[var(--ds-accent-primary)]" : "bg-[var(--ds-bg-muted)]",
-          error ? "border-[var(--ds-status-error)]" : checked ? "border-transparent" : "border-[var(--ds-border-default)]"
-        ),
-        style: { width: 44, height: 24 },
-        children: /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(
-              "pointer-events-none inline-block shrink-0",
-              "bg-[var(--ds-bg-surface)]",
-              "border-[length:var(--ds-border-width)] border-transparent",
-              "rounded-[var(--ds-radius-full)]",
-              "transition-transform"
-            ),
-            style: {
-              width: 16,
-              height: 16,
-              transform: checked ? "translateX(calc(25px - var(--ds-border-width)))" : "translateX(calc(1px + var(--ds-border-width)))"
-            }
+function Toggle({ checked, onChange, label, disabled, error = false, layout = "full", "aria-labelledby": ariaLabelledBy, ...rest }) {
+  const switchButton = /* @__PURE__ */ jsx(
+    "button",
+    {
+      role: "switch",
+      "aria-checked": checked,
+      "aria-label": !label && !ariaLabelledBy ? "Toggle" : void 0,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-invalid": error || void 0,
+      disabled,
+      onClick: () => !disabled && onChange(!checked),
+      ...rest,
+      className: cn(
+        "relative inline-flex shrink-0 items-center overflow-hidden",
+        "border-[length:var(--ds-border-width)]",
+        "rounded-[var(--ds-radius-full)]",
+        "transition-colors duration-[var(--ds-transition-speed)]",
+        "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+        disabled ? "cursor-not-allowed" : "cursor-pointer",
+        checked ? "bg-[var(--ds-accent-primary)]" : "bg-[var(--ds-bg-muted)]",
+        error ? "border-[var(--ds-status-error)]" : checked ? "border-transparent" : "border-[var(--ds-border-default)]"
+      ),
+      style: { width: 44, height: 24 },
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "pointer-events-none inline-block shrink-0",
+            "bg-[var(--ds-bg-surface)]",
+            "border-[length:var(--ds-border-width)] border-transparent",
+            "rounded-[var(--ds-radius-full)]",
+            "transition-transform"
+          ),
+          style: {
+            width: 16,
+            height: 16,
+            transform: checked ? "translateX(calc(25px - var(--ds-border-width)))" : "translateX(calc(1px + var(--ds-border-width)))"
           }
-        )
-      }
-    )
-  ] });
+        }
+      )
+    }
+  );
+  if (!label) {
+    return /* @__PURE__ */ jsx("div", { className: cn(disabled && "opacity-disabled"), children: switchButton });
+  }
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: cn(
+        layout === "full" ? "flex items-center justify-between gap-ds-4" : "inline-flex items-center gap-ds-3",
+        disabled ? "cursor-not-allowed opacity-disabled" : "cursor-pointer"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: label }),
+        switchButton
+      ]
+    }
+  );
 }
 function Dropdown({
   options,
@@ -2156,6 +2169,7 @@ function Dropdown({
 }) {
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
+  const [positioned, setPositioned] = useState(false);
   const triggerRef = useRef(null);
   const menuRef = useRef(null);
   const searchRef = useRef(null);
@@ -2181,12 +2195,16 @@ function Dropdown({
     setPos({ top, left, width });
   }, []);
   useEffect(() => {
-    if (!open) return;
+    if (!open) {
+      setPositioned(false);
+      return;
+    }
     updatePos();
     setSearch("");
     requestAnimationFrame(() => {
       searchRef.current?.focus();
       updatePos();
+      setPositioned(true);
     });
     const onScroll = () => updatePos();
     window.addEventListener("scroll", onScroll, true);
@@ -2267,7 +2285,7 @@ function Dropdown({
             "rounded-[var(--ds-radius-md)] overflow-hidden",
             "shadow-[var(--ds-shadow-dropdown),var(--ds-glass-inset)]"
           ),
-          style: { top: pos.top, left: pos.left, minWidth: pos.width, width: "max-content", maxWidth: "calc(100vw - 16px)" },
+          style: { top: pos.top, left: pos.left, minWidth: pos.width, width: "max-content", maxWidth: "calc(100vw - 16px)", visibility: positioned ? "visible" : "hidden" },
           children: [
             searchable && /* @__PURE__ */ jsx("div", { className: "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]", style: { padding: "var(--ds-space-2)" }, children: /* @__PURE__ */ jsx(
               "input",
@@ -2581,7 +2599,7 @@ function Checkbox({ checked, onChange, label, disabled = false, indeterminate =
               "border-[2px]",
               "transition-all",
               "peer-focus-visible:shadow-[var(--ds-shadow-focus)]",
-              filled ? "bg-[var(--ds-check-bg)] border-[var(--ds-check-border)]" : "bg-[var(--ds-input-bg)] border-[var(--ds-input-border)]",
+              filled ? "bg-[var(--ds-check-bg)] [background-image:var(--ds-gradient)] border-[var(--ds-check-border)]" : "bg-[var(--ds-input-bg)] border-[var(--ds-input-border)]",
               disabled && "pointer-events-none"
             ),
             children: /* @__PURE__ */ jsx(
@@ -2695,7 +2713,7 @@ function RadioGroup({ value, onChange, options, orientation = "vertical", classN
                       selected && "border-[var(--ds-check-border)]",
                       "focus-visible:shadow-[var(--ds-shadow-focus)]"
                     ),
-                    children: selected && /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-[var(--ds-accent-primary)]" })
+                    children: selected && /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)]" })
                   }
                 ),
                 /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--ds-text-primary)]", children: option.label })
@@ -3131,7 +3149,7 @@ function SliderRange({
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: "absolute h-1.5 rounded-[var(--ds-radius-full)] bg-[var(--ds-accent-primary)]",
+              className: "absolute h-1.5 rounded-[var(--ds-radius-full)] bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)]",
               style: {
                 left: `${isRange ? pct(low) : 0}%`,
                 width: `${isRange ? pct(high) - pct(low) : pct(low)}%`
@@ -83140,7 +83158,7 @@ function MonthView({
                 {
                   className: cn(
                     "text-xs w-6 h-6 flex items-center justify-center rounded-full",
-                    today ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-bold" : "text-[var(--ds-text-secondary)]"
+                    today ? "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] text-[var(--ds-text-on-primary)] font-bold" : "text-[var(--ds-text-secondary)]"
                   ),
                   children: day.getDate()
                 }
@@ -93809,7 +93827,7 @@ function Pagination({ currentPage, totalPages, onPageChange, pageSize, pageSizeO
               "rounded-[var(--ds-radius-md)]",
               "border-[length:var(--ds-border-width)]",
               "transition-colors duration-[var(--ds-transition-speed)]",
-              p === currentPage ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] border-[var(--ds-accent-primary)]" : "bg-[var(--ds-bg-surface)] text-[var(--ds-text-secondary)] border-[var(--ds-border-default)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
+              p === currentPage ? "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] text-[var(--ds-text-on-primary)] border-[var(--ds-accent-primary)]" : "bg-[var(--ds-bg-surface)] text-[var(--ds-text-secondary)] border-[var(--ds-border-default)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
             ),
             children: p
           },
@@ -93943,7 +93961,7 @@ function StepCircle({ status, index, onClick, clickable }) {
         "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
         clickable && "cursor-pointer",
         !clickable && "cursor-default",
-        status === "complete" && "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]",
+        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 === "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",
@@ -95047,7 +95065,7 @@ var borderByPosition = {
   left: "border-r-[length:var(--ds-border-width)] border-r-[var(--ds-border-default)]",
   bottom: "border-t-[length:var(--ds-border-width)] border-t-[var(--ds-border-default)]"
 };
-function Drawer({ open, onClose, position = "right", width = "400px", title, children, footer, container, flush, lightBackdrop }) {
+function Drawer({ open, onClose, position = "right", width = "400px", title, children, footer, container, flush, lightBackdrop, topOffset }) {
   const titleId = useId();
   const isMobile = useBreakpoint("sm");
   const panelRef = useRef(null);
@@ -95083,9 +95101,11 @@ function Drawer({ open, onClose, position = "right", width = "400px", title, chi
       "div",
       {
         className: cn(
-          `${positionClass} inset-0 z-50 transition-opacity duration-[var(--ds-transition-speed)]`,
+          `${positionClass} z-50 transition-opacity duration-[var(--ds-transition-speed)]`,
+          topOffset ? "left-0 right-0 bottom-0" : "inset-0",
           open ? "pointer-events-auto" : "pointer-events-none"
         ),
+        style: topOffset ? { top: topOffset } : void 0,
         onTransitionEnd: handleTransitionEnd,
         children: [
           /* @__PURE__ */ jsx(
@@ -95237,6 +95257,7 @@ var AppShell = forwardRef(function AppShell2({
             container: shellRef.current ?? void 0,
             flush: mobileMenuFlush,
             lightBackdrop: mobileMenuLightBackdrop,
+            topOffset: layout !== "stacked" && navbar != null ? "var(--ds-navbar-height)" : void 0,
             children: mobileMenu
           }
         ),
@@ -95297,12 +95318,13 @@ function getTypeClasses(type, active) {
       );
   }
 }
-function HamburgerButton({ onClick, className: cls }) {
+function HamburgerButton({ onClick, open, className: cls }) {
   return /* @__PURE__ */ jsx(
     "button",
     {
       onClick,
-      "aria-label": "Toggle navigation menu",
+      "aria-label": open ? "Close navigation menu" : "Open navigation menu",
+      "aria-expanded": open ?? void 0,
       className: cn(
         "flex items-center justify-center shrink-0",
         "w-10 h-10 rounded-[var(--ds-radius-md)]",
@@ -95312,7 +95334,7 @@ function HamburgerButton({ onClick, className: cls }) {
         "cursor-pointer",
         cls
       ),
-      children: /* @__PURE__ */ jsx(Icon, { name: "menu", size: 20 })
+      children: /* @__PURE__ */ jsx(Icon, { name: open ? "close" : "menu", size: 20 })
     }
   );
 }
@@ -95360,7 +95382,7 @@ var Navbar = forwardRef(function Navbar2({
         style: { padding: padStyle, gap: "var(--ds-space-4)" },
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-4", children: [
-            showHamburger && /* @__PURE__ */ jsx(HamburgerButton, { onClick: handleHamburger }),
+            showHamburger && /* @__PURE__ */ jsx(HamburgerButton, { onClick: handleHamburger, open: appShell?.sidebarOpen }),
             logo && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: logo })
           ] }),
           navLinks && !hideNavLinks ? /* @__PURE__ */ jsx(NavbarTypeContext.Provider, { value: type, children: /* @__PURE__ */ jsx("nav", { className: "flex items-center gap-ds-1 min-w-0 overflow-x-clip justify-center", "data-navbar-type": type, children: navLinks }) }) : /* @__PURE__ */ jsx("div", {}),
@@ -95386,7 +95408,7 @@ var Navbar = forwardRef(function Navbar2({
       ),
       style: { padding: padStyle, gap: "var(--ds-space-4)" },
       children: [
-        showHamburger && /* @__PURE__ */ jsx(HamburgerButton, { onClick: handleHamburger }),
+        showHamburger && /* @__PURE__ */ jsx(HamburgerButton, { onClick: handleHamburger, open: appShell?.sidebarOpen }),
         logo && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: logo }),
         align === "right" && /* @__PURE__ */ jsx("div", { className: "flex-1" }),
         navLinks && !hideNavLinks && /* @__PURE__ */ jsx(NavbarTypeContext.Provider, { value: type, children: /* @__PURE__ */ jsx("nav", { className: cn("flex items-center gap-ds-1 min-w-0 overflow-x-clip", align === "left" && "flex-1"), "data-navbar-type": type, children: navLinks }) }),
@@ -96902,7 +96924,7 @@ var positionClasses = {
   "top-center": "top-ds-4 left-1/2 -translate-x-1/2",
   "bottom-center": "bottom-ds-4 left-1/2 -translate-x-1/2"
 };
-function Toast({ variant = "default", message, visible, onDismiss, duration = 3e3, pauseOnHover = false, action, position = "bottom-right", container }) {
+function Toast({ variant = "default", message, visible, onDismiss, duration = 3e3, pauseOnHover = false, action, position = "bottom-right", mode, container }) {
   const isMobile = useBreakpoint("sm");
   const isCentered = position === "top-center" || position === "bottom-center";
   const timerRef = useRef(void 0);
@@ -96944,6 +96966,7 @@ function Toast({ variant = "default", message, visible, onDismiss, duration = 3e
       {
         role: "status",
         "aria-live": "polite",
+        "data-mode": mode,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave2,
         className: cn(