@scripso-homepad/ui 0.4.9 → 0.4.10

package/dist/index.d.cts

@@ -191,6 +191,8 @@ type DatePickerFieldProps = {
     containerStyle?: StyleProp<ViewStyle>;
     className?: string;
     fieldClassName?: string;
+    fieldStyle?: StyleProp<ViewStyle>;
+    fieldOutlineStyle?: StyleProp<ViewStyle>;
     panelClassName?: string;
     labelClassName?: string;
     errorClassName?: string;

package/dist/index.d.ts

@@ -191,6 +191,8 @@ type DatePickerFieldProps = {
     containerStyle?: StyleProp<ViewStyle>;
     className?: string;
     fieldClassName?: string;
+    fieldStyle?: StyleProp<ViewStyle>;
+    fieldOutlineStyle?: StyleProp<ViewStyle>;
     panelClassName?: string;
     labelClassName?: string;
     errorClassName?: string;

package/dist/index.js

@@ -2172,6 +2172,8 @@ function DatePicker(props) {
     containerStyle,
     className,
     fieldClassName,
+    fieldStyle,
+    fieldOutlineStyle,
     panelClassName,
     labelClassName,
     errorClassName,
@@ -2265,96 +2267,120 @@ function DatePicker(props) {
       closePicker();
     }
   }
-  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles4.wrapper, containerStyle], children: [
-    label ? /* @__PURE__ */ jsx(Label, { disabled, style: styles4.label, className: labelClassName, children: label }) : null,
-    /* @__PURE__ */ jsx(View, { style: [fieldStyles.outline, styles4.fieldOutline], children: /* @__PURE__ */ jsxs(
-      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__ */ jsxs(
+    View,
+    {
+      ref: wrapperRef,
+      style: [styles4.wrapper, isFluidField && styles4.wrapperFluid, containerStyle],
+      children: [
+        label ? /* @__PURE__ */ jsx(Label, { disabled, style: styles4.label, className: labelClassName, children: label }) : null,
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [
+              fieldStyles.outline,
+              styles4.fieldOutline,
+              isFluidField && styles4.fieldOutlineFluid,
+              fieldOutlineStyle
+            ],
+            children: /* @__PURE__ */ jsxs(
+              Pressable,
+              {
+                ref: triggerRef,
+                accessibilityRole: "button",
+                accessibilityState: { disabled, expanded: open },
+                disabled,
+                onPress: openPicker,
+                style: [
+                  calendarFieldMetrics.container,
+                  isFluidField && styles4.fieldContainerFluid,
+                  fieldStyles.container,
+                  fieldStyle
+                ],
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      style: [calendarFieldMetrics.value, valueTextStyle],
+                      numberOfLines: 1,
+                      children: displayValue
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(View, { style: styles4.iconSlot, children: /* @__PURE__ */ jsx(
+                    CalendarIcon,
+                    {
+                      size: CALENDAR_FIELD_ICON_SIZE,
+                      color: disabled ? colors.stormGray200 : colors.stormGray150
+                    }
+                  ) })
+                ]
+              }
+            )
+          }
+        ),
+        helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles4.error : styles4.hint, children: helperMessage }) : null,
+        /* @__PURE__ */ jsx(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: closePicker, children: /* @__PURE__ */ jsxs(View, { style: styles4.modalRoot, children: [
           /* @__PURE__ */ jsx(
-            Text,
+            Pressable,
             {
-              style: [calendarFieldMetrics.value, valueTextStyle],
-              numberOfLines: 1,
-              children: displayValue
+              style: styles4.backdrop,
+              onPress: closePicker,
+              accessibilityRole: "button",
+              accessibilityLabel: labels?.closeCalendar ?? translations.closeCalendar
             }
           ),
-          /* @__PURE__ */ jsx(View, { style: styles4.iconSlot, children: /* @__PURE__ */ jsx(
-            CalendarIcon,
-            {
-              size: CALENDAR_FIELD_ICON_SIZE,
-              color: disabled ? colors.stormGray200 : colors.stormGray150
-            }
-          ) })
-        ]
-      }
-    ) }),
-    helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles4.error : styles4.hint, children: helperMessage }) : null,
-    /* @__PURE__ */ jsx(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: closePicker, children: /* @__PURE__ */ jsxs(View, { style: styles4.modalRoot, children: [
-      /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          style: styles4.backdrop,
-          onPress: closePicker,
-          accessibilityRole: "button",
-          accessibilityLabel: labels?.closeCalendar ?? translations.closeCalendar
-        }
-      ),
-      anchor ? /* @__PURE__ */ jsx(
-        View,
-        {
-          style: [
-            styles4.panelPosition,
-            {
-              top: dropdownTop,
-              left: panelLeft,
-              width: panelWidth,
-              height: CALENDAR_PANEL_HEIGHT
-            }
-          ],
-          children: props.mode === "range" ? /* @__PURE__ */ jsx(
-            Calendar,
-            {
-              mode: "range",
-              value: props.value,
-              onChange: handleRangeSelect,
-              viewDate,
-              defaultViewDate: resolvedDefaultViewDate,
-              onViewDateChange,
-              locale: resolvedLocale,
-              labels,
-              minDate,
-              maxDate,
-              today,
-              className: panelClassName
-            }
-          ) : /* @__PURE__ */ jsx(
-            Calendar,
+          anchor ? /* @__PURE__ */ jsx(
+            View,
             {
-              mode: "single",
-              value: props.value,
-              onChange: handleSingleSelect,
-              viewDate,
-              defaultViewDate: resolvedDefaultViewDate,
-              onViewDateChange,
-              locale: resolvedLocale,
-              labels,
-              minDate,
-              maxDate,
-              today,
-              className: panelClassName
+              style: [
+                styles4.panelPosition,
+                {
+                  top: dropdownTop,
+                  left: panelLeft,
+                  width: panelWidth,
+                  height: CALENDAR_PANEL_HEIGHT
+                }
+              ],
+              children: props.mode === "range" ? /* @__PURE__ */ jsx(
+                Calendar,
+                {
+                  mode: "range",
+                  value: props.value,
+                  onChange: handleRangeSelect,
+                  viewDate,
+                  defaultViewDate: resolvedDefaultViewDate,
+                  onViewDateChange,
+                  locale: resolvedLocale,
+                  labels,
+                  minDate,
+                  maxDate,
+                  today,
+                  className: panelClassName
+                }
+              ) : /* @__PURE__ */ jsx(
+                Calendar,
+                {
+                  mode: "single",
+                  value: props.value,
+                  onChange: handleSingleSelect,
+                  viewDate,
+                  defaultViewDate: resolvedDefaultViewDate,
+                  onViewDateChange,
+                  locale: resolvedLocale,
+                  labels,
+                  minDate,
+                  maxDate,
+                  today,
+                  className: panelClassName
+                }
+              )
             }
-          )
-        }
-      ) : null
-    ] }) })
-  ] });
+          ) : null
+        ] }) })
+      ]
+    }
+  );
 }
 var styles4 = StyleSheet.create({
   wrapper: {
@@ -2362,11 +2388,24 @@ var styles4 = 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
   },