@scripso-homepad/ui 0.4.8 → 0.4.10

package/dist/index.cjs

@@ -359,12 +359,16 @@ function Button({
   const textRef = react.useRef(null);
   const preset = variantConfig[variant];
   const metrics = sizeConfig[size];
-  useApplyWebClassName(containerRef, className);
-  useApplyWebClassName(textRef, textClassName);
   const label = typeof children !== "undefined" ? children : title;
   const hasCustomChildren = typeof children !== "undefined";
   const customIcon = icon != null && typeof icon !== "boolean" ? icon : void 0;
   const hasIcon = showIcon || icon === true || customIcon != null;
+  const resolvedContainerClassName = [
+    reactNative.Platform.OS === "web" ? "max-md:px-4!" : "",
+    className
+  ].filter(Boolean).join(" ");
+  useApplyWebClassName(containerRef, resolvedContainerClassName || void 0);
+  useApplyWebClassName(textRef, textClassName);
   const iconNode = customIcon ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowUpRightIcon, { size: metrics.iconSize, color: preset.iconColor });
   const containerStyle = [
     styles.base,
@@ -1232,7 +1236,7 @@ function Select({
   const optionHeight = compact ? SELECT_OPTION_HEIGHT_COMPACT : SELECT_OPTION_HEIGHT;
   const needsScroll = react.useMemo(
     () => resolveSelectDropdownContentHeight(options.length, optionHeight) > SELECT_DROPDOWN_MAX_HEIGHT - SELECT_DROPDOWN_PADDING * 2,
-    [compact, optionHeight, options.length]
+    [optionHeight, options.length]
   );
   useApplyWebClassName(wrapperRef, className);
   useApplyWebClassName(triggerRef, fieldClassName);
@@ -2986,6 +2990,8 @@ function DatePicker(props) {
     containerStyle,
     className,
     fieldClassName,
+    fieldStyle,
+    fieldOutlineStyle,
     panelClassName,
     labelClassName,
     errorClassName,
@@ -3079,96 +3085,120 @@ function DatePicker(props) {
       closePicker();
     }
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: wrapperRef, style: [styles7.wrapper, containerStyle], children: [
-    label ? /* @__PURE__ */ jsxRuntime.jsx(Label, { disabled, style: styles7.label, className: labelClassName, children: label }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [fieldStyles.outline, styles7.fieldOutline], children: /* @__PURE__ */ jsxRuntime.jsxs(
-      reactNative.Pressable,
-      {
-        ref: triggerRef,
-        accessibilityRole: "button",
-        accessibilityState: { disabled, expanded: open },
-        disabled,
-        onPress: openPicker,
-        style: [calendarFieldMetrics.container, fieldStyles.container],
-        children: [
+  const isFluidField = Boolean(fieldStyle) || Boolean(fieldOutlineStyle);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      ref: wrapperRef,
+      style: [styles7.wrapper, isFluidField && styles7.wrapperFluid, containerStyle],
+      children: [
+        label ? /* @__PURE__ */ jsxRuntime.jsx(Label, { disabled, style: styles7.label, className: labelClassName, children: label }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.View,
+          {
+            style: [
+              fieldStyles.outline,
+              styles7.fieldOutline,
+              isFluidField && styles7.fieldOutlineFluid,
+              fieldOutlineStyle
+            ],
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              reactNative.Pressable,
+              {
+                ref: triggerRef,
+                accessibilityRole: "button",
+                accessibilityState: { disabled, expanded: open },
+                disabled,
+                onPress: openPicker,
+                style: [
+                  calendarFieldMetrics.container,
+                  isFluidField && styles7.fieldContainerFluid,
+                  fieldStyles.container,
+                  fieldStyle
+                ],
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    reactNative.Text,
+                    {
+                      style: [calendarFieldMetrics.value, valueTextStyle],
+                      numberOfLines: 1,
+                      children: displayValue
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    CalendarIcon,
+                    {
+                      size: CALENDAR_FIELD_ICON_SIZE,
+                      color: disabled ? colors.stormGray200 : colors.stormGray150
+                    }
+                  ) })
+                ]
+              }
+            )
+          }
+        ),
+        helperMessage ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { ref: helperRef, style: error ? styles7.error : styles7.hint, children: helperMessage }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: closePicker, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.modalRoot, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.Text,
+            reactNative.Pressable,
             {
-              style: [calendarFieldMetrics.value, valueTextStyle],
-              numberOfLines: 1,
-              children: displayValue
+              style: styles7.backdrop,
+              onPress: closePicker,
+              accessibilityRole: "button",
+              accessibilityLabel: labels?.closeCalendar ?? translations.closeCalendar
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(
-            CalendarIcon,
-            {
-              size: CALENDAR_FIELD_ICON_SIZE,
-              color: disabled ? colors.stormGray200 : colors.stormGray150
-            }
-          ) })
-        ]
-      }
-    ) }),
-    helperMessage ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { ref: helperRef, style: error ? styles7.error : styles7.hint, children: helperMessage }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: closePicker, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.modalRoot, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        reactNative.Pressable,
-        {
-          style: styles7.backdrop,
-          onPress: closePicker,
-          accessibilityRole: "button",
-          accessibilityLabel: labels?.closeCalendar ?? translations.closeCalendar
-        }
-      ),
-      anchor ? /* @__PURE__ */ jsxRuntime.jsx(
-        reactNative.View,
-        {
-          style: [
-            styles7.panelPosition,
-            {
-              top: dropdownTop,
-              left: panelLeft,
-              width: panelWidth,
-              height: CALENDAR_PANEL_HEIGHT
-            }
-          ],
-          children: props.mode === "range" ? /* @__PURE__ */ jsxRuntime.jsx(
-            Calendar,
-            {
-              mode: "range",
-              value: props.value,
-              onChange: handleRangeSelect,
-              viewDate,
-              defaultViewDate: resolvedDefaultViewDate,
-              onViewDateChange,
-              locale: resolvedLocale,
-              labels,
-              minDate,
-              maxDate,
-              today,
-              className: panelClassName
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            Calendar,
+          anchor ? /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.View,
             {
-              mode: "single",
-              value: props.value,
-              onChange: handleSingleSelect,
-              viewDate,
-              defaultViewDate: resolvedDefaultViewDate,
-              onViewDateChange,
-              locale: resolvedLocale,
-              labels,
-              minDate,
-              maxDate,
-              today,
-              className: panelClassName
+              style: [
+                styles7.panelPosition,
+                {
+                  top: dropdownTop,
+                  left: panelLeft,
+                  width: panelWidth,
+                  height: CALENDAR_PANEL_HEIGHT
+                }
+              ],
+              children: props.mode === "range" ? /* @__PURE__ */ jsxRuntime.jsx(
+                Calendar,
+                {
+                  mode: "range",
+                  value: props.value,
+                  onChange: handleRangeSelect,
+                  viewDate,
+                  defaultViewDate: resolvedDefaultViewDate,
+                  onViewDateChange,
+                  locale: resolvedLocale,
+                  labels,
+                  minDate,
+                  maxDate,
+                  today,
+                  className: panelClassName
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                Calendar,
+                {
+                  mode: "single",
+                  value: props.value,
+                  onChange: handleSingleSelect,
+                  viewDate,
+                  defaultViewDate: resolvedDefaultViewDate,
+                  onViewDateChange,
+                  locale: resolvedLocale,
+                  labels,
+                  minDate,
+                  maxDate,
+                  today,
+                  className: panelClassName
+                }
+              )
             }
-          )
-        }
-      ) : null
-    ] }) })
-  ] });
+          ) : null
+        ] }) })
+      ]
+    }
+  );
 }
 var styles7 = reactNative.StyleSheet.create({
   wrapper: {
@@ -3176,11 +3206,24 @@ var styles7 = reactNative.StyleSheet.create({
     maxWidth: "100%",
     gap: SELECT_LABEL_GAP
   },
+  wrapperFluid: {
+    width: "100%"
+  },
   fieldOutline: {
     width: CALENDAR_FIELD_WIDTH,
     maxWidth: "100%",
     alignSelf: "flex-start"
   },
+  fieldOutlineFluid: {
+    width: "100%",
+    alignSelf: "stretch"
+  },
+  fieldContainerFluid: {
+    width: "100%",
+    minWidth: 0,
+    maxWidth: "100%",
+    alignSelf: "stretch"
+  },
   label: {
     ...calendarLabelTypography
   },