@ecohouse/ui 0.1.32 → 0.1.34

package/src/components/Select/Select.tsx

@@ -61,6 +61,8 @@ type SelectBaseProps = Omit<ViewProps, "style" | "children"> & {
   loading?: boolean;
   /** Text shown when no options match. */
   emptyText?: string;
+  /** Override color for the selected value text in the trigger. */
+  valueColor?: string;
   style?: StyleProp<ViewStyle>;
   className?: string;
 };
@@ -264,6 +266,7 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
       onSearchChange,
       loading = false,
       emptyText = "No results",
+      valueColor,
       style,
       className,
       accessibilityLabel,
@@ -508,7 +511,7 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
 
     const leftIconNode = renderStatefulIcon(leftIcon, UserIcon, {
       size: ICON_SIZE,
-      color: error ? colors.red : isOpen ? colors.primary : colors.grey100,
+      color: error ? colors.red : colors.primary,
     });
     const hasLeftIcon = showLeftIcon || leftIcon != null;
 
@@ -520,7 +523,7 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
     const triggerTextColor = hasValue
       ? error
         ? colors.red
-        : colors.white
+        : (valueColor ?? colors.white)
       : error
         ? colors.red
         : colors.grey100;

package/src/components/Sidebar/Sidebar.tsx

@@ -18,7 +18,7 @@ import {
   type ViewStyle,
 } from "react-native";
 import type { IconComponent } from "../../icons";
-import { SidebarIcon } from "../../icons";
+import { CloseIcon, SidebarIcon } from "../../icons";
 import { BrandLogo, MenuItem } from "../../primitives";
 import { colors, fonts } from "../../theme";
 import { mergeRefs } from "../../utils/mergeRefs";
@@ -59,6 +59,12 @@ export interface SidebarProps extends Omit<ViewProps, "style" | "children"> {
   collapsed?: boolean;
   defaultCollapsed?: boolean;
   onCollapsedChange?: (collapsed: boolean) => void;
+  /** When false, hides the expand/collapse control. Defaults to `true`. */
+  showCollapseToggle?: boolean;
+  /** When set, shows a close control in the header (e.g. mobile drawer). */
+  onClose?: () => void;
+  /** Accessible label for the close control. Defaults to `"Close"`. */
+  closeAccessibilityLabel?: string;
   style?: StyleProp<ViewStyle>;
   className?: string;
 }
