@ecohouse/ui 0.1.24 → 0.1.26

package/dist/index.cjs

@@ -37,6 +37,7 @@ var colors = {
   black: "#000000",
   white: "#ffffff",
   whiteAlpha86: "#FFFFFFDB",
+  whiteAlpha60: "#FFFFFF99",
   whiteAlpha40: "#FFFFFF66",
   whiteAlpha20: "#FFFFFF33",
   whiteAlpha6: "#FFFFFF0F",
@@ -236,6 +237,27 @@ var datePickerTypography = {
     lineHeight: 12,
     letterSpacing: 0.36
   },
+  rangeLabel: {
+    fontFamily: fonts.sans,
+    fontSize: 13,
+    fontWeight: "500",
+    lineHeight: 13,
+    letterSpacing: 0
+  },
+  rangeDate: {
+    fontFamily: fonts.sans,
+    fontSize: 16,
+    fontWeight: "500",
+    lineHeight: 16,
+    letterSpacing: 0
+  },
+  rangeTime: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "400",
+    lineHeight: 14,
+    letterSpacing: 0
+  },
   /** Calendar month/year heading — Bold, centered, White. */
   monthHeading: {
     fontFamily: fonts.sans,
@@ -2230,7 +2252,9 @@ var styles6 = reactNative.StyleSheet.create({
 var ICON_SIZE4 = 20;
 var ANIMATION_DURATION = 200;
 var OPTION_HORIZONTAL_PADDING = 16;
+var OPTION_CONTENT_GAP = 12;
 var OPTION_MIN_WIDTH = 97;
+var OPTION_MEASUREMENT_TOLERANCE = 0.5;
 var SegmentedToggle = react.forwardRef(
   function SegmentedToggle2({
     options,
@@ -2259,12 +2283,15 @@ var SegmentedToggle = react.forwardRef(
     const [contentWidths, setContentWidths] = react.useState([0, 0]);
     const [containerWidth, setContainerWidth] = react.useState(0);
     const availableOptionWidth = Math.max(0, (containerWidth - 12) / 2);
-    const widestContentWidth = Math.max(...contentWidths);
-    const contentBasedOptionWidth = widestContentWidth > 0 ? Math.max(OPTION_MIN_WIDTH, widestContentWidth + OPTION_HORIZONTAL_PADDING * 2) : 0;
-    const optionWidth = fullWidth ? availableOptionWidth : contentBasedOptionWidth;
+    const resolveContentOptionWidth = (contentWidth) => contentWidth > 0 ? Math.max(
+      OPTION_MIN_WIDTH,
+      contentWidth + OPTION_HORIZONTAL_PADDING * 2 + OPTION_MEASUREMENT_TOLERANCE
+    ) : 0;
+    const optionWidths = fullWidth ? [availableOptionWidth, availableOptionWidth] : [resolveContentOptionWidth(contentWidths[0]), resolveContentOptionWidth(contentWidths[1])];
+    const selectedOptionWidth = optionWidths[selectedIndex];
     const indicatorTranslateX = progress.interpolate({
       inputRange: [0, 1],
-      outputRange: [0, optionWidth + 4]
+      outputRange: [0, optionWidths[0] + 4]
     });
     useApplyWebClassName(containerRef, resolvedClassName);
     react.useEffect(() => {
@@ -2302,13 +2329,37 @@ var SegmentedToggle = react.forwardRef(
         ],
         accessibilityRole: "radiogroup",
         children: [
-          optionWidth > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          !fullWidth ? options.map(({ value: optionValue, label, icon: Icon2 }, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+            reactNative.View,
+            {
+              pointerEvents: "none",
+              "aria-hidden": true,
+              accessibilityElementsHidden: true,
+              importantForAccessibility: "no-hide-descendants",
+              onLayout: (event) => {
+                const nextWidth = event.nativeEvent.layout.width;
+                setContentWidths((currentWidths) => {
+                  if (currentWidths[index] === nextWidth) return currentWidths;
+                  const nextWidths = [currentWidths[0], currentWidths[1]];
+                  nextWidths[index] = nextWidth;
+                  return nextWidths;
+                });
+              },
+              style: styles7.optionMeasurement,
+              children: [
+                Icon2 ? /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: ICON_SIZE4 }) : null,
+                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.label, styles7.contentWidthLabel], children: label })
+              ]
+            },
+            `${optionValue}-measurement`
+          )) : null,
+          selectedOptionWidth > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.Animated.View,
             {
               pointerEvents: "none",
               style: [
                 styles7.activeIndicator,
-                { width: optionWidth, transform: [{ translateX: indicatorTranslateX }] }
+                { width: selectedOptionWidth, transform: [{ translateX: indicatorTranslateX }] }
               ]
             }
           ) : null,
@@ -2327,27 +2378,26 @@ var SegmentedToggle = react.forwardRef(
                 accessibilityState: { selected, disabled },
                 style: [
                   styles7.option,
-                  fullWidth ? styles7.optionFullWidth : [styles7.optionContentWidth, optionWidth > 0 && { width: optionWidth }]
+                  fullWidth ? styles7.optionFullWidth : [
+                    styles7.optionContentWidth,
+                    optionWidths[index] > 0 && { width: optionWidths[index] }
+                  ]
                 ],
-                children: /* @__PURE__ */ jsxRuntime.jsxs(
-                  reactNative.View,
-                  {
-                    onLayout: (event) => {
-                      const nextWidth = event.nativeEvent.layout.width;
-                      setContentWidths((currentWidths) => {
-                        if (currentWidths[index] === nextWidth) return currentWidths;
-                        const nextWidths = [currentWidths[0], currentWidths[1]];
-                        nextWidths[index] = nextWidth;
-                        return nextWidths;
-                      });
-                    },
-                    style: styles7.optionContent,
-                    children: [
-                      Icon2 ? /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: ICON_SIZE4, color: iconColor }) : null,
-                      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [styles7.label, { color: labelColor }], children: label })
-                    ]
-                  }
-                )
+                children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.optionContent, children: [
+                  Icon2 ? /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: ICON_SIZE4, color: iconColor }) : null,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    reactNative.Text,
+                    {
+                      numberOfLines: fullWidth ? 1 : void 0,
+                      style: [
+                        styles7.label,
+                        !fullWidth && styles7.contentWidthLabel,
+                        { color: labelColor }
+                      ],
+                      children: label
+                    }
+                  )
+                ] })
               },
               optionValue
             );
