@ecohouse/ui 0.1.25 → 0.1.27

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,
@@ -3034,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;
@@ -3041,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,
@@ -3182,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,
@@ -3204,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.grey500 : 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,
@@ -3355,6 +3425,9 @@ var styles12 = reactNative.StyleSheet.create({
   rootOpen: {
     zIndex: 30
   },
+  rangeRoot: {
+    width: RANGE_TRIGGER_WIDTH
+  },
   disabled: {
     opacity: 0.6
   },
@@ -3381,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,
@@ -3408,6 +3540,9 @@ var styles12 = reactNative.StyleSheet.create({
       }
     })
   },
+  rangeMenu: {
+    width: RANGE_TRIGGER_WIDTH
+  },
   calendarHeader: {
     height: 36,
     flexDirection: "row",