@ecohouse/ui 0.1.24 → 0.1.26

package/dist/index.d.cts

@@ -501,8 +501,20 @@ type DateRange = {
     start: Date | null;
     end: Date | null;
 };
+type DatePickerVariant = "default" | "range-horizontal" | "range-vertical";
 type DatePickerBaseProps = Omit<ViewProps, "style" | "children"> & {
     placeholder?: string;
+    /** Trigger presentation. Range variants display separate start/end fields. */
+    variant?: DatePickerVariant;
+    /** Labels shown above the start/end values in range trigger variants. */
+    startLabel?: string;
+    endLabel?: string;
+    /** Optional supplementary times shown beside the start/end dates. */
+    startTime?: string;
+    endTime?: string;
+    /** Per-field placeholders used by range trigger variants. */
+    startPlaceholder?: string;
+    endPlaceholder?: string;
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -751,6 +763,7 @@ declare const colors: {
     readonly black: "#000000";
     readonly white: "#ffffff";
     readonly whiteAlpha86: "#FFFFFFDB";
+    readonly whiteAlpha60: "#FFFFFF99";
     readonly whiteAlpha40: "#FFFFFF66";
     readonly whiteAlpha20: "#FFFFFF33";
     readonly whiteAlpha6: "#FFFFFF0F";
@@ -967,6 +980,27 @@ declare const datePickerTypography: {
         readonly lineHeight: 12;
         readonly letterSpacing: 0.36;
     };
+    readonly rangeLabel: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 13;
+        readonly fontWeight: "500";
+        readonly lineHeight: 13;
+        readonly letterSpacing: 0;
+    };
+    readonly rangeDate: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 16;
+        readonly fontWeight: "500";
+        readonly lineHeight: 16;
+        readonly letterSpacing: 0;
+    };
+    readonly rangeTime: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 14;
+        readonly fontWeight: "400";
+        readonly lineHeight: 14;
+        readonly letterSpacing: 0;
+    };
     /** Calendar month/year heading — Bold, centered, White. */
     readonly monthHeading: {
         readonly fontFamily: "Noto Sans Armenian";
@@ -1016,4 +1050,4 @@ declare const textareaTypography: {
     };
 };
 