@@ -2389,7 +2439,14 @@ var styles7 = reactNative.StyleSheet.create({
     maxWidth: "100%",
     flexDirection: "row",
     alignItems: "center",
-    gap: 12
+    gap: OPTION_CONTENT_GAP
+  },
+  optionMeasurement: {
+    position: "absolute",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: OPTION_CONTENT_GAP,
+    opacity: 0
   },
   optionFullWidth: {
     flex: 1,
@@ -2409,6 +2466,9 @@ var styles7 = reactNative.StyleSheet.create({
   label: {
     ...segmentedToggleTypography,
     flexShrink: 1
+  },
+  contentWidthLabel: {
+    flexShrink: 0
   }
 });
 var defaultLanguageOptions = [
@@ -2996,6 +3056,7 @@ var DEFAULT_MONTH_NAMES = [
 var DEFAULT_WEEKDAY_LABELS = ["\u0535\u0550", "\u0535\u0554", "\u0549\u0550", "\u0540\u0546", "\u0548\u0552\u0550", "\u0547\u0532", "\u053F\u0550"];
 var EMPTY_RANGE = { start: null, end: null };
 var DEFAULT_WIDTH = 380;
+var RANGE_TRIGGER_WIDTH = 382;
 var TRIGGER_HEIGHT = 44;
 var TRIGGER_RADIUS = 60;
 var MENU_RADIUS2 = 20;
@@ -3003,10 +3064,33 @@ var ICON_SIZE7 = 20;
 var NAV_ICON_SIZE = 20;
 var DAY_CELL_HEIGHT = 44;
 var DAY_CIRCLE_SIZE = 44;
+function RangeTriggerField({
+  label,
+  value,
+  time
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles12.rangeField, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: styles12.rangeLabel, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles12.rangeValueRow, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: styles12.rangeDate, children: value }),
+      time ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles12.rangeTimeWrap, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ClockFilledIcon, { color: colors.lightGrey, size: 16 }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles12.rangeTime, children: time })
+      ] }) : null
+    ] })
+  ] });
+}
 var DatePicker = react.forwardRef(
   function DatePicker2(props, forwardedRef) {
     const {
       placeholder = "Select date",
+      variant = "default",
+      startLabel = "Start",
+      endLabel = "End",
+      startTime,
+      endTime,
+      startPlaceholder = placeholder,
+      endPlaceholder = placeholder,
       open: openProp,
       defaultOpen = false,
       onOpenChange,
@@ -3144,18 +3228,28 @@ var DatePicker = react.forwardRef(
     const today = react.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
     const hasValue = isRange ? rangeValue.start != null : singleValue != null;
     const triggerLabel = isRange ? rangeValue.start && rangeValue.end ? `${formatValue(rangeValue.start)} - ${formatValue(rangeValue.end)}` : rangeValue.start ? `${formatValue(rangeValue.start)} - ...` : placeholder : singleValue ? formatValue(singleValue) : placeholder;
-    const triggerBorderColor = isOpen ? colors.primaryMuted : colors.grey700;
+    const usesRangeTrigger = isRange && variant !== "default";
+    const usesVerticalRangeTrigger = usesRangeTrigger && variant === "range-vertical";
+    const triggerBorderColor = usesRangeTrigger ? isOpen ? colors.primary : colors.grey500 : isOpen ? colors.primaryMuted : colors.grey700;
     const triggerTextColor = hasValue ? colors.white : colors.grey100;
+    const startValue = rangeValue.start ? formatValue(rangeValue.start) : startPlaceholder;
+    const endValue = rangeValue.end ? formatValue(rangeValue.end) : endPlaceholder;
     const resolvedAccessibilityLabel = accessibilityLabel ?? placeholder;
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.View,
       {
         ...rest,
         ref: setRootRef,
-        style: [styles12.root, isOpen && styles12.rootOpen, disabled && styles12.disabled, style],
+        style: [
+          styles12.root,
+          usesRangeTrigger && styles12.rangeRoot,
+          isOpen && styles12.rootOpen,
+          disabled && styles12.disabled,
+          style
+        ],
         accessibilityState: { disabled, expanded: isOpen },
         children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles12.triggerWrap, isOpen && styles12.triggerWrapOpen], children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.Pressable,
             {
               ref: triggerRef,
@@ -3166,15 +3260,29 @@ var DatePicker = react.forwardRef(
               accessibilityState: { disabled, expanded: isOpen },
               style: [
                 styles12.trigger,
-                { borderColor: triggerBorderColor, backgroundColor: colors.grey700 }
+                usesRangeTrigger && styles12.rangeTrigger,
+                usesRangeTrigger && (usesVerticalRangeTrigger ? styles12.rangeTriggerVertical : styles12.rangeTriggerHorizontal),
+                {
+                  borderColor: triggerBorderColor,
+                  backgroundColor: usesRangeTrigger ? colors.grey800 : colors.grey700
+                }
               ],
-              children: [
+              children: usesRangeTrigger ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(RangeTriggerField, { label: startLabel, time: startTime, value: startValue }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactNative.View,
+                  {
+                    style: usesVerticalRangeTrigger ? styles12.rangeDividerVertical : styles12.rangeDividerHorizontal
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(RangeTriggerField, { label: endLabel, time: endTime, value: endValue })
+              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles12.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: triggerLabel }),
                 /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles12.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarOutlineIcon, { size: ICON_SIZE7, color: colors.grey100 }) })
-              ]
+              ] })
             }
           ),
