@scripso-homepad/ui 0.4.15 → 0.4.17

package/dist/index.js

@@ -1,5 +1,5 @@
-import { spacing, colors, fontWeight, fontSize, fonts, radii, INPUT_ICON_GAP, useApplyWebClassName, resolveInputVisualState, Label, getInputFieldStyles, inputFieldMetrics } from './chunk-3G3ZKFHX.js';
-export { Button, Input, Label, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray, typographyScale } from './chunk-3G3ZKFHX.js';
+import { spacing, colors, fontWeight, fontSize, fonts, radii, INPUT_ICON_GAP, useApplyWebClassName, resolveInputVisualState, Label, getInputFieldStyles, inputFieldMetrics } from './chunk-U7OSCJKA.js';
+export { Button, Input, Label, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray, typographyScale } from './chunk-U7OSCJKA.js';
 import { createContext, useRef, useState, useMemo, useEffect, useLayoutEffect, useContext, isValidElement, cloneElement } from 'react';
 import { Platform, StyleSheet, Animated, Easing, View, Pressable, Text, Modal, ScrollView, TextInput, Dimensions } from 'react-native';
 import Svg2, { Path } from 'react-native-svg';

package/dist/web/index.cjs

@@ -7,7 +7,6 @@ var Svg = require('react-native-svg');
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var reactRouterDom = require('react-router-dom');
 var sonner = require('sonner');
 require('sonner/dist/styles.css');
 
