@ecohouse/ui 0.1.18 → 0.1.20

package/src/components/Range/Range.types.ts

@@ -0,0 +1,35 @@
+import type { StyleProp, ViewProps, ViewStyle } from "react-native";
+
+export interface RangeValue {
+  from?: number;
+  to?: number;
+}
+
+export interface RangeProps extends Omit<ViewProps, "style" | "children"> {
+  /** Lowest value represented by the track. */
+  min?: number;
+  /** Highest value represented by the track. */
+  max?: number;
+  /** Snapping increment for handle drag, track click, and accessibility actions. */
+  step?: number;
+  value?: RangeValue;
+  defaultValue?: RangeValue;
+  onValueChange?: (value: RangeValue) => void;
+  /** Localized empty-state text for the lower-bound input. Defaults to Armenian. */
+  fromPlaceholder?: string;
+  /** Localized empty-state text for the upper-bound input. Defaults to Armenian. */
+  toPlaceholder?: string;
+  /** Currency text rendered after both inputs. */
+  currency?: string;
+  /** Localized accessible name for the lower handle and input. Defaults to `fromPlaceholder`. */
+  fromAccessibilityLabel?: string;
+  /** Localized accessible name for the upper handle and input. Defaults to `toPlaceholder`. */
+  toAccessibilityLabel?: string;
+  disabled?: boolean;
+  /** Locale-aware display formatter. Keep this paired with `parseValue` when it adds separators. */
+  formatValue?: (value: number) => string;
+  /** Parses localized input text back to a numeric value. */
+  parseValue?: (value: string) => number | undefined;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}

package/src/components/Range/Range.utils.ts

