@scripso-homepad/ui 0.4.14 → 0.4.16

package/dist/index.d.cts

@@ -48,7 +48,7 @@ interface InputProps extends TextInputProps {
     /** When `secureTextEntry` is set, show a toggleable eye icon. Pass `false` to disable. */
     showPasswordToggle?: boolean;
 }
-declare function Input({ label, leftIcon, rightIcon, error, invalid, hint, containerStyle, style, className, fieldClassName, fieldStyle, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, secureTextEntry, showPasswordToggle, onFocus, onBlur, ...props }: InputProps): react.JSX.Element;
+declare function Input({ label, leftIcon, rightIcon, error, invalid, hint, containerStyle, style, className, fieldClassName, fieldStyle, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, secureTextEntry, showPasswordToggle, onFocus, onBlur, multiline, textAlignVertical, ...props }: InputProps): react.JSX.Element;
 
 type SelectOption = {
     value: string;

package/dist/index.d.ts

@@ -48,7 +48,7 @@ interface InputProps extends TextInputProps {
     /** When `secureTextEntry` is set, show a toggleable eye icon. Pass `false` to disable. */
     showPasswordToggle?: boolean;
 }
-declare function Input({ label, leftIcon, rightIcon, error, invalid, hint, containerStyle, style, className, fieldClassName, fieldStyle, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, secureTextEntry, showPasswordToggle, onFocus, onBlur, ...props }: InputProps): react.JSX.Element;
+declare function Input({ label, leftIcon, rightIcon, error, invalid, hint, containerStyle, style, className, fieldClassName, fieldStyle, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, secureTextEntry, showPasswordToggle, onFocus, onBlur, multiline, textAlignVertical, ...props }: InputProps): react.JSX.Element;
 
 type SelectOption = {
     value: string;

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-ANDWP4YU.js';
-export { Button, Input, Label, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray, typographyScale } from './chunk-ANDWP4YU.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;
         }
@@ -28766,22 +28765,28 @@ var inputFieldMetrics = reactNative.StyleSheet.create({
   input: {
     flex: 1,
     minWidth: 0,
+    width: "100%",
     fontFamily: fonts.sans,
     fontSize: fontSize.md,
     fontWeight: fontWeight.medium,
-    lineHeight: INPUT_TEXT_LINE_HEIGHT,
     paddingVertical: 0,
     paddingHorizontal: 0,
     margin: 0,
     borderWidth: 0,
     backgroundColor: colors.transparent,
     ...reactNative.Platform.OS === "android" ? { includeFontPadding: false } : null,
+    ...reactNative.Platform.OS === "ios" ? { lineHeight: INPUT_TEXT_LINE_HEIGHT, paddingVertical: 2 } : null,
     ...reactNative.Platform.OS === "web" ? {
       alignSelf: "center",
-      outlineStyle: "none"
+      outlineStyle: "none",
+      lineHeight: INPUT_TEXT_LINE_HEIGHT
     } : {
       alignSelf: "stretch"
     }
+  },
+  /** Single-line: avoid Android lineHeight jump between placeholder and typed text. */
+  inputSingleLine: {
+    ...reactNative.Platform.OS === "android" ? { textAlignVertical: "center" } : null
   }
 });
 function hasClassList(node) {
@@ -28802,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]);
 }
