@ecohouse/ui 0.1.16 → 0.1.17

package/src/icons/LocationPin/LocationPinIcon.tsx

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

package/src/icons/LocationPin/LocationPinIcon.web.tsx

@@ -0,0 +1,27 @@
+import { LOCATION_PIN_PATH } from "./locationPinPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+/** Web / Storybook — plain SVG (no react-native-svg). */
+export function LocationPinIcon({ 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={LOCATION_PIN_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { LOCATION_PIN_PATH } from "./locationPinPath";

package/src/icons/LocationPin/index.ts

@@ -0,0 +1 @@
+export { LocationPinIcon, LOCATION_PIN_PATH } from "./LocationPinIcon";

package/src/icons/LocationPin/locationPinPath.ts

@@ -0,0 +1,3 @@
+/** Location pin icon path — 20×20 viewBox. */
+export const LOCATION_PIN_PATH =
+  "M4.16675 8.26904C4.16675 12.3122 7.70381 15.6558 9.26941 16.9377C9.49347 17.1211 9.60684 17.214 9.774 17.261C9.90417 17.2977 10.0957 17.2977 10.2259 17.261C10.3934 17.2139 10.506 17.122 10.7309 16.9378C12.2965 15.6559 15.8333 12.3126 15.8333 8.26941C15.8333 6.73932 15.2188 5.27171 14.1248 4.18977C13.0309 3.10783 11.5472 2.5 10.0001 2.5C8.45305 2.5 6.96925 3.10792 5.87529 4.18986C4.78133 5.2718 4.16675 6.73895 4.16675 8.26904ZM8.33341 7.5C8.33341 8.42047 9.07961 9.16667 10.0001 9.16667C10.9206 9.16667 11.6667 8.42047 11.6667 7.5C11.6667 6.57953 10.9206 5.83333 10.0001 5.83333C9.07961 5.83333 8.33341 6.57953 8.33341 7.5Z";

package/src/icons/MapView/MapViewIcon.tsx

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

package/src/icons/MapView/MapViewIcon.web.tsx

@@ -0,0 +1,27 @@
+import { MAP_VIEW_PATH } from "./mapViewPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+/** Web / Storybook — plain SVG (no react-native-svg). */
+export function MapViewIcon({ size = 20, color = colors.grey400, 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={MAP_VIEW_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { MAP_VIEW_PATH } from "./mapViewPath";

package/src/icons/MapView/index.ts

@@ -0,0 +1 @@
+export { MapViewIcon, MAP_VIEW_PATH } from "./MapViewIcon";

package/src/icons/MapView/mapViewPath.ts

@@ -0,0 +1,3 @@
+/** Folded map icon path — 20×20 viewBox. */
+export const MAP_VIEW_PATH =
+  "M13.3332 4.99984L7.49984 1.6665L1.6665 4.99984V18.3332L7.49984 14.9998M13.3332 4.99984L18.3332 1.6665V14.9998L13.3332 18.3332L7.49984 14.9998M7.49984 14.9998V1.6665M13.3332 18.3332V4.99984";

package/src/icons/Sort/SortIcon.tsx

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

package/src/icons/Sort/SortIcon.web.tsx

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

package/src/icons/Sort/index.ts

@@ -0,0 +1 @@
+export { SortIcon, SORT_PATH } from "./SortIcon";

package/src/icons/Sort/sortPath.ts

@@ -0,0 +1,2 @@
+/** Bidirectional sort icon path — 12×12 viewBox. */
+export const SORT_PATH = "M3.5 2V10M5.5 8L3.5 10L1.5 8M8.5 10V2M10.5 4L8.5 2L6.5 4";

package/src/icons/index.ts

@@ -17,7 +17,26 @@ export { CheckBadgeIcon } from "./CheckBadge";
 export { ChevronDownIcon } from "./ChevronDown";
 export { ChevronLeftIcon } from "./ChevronLeft";
 export { ClockIcon } from "./Clock";
+export {
+  BathroomsIcon,
+  BedroomsIcon,
+  CardLocationIcon,
+  GuestsIcon,
+  RatingStarIcon,
+  SaveHeartIcon,
+} from "./CottageCard";
+export {
+  AreaExpandIcon,
+  CheckSuccessIcon,
+  ClockFilledIcon,
+  CopyIcon,
+  QrCodeIcon,
+  ShareIcon,
+  TooltipArrowIcon,
+  WhatsAppIcon,
+} from "./CottageDetail";
 export { FacebookIcon } from "./Facebook";
+export { FiltersIcon } from "./Filters";
 export { HeartIcon } from "./Heart";
 export { GlobeIcon } from "./Globe";
 export { HelpCircleIcon } from "./HelpCircle";
@@ -26,8 +45,11 @@ export { InstagramIcon } from "./Instagram";
 export { KeyIcon } from "./Key";
 export { LayoutGridIcon } from "./LayoutGrid";
 export { LinkedInIcon } from "./LinkedIn";
+export { ListViewIcon } from "./ListView";
+export { LocationPinIcon } from "./LocationPin";
 export { LogOutIcon } from "./LogOut";
 export { MailIcon } from "./Mail";
+export { MapViewIcon } from "./MapView";
 export { MenuIcon } from "./Menu";
 export type { MenuIconProps } from "./Menu";
 export { NavigateIcon } from "./Navigate";
@@ -38,6 +60,7 @@ export { SearchIcon } from "./Search";
 export { SettingsIcon } from "./Settings";
 export { ShowIcon } from "./Show";
 export { SidebarIcon } from "./Sidebar";
+export { SortIcon } from "./Sort";
 export { StarIcon } from "./Star";
 export { StarFilledIcon } from "./StarFilled";
 export { UserIcon } from "./User";

package/src/icons/registry.ts

@@ -10,7 +10,26 @@ import { CheckBadgeIcon } from "./CheckBadge";
 import { ChevronDownIcon } from "./ChevronDown";
 import { ChevronLeftIcon } from "./ChevronLeft";
 import { ClockIcon } from "./Clock";
+import {
+  BathroomsIcon,
+  BedroomsIcon,
+  CardLocationIcon,
+  GuestsIcon,
+  RatingStarIcon,
+  SaveHeartIcon,
+} from "./CottageCard";
+import {
+  AreaExpandIcon,
+  CheckSuccessIcon,
+  ClockFilledIcon,
+  CopyIcon,
+  QrCodeIcon,
+  ShareIcon,
+  TooltipArrowIcon,
+  WhatsAppIcon,
+} from "./CottageDetail";
 import { FacebookIcon } from "./Facebook";
+import { FiltersIcon } from "./Filters";
 import { HeartIcon } from "./Heart";
 import { GlobeIcon } from "./Globe";
 import { HelpCircleIcon } from "./HelpCircle";
@@ -19,8 +38,11 @@ import { InstagramIcon } from "./Instagram";
 import { KeyIcon } from "./Key";
 import { LayoutGridIcon } from "./LayoutGrid";
 import { LinkedInIcon } from "./LinkedIn";
+import { ListViewIcon } from "./ListView";
+import { LocationPinIcon } from "./LocationPin";
 import { LogOutIcon } from "./LogOut";
 import { MailIcon } from "./Mail";
+import { MapViewIcon } from "./MapView";
 import { MenuIcon } from "./Menu";
 import { MinusIcon } from "./Minus";
 import { NavigateIcon } from "./Navigate";
@@ -30,6 +52,7 @@ import { SearchIcon } from "./Search";
 import { SettingsIcon } from "./Settings";
 import { ShowIcon } from "./Show";
 import { SidebarIcon } from "./Sidebar";
+import { SortIcon } from "./Sort";
 import { StarIcon } from "./Star";
 import { StarFilledIcon } from "./StarFilled";
 import { UserIcon } from "./User";
@@ -38,6 +61,7 @@ import { VideoIcon } from "./Video";
 import type { IconComponent } from "./types";
 
 export const icons = {
+  areaExpand: AreaExpandIcon,
   arrowRight: ArrowRightIcon,
   bag: BagIcon,
   bell: BellIcon,
@@ -47,10 +71,18 @@ export const icons = {
   camera: CameraIcon,
   check: CheckIcon,
   checkBadge: CheckBadgeIcon,
+  checkSuccess: CheckSuccessIcon,
   chevronDown: ChevronDownIcon,
   chevronLeft: ChevronLeftIcon,
   clock: ClockIcon,
+  clockFilled: ClockFilledIcon,
+  copy: CopyIcon,
+  bathrooms: BathroomsIcon,
+  bedrooms: BedroomsIcon,
+  cardLocation: CardLocationIcon,
   facebook: FacebookIcon,
+  filters: FiltersIcon,
+  guests: GuestsIcon,
   heart: HeartIcon,
   globe: GlobeIcon,
   helpCircle: HelpCircleIcon,
@@ -59,22 +91,32 @@ export const icons = {
   key: KeyIcon,
   layoutGrid: LayoutGridIcon,
   linkedin: LinkedInIcon,
+  listView: ListViewIcon,
+  locationPin: LocationPinIcon,
   logOut: LogOutIcon,
   mail: MailIcon,
+  mapView: MapViewIcon,
   menu: MenuIcon,
   minus: MinusIcon,
   navigate: NavigateIcon,
   phone: PhoneIcon,
+  qrCode: QrCodeIcon,
+  ratingStar: RatingStarIcon,
   plus: PlusIcon,
   search: SearchIcon,
+  saveHeart: SaveHeartIcon,
+  share: ShareIcon,
   settings: SettingsIcon,
   show: ShowIcon,
   sidebar: SidebarIcon,
+  sort: SortIcon,
   star: StarIcon,
   starFilled: StarFilledIcon,
+  tooltipArrow: TooltipArrowIcon,
   user: UserIcon,
   usersAlt: UsersAltIcon,
   video: VideoIcon,
+  whatsApp: WhatsAppIcon,
 } as const satisfies Record<string, IconComponent>;
 
 export type IconName = keyof typeof icons;
@@ -82,7 +124,17 @@ export type IconName = keyof typeof icons;
 export const iconNames = Object.keys(icons) as IconName[];
 
 export const iconGroups = {
-  navigation: ["arrowRight", "chevronDown", "chevronLeft", "home", "menu", "navigate"],
+  navigation: [
+    "arrowRight",
+    "chevronDown",
+    "chevronLeft",
+    "home",
+    "listView",
+    "locationPin",
+    "mapView",
+    "menu",
+    "navigate",
+  ],
   actions: [
     "show",
     "bell",
@@ -90,19 +142,49 @@ export const iconGroups = {
     "key",
     "check",
     "checkBadge",
+    "checkSuccess",
+    "copy",
     "search",
     "calendar",
     "calendarOutline",
+    "ratingStar",
+    "saveHeart",
+    "share",
+    "filters",
     "heart",
     "star",
     "starFilled",
     "minus",
     "plus",
+    "sort",
+  ],
+  objects: [
+    "bag",
+    "bathrooms",
+    "bedrooms",
+    "building",
+    "cardLocation",
+    "clock",
+    "clockFilled",
+    "guests",
+    "qrCode",
+    "user",
+    "usersAlt",
+    "video",
+    "whatsApp",
   ],
-  objects: ["bag", "building", "clock", "user", "usersAlt", "video"],
   communication: ["mail", "phone"],
   social: ["facebook", "instagram", "linkedin"],
-  interface: ["globe", "layoutGrid", "sidebar", "settings", "helpCircle", "logOut"],
+  interface: [
+    "areaExpand",
+    "globe",
+    "layoutGrid",
+    "sidebar",
+    "settings",
+    "helpCircle",
+    "logOut",
+    "tooltipArrow",
+  ],
 } as const satisfies Record<string, readonly IconName[]>;
 
 export type IconGroup = keyof typeof iconGroups;

package/src/icons/types.ts

@@ -4,6 +4,8 @@ export interface IconProps {
   size?: number;
   color?: string;
   strokeWidth?: number;
+  fillOpacity?: number;
+  secondaryColor?: string;
 }
 
 export type IconComponent = ComponentType<IconProps>;

package/src/index.ts

@@ -78,7 +78,22 @@ export {
   ChevronDownIcon,
   ChevronLeftIcon,
   ClockIcon,
+  BathroomsIcon,
+  BedroomsIcon,
+  CardLocationIcon,
+  GuestsIcon,
+  RatingStarIcon,
+  SaveHeartIcon,
+  AreaExpandIcon,
+  CheckSuccessIcon,
+  ClockFilledIcon,
+  CopyIcon,
+  QrCodeIcon,
+  ShareIcon,
+  TooltipArrowIcon,
+  WhatsAppIcon,
   FacebookIcon,
+  FiltersIcon,
   HeartIcon,
   GlobeIcon,
   HelpCircleIcon,
@@ -87,8 +102,11 @@ export {
   KeyIcon,
   LayoutGridIcon,
   LinkedInIcon,
+  ListViewIcon,
+  LocationPinIcon,
   LogOutIcon,
   MailIcon,
+  MapViewIcon,
   MenuIcon,
   MinusIcon,
   NavigateIcon,
@@ -98,6 +116,7 @@ export {
   SettingsIcon,
   ShowIcon,
   SidebarIcon,
+  SortIcon,
   StarIcon,
   StarFilledIcon,
   UserIcon,