@@ -7409,7 +7408,7 @@ var require_react_dom_development = __commonJS({
         var HostPortal = 4;
         var HostComponent = 5;
         var HostText = 6;
-        var Fragment5 = 7;
+        var Fragment4 = 7;
         var Mode = 8;
         var ContextConsumer = 9;
         var ContextProvider = 10;
@@ -8564,7 +8563,7 @@ var require_react_dom_development = __commonJS({
               return "DehydratedFragment";
             case ForwardRef:
               return getWrappedName$1(type, type.render, "ForwardRef");
-            case Fragment5:
+            case Fragment4:
               return "Fragment";
             case HostComponent:
               return type;
@@ -16989,7 +16988,7 @@ var require_react_dom_development = __commonJS({
             }
           }
           function updateFragment2(returnFiber, current2, fragment, lanes, key) {
-            if (current2 === null || current2.tag !== Fragment5) {
+            if (current2 === null || current2.tag !== Fragment4) {
               var created = createFiberFromFragment(fragment, returnFiber.mode, lanes, key);
               created.return = returnFiber;
               return created;
@@ -17392,7 +17391,7 @@ var require_react_dom_development = __commonJS({
               if (child.key === key) {
                 var elementType = element.type;
                 if (elementType === REACT_FRAGMENT_TYPE) {
-                  if (child.tag === Fragment5) {
+                  if (child.tag === Fragment4) {
                     deleteRemainingChildren(returnFiber, child.sibling);
                     var existing = useFiber(child, element.props.children);
                     existing.return = returnFiber;
@@ -22866,7 +22865,7 @@ var require_react_dom_development = __commonJS({
               var _resolvedProps2 = workInProgress2.elementType === type ? _unresolvedProps2 : resolveDefaultProps(type, _unresolvedProps2);
               return updateForwardRef(current2, workInProgress2, type, _resolvedProps2, renderLanes2);
             }
-            case Fragment5:
+            case Fragment4:
               return updateFragment(current2, workInProgress2, renderLanes2);
             case Mode:
               return updateMode(current2, workInProgress2, renderLanes2);
@@ -23138,7 +23137,7 @@ var require_react_dom_development = __commonJS({
             case SimpleMemoComponent:
             case FunctionComponent:
             case ForwardRef:
-            case Fragment5:
+            case Fragment4:
             case Mode:
             case Profiler:
             case ContextConsumer:
@@ -27390,7 +27389,7 @@ var require_react_dom_development = __commonJS({
           return fiber;
         }
         function createFiberFromFragment(elements, mode, lanes, key) {
-          var fiber = createFiber(Fragment5, elements, key, mode);
+          var fiber = createFiber(Fragment4, elements, key, mode);
           fiber.lanes = lanes;
           return fiber;
         }
@@ -28808,12 +28807,25 @@ function resolveWebElement(ref) {
 function useApplyWebClassName(ref, className, enabled = true) {
   react.useLayoutEffect(() => {
     if (!enabled || reactNative.Platform.OS !== "web" || !className?.trim()) return;
-    const element = resolveWebElement(ref);
-    if (!element) return;
+    let cancelled = false;
+    let rafId = 0;
+    let appliedElement = null;
     const classes = className.trim().split(/\s+/);
-    element.classList.add(...classes);
+    const apply = () => {
+      if (cancelled) return;
+      const element = resolveWebElement(ref);
+      if (!element) {
+        rafId = requestAnimationFrame(apply);
+        return;
+      }
+      appliedElement = element;
+      element.classList.add(...classes);
+    };
+    apply();
     return () => {
-      element.classList.remove(...classes);
+      cancelled = true;
+      if (rafId) cancelAnimationFrame(rafId);
+      appliedElement?.classList.remove(...classes);
     };
   }, [ref, className, enabled]);
 }
@@ -28989,6 +29001,7 @@ function Input({
 var styles2 = reactNative.StyleSheet.create({
   wrapper: {
     width: "100%",
+    minWidth: 0,
     gap: spacing.sm
   },
   iconSlot: {
@@ -29410,29 +29423,42 @@ function useMediaQuery(query) {
   }, [query]);
   return matches;
 }
-function SidebarNavItem({ item, isOpen, onNavigate }) {
+
+// src/web/layout/nav-active.ts
+function isNavItemActive(pathname, item) {
+  if (item.end) {
+    return pathname === item.to;
+  }
+  return pathname === item.to || pathname.startsWith(`${item.to}/`);
+}
+function SidebarNavItem({ item, isOpen, isActive, onNavigate }) {
   if (item.hidden) {
     return null;
   }
-  const handleClick = () => {
+  const handleClick = (event) => {
+    event.preventDefault();
+    if (item.disabled) {
+      return;
+    }
     item.onClick?.();
     onNavigate?.(item);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactRouterDom.NavLink,
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
     {
-      to: item.to,
-      end: item.end,
+      type: "button",
       onClick: handleClick,
+      "aria-current": isActive ? "page" : void 0,
       "aria-disabled": item.disabled,
+      disabled: item.disabled,
       tabIndex: item.disabled ? -1 : void 0,
-      className: ({ isActive }) => cn(
+      className: cn(
         "relative flex items-center rounded-xl px-4 py-3 transition-[background-color,color,gap,padding] duration-300 ease-in-out",
         isOpen ? "w-full gap-4" : "justify-center gap-0 px-3",
         item.disabled && "pointer-events-none opacity-50",
         isActive ? "bg-black/12 text-white" : "text-navy-100 hover:bg-white/5"
       ),
-      children: ({ isActive }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
@@ -29454,7 +29480,7 @@ function SidebarNavItem({ item, isOpen, onNavigate }) {
             children: item.label
           }
         )
-      ] })
+      ]
     }
   );
 }
@@ -29529,6 +29555,7 @@ function Sidebar({
   branding,
   labels,
   sidebarStorageKey,
+  pathname,
   user,
   onLogout,
   className,
@@ -29542,7 +29569,6 @@ function Sidebar({
   collapsed,
   onCollapsedChange
 }) {
-  const location = reactRouterDom.useLocation();
   const isDesktop = useMediaQuery("(min-width: 768px)");
   const [internalCollapsed, setInternalCollapsed] = react.useState(
     () => readInitialCollapsedState(sidebarStorageKey, initialCollapsed)
@@ -29578,16 +29604,16 @@ function Sidebar({
     },
     [isDesktop, onMobileClose, onNavItemClick]
   );
-  const pathnameRef = react.useRef(location.pathname);
+  const pathnameRef = react.useRef(pathname);
   react.useEffect(() => {
-    if (pathnameRef.current === location.pathname) {
+    if (pathnameRef.current === pathname) {
       return;
     }
-    pathnameRef.current = location.pathname;
+    pathnameRef.current = pathname;
     if (!isDesktop) {
       onMobileClose?.();
     }
-  }, [location.pathname, isDesktop, onMobileClose]);
+  }, [pathname, isDesktop, onMobileClose]);
   react.useEffect(() => {
     if (!mobileOpen || isDesktop) {
       return;
@@ -29668,6 +29694,7 @@ function Sidebar({
             {
               item,
               isOpen: isExpanded,
+              isActive: isNavItemActive(pathname, item),
               onNavigate: handleNavItemNavigate
             },
             item.to
@@ -29678,6 +29705,7 @@ function Sidebar({
               {
                 item,
                 isOpen: isExpanded,
+                isActive: isNavItemActive(pathname, item),
                 onNavigate: handleNavItemNavigate
               },
               item.to
@@ -30440,7 +30468,7 @@ function TableActionsMenu({
   className,
   menuClassName,
   menuWidth = MENU_WIDTH_PX,
-  menuFitContent = false
+  menuFitContent = true
 }) {
   const [open, setOpen] = react.useState(false);
   const [menuPosition, setMenuPosition] = react.useState(null);
@@ -30453,11 +30481,14 @@ function TableActionsMenu({
   }, []);
   const updateMenuPosition = react.useCallback(() => {
     const trigger = triggerRef.current;
+    const menuEl = menuRef.current;
     if (!trigger) {
       return;
     }
     const rect = trigger.getBoundingClientRect();
-    const resolvedMenuWidth = menuFitContent ? menuRef.current?.getBoundingClientRect().width ?? menuWidth : menuWidth;
+    const viewportMaxWidth = typeof window === "undefined" ? menuWidth : Math.max(menuWidth, window.innerWidth - MENU_VIEWPORT_MARGIN_PX * 2);
+    const measuredWidth = menuFitContent ? menuEl?.offsetWidth || menuEl?.getBoundingClientRect().width || menuWidth : menuWidth;
+    const resolvedMenuWidth = Math.min(Math.max(measuredWidth, 1), viewportMaxWidth);
     setMenuPosition({
       top: rect.bottom + MENU_OFFSET_PX,
       left: clampMenuLeft(rect.right - resolvedMenuWidth, resolvedMenuWidth)
@@ -30470,13 +30501,7 @@ function TableActionsMenu({
       return;
     }
     updateMenuPosition();
-  }, [open, updateMenuPosition]);
-  useIsomorphicLayoutEffect(() => {
-    if (!open || !menuFitContent) {
-      return;
-    }
-    updateMenuPosition();
-  }, [items, menuFitContent, open, updateMenuPosition]);
+  }, [open, items, menuFitContent, updateMenuPosition]);
   react.useEffect(() => {
     if (!open) {
       return;
@@ -30502,7 +30527,7 @@ function TableActionsMenu({
   if (items.length === 0) {
     return null;
   }
-  const menu = open && menuPosition != null ? /* @__PURE__ */ jsxRuntime.jsx(
+  const menu = open ? /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ref: menuRef,
@@ -30510,9 +30535,13 @@ function TableActionsMenu({
       role: "menu",
       style: {
         position: "fixed",
-        top: menuPosition.top,
-        left: menuPosition.left,
-        ...menuFitContent ? { width: "max-content" } : { width: menuWidth }
+        top: menuPosition?.top ?? 0,
+        left: menuPosition?.left ?? 0,
+        maxWidth: `calc(100vw - ${MENU_VIEWPORT_MARGIN_PX * 2}px)`,
+        ...menuFitContent ? { width: "max-content" } : { width: menuWidth },
+        // Hide until we have a measured viewport-safe position.
+        visibility: menuPosition != null ? "visible" : "hidden",
+        pointerEvents: menuPosition != null ? "auto" : "none"
       },
       className: cn(
         "z-50 overflow-hidden rounded-2xl border border-storm-gray-50 bg-white shadow-[0_4px_20px_0_rgba(0,0,0,0.05)]",
@@ -30534,14 +30563,13 @@ function TableActionsMenu({
               item.onSelect();
             },
             className: cn(
-              "flex h-[51px] cursor-pointer items-center gap-2.5 px-3 text-left typography-14 font-medium text-storm-gray-900 transition-colors hover:bg-storm-gray-0",
-              menuFitContent ? "w-auto" : "w-full",
+              "flex h-[51px] w-full cursor-pointer items-center gap-2.5 px-3 text-left typography-14 font-medium text-storm-gray-900 transition-colors hover:bg-storm-gray-0",
               index > 0 && "border-t border-storm-gray-50",
               item.disabled && "cursor-not-allowed opacity-50"
             ),
             children: [
               icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex size-5 shrink-0 items-center justify-center text-storm-gray-200", children: icon }) : null,
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: item.label })
             ]
           },
           item.id
@@ -30845,6 +30873,8 @@ var variantConfig = {
 };
 var sizeConfig = {
   lg: {
+    /** Matches Tailwind `h-13` so size stays stable before web classNames attach. */
+    minHeight: 52,
     borderRadius: 16,
     paddingTop: 8,
     paddingRight: 8,
@@ -30858,6 +30888,7 @@ var sizeConfig = {
     iconSize: 20
   },
   sm: {
+    minHeight: 40,
     borderRadius: 12,
     paddingTop: 8,
     paddingRight: 8,
@@ -30903,6 +30934,7 @@ function Button({
   const containerStyle = [
     styles3.base,
     {
+      minHeight: metrics.minHeight,
       borderRadius: metrics.borderRadius,
       backgroundColor: preset.backgroundColor,
       paddingTop: metrics.paddingTop,
@@ -31138,6 +31170,28 @@ function Modal({
   return typeof document !== "undefined" ? (0, import_react_dom2.createPortal)(modal, document.body) : modal;
 }
 var DRAWER_TRANSITION_MS = 300;
+var bodyScrollLockCount = 0;
+var previousBodyOverflow = "";
+function lockBodyScroll() {
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (bodyScrollLockCount === 0) {
+    previousBodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  bodyScrollLockCount += 1;
+}
+function unlockBodyScroll() {
+  if (typeof document === "undefined") {
+    return;
+  }
+  bodyScrollLockCount = Math.max(0, bodyScrollLockCount - 1);
+  if (bodyScrollLockCount === 0) {
+    document.body.style.overflow = previousBodyOverflow;
+    previousBodyOverflow = "";
+  }
+}
 function Drawer({
   open,
   title,
@@ -31178,8 +31232,7 @@ function Drawer({
     if (!isPresent) {
       return;
     }
-    const previousOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
+    lockBodyScroll();
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
         onClose();
@@ -31187,7 +31240,7 @@ function Drawer({
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => {
-      document.body.style.overflow = previousOverflow;
+      unlockBodyScroll();
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [isPresent, onClose]);
@@ -31533,6 +31586,7 @@ function ConfirmModal({
   confirmText,
   onCancel,
   onConfirm,
+  icon,
   cancelDisabled = false,
   confirmDisabled = false,
   closeOnBackdrop = true,
@@ -31578,7 +31632,8 @@ function ConfirmModal({
             event.stopPropagation();
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex flex-col gap-3 text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex flex-col items-center gap-3 text-center", children: [
+              icon ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-14 items-center justify-center rounded-2xl bg-storm-gray-50 text-storm-gray-500", children: icon }) : null,
               /* @__PURE__ */ jsxRuntime.jsx(
                 "h2",
                 {
@@ -31739,6 +31794,7 @@ exports.cn = cn;
 exports.getPaginationRange = getPaginationRange;
 exports.getTotalPages = getTotalPages;
 exports.getVisiblePageNumbers = getVisiblePageNumbers;
+exports.isNavItemActive = isNavItemActive;
 exports.runMutationWithToast = runMutationWithToast;
 exports.tableRowDisabledCellClassName = tableRowDisabledCellClassName;
 exports.useMediaQuery = useMediaQuery;