-export { Amenity, AmenityIcon, type AmenityIconProps, type AmenityName, type AmenityProps, type AmenityVariant, AppleIcon, AreaExpandIcon, ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, type BadgeProps, type BadgeVariant, BagIcon, BathroomsIcon, BedroomsIcon, BellIcon, BrandLogo, type BrandLogoProps, type BrandLogoVariant, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CalendarOutlineIcon, CameraIcon, CardLocationIcon, CheckBadgeIcon, CheckIcon, CheckSuccessIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockFilledIcon, ClockIcon, CloseIcon, CommentCard, type CommentCardProps, CopyIcon, Counter, type CounterProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, FacebookIcon, FavoritesButton, type FavoritesButtonProps, FiltersIcon, GlobeIcon, GooglePlayIcon, type GreyStep, GuestsIcon, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputIcon, type InputProps, type InputSize, InstagramIcon, KeyIcon, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, LayoutGridIcon, LinkedInIcon, ListViewIcon, LocationPinIcon, LogOutIcon, MailIcon, MapCollapseIcon, MapExpandIcon, MapViewIcon, MenuIcon, type MenuIconProps, MenuItem, type MenuItemProps, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, QrCodeIcon, Range, type RangeProps, type RangeValue, RatingInput, type RatingInputProps, RatingStarIcon, SaveHeartIcon, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectIcon, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShareIcon, ShowIcon, SidebarIcon, SortIcon, StarFilledIcon, StarIcon, type StarIconProps, StatCard, type StatCardProps, Textarea, type TextareaProps, Toggle, type ToggleProps, TooltipArrowIcon, UserIcon, UsersAltIcon, VideoIcon, WhatsAppIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
+export { Amenity, AmenityIcon, type AmenityIconProps, type AmenityName, type AmenityProps, type AmenityVariant, AppleIcon, AreaExpandIcon, ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, type BadgeProps, type BadgeVariant, BagIcon, BathroomsIcon, BedroomsIcon, BellIcon, BrandLogo, type BrandLogoProps, type BrandLogoVariant, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CalendarOutlineIcon, CameraIcon, CardLocationIcon, CheckBadgeIcon, CheckIcon, CheckSuccessIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockFilledIcon, ClockIcon, CloseIcon, CommentCard, type CommentCardProps, CopyIcon, Counter, type CounterProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DatePickerVariant, type DateRange, FacebookIcon, FavoritesButton, type FavoritesButtonProps, FiltersIcon, GlobeIcon, GooglePlayIcon, type GreyStep, GuestsIcon, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputIcon, type InputProps, type InputSize, InstagramIcon, KeyIcon, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, LayoutGridIcon, LinkedInIcon, ListViewIcon, LocationPinIcon, LogOutIcon, MailIcon, MapCollapseIcon, MapExpandIcon, MapViewIcon, MenuIcon, type MenuIconProps, MenuItem, type MenuItemProps, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, QrCodeIcon, Range, type RangeProps, type RangeValue, RatingInput, type RatingInputProps, RatingStarIcon, SaveHeartIcon, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectIcon, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShareIcon, ShowIcon, SidebarIcon, SortIcon, StarFilledIcon, StarIcon, type StarIconProps, StatCard, type StatCardProps, Textarea, type TextareaProps, Toggle, type ToggleProps, TooltipArrowIcon, UserIcon, UsersAltIcon, VideoIcon, WhatsAppIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };

package/dist/index.d.ts

@@ -501,8 +501,20 @@ type DateRange = {
     start: Date | null;
     end: Date | null;
 };
+type DatePickerVariant = "default" | "range-horizontal" | "range-vertical";
 type DatePickerBaseProps = Omit<ViewProps, "style" | "children"> & {
     placeholder?: string;
+    /** Trigger presentation. Range variants display separate start/end fields. */
+    variant?: DatePickerVariant;
+    /** Labels shown above the start/end values in range trigger variants. */
+    startLabel?: string;
+    endLabel?: string;
+    /** Optional supplementary times shown beside the start/end dates. */
+    startTime?: string;
+    endTime?: string;
+    /** Per-field placeholders used by range trigger variants. */
+    startPlaceholder?: string;
+    endPlaceholder?: string;
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -751,6 +763,7 @@ declare const colors: {
     readonly black: "#000000";
     readonly white: "#ffffff";
     readonly whiteAlpha86: "#FFFFFFDB";
+    readonly whiteAlpha60: "#FFFFFF99";
     readonly whiteAlpha40: "#FFFFFF66";
     readonly whiteAlpha20: "#FFFFFF33";
     readonly whiteAlpha6: "#FFFFFF0F";
@@ -967,6 +980,27 @@ declare const datePickerTypography: {
         readonly lineHeight: 12;
         readonly letterSpacing: 0.36;
     };
+    readonly rangeLabel: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 13;
+        readonly fontWeight: "500";
+        readonly lineHeight: 13;
+        readonly letterSpacing: 0;
+    };
+    readonly rangeDate: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 16;
+        readonly fontWeight: "500";
+        readonly lineHeight: 16;
+        readonly letterSpacing: 0;
+    };
+    readonly rangeTime: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 14;
+        readonly fontWeight: "400";
+        readonly lineHeight: 14;
+        readonly letterSpacing: 0;
+    };
     /** Calendar month/year heading — Bold, centered, White. */
     readonly monthHeading: {
         readonly fontFamily: "Noto Sans Armenian";
@@ -1016,4 +1050,4 @@ declare const textareaTypography: {
     };
 };
 