@@ -0,0 +1,56 @@
+import type { RangeValue } from "./Range.types";
+
+export type ParsedRangeDraft =
+  { kind: "empty" } | { kind: "invalid" } | { kind: "value"; value: number };
+
+function decimals(value: number) {
+  const [coefficient, exponentText = "0"] = Math.abs(value).toString().toLowerCase().split("e");
+  const [, fraction = ""] = coefficient.split(".");
+  return Math.max(0, fraction.length - Number(exponentText));
+}
+
+export function clampAndSnap(value: number, min: number, max: number, step: number) {
+  const clamped = Math.min(max, Math.max(min, value));
+  const snapped = min + Math.round((clamped - min) / step) * step;
+  const precision = Math.min(15, Math.max(decimals(min), decimals(step)));
+  return Number(Math.min(max, Math.max(min, snapped)).toFixed(precision));
+}
+
+export function clampRangeValue(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function snapRangeDelta(start: number, delta: number, step: number) {
+  const steps = Math.round(Math.abs(delta) / step) * Math.sign(delta);
+  const precision = Math.min(15, Math.max(decimals(start), decimals(step)));
+  return Number((start + steps * step).toFixed(precision));
+}
+
+export function parseRangeDraft(
+  draft: string,
+  parseValue: (value: string) => number | undefined,
+): ParsedRangeDraft {
+  if (!draft.trim()) return { kind: "empty" };
+
+  const parsed = parseValue(draft);
+  if (parsed === undefined || !Number.isFinite(parsed)) return { kind: "invalid" };
+
+  return { kind: "value", value: parsed };
+}
+
+export function normalizeRangeValue(value: RangeValue, min: number, max: number): RangeValue {
+  const from =
+    typeof value.from === "number" && Number.isFinite(value.from)
+      ? clampRangeValue(value.from, min, max)
+      : undefined;
+  const to =
+    typeof value.to === "number" && Number.isFinite(value.to)
+      ? clampRangeValue(value.to, min, max)
+      : undefined;
+
+  if (from !== undefined && to !== undefined && from > to) {
+    return { from: to, to: from };
+  }
+
+  return { from, to };
+}

package/src/components/Range/index.ts

@@ -0,0 +1,2 @@
+export { Range } from "./Range";
+export type { RangeProps, RangeValue } from "./Range.types";

package/src/components/StatCard/StatCard.tsx

@@ -21,7 +21,8 @@ export interface StatCardProps extends Omit<ViewProps, "style" | "children"> {
   className?: string;
 }
 
-const ICON_SIZE = 28;
+/** Default matches Figma users-alt vector width (W 25.63181). */
+const ICON_SIZE = 25.63181;
 
 export const StatCard = forwardRef<ComponentRef<typeof View>, StatCardProps>(function StatCard(
   {

package/src/components/index.ts

@@ -53,3 +53,6 @@ export type { RatingInputProps } from "./RatingInput";
 
 export { CommentCard } from "./CommentCard";
 export type { CommentCardProps } from "./CommentCard";
+
+export { Range } from "./Range";
+export type { RangeProps, RangeValue } from "./Range";

package/src/icons/Close/CloseIcon.tsx

@@ -0,0 +1,18 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { CLOSE_PATH } from "./closePath";
+
+export function CloseIcon({ size = 20, color = colors.white, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={CLOSE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/Close/CloseIcon.web.tsx

@@ -0,0 +1,17 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { CLOSE_PATH } from "./closePath";
+
+export function CloseIcon({ size = 20, color = colors.white, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 20 20" fill="none" aria-hidden>
+      <path
+        d={CLOSE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/Close/closePath.ts

@@ -0,0 +1,2 @@
+/** Close (x) path — 20×20 viewBox. */
+export const CLOSE_PATH = "M15 5L5 15M5 5L15 15";

package/src/icons/Close/index.ts

@@ -0,0 +1,2 @@
+export { CloseIcon } from "./CloseIcon";
+export { CLOSE_PATH } from "./closePath";

package/src/icons/CottageCard/CottageCardIcons.tsx

@@ -12,11 +12,18 @@ import {
   SAVE_HEART_PATH,
 } from "./cottageCardPaths";
 
-export function SaveHeartIcon({ size = 16, color = colors.white, strokeWidth = 2 }: IconProps) {
+export function SaveHeartIcon({
+  size = 16,
+  color = colors.white,
+  strokeWidth = 2,
+  fillOpacity = 0,
+}: IconProps) {
   return (
     <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
       <Path
         d={SAVE_HEART_PATH}
+        fill={color}
+        fillOpacity={fillOpacity}
         stroke={color}
         strokeWidth={strokeWidth}
         strokeLinecap="round"

package/src/icons/CottageCard/CottageCardIcons.web.tsx

@@ -11,11 +11,18 @@ import {
   SAVE_HEART_PATH,
 } from "./cottageCardPaths";
 
-export function SaveHeartIcon({ size = 16, color = colors.white, strokeWidth = 2 }: IconProps) {
+export function SaveHeartIcon({
+  size = 16,
+  color = colors.white,
+  strokeWidth = 2,
+  fillOpacity = 0,
+}: IconProps) {
   return (
     <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden>
       <path
         d={SAVE_HEART_PATH}
+        fill={color}
+        fillOpacity={fillOpacity}
         stroke={color}
         strokeWidth={strokeWidth}
         strokeLinecap="round"

package/src/icons/MapControls/MapControlIcons.tsx

@@ -0,0 +1,31 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { MAP_COLLAPSE_PATH, MAP_EXPAND_PATH } from "./mapControlPaths";
+
+function MapControlIcon({
+  path,
+  size = 20,
+  color = colors.white,
+  strokeWidth = 2,
+}: IconProps & { path: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={path}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export function MapExpandIcon(props: IconProps) {
+  return <MapControlIcon {...props} path={MAP_EXPAND_PATH} />;
+}
+
+export function MapCollapseIcon(props: IconProps) {
+  return <MapControlIcon {...props} path={MAP_COLLAPSE_PATH} />;
+}

package/src/icons/MapControls/MapControlIcons.web.tsx

@@ -0,0 +1,30 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { MAP_COLLAPSE_PATH, MAP_EXPAND_PATH } from "./mapControlPaths";
+
+function MapControlIcon({
+  path,
+  size = 20,
+  color = colors.white,
+  strokeWidth = 2,
+}: IconProps & { path: string }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 20 20" fill="none" aria-hidden>
+      <path
+        d={path}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function MapExpandIcon(props: IconProps) {
+  return <MapControlIcon {...props} path={MAP_EXPAND_PATH} />;
+}
+
+export function MapCollapseIcon(props: IconProps) {
+  return <MapControlIcon {...props} path={MAP_COLLAPSE_PATH} />;
+}

package/src/icons/MapControls/index.ts

@@ -0,0 +1,2 @@
+export { MapCollapseIcon, MapExpandIcon } from "./MapControlIcons";
+export { MAP_COLLAPSE_PATH, MAP_EXPAND_PATH } from "./mapControlPaths";

package/src/icons/MapControls/mapControlPaths.ts

@@ -0,0 +1,4 @@
+/** Map control paths — 20×20 viewBox. */
+export const MAP_EXPAND_PATH = "M8.33366 15.8332H4.16699V11.6665M11.667 4.1665H15.8337V8.33317";
+
+export const MAP_COLLAPSE_PATH = "M4.16699 11.6665H8.33366V15.8332M15.8337 8.33317H11.667V4.1665";

package/src/icons/index.ts

@@ -17,6 +17,7 @@ export { CheckBadgeIcon } from "./CheckBadge";
 export { ChevronDownIcon } from "./ChevronDown";
 export { ChevronLeftIcon } from "./ChevronLeft";
 export { ClockIcon } from "./Clock";
+export { CloseIcon } from "./Close";
 export {
   BathroomsIcon,
   BedroomsIcon,
@@ -50,6 +51,7 @@ export { LocationPinIcon } from "./LocationPin";
 export { LogOutIcon } from "./LogOut";
 export { MailIcon } from "./Mail";
 export { MapViewIcon } from "./MapView";
+export { MapCollapseIcon, MapExpandIcon } from "./MapControls";
 export { MenuIcon } from "./Menu";
 export type { MenuIconProps } from "./Menu";
 export { NavigateIcon } from "./Navigate";

package/src/icons/registry.ts

@@ -10,6 +10,7 @@ import { CheckBadgeIcon } from "./CheckBadge";
 import { ChevronDownIcon } from "./ChevronDown";
 import { ChevronLeftIcon } from "./ChevronLeft";
 import { ClockIcon } from "./Clock";
+import { CloseIcon } from "./Close";
 import {
   BathroomsIcon,
   BedroomsIcon,
@@ -43,6 +44,7 @@ import { LocationPinIcon } from "./LocationPin";
 import { LogOutIcon } from "./LogOut";
 import { MailIcon } from "./Mail";
 import { MapViewIcon } from "./MapView";
+import { MapCollapseIcon, MapExpandIcon } from "./MapControls";
 import { MenuIcon } from "./Menu";
 import { MinusIcon } from "./Minus";
 import { NavigateIcon } from "./Navigate";
@@ -75,6 +77,7 @@ export const icons = {
   chevronDown: ChevronDownIcon,
   chevronLeft: ChevronLeftIcon,
   clock: ClockIcon,
+  close: CloseIcon,
   clockFilled: ClockFilledIcon,
   copy: CopyIcon,
   bathrooms: BathroomsIcon,
@@ -96,6 +99,8 @@ export const icons = {
   logOut: LogOutIcon,
   mail: MailIcon,
   mapView: MapViewIcon,
+  mapCollapse: MapCollapseIcon,
+  mapExpand: MapExpandIcon,
   menu: MenuIcon,
   minus: MinusIcon,
   navigate: NavigateIcon,
@@ -131,6 +136,8 @@ export const iconGroups = {
     "home",
     "listView",
     "locationPin",
+    "mapCollapse",
+    "mapExpand",
     "mapView",
     "menu",
     "navigate",
@@ -147,6 +154,7 @@ export const iconGroups = {
     "search",
     "calendar",
     "calendarOutline",
+    "close",
     "ratingStar",
     "saveHeart",
     "share",

package/src/index.ts

@@ -15,6 +15,7 @@ export {
   Toggle,
   RatingInput,
   CommentCard,
+  Range,
 } from "./components";
 export type {
   AvatarProps,
@@ -48,6 +49,8 @@ export type {
   ToggleProps,
   RatingInputProps,
   CommentCardProps,
+  RangeProps,
+  RangeValue,
 } from "./components";
 
 export {
@@ -55,9 +58,15 @@ export {
   BRAND_LOGO_COLORS,
   BRAND_LOGO_DEFAULT_HEIGHT,
   BRAND_LOGO_DEFAULT_WIDTH,
+  FavoritesButton,
   MenuItem,
 } from "./primitives";
-export type { BrandLogoProps, BrandLogoVariant, MenuItemProps } from "./primitives";
+export type {
+  BrandLogoProps,
+  BrandLogoVariant,
+  FavoritesButtonProps,
+  MenuItemProps,
+} from "./primitives";
 
 export {
   Icon,
@@ -78,6 +87,7 @@ export {
   ChevronDownIcon,
   ChevronLeftIcon,
   ClockIcon,
+  CloseIcon,
   BathroomsIcon,
   BedroomsIcon,
   CardLocationIcon,
@@ -107,6 +117,8 @@ export {
   LogOutIcon,
   MailIcon,
   MapViewIcon,
+  MapCollapseIcon,
+  MapExpandIcon,
   MenuIcon,
   MinusIcon,
   NavigateIcon,

package/src/primitives/FavoritesButton/FavoritesButton.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { StyleSheet, View } from "react-native";
+import { FavoritesButton } from "./FavoritesButton";
+
+const meta = {
+  title: "Primitives/FavoritesButton",
+  component: FavoritesButton,
+  args: {
+    onValueChange: fn(),
+  },
+  argTypes: {
+    value: { control: "boolean" },
+    defaultValue: { control: "boolean" },
+    disabled: { control: "boolean" },
+    onValueChange: { action: "value changed" },
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+  decorators: [
+    (Story) => (
+      <View style={styles.frame}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<typeof FavoritesButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Active: Story = {
+  args: { value: true },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <View style={styles.row}>
+      <FavoritesButton accessibilityLabel="Add to favorites" onValueChange={fn()} value={false} />
+      <FavoritesButton accessibilityLabel="Remove from favorites" onValueChange={fn()} value />
+    </View>
+  ),
+};
+
+const styles = StyleSheet.create({
+  frame: {
+    padding: 24,
+  },
+  row: {
+    flexDirection: "row",
+    gap: 16,
+  },
+});

package/src/primitives/FavoritesButton/FavoritesButton.tsx

@@ -0,0 +1,120 @@
+import { forwardRef, useMemo, useRef, useState, type ComponentRef } from "react";
+import {
+  Platform,
+  Pressable,
+  StyleSheet,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import { SaveHeartIcon } from "../../icons";
+import { colors } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface FavoritesButtonProps extends Omit<
+  PressableProps,
+  "onPress" | "disabled" | "style" | "children" | "hitSlop"
+> {
+  /** Controlled favorite state. */
+  value?: boolean;
+  /** Initial state when the button is uncontrolled. */
+  defaultValue?: boolean;
+  /** Called with the next favorite state when pressed. */
+  onValueChange?: (value: boolean) => void;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+  hitSlop?: PressableProps["hitSlop"];
+}
+
+const ICON_SIZE = 16;
+const BACKGROUND_COLOR = "#09090966";
+
+const webBlurStyle: ViewStyle =
+  Platform.OS === "web"
+    ? ({
+        backdropFilter: "blur(10px)",
+        WebkitBackdropFilter: "blur(10px)",
+      } as ViewStyle)
+    : {};
+
+export const FavoritesButton = forwardRef<ComponentRef<typeof Pressable>, FavoritesButtonProps>(
+  function FavoritesButton(
+    {
+      value,
+      defaultValue = false,
+      onValueChange,
+      disabled = false,
+      style,
+      className,
+      accessibilityLabel,
+      hitSlop = 8,
+      ...rest
+    },
+    forwardedRef,
+  ) {
+    const buttonRef = useRef<ComponentRef<typeof Pressable>>(null);
+    const isControlled = typeof value === "boolean";
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const isActive = isControlled ? value : uncontrolledValue;
+    const setButtonRef = useMemo(() => mergeRefs(buttonRef, forwardedRef), [forwardedRef]);
+
+    useApplyWebClassName(buttonRef, className?.trim() || undefined);
+
+    const handlePress = () => {
+      const nextValue = !isActive;
+      if (!isControlled) setUncontrolledValue(nextValue);
+      onValueChange?.(nextValue);
+    };
+
+    return (
+      <Pressable
+        {...rest}
+        ref={setButtonRef}
+        accessibilityLabel={
+          accessibilityLabel ?? (isActive ? "Remove from favorites" : "Add to favorites")
+        }
+        accessibilityRole="togglebutton"
+        accessibilityState={{ checked: isActive, disabled }}
+        disabled={disabled}
+        hitSlop={hitSlop}
+        onPress={handlePress}
+        style={({ pressed }) => [
+          styles.button,
+          webBlurStyle,
+          pressed && styles.pressed,
+          disabled && styles.disabled,
+          style,
+        ]}
+      >
+        <SaveHeartIcon
+          color={isActive ? colors.red : colors.white}
+          fillOpacity={isActive ? 1 : 0}
+          size={ICON_SIZE}
+          strokeWidth={2}
+        />
+      </Pressable>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  button: {
+    padding: 12,
+    gap: 10,
+    alignItems: "center",
+    justifyContent: "center",
+    alignSelf: "flex-start",
+    borderRadius: 39,
+    borderWidth: 1,
+    borderColor: colors.whiteAlpha10,
+    backgroundColor: BACKGROUND_COLOR,
+  },
+  pressed: {
+    opacity: 0.8,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+});

package/src/primitives/FavoritesButton/index.ts

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

package/src/primitives/index.ts

@@ -1,5 +1,7 @@
 export { MenuItem } from "./MenuItem";
 export type { MenuItemProps } from "./MenuItem";
+export { FavoritesButton } from "./FavoritesButton";
+export type { FavoritesButtonProps } from "./FavoritesButton";
 
 export {
   BrandLogo,