@ecohouse/ui 0.1.19 → 0.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "type": "module",
   "private": false,
   "description": "Cross-platform presentation-only UI components for EcoHouse (React Native + React Native Web)",

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/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/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

@@ -87,6 +87,7 @@ export {
   ChevronDownIcon,
   ChevronLeftIcon,
   ClockIcon,
+  CloseIcon,
   BathroomsIcon,
   BedroomsIcon,
   CardLocationIcon,
@@ -116,6 +117,8 @@ export {
   LogOutIcon,
   MailIcon,
   MapViewIcon,
+  MapCollapseIcon,
+  MapExpandIcon,
   MenuIcon,
   MinusIcon,
   NavigateIcon,