@ecohouse/ui 0.1.25 → 0.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "type": "module",
   "private": false,
   "description": "Cross-platform presentation-only UI components for EcoHouse (React Native + React Native Web)",

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -68,6 +68,40 @@ export const RangeInProgress: Story = {
   },
 };
 
+const bookingRange = {
+  start: new Date(2026, 7, 15),
+  end: new Date(2026, 7, 15),
+};
+
+const formatBookingDate = (date: Date) =>
+  `${String(date.getDate()).padStart(2, "0")}/${String(date.getMonth() + 1).padStart(2, "0")}/${date.getFullYear()}`;
+
+export const RangeHorizontal: Story = {
+  args: {
+    range: true,
+    variant: "range-horizontal",
+    startLabel: "ՄՈՒՏՔ",
+    endLabel: "ԵԼՔ",
+    startTime: "10:00",
+    endTime: "22:00",
+    defaultValue: bookingRange,
+    formatValue: formatBookingDate,
+  },
+};
+
+export const RangeVertical: Story = {
+  args: {
+    range: true,
+    variant: "range-vertical",
+    startLabel: "ՄՈՒՏՔ",
+    endLabel: "ԵԼՔ",
+    startTime: "10:00",
+    endTime: "22:00",
+    defaultValue: bookingRange,
+    formatValue: formatBookingDate,
+  },
+};
+
 export const MinMaxDate: Story = {
   args: {
     defaultOpen: true,

package/src/components/DatePicker/DatePicker.tsx

@@ -17,7 +17,7 @@ import {
   type ViewProps,
   type ViewStyle,
 } from "react-native";
-import { CalendarOutlineIcon, ChevronLeftIcon } from "../../icons";
+import { CalendarOutlineIcon, ChevronLeftIcon, ClockFilledIcon } from "../../icons";
 import { colors, datePickerTypography } from "../../theme";
 import {
   addMonths,
@@ -52,11 +52,23 @@ const DEFAULT_MONTH_NAMES = [
 const DEFAULT_WEEKDAY_LABELS = ["ԵՐ", "ԵՔ", "ՉՐ", "ՀՆ", "ՈՒՐ", "ՇԲ", "ԿՐ"];
 
 export type DateRange = { start: Date | null; end: Date | null };
+export type DatePickerVariant = "default" | "range-horizontal" | "range-vertical";
 
 const EMPTY_RANGE: DateRange = { start: null, end: null };
 
 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;
@@ -101,6 +113,7 @@ export type DatePickerRangeProps = DatePickerBaseProps & {
 export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
 
 const DEFAULT_WIDTH = 380;
+const RANGE_TRIGGER_WIDTH = 382;
 const TRIGGER_HEIGHT = 44;
 const TRIGGER_RADIUS = 60;
 const MENU_RADIUS = 20;
@@ -109,10 +122,46 @@ const NAV_ICON_SIZE = 20;
 const DAY_CELL_HEIGHT = 44;
 const DAY_CIRCLE_SIZE = 44;
 
+function RangeTriggerField({
+  label,
+  value,
+  time,
+}: {
+  label: string;
+  value: string;
+  time?: string;
+}) {
+  return (
+    <View style={styles.rangeField}>
+      <Text numberOfLines={1} style={styles.rangeLabel}>
+        {label}
+      </Text>
+      <View style={styles.rangeValueRow}>
+        <Text numberOfLines={1} style={styles.rangeDate}>
+          {value}
+        </Text>
+        {time ? (
+          <View style={styles.rangeTimeWrap}>
+            <ClockFilledIcon color={colors.lightGrey} size={16} />
+            <Text style={styles.rangeTime}>{time}</Text>
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
 export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>(
   function DatePicker(props, forwardedRef) {
     const {
       placeholder = "Select date",
+      variant = "default",
+      startLabel = "Start",
+      endLabel = "End",
+      startTime,
+      endTime,
+      startPlaceholder = placeholder,
+      endPlaceholder = placeholder,
       open: openProp,
       defaultOpen = false,
       onOpenChange,
@@ -298,8 +347,18 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
         ? 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;
 
@@ -307,7 +366,13 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
       <View
         {...rest}
         ref={setRootRef}
-        style={[styles.root, isOpen && styles.rootOpen, disabled && styles.disabled, style]}
+        style={[
+          styles.root,
+          usesRangeTrigger && styles.rangeRoot,
+          isOpen && styles.rootOpen,
+          disabled && styles.disabled,
+          style,
+        ]}
         accessibilityState={{ disabled, expanded: isOpen }}
       >
         <View style={[styles.triggerWrap, isOpen && styles.triggerWrapOpen]}>
@@ -320,19 +385,43 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
             accessibilityState={{ disabled, expanded: isOpen }}
             style={[
               styles.trigger,
-              { borderColor: triggerBorderColor, backgroundColor: colors.grey700 },
+              usesRangeTrigger && styles.rangeTrigger,
+              usesRangeTrigger &&
+                (usesVerticalRangeTrigger
+                  ? styles.rangeTriggerVertical
+                  : styles.rangeTriggerHorizontal),
+              {
+                borderColor: triggerBorderColor,
+                backgroundColor: usesRangeTrigger ? colors.grey800 : colors.grey700,
+              },
             ]}
           >
-            <Text style={[styles.triggerText, { color: triggerTextColor }]} numberOfLines={1}>
-              {triggerLabel}
-            </Text>
-            <View style={styles.iconSlot}>
-              <CalendarOutlineIcon size={ICON_SIZE} color={colors.grey100} />
-            </View>
+            {usesRangeTrigger ? (
+              <>
+                <RangeTriggerField label={startLabel} time={startTime} value={startValue} />
+                <View
+                  style={
+                    usesVerticalRangeTrigger
+                      ? styles.rangeDividerVertical
+                      : styles.rangeDividerHorizontal
+                  }
+                />
+                <RangeTriggerField label={endLabel} time={endTime} value={endValue} />
+              </>
+            ) : (
+              <>
+                <Text style={[styles.triggerText, { color: triggerTextColor }]} numberOfLines={1}>
+                  {triggerLabel}
+                </Text>
+                <View style={styles.iconSlot}>
+                  <CalendarOutlineIcon size={ICON_SIZE} color={colors.grey100} />
+                </View>
+              </>
+            )}
           </Pressable>
 
           {isOpen ? (
-            <View style={[styles.menu, calendarStyle]}>
+            <View style={[styles.menu, usesRangeTrigger && styles.rangeMenu, calendarStyle]}>
               <View style={styles.calendarHeader}>
                 <Pressable
                   onPress={handlePrevMonth}
@@ -502,6 +591,9 @@ const styles = StyleSheet.create({
   rootOpen: {
     zIndex: 30,
   },
+  rangeRoot: {
+    width: RANGE_TRIGGER_WIDTH,
+  },
   disabled: {
     opacity: 0.6,
   },
@@ -528,6 +620,65 @@ const styles = 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_SIZE,
     height: ICON_SIZE,
@@ -555,6 +706,9 @@ const styles = StyleSheet.create({
       },
     }),
   },
+  rangeMenu: {
+    width: RANGE_TRIGGER_WIDTH,
+  },
   calendarHeader: {
     height: 36,
     flexDirection: "row",

package/src/components/DatePicker/index.ts

@@ -3,5 +3,6 @@ export type {
   DatePickerProps,
   DatePickerSingleProps,
   DatePickerRangeProps,
+  DatePickerVariant,
   DateRange,
 } from "./DatePicker";

package/src/components/index.ts

@@ -27,6 +27,7 @@ export type {
   DatePickerProps,
   DatePickerSingleProps,
   DatePickerRangeProps,
+  DatePickerVariant,
   DateRange,
 } from "./DatePicker";
 

package/src/index.ts

@@ -36,6 +36,7 @@ export type {
   DatePickerProps,
   DatePickerSingleProps,
   DatePickerRangeProps,
+  DatePickerVariant,
   DateRange,
   InputIcon,
   InputProps,

package/src/theme/colors.ts

@@ -23,6 +23,7 @@ export const colors = {
   black: "#000000",
   white: "#ffffff",
   whiteAlpha86: "#FFFFFFDB",
+  whiteAlpha60: "#FFFFFF99",
   whiteAlpha40: "#FFFFFF66",
   whiteAlpha20: "#FFFFFF33",
   whiteAlpha6: "#FFFFFF0F",

package/src/theme/typography.ts

@@ -196,6 +196,27 @@ export const datePickerTypography = {
     lineHeight: 12,
     letterSpacing: 0.36,
   },
+  rangeLabel: {
+    fontFamily: fonts.sans,
+    fontSize: 13,
+    fontWeight: "500" as const,
+    lineHeight: 13,
+    letterSpacing: 0,
+  },
+  rangeDate: {
+    fontFamily: fonts.sans,
+    fontSize: 16,
+    fontWeight: "500" as const,
+    lineHeight: 16,
+    letterSpacing: 0,
+  },
+  rangeTime: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "400" as const,
+    lineHeight: 14,
+    letterSpacing: 0,
+  },
   /** Calendar month/year heading — Bold, centered, White. */
   monthHeading: {
     fontFamily: fonts.sans,