@@ -28879,6 +28897,8 @@ function Input({
   showPasswordToggle,
   onFocus,
   onBlur,
+  multiline,
+  textAlignVertical,
   ...props
 }) {
   const wrapperRef = react.useRef(null);
@@ -28895,6 +28915,7 @@ function Input({
   const hasError = Boolean(error) || Boolean(invalid);
   const passwordToggleEnabled = secureTextEntry === true && showPasswordToggle !== false && rightIcon == null;
   const effectiveSecureTextEntry = passwordToggleEnabled ? !passwordVisible : secureTextEntry;
+  const resolvedTextAlignVertical = textAlignVertical ?? (multiline ? "top" : "center");
   const visualState = resolveInputVisualState({
     focused,
     error: hasError,
@@ -28954,12 +28975,16 @@ function Input({
               ref: inputRef,
               style: [
                 inputFieldMetrics.input,
+                !multiline ? inputFieldMetrics.inputSingleLine : null,
                 fieldStyles.text,
                 style
               ],
               placeholderTextColor: fieldStyles.placeholder,
               editable,
+              multiline,
               secureTextEntry: effectiveSecureTextEntry,
+              textAlign: "left",
+              textAlignVertical: resolvedTextAlignVertical,
               onFocus: handleFocus,
               onBlur: handleBlur,
               accessibilityState: { disabled: isDisabled },
@@ -28976,6 +29001,7 @@ function Input({
 var styles2 = reactNative.StyleSheet.create({
   wrapper: {
     width: "100%",
+    minWidth: 0,
     gap: spacing.sm
   },
   iconSlot: {
@@ -29397,29 +29423,48 @@ 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 isModifiedClick(event) {
+  return event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0;
+}
+function SidebarNavItem({ item, isOpen, isActive, onNavigate }) {
   if (item.hidden) {
     return null;
   }
-  const handleClick = () => {
+  const handleClick = (event) => {
+    if (item.disabled) {
+      event.preventDefault();
+      return;
+    }
+    if (event.defaultPrevented || isModifiedClick(event)) {
+      return;
+    }
+    event.preventDefault();
     item.onClick?.();
     onNavigate?.(item);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactRouterDom.NavLink,
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "a",
     {
-      to: item.to,
-      end: item.end,
+      href: item.to,
       onClick: handleClick,
+      "aria-current": isActive ? "page" : void 0,
       "aria-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",
           {
@@ -29441,7 +29486,7 @@ function SidebarNavItem({ item, isOpen, onNavigate }) {
             children: item.label
           }
         )
-      ] })
+      ]
     }
   );
 }
@@ -29516,6 +29561,7 @@ function Sidebar({
   branding,
   labels,
   sidebarStorageKey,
+  pathname,
   user,
   onLogout,
   className,
@@ -29529,7 +29575,6 @@ function Sidebar({
   collapsed,
   onCollapsedChange
 }) {
-  const location = reactRouterDom.useLocation();
   const isDesktop = useMediaQuery("(min-width: 768px)");
   const [internalCollapsed, setInternalCollapsed] = react.useState(
     () => readInitialCollapsedState(sidebarStorageKey, initialCollapsed)
@@ -29565,16 +29610,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;
@@ -29655,6 +29700,7 @@ function Sidebar({
             {
               item,
               isOpen: isExpanded,
+              isActive: isNavItemActive(pathname, item),
               onNavigate: handleNavItemNavigate
             },
             item.to
@@ -29665,6 +29711,7 @@ function Sidebar({
               {
                 item,
                 isOpen: isExpanded,
+                isActive: isNavItemActive(pathname, item),
                 onNavigate: handleNavItemNavigate
               },
               item.to
@@ -30341,7 +30388,8 @@ function TableActionsCell({ className, children, ...props }) {
         tableCellPaddingClassName,
         tableBodyClassName,
         tableStickyRightShadowClassName,
-        disabled && tableRowDisabledCellClassName,
+        // Keep an opaque sticky background so scrolled cells never bleed through.
+        disabled && "bg-white [&>*]:opacity-70",
         className
       ),
       ...props,
@@ -30426,7 +30474,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);
@@ -30439,11 +30487,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)
@@ -30456,13 +30507,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;
@@ -30488,7 +30533,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,
@@ -30496,9 +30541,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)]",
@@ -30520,14 +30569,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
@@ -30831,6 +30879,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,
@@ -30844,6 +30894,7 @@ var sizeConfig = {
     iconSize: 20
   },
   sm: {
+    minHeight: 40,
     borderRadius: 12,
     paddingTop: 8,
     paddingRight: 8,
@@ -30889,6 +30940,7 @@ function Button({
   const containerStyle = [
     styles3.base,
     {
+      minHeight: metrics.minHeight,
       borderRadius: metrics.borderRadius,
       backgroundColor: preset.backgroundColor,
       paddingTop: metrics.paddingTop,
@@ -31085,7 +31137,10 @@ function Modal({
               "footer",
               {
                 className: cn(
-                  footerLayout === "split" ? "grid w-full shrink-0 grid-cols-2 gap-4" : cn("flex shrink-0 gap-4", footerAlignClasses[footerAlign])
+                  footerLayout === "split" ? "grid w-full shrink-0 grid-cols-1 gap-3 min-[400px]:grid-cols-2 min-[400px]:gap-4" : cn(
+                    "flex shrink-0 flex-col-reverse gap-3 sm:flex-row sm:gap-4",
+                    footerAlignClasses[footerAlign]
+                  )
                 ),
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
@@ -31516,6 +31571,7 @@ function ConfirmModal({
   confirmText,
   onCancel,
   onConfirm,
+  icon,
   cancelDisabled = false,
   confirmDisabled = false,
   closeOnBackdrop = true,
@@ -31561,7 +31617,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",
                 {
@@ -31722,6 +31779,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;