-export { Amenity, AmenityIcon, type AmenityIconProps, type AmenityName, type AmenityProps, type AmenityVariant, AppleIcon, AreaExpandIcon, ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, type BadgeProps, type BadgeVariant, BagIcon, BathroomsIcon, BedroomsIcon, BellIcon, BrandLogo, type BrandLogoProps, type BrandLogoVariant, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CalendarOutlineIcon, CameraIcon, CardLocationIcon, CheckBadgeIcon, CheckIcon, CheckSuccessIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockFilledIcon, ClockIcon, CloseIcon, CommentCard, type CommentCardProps, CopyIcon, Counter, type CounterProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, FacebookIcon, FavoritesButton, type FavoritesButtonProps, FiltersIcon, GlobeIcon, GooglePlayIcon, type GreyStep, GuestsIcon, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputIcon, type InputProps, type InputSize, InstagramIcon, KeyIcon, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, LayoutGridIcon, LinkedInIcon, ListViewIcon, LocationPinIcon, LogOutIcon, MailIcon, MapCollapseIcon, MapExpandIcon, MapViewIcon, MenuIcon, type MenuIconProps, MenuItem, type MenuItemProps, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, QrCodeIcon, Range, type RangeProps, type RangeValue, RatingInput, type RatingInputProps, RatingStarIcon, SaveHeartIcon, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectIcon, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShareIcon, ShowIcon, SidebarIcon, SortIcon, StarFilledIcon, StarIcon, type StarIconProps, StatCard, type StatCardProps, Textarea, type TextareaProps, Toggle, type ToggleProps, TooltipArrowIcon, UserIcon, UsersAltIcon, VideoIcon, WhatsAppIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
+export { Amenity, AmenityIcon, type AmenityIconProps, type AmenityName, type AmenityProps, type AmenityVariant, AppleIcon, AreaExpandIcon, ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, type BadgeProps, type BadgeVariant, BagIcon, BathroomsIcon, BedroomsIcon, BellIcon, BrandLogo, type BrandLogoProps, type BrandLogoVariant, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CalendarOutlineIcon, CameraIcon, CardLocationIcon, CheckBadgeIcon, CheckIcon, CheckSuccessIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockFilledIcon, ClockIcon, CloseIcon, CommentCard, type CommentCardProps, CopyIcon, Counter, type CounterProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DatePickerVariant, type DateRange, FacebookIcon, FavoritesButton, type FavoritesButtonProps, FiltersIcon, GlobeIcon, GooglePlayIcon, type GreyStep, GuestsIcon, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputIcon, type InputProps, type InputSize, InstagramIcon, KeyIcon, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, LayoutGridIcon, LinkedInIcon, ListViewIcon, LocationPinIcon, LogOutIcon, MailIcon, MapCollapseIcon, MapExpandIcon, MapViewIcon, MenuIcon, type MenuIconProps, MenuItem, type MenuItemProps, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, QrCodeIcon, Range, type RangeProps, type RangeValue, RatingInput, type RatingInputProps, RatingStarIcon, SaveHeartIcon, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectIcon, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShareIcon, ShowIcon, SidebarIcon, SortIcon, StarFilledIcon, StarIcon, type StarIconProps, StatCard, type StatCardProps, Textarea, type TextareaProps, Toggle, type ToggleProps, TooltipArrowIcon, UserIcon, UsersAltIcon, VideoIcon, WhatsAppIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };

package/dist/index.js

@@ -31,6 +31,7 @@ var colors = {
   black: "#000000",
   white: "#ffffff",
   whiteAlpha86: "#FFFFFFDB",
+  whiteAlpha60: "#FFFFFF99",
   whiteAlpha40: "#FFFFFF66",
   whiteAlpha20: "#FFFFFF33",
   whiteAlpha6: "#FFFFFF0F",
@@ -230,6 +231,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,
@@ -2224,7 +2246,9 @@ var styles6 = 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 = forwardRef(
   function SegmentedToggle2({
     options,
@@ -2253,12 +2277,15 @@ var SegmentedToggle = forwardRef(
     const [contentWidths, setContentWidths] = useState([0, 0]);
     const [containerWidth, setContainerWidth] = 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);
     useEffect(() => {
@@ -2296,13 +2323,37 @@ var SegmentedToggle = forwardRef(
         ],
         accessibilityRole: "radiogroup",
         children: [
-          optionWidth > 0 ? /* @__PURE__ */ jsx(
+          !fullWidth ? options.map(({ value: optionValue, label, icon: Icon2 }, index) => /* @__PURE__ */ jsxs(
+            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__ */ jsx(Icon2, { size: ICON_SIZE4 }) : null,
+                /* @__PURE__ */ jsx(Text, { style: [styles7.label, styles7.contentWidthLabel], children: label })
+              ]
+            },
+            `${optionValue}-measurement`
+          )) : null,
+          selectedOptionWidth > 0 ? /* @__PURE__ */ jsx(
             Animated.View,
             {
               pointerEvents: "none",
               style: [
                 styles7.activeIndicator,
-                { width: optionWidth, transform: [{ translateX: indicatorTranslateX }] }
+                { width: selectedOptionWidth, transform: [{ translateX: indicatorTranslateX }] }
               ]
             }
           ) : null,
@@ -2321,27 +2372,26 @@ var SegmentedToggle = 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__ */ jsxs(
-                  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__ */ jsx(Icon2, { size: ICON_SIZE4, color: iconColor }) : null,
-                      /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles7.label, { color: labelColor }], children: label })
-                    ]
-                  }
-                )
+                children: /* @__PURE__ */ jsxs(View, { style: styles7.optionContent, children: [
+                  Icon2 ? /* @__PURE__ */ jsx(Icon2, { size: ICON_SIZE4, color: iconColor }) : null,
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      numberOfLines: fullWidth ? 1 : void 0,
+                      style: [
+                        styles7.label,
+                        !fullWidth && styles7.contentWidthLabel,
+                        { color: labelColor }
+                      ],
+                      children: label
+                    }
+                  )
+                ] })
               },
               optionValue
             );
