@ecohouse/ui 0.1.36 → 0.1.39

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/CalendarMinus/CalendarMinusIcon.tsx

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

package/src/icons/CalendarMinus/CalendarMinusIcon.web.tsx

@@ -0,0 +1,31 @@
+import { CALENDAR_MINUS_PATH } from "./calendarMinusPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+/** Web / Storybook — plain SVG (no react-native-svg). */
+export function CalendarMinusIcon({
+  size = 20,
+  color = colors.grey200,
+  strokeWidth = 2,
+}: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={CALENDAR_MINUS_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { CALENDAR_MINUS_PATH } from "./calendarMinusPath";

package/src/icons/CalendarMinus/calendarMinusPath.ts

@@ -0,0 +1,3 @@
+/** Calendar with minus mark — 20×20 viewBox. */
+export const CALENDAR_MINUS_PATH =
+  "M12.5 14.9998H17.5M17.5 9.58317V7.33317C17.5 5.93304 17.5 5.23297 17.2275 4.69819C16.9878 4.22779 16.6054 3.84534 16.135 3.60565C15.6002 3.33317 14.9001 3.33317 13.5 3.33317H6.5C5.09987 3.33317 4.3998 3.33317 3.86502 3.60565C3.39462 3.84534 3.01217 4.22779 2.77248 4.69819C2.5 5.23297 2.5 5.93304 2.5 7.33317V14.3332C2.5 15.7333 2.5 16.4334 2.77248 16.9681C3.01217 17.4386 3.39462 17.821 3.86502 18.0607C4.3998 18.3332 5.09987 18.3332 6.5 18.3332H10.4167M17.5 8.33317H2.5M13.3333 1.6665V4.99984M6.66667 1.6665V4.99984";

package/src/icons/CalendarMinus/index.ts

@@ -0,0 +1 @@
+export { CalendarMinusIcon, CALENDAR_MINUS_PATH } from "./CalendarMinusIcon";

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,12 +9,14 @@ 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";
 export { BellIcon } from "./Bell";
 export { BuildingIcon } from "./Building";
 export { CalendarIcon } from "./Calendar";
+export { CalendarMinusIcon } from "./CalendarMinus";
 export { CalendarOutlineIcon } from "./CalendarOutline";
 export { CameraIcon } from "./Camera";
 export { CameraFilledIcon } from "./CameraFilled";
@@ -24,6 +26,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

@@ -6,6 +6,7 @@ import { BanIcon } from "./Ban";
 import { BellIcon } from "./Bell";
 import { BuildingIcon } from "./Building";
 import { CalendarIcon } from "./Calendar";
+import { CalendarMinusIcon } from "./CalendarMinus";
 import { CalendarOutlineIcon } from "./CalendarOutline";
 import { CameraIcon } from "./Camera";
 import { CameraFilledIcon } from "./CameraFilled";
@@ -91,6 +92,7 @@ export const icons = {
   bell: BellIcon,
   building: BuildingIcon,
   calendar: CalendarIcon,
+  calendarMinus: CalendarMinusIcon,
   calendarOutline: CalendarOutlineIcon,
   camera: CameraIcon,
   cameraFilled: CameraFilledIcon,
@@ -202,6 +204,7 @@ export const iconGroups = {
     "download",
     "search",
     "calendar",
+    "calendarMinus",
     "calendarOutline",
     "close",
     "edit",

package/src/index.ts

@@ -9,8 +9,10 @@ export {
   InfoTile,
   ContactInfoCard,
   AccordionItem,
+  Accordion,
   StepList,
   Counter,
+  QuantityInput,
   SegmentedToggle,
   Sidebar,
   LanguageSwitcher,
@@ -21,7 +23,9 @@ export {
   DatePicker,
   FloatingActionButton,
   Modal,
+  Drawer,
   Input,
+  AutocompleteInput,
   VerificationCodeInput,
   Select,
   Textarea,
@@ -45,8 +49,10 @@ export type {
   InfoTileProps,
   ContactInfoCardProps,
   AccordionItemProps,
+  AccordionProps,
   StepListProps,
   CounterProps,
+  QuantityInputProps,
   SegmentedToggleOption,
   SegmentedToggleProps,
   SidebarProps,
@@ -68,9 +74,12 @@ export type {
   DateRange,
   FloatingActionButtonProps,
   ModalProps,
+  DrawerProps,
   InputIcon,
   InputProps,
   InputSize,
+  AutocompleteInputProps,
+  AutocompleteOption,
   VerificationCodeInputHandle,
   VerificationCodeInputProps,
   SelectIcon,
@@ -119,12 +128,14 @@ export {
   iconGroups,
   iconGroupNames,
   getIconsByGroup,
+  ArrowLeftIcon,
   ArrowRightIcon,
   BagIcon,
   BanIcon,
   BellIcon,
   BuildingIcon,
   CalendarIcon,
+  CalendarMinusIcon,
   CalendarOutlineIcon,
   CameraIcon,
   CameraFilledIcon,
@@ -134,6 +145,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

@@ -20,12 +20,14 @@ export type GreyStep = keyof typeof grey;
 
 export const colors = {
   primary: "#B46436",
+  primaryLight: "#E38E5E",
   black: "#000000",
   white: "#ffffff",
   whiteAlpha86: "#FFFFFFDB",
   whiteAlpha60: "#FFFFFF99",
   whiteAlpha40: "#FFFFFF66",
   whiteAlpha20: "#FFFFFF33",
+  whiteAlpha1: "#FFFFFF03",
   whiteAlpha6: "#FFFFFF0F",
   whiteAlpha10: "#FFFFFF1A",
   whiteAlpha5: "#FFFFFF0D",

package/src/web/styles/account-header.css

@@ -0,0 +1,22 @@
+/**
+ * AccountHeader (web) — keep the menu control mounted to avoid a mobile refresh flash,
+ * but hide it on desktop (≥1024px) where the persistent sidebar is shown.
+ *
+ * Requires `menuClassName="account-header-menu"` (or rely on `#account-header-menu`).
+ */
+@media (min-width: 1024px) {
+  #account-header-menu,
+  .account-header-menu {
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
+    min-width: 0 !important;
+    min-height: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+    position: absolute !important;
+  }
+}