-          isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles12.menu, calendarStyle], children: [
+          isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles12.menu, usesRangeTrigger && styles12.rangeMenu, calendarStyle], children: [
             /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles12.calendarHeader, children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 reactNative.Pressable,
@@ -3317,6 +3425,9 @@ var styles12 = reactNative.StyleSheet.create({
   rootOpen: {
     zIndex: 30
   },
+  rangeRoot: {
+    width: RANGE_TRIGGER_WIDTH
+  },
   disabled: {
     opacity: 0.6
   },
@@ -3343,6 +3454,65 @@ var styles12 = reactNative.StyleSheet.create({
     flex: 1,
     minWidth: 0
   },
+  rangeTrigger: {
+    paddingVertical: 0,
+    paddingHorizontal: 0,
+    borderRadius: 15,
+    gap: 0
+  },
+  rangeTriggerHorizontal: {
+    height: 78,
+    flexDirection: "row"
+  },
+  rangeTriggerVertical: {
+    height: 156,
+    flexDirection: "column"
+  },
+  rangeField: {
+    flex: 1,
+    alignSelf: "stretch",
+    minWidth: 0,
+    justifyContent: "center",
+    gap: 8,
+    paddingVertical: 12,
+    paddingHorizontal: 16
+  },
+  rangeLabel: {
+    ...datePickerTypography.rangeLabel,
+    color: colors.whiteAlpha60
+  },
+  rangeValueRow: {
+    minWidth: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 12
+  },
+  rangeDate: {
+    ...datePickerTypography.rangeDate,
+    flexShrink: 1,
+    color: colors.white
+  },
+  rangeTimeWrap: {
+    flexShrink: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 3
+  },
+  rangeTime: {
+    ...datePickerTypography.rangeTime,
+    color: colors.lightGrey
+  },
+  rangeDividerHorizontal: {
+    width: 1,
+    alignSelf: "stretch",
+    backgroundColor: colors.grey500
+  },
+  rangeDividerVertical: {
+    height: 1,
+    alignSelf: "stretch",
+    backgroundColor: colors.grey500
+  },
   iconSlot: {
     width: ICON_SIZE7,
     height: ICON_SIZE7,
@@ -3370,6 +3540,9 @@ var styles12 = reactNative.StyleSheet.create({
       }
     })
   },
+  rangeMenu: {
+    width: RANGE_TRIGGER_WIDTH
+  },
   calendarHeader: {
     height: 36,
     flexDirection: "row",