@scripso-homepad/ui 0.4.13 → 0.4.15

package/dist/web/index.cjs

@@ -28766,22 +28766,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) {
@@ -28870,6 +28876,7 @@ function Input({
   fieldClassName,
   fieldStyle,
   labelClassName,
+  labelStyles,
   inputClassName,
   errorClassName,
   hintClassName,
@@ -28878,6 +28885,8 @@ function Input({
   showPasswordToggle,
   onFocus,
   onBlur,
+  multiline,
+  textAlignVertical,
   ...props
 }) {
   const wrapperRef = react.useRef(null);
@@ -28894,6 +28903,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,
@@ -28931,7 +28941,15 @@ function Input({
     }
   ) : rightIcon ? renderInputIcon(rightIcon, iconColor) : null;
   return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: wrapperRef, style: [styles2.wrapper, containerStyle], children: [
-    label ? /* @__PURE__ */ jsxRuntime.jsx(Label, { disabled: isDisabled, className: labelClassName, children: label }) : null,
+    label ? /* @__PURE__ */ jsxRuntime.jsx(
+      Label,
+      {
+        disabled: isDisabled,
+        className: labelClassName,
+        style: labelStyles,
+        children: label
+      }
+    ) : null,
     /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: fieldStyles.outline, children: /* @__PURE__ */ jsxRuntime.jsxs(
       reactNative.View,
       {
@@ -28945,12 +28963,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 },
@@ -29295,6 +29317,7 @@ function AppHeader({
   title,
   labels,
   hasBuildingSelect = false,
+  showSearch = true,
   buildingOptions = [],
   selectedBuildingId = "",
   className,
@@ -29337,7 +29360,7 @@ function AppHeader({
               chevronIcon: buildingChevronIcon
             }
           ) : null,
-          /* @__PURE__ */ jsxRuntime.jsx(
+          showSearch ? /* @__PURE__ */ jsxRuntime.jsx(
             Input,
             {
               leftIcon: searchIcon ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { strokeWidth: 1.75 }),
@@ -29350,7 +29373,7 @@ function AppHeader({
               fieldStyle: searchFieldStyle ?? defaultSearchFieldStyle,
               accessibilityLabel: labels.searchPlaceholder
             }
-          ),
+          ) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
@@ -30331,7 +30354,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,
@@ -30389,12 +30413,12 @@ var MENU_WIDTH_PX = 231;
 var MENU_OFFSET_PX = 4;
 var MENU_VIEWPORT_MARGIN_PX = 8;
 var useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
-function clampMenuLeft(left) {
+function clampMenuLeft(left, menuWidth) {
   if (typeof window === "undefined") {
     return left;
   }
   const minLeft = MENU_VIEWPORT_MARGIN_PX;
-  const maxLeft = Math.max(minLeft, window.innerWidth - MENU_WIDTH_PX - MENU_VIEWPORT_MARGIN_PX);
+  const maxLeft = Math.max(minLeft, window.innerWidth - menuWidth - MENU_VIEWPORT_MARGIN_PX);
   return Math.min(Math.max(left, minLeft), maxLeft);
 }
 function resolveMenuItemIcon(item) {
@@ -30414,7 +30438,9 @@ function TableActionsMenu({
   items,
   triggerAriaLabel,
   className,
-  menuClassName
+  menuClassName,
+  menuWidth = MENU_WIDTH_PX,
+  menuFitContent = false
 }) {
   const [open, setOpen] = react.useState(false);
   const [menuPosition, setMenuPosition] = react.useState(null);
@@ -30431,11 +30457,12 @@ function TableActionsMenu({
       return;
     }
     const rect = trigger.getBoundingClientRect();
+    const resolvedMenuWidth = menuFitContent ? menuRef.current?.getBoundingClientRect().width ?? menuWidth : menuWidth;
     setMenuPosition({
       top: rect.bottom + MENU_OFFSET_PX,
-      left: clampMenuLeft(rect.right - MENU_WIDTH_PX)
+      left: clampMenuLeft(rect.right - resolvedMenuWidth, resolvedMenuWidth)
     });
-  }, []);
+  }, [menuFitContent, menuWidth]);
   useOnClickOutside([rootRef, menuRef], closeMenu, open);
   useIsomorphicLayoutEffect(() => {
     if (!open) {
@@ -30444,6 +30471,12 @@ function TableActionsMenu({
     }
     updateMenuPosition();
   }, [open, updateMenuPosition]);
+  useIsomorphicLayoutEffect(() => {
+    if (!open || !menuFitContent) {
+      return;
+    }
+    updateMenuPosition();
+  }, [items, menuFitContent, open, updateMenuPosition]);
   react.useEffect(() => {
     if (!open) {
       return;
@@ -30479,7 +30512,7 @@ function TableActionsMenu({
         position: "fixed",
         top: menuPosition.top,
         left: menuPosition.left,
-        width: MENU_WIDTH_PX
+        ...menuFitContent ? { width: "max-content" } : { width: menuWidth }
       },
       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)]",
@@ -30501,7 +30534,8 @@ function TableActionsMenu({
               item.onSelect();
             },
             className: cn(
-              "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",
+              "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",
               index > 0 && "border-t border-storm-gray-50",
               item.disabled && "cursor-not-allowed opacity-50"
             ),
@@ -31065,7 +31099,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(