@@ -2383,7 +2433,14 @@ var styles7 = 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,
@@ -2403,6 +2460,9 @@ var styles7 = StyleSheet.create({
   label: {
     ...segmentedToggleTypography,
     flexShrink: 1
+  },
+  contentWidthLabel: {
+    flexShrink: 0
   }
 });
 var defaultLanguageOptions = [
@@ -2990,6 +3050,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;
@@ -2997,10 +3058,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__ */ jsxs(View, { style: styles12.rangeField, children: [
+    /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles12.rangeLabel, children: label }),
+    /* @__PURE__ */ jsxs(View, { style: styles12.rangeValueRow, children: [
+      /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles12.rangeDate, children: value }),
+      time ? /* @__PURE__ */ jsxs(View, { style: styles12.rangeTimeWrap, children: [
+        /* @__PURE__ */ jsx(ClockFilledIcon, { color: colors.lightGrey, size: 16 }),
+        /* @__PURE__ */ jsx(Text, { style: styles12.rangeTime, children: time })
+      ] }) : null
+    ] })
+  ] });
+}
 var DatePicker = 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,
@@ -3138,18 +3222,28 @@ var DatePicker = forwardRef(
     const today = 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__ */ jsx(
       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__ */ jsxs(View, { style: [styles12.triggerWrap, isOpen && styles12.triggerWrapOpen], children: [
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(
             Pressable,
             {
               ref: triggerRef,
@@ -3160,15 +3254,29 @@ var DatePicker = 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__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(RangeTriggerField, { label: startLabel, time: startTime, value: startValue }),
+                /* @__PURE__ */ jsx(
+                  View,
+                  {
+                    style: usesVerticalRangeTrigger ? styles12.rangeDividerVertical : styles12.rangeDividerHorizontal
+                  }
+                ),
+                /* @__PURE__ */ jsx(RangeTriggerField, { label: endLabel, time: endTime, value: endValue })
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(Text, { style: [styles12.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: triggerLabel }),
                 /* @__PURE__ */ jsx(View, { style: styles12.iconSlot, children: /* @__PURE__ */ jsx(CalendarOutlineIcon, { size: ICON_SIZE7, color: colors.grey100 }) })
-              ]
+              ] })
             }
           ),
-          isOpen ? /* @__PURE__ */ jsxs(View, { style: [styles12.menu, calendarStyle], children: [
+          isOpen ? /* @__PURE__ */ jsxs(View, { style: [styles12.menu, usesRangeTrigger && styles12.rangeMenu, calendarStyle], children: [
             /* @__PURE__ */ jsxs(View, { style: styles12.calendarHeader, children: [
               /* @__PURE__ */ jsx(
                 Pressable,
@@ -3311,6 +3419,9 @@ var styles12 = StyleSheet.create({
   rootOpen: {
     zIndex: 30
   },
+  rangeRoot: {
+    width: RANGE_TRIGGER_WIDTH
+  },
   disabled: {
     opacity: 0.6
   },
@@ -3337,6 +3448,65 @@ var styles12 = 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,
@@ -3364,6 +3534,9 @@ var styles12 = StyleSheet.create({
       }
     })
   },
+  rangeMenu: {
+    width: RANGE_TRIGGER_WIDTH
+  },
   calendarHeader: {
     height: 36,
     flexDirection: "row",