@@ -86,6 +92,9 @@ export const Sidebar = forwardRef<ComponentRef<typeof View>, SidebarProps>(funct
     collapsed: collapsedProp,
     defaultCollapsed = false,
     onCollapsedChange,
+    showCollapseToggle = true,
+    onClose,
+    closeAccessibilityLabel = "Close",
     style,
     className,
     ...rest
@@ -136,7 +145,13 @@ export const Sidebar = forwardRef<ComponentRef<typeof View>, SidebarProps>(funct
       style={[styles.root, { width: widthAnim }, style]}
       accessibilityRole="menu"
     >
-      <View style={[styles.header, collapsed ? styles.headerCollapsed : styles.headerExpanded]}>
+      <View
+        style={[
+          styles.header,
+          collapsed ? styles.headerCollapsed : styles.headerExpanded,
+          !showCollapseToggle && !onClose ? styles.headerNoToggle : null,
+        ]}
+      >
         <Animated.View
           pointerEvents={collapsed ? "none" : "auto"}
           style={[
@@ -157,16 +172,28 @@ export const Sidebar = forwardRef<ComponentRef<typeof View>, SidebarProps>(funct
           />
         </Animated.View>
 
-        <Pressable
-          accessibilityRole="button"
-          accessibilityLabel={collapsed ? expandAccessibilityLabel : collapseAccessibilityLabel}
-          accessibilityState={{ expanded: !collapsed }}
-          hitSlop={8}
-          onPress={() => setCollapsed(!collapsed)}
-          style={styles.toggleButton}
-        >
-          <SidebarIcon color={colors.grey100} size={TOGGLE_SIZE} strokeWidth={2} />
-        </Pressable>
+        {onClose ? (
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={closeAccessibilityLabel}
+            hitSlop={8}
+            onPress={onClose}
+            style={styles.toggleButton}
+          >
+            <CloseIcon color={colors.grey100} size={TOGGLE_SIZE} strokeWidth={2} />
+          </Pressable>
+        ) : showCollapseToggle ? (
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={collapsed ? expandAccessibilityLabel : collapseAccessibilityLabel}
+            accessibilityState={{ expanded: !collapsed }}
+            hitSlop={8}
+            onPress={() => setCollapsed(!collapsed)}
+            style={styles.toggleButton}
+          >
+            <SidebarIcon color={colors.grey100} size={TOGGLE_SIZE} strokeWidth={2} />
+          </Pressable>
+        ) : null}
       </View>
 
       <View
@@ -242,6 +269,9 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     paddingHorizontal: 24,
   },
+  headerNoToggle: {
+    justifyContent: "flex-start",
+  },
   headerCollapsed: {
     justifyContent: "center",
     paddingHorizontal: 0,

package/src/components/StepPager/StepPager.tsx

@@ -0,0 +1,150 @@
+import { forwardRef, useMemo, useRef, type ComponentRef } from "react";
+import {
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import { ChevronLeftIcon } from "../../icons";
+import { colors, fonts } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface StepPagerProps extends Omit<ViewProps, "style" | "children"> {
+  /** Zero-based active step index. */
+  index: number;
+  /** Total number of steps. */
+  count: number;
+  onPrevious?: () => void;
+  onNext?: () => void;
+  previousAccessibilityLabel?: string;
+  nextAccessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const WIDTH = 121;
+const HEIGHT = 48;
+const ICON_SIZE = 24;
+
+/**
+ * Compact prev / current-of-total / next control (e.g. camera fullscreen pager).
+ * Fixed 121×48 pill, 12 gap/padding, 77 radius.
+ */
+export const StepPager = forwardRef<ComponentRef<typeof View>, StepPagerProps>(function StepPager(
+  {
+    index,
+    count,
+    onPrevious,
+    onNext,
+    previousAccessibilityLabel = "Previous",
+    nextAccessibilityLabel = "Next",
+    style,
+    className,
+    accessibilityLabel,
+    ...rest
+  },
+  forwardedRef,
+) {
+  const containerRef = useRef<ComponentRef<typeof View>>(null);
+  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+  const safeCount = Math.max(0, count);
+  const safeIndex = safeCount === 0 ? 0 : Math.min(Math.max(index, 0), safeCount - 1);
+  const label = safeCount === 0 ? "0/0" : `${safeIndex + 1}/${safeCount}`;
+  const atStart = safeIndex <= 0;
+  const atEnd = safeIndex >= safeCount - 1;
+
+  useApplyWebClassName(containerRef, className);
+
+  return (
+    <View
+      {...rest}
+      ref={setContainerRef}
+      accessibilityRole="adjustable"
+      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityValue={{
+        min: safeCount === 0 ? 0 : 1,
+        max: safeCount,
+        now: safeCount === 0 ? 0 : safeIndex + 1,
+        text: label,
+      }}
+      style={[styles.root, webBlurStyle, style]}
+    >
+      <Pressable
+        onPress={onPrevious}
+        disabled={atStart || !onPrevious}
+        hitSlop={4}
+        accessibilityRole="button"
+        accessibilityLabel={previousAccessibilityLabel}
+        accessibilityState={{ disabled: atStart || !onPrevious }}
+        style={[styles.navButton, (atStart || !onPrevious) && styles.navDisabled]}
+      >
+        <ChevronLeftIcon size={ICON_SIZE} color={colors.white} strokeWidth={2} />
+      </Pressable>
+
+      <Text style={styles.label}>{label}</Text>
+
+      <Pressable
+        onPress={onNext}
+        disabled={atEnd || !onNext}
+        hitSlop={4}
+        accessibilityRole="button"
+        accessibilityLabel={nextAccessibilityLabel}
+        accessibilityState={{ disabled: atEnd || !onNext }}
+        style={[styles.navButton, (atEnd || !onNext) && styles.navDisabled]}
+      >
+        <View style={styles.chevronRight}>
+          <ChevronLeftIcon size={ICON_SIZE} color={colors.white} strokeWidth={2} />
+        </View>
+      </Pressable>
+    </View>
+  );
+});
+
+const webBlurStyle: ViewStyle =
+  Platform.OS === "web"
+    ? ({
+        backdropFilter: "blur(50px)",
+        WebkitBackdropFilter: "blur(50px)",
+      } as ViewStyle)
+    : {};
+
+const styles = StyleSheet.create({
+  root: {
+    width: WIDTH,
+    height: HEIGHT,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 12,
+    padding: 12,
+    borderRadius: 77,
+    backgroundColor: colors.whiteAlpha6,
+    overflow: "hidden",
+  },
+  navButton: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  navDisabled: {
+    opacity: 0.35,
+  },
+  chevronRight: {
+    transform: [{ scaleX: -1 }],
+  },
+  label: {
+    fontFamily: fonts.sans,
+    fontSize: 16,
+    fontWeight: "700",
+    lineHeight: 16,
+    letterSpacing: 0,
+    color: colors.white,
+    textAlign: "center",
+  },
+});

package/src/components/StepPager/index.ts

@@ -0,0 +1,2 @@
+export { StepPager } from "./StepPager";
+export type { StepPagerProps } from "./StepPager";

package/src/components/ToggleRow/ToggleRow.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { View, StyleSheet } from "react-native";
+import { ToggleRow } from "./ToggleRow";
+
+const meta = {
+  title: "Components/ToggleRow",
+  component: ToggleRow,
+  args: {
+    label: "Bookings and digital key",
+    defaultValue: false,
+    onValueChange: fn(),
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof ToggleRow>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Active: Story = {
+  args: { defaultValue: true },
+};
+
+export const Stack: Story = {
+  render: () => (
+    <View style={styles.stack}>
+      <ToggleRow label="Bookings and digital key" defaultValue={false} onValueChange={fn()} />
+      <ToggleRow
+        label="Email notifications"
+        defaultValue={false}
+        onValueChange={fn()}
+        showBorder={false}
+      />
+    </View>
+  ),
+};
+
+const styles = StyleSheet.create({
+  stack: {
+    width: 462,
+  },
+});

package/src/components/ToggleRow/ToggleRow.tsx

@@ -0,0 +1,121 @@
+import { forwardRef, useMemo, useRef, type ComponentRef } from "react";
+import {
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import { colors, fonts } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+import { Toggle } from "../Toggle";
+
+export interface ToggleRowProps extends Omit<ViewProps, "style" | "children"> {
+  label: string;
+  value?: boolean;
+  defaultValue?: boolean;
+  onValueChange?: (value: boolean) => void;
+  disabled?: boolean;
+  /** When false, hides the bottom border. Defaults to true. */
+  showBorder?: boolean;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const DESKTOP_MIN_WIDTH = 1024;
+
+/**
+ * Settings toggle line — label left, switch right.
+ * Mobile: height 57, padding 16/12, label 12px.
+ * Desktop: height 65, padding 20/12, label 14px.
+ */
+export const ToggleRow = forwardRef<ComponentRef<typeof View>, ToggleRowProps>(function ToggleRow(
+  {
+    label,
+    value,
+    defaultValue = false,
+    onValueChange,
+    disabled = false,
+    showBorder = true,
+    style,
+    className,
+    accessibilityLabel,
+    ...rest
+  },
+  forwardedRef,
+) {
+  const containerRef = useRef<ComponentRef<typeof View>>(null);
+  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+  const { width: viewportWidth } = useWindowDimensions();
+  const isDesktop = viewportWidth >= DESKTOP_MIN_WIDTH;
+  const labelSize = isDesktop ? 14 : 12;
+
+  useApplyWebClassName(containerRef, className);
+
+  return (
+    <View
+      {...rest}
+      ref={setContainerRef}
+      style={[
+        styles.root,
+        {
+          minHeight: isDesktop ? 65 : 57,
+          paddingTop: isDesktop ? 20 : 16,
+          paddingBottom: isDesktop ? 20 : 16,
+        },
+        !showBorder && styles.noBorder,
+        style,
+      ]}
+    >
+      <Text
+        style={[
+          styles.label,
+          {
+            fontSize: labelSize,
+            lineHeight: isDesktop ? 20 : 18,
+            letterSpacing: labelSize * 0.03,
+          },
+        ]}
+        numberOfLines={2}
+      >
+        {label}
+      </Text>
+      <Toggle
+        value={value}
+        defaultValue={defaultValue}
+        onValueChange={onValueChange}
+        disabled={disabled}
+        accessibilityLabel={accessibilityLabel ?? label}
+      />
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  root: {
+    width: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 40,
+    paddingRight: 12,
+    paddingLeft: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.grey650,
+    opacity: 1,
+  },
+  noBorder: {
+    borderBottomWidth: 0,
+  },
+  label: {
+    flex: 1,
+    minWidth: 0,
+    fontFamily: fonts.sans,
+    fontWeight: "700",
+    color: colors.white,
+    // RN-web clips Armenian descenders when line boxes are tight.
+    overflow: "visible",
+  },
+});

package/src/components/ToggleRow/index.ts

@@ -0,0 +1,2 @@
+export { ToggleRow } from "./ToggleRow";
+export type { ToggleRowProps } from "./ToggleRow";

package/src/components/VerificationCodeInput/VerificationCodeInput.tsx

@@ -9,6 +9,7 @@ import {
 import {
   Platform,
   StyleSheet,
+  Text,
   TextInput,
   useWindowDimensions,
   View,
@@ -24,12 +25,13 @@ import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
 import { normalizeVerificationCode, updateVerificationCode } from "./VerificationCodeInput.utils";
 
 const DEFAULT_LENGTH = 6;
-const DESKTOP_CELL_WIDTH = 54;
-const MOBILE_CELL_WIDTH = 50;
-const CELL_HEIGHT = 68;
+const DESKTOP_CELL_WIDTH = 54.333335876464844;
+const MOBILE_CELL_WIDTH = 45.16666793823242;
+const DESKTOP_CELL_HEIGHT = 68;
+const MOBILE_CELL_HEIGHT = 58;
 const DESKTOP_GAP = 12;
-const MOBILE_GAP = 4;
-const MOBILE_BREAKPOINT = 640;
+const MOBILE_GAP = 12;
+const MOBILE_BREAKPOINT = 1024;
 
 export interface VerificationCodeInputHandle {
   clear: () => void;
@@ -47,6 +49,8 @@ export interface VerificationCodeInputProps extends Omit<ViewProps, "children" |
   /** Called when Enter/submit is pressed from a cell. */
   onSubmit?: (value: string) => void;
   error?: boolean;
+  /** Shown under the cells when `error` is true. */
+  errorMessage?: string;
   disabled?: boolean;
   autoFocus?: boolean;
   /** Localized accessible name for each zero-based cell index. */
@@ -68,6 +72,7 @@ export const VerificationCodeInput = forwardRef<
     onComplete,
     onSubmit,
     error = false,
+    errorMessage,
     disabled = false,
     autoFocus = false,
     getDigitAccessibilityLabel,
@@ -161,71 +166,77 @@ export const VerificationCodeInput = forwardRef<
 
   const mobile = viewportWidth < MOBILE_BREAKPOINT;
   const cellWidth = mobile ? MOBILE_CELL_WIDTH : DESKTOP_CELL_WIDTH;
+  const cellHeight = mobile ? MOBILE_CELL_HEIGHT : DESKTOP_CELL_HEIGHT;
   const cellGap = mobile ? MOBILE_GAP : DESKTOP_GAP;
-  const rootWidth = cellWidth * safeLength + cellGap * Math.max(0, safeLength - 1);
+  const rowWidth = cellWidth * safeLength + cellGap * Math.max(0, safeLength - 1);
+  const showErrorMessage = Boolean(error && errorMessage);
 
   return (
-    <View
-      {...viewProps}
-      ref={rootRef}
-      style={[
-        styles.root,
-        { width: rootWidth, maxWidth: "100%", gap: cellGap },
-        disabled && styles.disabled,
-        style,
-      ]}
-    >
-      {Array.from({ length: safeLength }, (_, index) => {
-        const active = focusedIndex === index;
-        const borderColor = error ? colors.redHover : active ? colors.primary : colors.grey600;
-
-        return (
-          <TextInput
-            ref={(element) => {
-              inputRefs.current[index] = element;
-            }}
-            accessibilityLabel={
-              getDigitAccessibilityLabel?.(index) ?? `Verification code digit ${index + 1}`
-            }
-            accessibilityState={{ disabled }}
-            autoComplete={index === 0 ? "one-time-code" : "off"}
-            autoFocus={autoFocus && index === 0}
-            caretHidden={Platform.OS !== "web"}
-            editable={!disabled}
-            inputMode="numeric"
-            key={index}
-            keyboardType="number-pad"
-            maxLength={safeLength}
-            onBlur={() => setFocusedIndex((current) => (current === index ? null : current))}
-            onChangeText={(text) => handleChange(index, text)}
-            onFocus={() => setFocusedIndex(index)}
-            onKeyPress={(event) => handleKeyPress(index, event)}
-            onSubmitEditing={() => onSubmit?.(currentCode)}
-            selectTextOnFocus
-            style={[
-              styles.cell,
-              {
-                width: cellWidth,
-                height: CELL_HEIGHT,
-                borderColor,
-                color: error ? colors.red : colors.white,
-              },
-              Platform.OS === "web" ? styles.cellWeb : null,
-              Platform.OS === "android" ? styles.cellAndroid : null,
-              inputStyle,
-            ]}
-            value={currentCode[index] ?? ""}
-          />
-        );
-      })}
+    <View {...viewProps} ref={rootRef} style={[styles.wrapper, disabled && styles.disabled, style]}>
+      <View style={[styles.row, { width: rowWidth, maxWidth: "100%", gap: cellGap }]}>
+        {Array.from({ length: safeLength }, (_, index) => {
+          const active = focusedIndex === index;
+          const borderColor = error ? colors.red : active ? colors.primary : colors.grey600;
+
+          return (
+            <TextInput
+              ref={(element) => {
+                inputRefs.current[index] = element;
+              }}
+              accessibilityLabel={
+                getDigitAccessibilityLabel?.(index) ?? `Verification code digit ${index + 1}`
+              }
+              accessibilityState={{ disabled }}
+              autoComplete={index === 0 ? "one-time-code" : "off"}
+              autoFocus={autoFocus && index === 0}
+              caretHidden={Platform.OS !== "web"}
+              editable={!disabled}
+              inputMode="numeric"
+              key={index}
+              keyboardType="number-pad"
+              maxLength={safeLength}
+              onBlur={() => setFocusedIndex((current) => (current === index ? null : current))}
+              onChangeText={(text) => handleChange(index, text)}
+              onFocus={() => setFocusedIndex(index)}
+              onKeyPress={(event) => handleKeyPress(index, event)}
+              onSubmitEditing={() => onSubmit?.(currentCode)}
+              selectTextOnFocus
+              style={[
+                styles.cell,
+                {
+                  width: cellWidth,
+                  height: cellHeight,
+                  borderColor,
+                  color: error ? colors.red : colors.white,
+                },
+                Platform.OS === "web" ? styles.cellWeb : null,
+                Platform.OS === "android" ? styles.cellAndroid : null,
+                inputStyle,
+              ]}
+              value={currentCode[index] ?? ""}
+            />
+          );
+        })}
+      </View>
+
+      {showErrorMessage ? (
+        <Text accessibilityLiveRegion="assertive" style={styles.errorMessage}>
+          {errorMessage}
+        </Text>
+      ) : null}
     </View>
   );
 });
 
 const styles = StyleSheet.create({
-  root: {
+  wrapper: {
     minWidth: 0,
     alignSelf: "center",
+    alignItems: "center",
+    gap: 12,
+  },
+  row: {
+    minWidth: 0,
     flexDirection: "row",
     justifyContent: "center",
   },
@@ -252,4 +263,13 @@ const styles = StyleSheet.create({
   cellAndroid: {
     includeFontPadding: false,
   },
+  errorMessage: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "400",
+    lineHeight: 12,
+    letterSpacing: 0,
+    textAlign: "center",
+    color: colors.red,
+  },
 });

package/src/components/index.ts

@@ -16,9 +16,18 @@ export type { StatusBadgeProps, StatusBadgeTone } from "./StatusBadge";
 export { PaginationDots } from "./PaginationDots";
 export type { PaginationDotsProps } from "./PaginationDots";
 
+export { StepPager } from "./StepPager";
+export type { StepPagerProps } from "./StepPager";
+
 export { InfoTile } from "./InfoTile";
 export type { InfoTileProps } from "./InfoTile";
 
+export { ContactInfoCard } from "./ContactInfoCard";
+export type { ContactInfoCardProps } from "./ContactInfoCard";
+
+export { AccordionItem } from "./AccordionItem";
+export type { AccordionItemProps } from "./AccordionItem";
+
 export { StepList } from "./StepList";
 export type { StepListProps } from "./StepList";
 
@@ -55,6 +64,9 @@ export type {
 export { FloatingActionButton } from "./FloatingActionButton";
 export type { FloatingActionButtonProps } from "./FloatingActionButton";
 
+export { Modal } from "./Modal";
+export type { ModalProps } from "./Modal";
+
 export { Input } from "./Input";
 export type { InputIcon, InputProps, InputSize } from "./Input";
 
@@ -79,6 +91,9 @@ export type { TextareaProps } from "./Textarea";
 export { Toggle } from "./Toggle";
 export type { ToggleProps } from "./Toggle";
 
+export { ToggleRow } from "./ToggleRow";
+export type { ToggleRowProps } from "./ToggleRow";
+
 export { RatingInput } from "./RatingInput";
 export type { RatingInputProps } from "./RatingInput";