@ecohouse/ui 0.1.24 → 0.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.24",
+  "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/SegmentedToggle/SegmentedToggle.stories.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { StyleSheet, View } from "react-native";
-import { LayoutGridIcon } from "../../icons";
+import { LayoutGridIcon, ListViewIcon, MapViewIcon } from "../../icons";
 import { SegmentedToggle } from "./SegmentedToggle";
 
 const optionsWithIcons = [
@@ -14,6 +14,21 @@ const optionsWithoutIcons = [
   { value: "second", label: "Label" },
 ] as const;
 
+const multilingualOptions = [
+  { value: "daily", label: "Օրավարձ" },
+  { value: "overnight", label: "Գիշերակաց երկար տարբերակ" },
+] as const;
+
+const multilingualIconOptions = [
+  { value: "list", label: "Ցուցակի տարբերակ", icon: LayoutGridIcon },
+  { value: "map", label: "Քարտեզի շատ երկար տարբերակ", icon: LayoutGridIcon },
+] as const;
+
+const armenianViewOptions = [
+  { value: "list", label: "Ցանկ", icon: ListViewIcon },
+  { value: "map", label: "Քարտեզ", icon: MapViewIcon },
+] as const;
+
 const meta = {
   title: "Components/SegmentedToggle",
   component: SegmentedToggle,
@@ -39,6 +54,38 @@ export const ContentWidth: Story = {
   args: { fullWidth: false },
 };
 
+export const MultilingualContentWidth: Story = {
+  args: {
+    options: multilingualOptions,
+    defaultValue: "daily",
+    fullWidth: false,
+  },
+};
+
+export const MultilingualIconsContentWidth: Story = {
+  args: {
+    options: multilingualIconOptions,
+    defaultValue: "list",
+    fullWidth: false,
+  },
+};
+
+export const ArmenianViewMode: Story = {
+  args: {
+    options: armenianViewOptions,
+    defaultValue: "list",
+    fullWidth: false,
+  },
+};
+
+export const ArmenianViewModeMapSelected: Story = {
+  args: {
+    options: armenianViewOptions,
+    defaultValue: "map",
+    fullWidth: false,
+  },
+};
+
 export const In400PixelContainer: Story = {
   render: () => (
     <View style={storyStyles.container}>

package/src/components/SegmentedToggle/SegmentedToggle.tsx

@@ -37,7 +37,9 @@ export interface SegmentedToggleProps extends Omit<ViewProps, "style" | "childre
 const ICON_SIZE = 20;
 const ANIMATION_DURATION = 200;
 const OPTION_HORIZONTAL_PADDING = 16;
+const OPTION_CONTENT_GAP = 12;
 const OPTION_MIN_WIDTH = 97;
+const OPTION_MEASUREMENT_TOLERANCE = 0.5;
 
 export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedToggleProps>(
   function SegmentedToggle(
@@ -70,15 +72,20 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
     const [contentWidths, setContentWidths] = useState<[number, number]>([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)
+    const resolveContentOptionWidth = (contentWidth: number) =>
+      contentWidth > 0
+        ? Math.max(
+            OPTION_MIN_WIDTH,
+            contentWidth + OPTION_HORIZONTAL_PADDING * 2 + OPTION_MEASUREMENT_TOLERANCE,
+          )
         : 0;
-    const optionWidth = fullWidth ? availableOptionWidth : contentBasedOptionWidth;
+    const optionWidths: [number, number] = 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);
@@ -120,12 +127,36 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
         ]}
         accessibilityRole="radiogroup"
       >
-        {optionWidth > 0 ? (
+        {!fullWidth
+          ? options.map(({ value: optionValue, label, icon: Icon }, index) => (
+              <View
+                key={`${optionValue}-measurement`}
+                pointerEvents="none"
+                aria-hidden
+                accessibilityElementsHidden
+                importantForAccessibility="no-hide-descendants"
+                onLayout={(event) => {
+                  const nextWidth = event.nativeEvent.layout.width;
+                  setContentWidths((currentWidths) => {
+                    if (currentWidths[index] === nextWidth) return currentWidths;
+                    const nextWidths: [number, number] = [currentWidths[0], currentWidths[1]];
+                    nextWidths[index] = nextWidth;
+                    return nextWidths;
+                  });
+                }}
+                style={styles.optionMeasurement}
+              >
+                {Icon ? <Icon size={ICON_SIZE} /> : null}
+                <Text style={[styles.label, styles.contentWidthLabel]}>{label}</Text>
+              </View>
+            ))
+          : null}
+        {selectedOptionWidth > 0 ? (
           <Animated.View
             pointerEvents="none"
             style={[
               styles.activeIndicator,
-              { width: optionWidth, transform: [{ translateX: indicatorTranslateX }] },
+              { width: selectedOptionWidth, transform: [{ translateX: indicatorTranslateX }] },
             ]}
           />
         ) : null}
@@ -147,23 +178,22 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
                 styles.option,
                 fullWidth
                   ? styles.optionFullWidth
-                  : [styles.optionContentWidth, optionWidth > 0 && { width: optionWidth }],
+                  : [
+                      styles.optionContentWidth,
+                      optionWidths[index] > 0 && { width: optionWidths[index] },
+                    ],
               ]}
             >
-              <View
-                onLayout={(event) => {
-                  const nextWidth = event.nativeEvent.layout.width;
-                  setContentWidths((currentWidths) => {
-                    if (currentWidths[index] === nextWidth) return currentWidths;
-                    const nextWidths: [number, number] = [currentWidths[0], currentWidths[1]];
-                    nextWidths[index] = nextWidth;
-                    return nextWidths;
-                  });
-                }}
-                style={styles.optionContent}
-              >
+              <View style={styles.optionContent}>
                 {Icon ? <Icon size={ICON_SIZE} color={iconColor} /> : null}
-                <Text numberOfLines={1} style={[styles.label, { color: labelColor }]}>
+                <Text
+                  numberOfLines={fullWidth ? 1 : undefined}
+                  style={[
+                    styles.label,
+                    !fullWidth && styles.contentWidthLabel,
+                    { color: labelColor },
+                  ]}
+                >
                   {label}
                 </Text>
               </View>
@@ -207,7 +237,14 @@ const styles = 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,
@@ -228,4 +265,7 @@ const styles = StyleSheet.create({
     ...segmentedToggleTypography,
     flexShrink: 1,
   },
+  contentWidthLabel: {
+    flexShrink: 0,
+  },
 });

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,