@ecohouse/ui 0.1.36 → 0.1.38

package/src/components/Counter/Counter.tsx

@@ -23,6 +23,8 @@ export interface CounterProps extends Omit<ViewProps, "style" | "children"> {
   max?: number;
   step?: number;
   disabled?: boolean;
+  /** Places the value before both controls for use inside input-like fields. */
+  layout?: "controls-around" | "value-first";
   style?: StyleProp<ViewStyle>;
   className?: string;
   hitSlop?: PressableProps["hitSlop"];
@@ -51,6 +53,7 @@ export const Counter = forwardRef<ComponentRef<typeof View>, CounterProps>(funct
     max,
     step = 1,
     disabled = false,
+    layout = "controls-around",
     style,
     className,
     hitSlop,
@@ -78,33 +81,57 @@ export const Counter = forwardRef<ComponentRef<typeof View>, CounterProps>(funct
     onValueChange?.(next);
   };
 
-  return (
-    <View {...rest} ref={setContainerRef} style={[styles.base, style]}>
-      <Pressable
-        disabled={decrementDisabled}
-        hitSlop={hitSlop}
-        onPress={() => updateValue(resolvedValue - step)}
-        accessibilityRole="button"
-        accessibilityLabel="Decrease value"
-        accessibilityState={{ disabled: decrementDisabled }}
-        style={[styles.button, webBlurStyle, decrementDisabled && styles.buttonDisabled]}
-      >
-        <MinusIcon />
-      </Pressable>
-
-      <Text style={styles.value}>{resolvedValue}</Text>
+  const decrement = (
+    <Pressable
+      disabled={decrementDisabled}
+      hitSlop={hitSlop}
+      onPress={() => updateValue(resolvedValue - step)}
+      accessibilityRole="button"
+      accessibilityLabel="Decrease value"
+      accessibilityState={{ disabled: decrementDisabled }}
+      style={[styles.button, webBlurStyle, decrementDisabled && styles.buttonDisabled]}
+    >
+      <MinusIcon />
+    </Pressable>
+  );
+  const increment = (
+    <Pressable
+      disabled={incrementDisabled}
+      hitSlop={hitSlop}
+      onPress={() => updateValue(resolvedValue + step)}
+      accessibilityRole="button"
+      accessibilityLabel="Increase value"
+      accessibilityState={{ disabled: incrementDisabled }}
+      style={[styles.button, webBlurStyle, incrementDisabled && styles.buttonDisabled]}
+    >
+      <PlusIcon />
+    </Pressable>
+  );
+  const valueNode = (
+    <Text style={[styles.value, layout === "value-first" && styles.leadingValue]}>
+      {resolvedValue}
+    </Text>
+  );
 
-      <Pressable
-        disabled={incrementDisabled}
-        hitSlop={hitSlop}
-        onPress={() => updateValue(resolvedValue + step)}
-        accessibilityRole="button"
-        accessibilityLabel="Increase value"
-        accessibilityState={{ disabled: incrementDisabled }}
-        style={[styles.button, webBlurStyle, incrementDisabled && styles.buttonDisabled]}
-      >
-        <PlusIcon />
-      </Pressable>
+  return (
+    <View
+      {...rest}
+      ref={setContainerRef}
+      style={[styles.base, layout === "value-first" && styles.valueFirst, style]}
+    >
+      {layout === "value-first" ? (
+        <>
+          {valueNode}
+          {decrement}
+          {increment}
+        </>
+      ) : (
+        <>
+          {decrement}
+          {valueNode}
+          {increment}
+        </>
+      )}
     </View>
   );
 });
@@ -116,6 +143,11 @@ const styles = StyleSheet.create({
     alignSelf: "flex-start",
     gap: 17,
   },
+  valueFirst: {
+    alignSelf: "stretch",
+    flex: 1,
+    gap: 6,
+  },
   button: {
     width: BUTTON_SIZE,
     height: BUTTON_SIZE,
@@ -132,4 +164,7 @@ const styles = StyleSheet.create({
     ...counterTypography,
     color: colors.white,
   },
+  leadingValue: {
+    flex: 1,
+  },
 });

package/src/components/QuantityInput/QuantityInput.stories.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { GuestsIcon } from "../../icons";
+import { QuantityInput } from "./QuantityInput";
+
+const meta = {
+  title: "Components/QuantityInput",
+  component: QuantityInput,
+  args: {
+    label: "Maximum guests",
+    icon: GuestsIcon,
+    defaultValue: 1,
+    min: 1,
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof QuantityInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithError: Story = {
+  args: { error: true, hint: "Choose at least one guest" },
+};
+
+function ControlledQuantityInput() {
+  const [value, setValue] = useState(1);
+  return (
+    <QuantityInput
+      icon={GuestsIcon}
+      label="Maximum guests"
+      max={20}
+      min={1}
+      onValueChange={setValue}
+      value={value}
+    />
+  );
+}
+
+export const Controlled: Story = {
+  render: () => <ControlledQuantityInput />,
+};

package/src/components/QuantityInput/QuantityInput.tsx

@@ -0,0 +1,153 @@
+import { forwardRef, useMemo, useRef, type ComponentRef } from "react";
+import {
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import type { IconComponent, IconProps } from "../../icons";
+import { colors, fonts } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+import { Counter } from "../Counter";
+
+export interface QuantityInputProps extends Omit<ViewProps, "style" | "children"> {
+  label: string;
+  icon: IconComponent;
+  iconProps?: Omit<IconProps, "size">;
+  iconSize?: number;
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  error?: boolean;
+  hint?: string;
+  showHint?: boolean;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+/** Input-like labeled quantity control with an icon and increment/decrement actions. */
+export const QuantityInput = forwardRef<ComponentRef<typeof View>, QuantityInputProps>(
+  function QuantityInput(
+    {
+      label,
+      icon: Icon,
+      iconProps,
+      iconSize = 20,
+      value,
+      defaultValue,
+      onValueChange,
+      min = 1,
+      max,
+      step = 1,
+      disabled = false,
+      error = false,
+      hint,
+      showHint = true,
+      style,
+      className,
+      accessibilityLabel,
+      ...rest
+    },
+    forwardedRef,
+  ) {
+    const rootRef = useRef<ComponentRef<typeof View>>(null);
+    const setRootRef = useMemo(() => mergeRefs(rootRef, forwardedRef), [forwardedRef]);
+
+    useApplyWebClassName(rootRef, className?.trim() || undefined);
+
+    return (
+      <View
+        {...rest}
+        ref={setRootRef}
+        accessibilityLabel={accessibilityLabel ?? label}
+        accessibilityState={{ disabled }}
+        style={[styles.root, disabled && styles.disabled, style]}
+      >
+        <Text style={[styles.label, error && styles.errorText]}>{label}</Text>
+        <View style={[styles.field, error && styles.errorField]}>
+          <View style={styles.iconSlot}>
+            <Icon
+              {...iconProps}
+              color={iconProps?.color ?? (error ? colors.red : colors.grey150)}
+              size={iconSize}
+            />
+          </View>
+          <Counter
+            defaultValue={defaultValue}
+            disabled={disabled}
+            layout="value-first"
+            max={max}
+            min={min}
+            onValueChange={onValueChange}
+            step={step}
+            value={value}
+          />
+        </View>
+        {showHint && hint ? (
+          <Text style={[styles.hint, error && styles.errorText]}>{hint}</Text>
+        ) : null}
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  root: {
+    alignSelf: "stretch",
+    flexDirection: "column",
+    gap: 8,
+    minWidth: 0,
+  },
+  label: {
+    color: colors.white,
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "500",
+    letterSpacing: -0.24,
+    lineHeight: 12,
+  },
+  field: {
+    alignItems: "center",
+    alignSelf: "stretch",
+    backgroundColor: colors.grey700,
+    borderColor: colors.grey700,
+    borderRadius: 60,
+    borderWidth: 1,
+    flexDirection: "row",
+    gap: 10,
+    height: 44,
+    paddingLeft: 16,
+    paddingRight: 6,
+    paddingVertical: 5,
+  },
+  iconSlot: {
+    alignItems: "center",
+    flexShrink: 0,
+    height: 20,
+    justifyContent: "center",
+    width: 20,
+  },
+  hint: {
+    color: colors.grey100,
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "400",
+    lineHeight: 12,
+  },
+  errorField: {
+    borderColor: colors.redMuted,
+  },
+  errorText: {
+    color: colors.red,
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+});

package/src/components/QuantityInput/index.ts

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

package/src/components/index.ts

@@ -28,12 +28,18 @@ export type { ContactInfoCardProps } from "./ContactInfoCard";
 export { AccordionItem } from "./AccordionItem";
 export type { AccordionItemProps } from "./AccordionItem";
 
+export { Accordion } from "./Accordion";
+export type { AccordionProps } from "./Accordion";
+
 export { StepList } from "./StepList";
 export type { StepListProps } from "./StepList";
 
 export { Counter } from "./Counter";
 export type { CounterProps } from "./Counter";
 
+export { QuantityInput } from "./QuantityInput";
+export type { QuantityInputProps } from "./QuantityInput";
+
 export { SegmentedToggle } from "./SegmentedToggle";
 export type { SegmentedToggleOption, SegmentedToggleProps } from "./SegmentedToggle";
 
@@ -74,6 +80,9 @@ export type { ModalProps } from "./Modal";
 export { Input } from "./Input";
 export type { InputIcon, InputProps, InputSize } from "./Input";
 
+export { AutocompleteInput } from "./AutocompleteInput";
+export type { AutocompleteInputProps, AutocompleteOption } from "./AutocompleteInput";
+
 export { VerificationCodeInput } from "./VerificationCodeInput";
 export type {
   VerificationCodeInputHandle,

package/src/icons/ArrowLeft/ArrowLeftIcon.test.ts

@@ -0,0 +1,10 @@
+import { describe, expect, it } from "vitest";
+import { ARROW_LEFT_PATH } from "./arrowLeftPath";
+
+describe("ArrowLeftIcon", () => {
+  it("uses the approved 24px path", () => {
+    expect(ARROW_LEFT_PATH).toBe(
+      "M10.1972 6.59961L4.80078 11.9994L10.1972 17.3996M4.80078 11.9965H19.202",
+    );
+  });
+});

package/src/icons/ArrowLeft/ArrowLeftIcon.tsx

@@ -0,0 +1,21 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { ARROW_LEFT_PATH } from "./arrowLeftPath";
+
+export { ARROW_LEFT_PATH } from "./arrowLeftPath";
+
+/** Native — react-native-svg (peer dependency). */
+export function ArrowLeftIcon({ size = 24, color = colors.white, strokeWidth = 1.35 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        d={ARROW_LEFT_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/ArrowLeft/ArrowLeftIcon.web.tsx

@@ -0,0 +1,26 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { ARROW_LEFT_PATH } from "./arrowLeftPath";
+
+export function ArrowLeftIcon({ size = 24, color = colors.white, strokeWidth = 1.35 }: IconProps) {
+  return (
+    <svg
+      aria-hidden
+      fill="none"
+      height={size}
+      viewBox="0 0 24 24"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d={ARROW_LEFT_PATH}
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+      />
+    </svg>
+  );
+}
+
+export { ARROW_LEFT_PATH } from "./arrowLeftPath";

package/src/icons/ArrowLeft/arrowLeftPath.ts

@@ -0,0 +1,3 @@
+/** Full Arrow Left path — 24×24 viewBox. */
+export const ARROW_LEFT_PATH =
+  "M10.1972 6.59961L4.80078 11.9994L10.1972 17.3996M4.80078 11.9965H19.202";

package/src/icons/ArrowLeft/index.ts

@@ -0,0 +1 @@
+export { ArrowLeftIcon, ARROW_LEFT_PATH } from "./ArrowLeftIcon";

package/src/icons/CurrentLocation/CurrentLocationIcon.test.ts

@@ -0,0 +1,10 @@
+import { describe, expect, it } from "vitest";
+import { CURRENT_LOCATION_PATH } from "./currentLocationPath";
+
+describe("CurrentLocationIcon", () => {
+  it("uses the approved 19px path", () => {
+    expect(CURRENT_LOCATION_PATH).toBe(
+      "M17.4167 9.08333H14.0833M4.08333 9.08333H0.75M9.08333 4.08333V0.75M9.08333 17.4167V14.0833M15.75 9.08333C15.75 12.7652 12.7652 15.75 9.08333 15.75C5.40144 15.75 2.41667 12.7652 2.41667 9.08333C2.41667 5.40144 5.40144 2.41667 9.08333 2.41667C12.7652 2.41667 15.75 5.40144 15.75 9.08333ZM11.5833 9.08333C11.5833 10.464 10.464 11.5833 9.08333 11.5833C7.70262 11.5833 6.58333 10.464 6.58333 9.08333C6.58333 7.70262 7.70262 6.58333 9.08333 6.58333C10.464 6.58333 11.5833 7.70262 11.5833 9.08333Z",
+    );
+  });
+});

package/src/icons/CurrentLocation/CurrentLocationIcon.tsx

@@ -0,0 +1,25 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { CURRENT_LOCATION_PATH } from "./currentLocationPath";
+
+export { CURRENT_LOCATION_PATH } from "./currentLocationPath";
+
+/** Native — react-native-svg (peer dependency). */
+export function CurrentLocationIcon({
+  size = 19,
+  color = colors.primary,
+  strokeWidth = 1.5,
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 19 19" fill="none">
+      <Path
+        d={CURRENT_LOCATION_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/CurrentLocation/CurrentLocationIcon.web.tsx

@@ -0,0 +1,30 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { CURRENT_LOCATION_PATH } from "./currentLocationPath";
+
+export function CurrentLocationIcon({
+  size = 19,
+  color = colors.primary,
+  strokeWidth = 1.5,
+}: IconProps) {
+  return (
+    <svg
+      aria-hidden
+      fill="none"
+      height={size}
+      viewBox="0 0 19 19"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d={CURRENT_LOCATION_PATH}
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+      />
+    </svg>
+  );
+}
+
+export { CURRENT_LOCATION_PATH } from "./currentLocationPath";

package/src/icons/CurrentLocation/currentLocationPath.ts

@@ -0,0 +1,3 @@
+/** Current-location crosshair path — 19×19 viewBox. */
+export const CURRENT_LOCATION_PATH =
+  "M17.4167 9.08333H14.0833M4.08333 9.08333H0.75M9.08333 4.08333V0.75M9.08333 17.4167V14.0833M15.75 9.08333C15.75 12.7652 12.7652 15.75 9.08333 15.75C5.40144 15.75 2.41667 12.7652 2.41667 9.08333C2.41667 5.40144 5.40144 2.41667 9.08333 2.41667C12.7652 2.41667 15.75 5.40144 15.75 9.08333ZM11.5833 9.08333C11.5833 10.464 10.464 11.5833 9.08333 11.5833C7.70262 11.5833 6.58333 10.464 6.58333 9.08333C6.58333 7.70262 7.70262 6.58333 9.08333 6.58333C10.464 6.58333 11.5833 7.70262 11.5833 9.08333Z";

package/src/icons/CurrentLocation/index.ts

@@ -0,0 +1 @@
+export { CurrentLocationIcon, CURRENT_LOCATION_PATH } from "./CurrentLocationIcon";

package/src/icons/index.ts

@@ -9,6 +9,7 @@ export { AmenityIcon } from "./Amenity";
 export type { AmenityIconProps, AmenityName } from "./Amenity";
 export { AlertTriangleIcon } from "./AlertTriangle";
 export { AppleIcon } from "./Store";
+export { ArrowLeftIcon } from "./ArrowLeft";
 export { ArrowRightIcon } from "./ArrowRight";
 export { BagIcon } from "./Bag";
 export { BanIcon } from "./Ban";
@@ -24,6 +25,7 @@ export { ChevronDownIcon } from "./ChevronDown";
 export { ChevronLeftIcon } from "./ChevronLeft";
 export { ClockIcon } from "./Clock";
 export { CloseIcon } from "./Close";
+export { CurrentLocationIcon } from "./CurrentLocation";
 export { EditIcon } from "./Edit";
 export {
   BathroomsIcon,

package/src/icons/registry.ts

@@ -1,4 +1,5 @@
 import { ArrowRightIcon } from "./ArrowRight";
+import { ArrowLeftIcon } from "./ArrowLeft";
 import { AlertTriangleIcon } from "./AlertTriangle";
 import { AppleIcon, GooglePlayIcon } from "./Store";
 import { BagIcon } from "./Bag";
@@ -15,6 +16,7 @@ import { ChevronDownIcon } from "./ChevronDown";
 import { ChevronLeftIcon } from "./ChevronLeft";
 import { ClockIcon } from "./Clock";
 import { CloseIcon } from "./Close";
+import { CurrentLocationIcon } from "./CurrentLocation";
 import { EditIcon } from "./Edit";
 import {
   BathroomsIcon,
@@ -85,6 +87,7 @@ export const icons = {
   alertTriangle: AlertTriangleIcon,
   areaExpand: AreaExpandIcon,
   apple: AppleIcon,
+  arrowLeft: ArrowLeftIcon,
   arrowRight: ArrowRightIcon,
   bag: BagIcon,
   ban: BanIcon,
@@ -101,6 +104,7 @@ export const icons = {
   chevronLeft: ChevronLeftIcon,
   clock: ClockIcon,
   close: CloseIcon,
+  currentLocation: CurrentLocationIcon,
   edit: EditIcon,
   clockFilled: ClockFilledIcon,
   copy: CopyIcon,
@@ -172,9 +176,11 @@ export const iconNames = Object.keys(icons) as IconName[];
 
 export const iconGroups = {
   navigation: [
+    "arrowLeft",
     "arrowRight",
     "chevronDown",
     "chevronLeft",
+    "currentLocation",
     "home",
     "listView",
     "locationPin",

package/src/index.ts

@@ -9,8 +9,10 @@ export {
   InfoTile,
   ContactInfoCard,
   AccordionItem,
+  Accordion,
   StepList,
   Counter,
+  QuantityInput,
   SegmentedToggle,
   Sidebar,
   LanguageSwitcher,
@@ -22,6 +24,7 @@ export {
   FloatingActionButton,
   Modal,
   Input,
+  AutocompleteInput,
   VerificationCodeInput,
   Select,
   Textarea,
@@ -45,8 +48,10 @@ export type {
   InfoTileProps,
   ContactInfoCardProps,
   AccordionItemProps,
+  AccordionProps,
   StepListProps,
   CounterProps,
+  QuantityInputProps,
   SegmentedToggleOption,
   SegmentedToggleProps,
   SidebarProps,
@@ -71,6 +76,8 @@ export type {
   InputIcon,
   InputProps,
   InputSize,
+  AutocompleteInputProps,
+  AutocompleteOption,
   VerificationCodeInputHandle,
   VerificationCodeInputProps,
   SelectIcon,
@@ -119,6 +126,7 @@ export {
   iconGroups,
   iconGroupNames,
   getIconsByGroup,
+  ArrowLeftIcon,
   ArrowRightIcon,
   BagIcon,
   BanIcon,
@@ -134,6 +142,7 @@ export {
   ChevronLeftIcon,
   ClockIcon,
   CloseIcon,
+  CurrentLocationIcon,
   EditIcon,
   BathroomsIcon,
   BedroomsIcon,

package/src/theme/colors.test.ts

@@ -16,6 +16,7 @@ describe("design tokens", () => {
     expect(colors.whiteAlpha86).toBe("#FFFFFFDB");
     expect(colors.whiteAlpha40).toBe("#FFFFFF66");
     expect(colors.whiteAlpha20).toBe("#FFFFFF33");
+    expect(colors.whiteAlpha1).toBe("#FFFFFF03");
     expect(colors.whiteAlpha6).toBe("#FFFFFF0F");
     expect(colors.whiteAlpha10).toBe("#FFFFFF1A");
     expect(colors.whiteAlpha5).toBe("#FFFFFF0D");

package/src/theme/colors.ts

@@ -26,6 +26,7 @@ export const colors = {
   whiteAlpha60: "#FFFFFF99",
   whiteAlpha40: "#FFFFFF66",
   whiteAlpha20: "#FFFFFF33",
+  whiteAlpha1: "#FFFFFF03",
   whiteAlpha6: "#FFFFFF0F",
   whiteAlpha10: "#FFFFFF1A",
   whiteAlpha5: "#FFFFFF0D",