@ecohouse/ui 0.1.16 → 0.1.18

package/src/icons/ListView/ListViewIcon.web.tsx

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

package/src/icons/ListView/index.ts

@@ -0,0 +1 @@
+export { ListViewIcon, LIST_VIEW_PATH } from "./ListViewIcon";

package/src/icons/ListView/listViewPath.ts

@@ -0,0 +1,3 @@
+/** Four-tile list view icon path — 20×20 viewBox. */
+export const LIST_VIEW_PATH =
+  "M7 2.5H3.83333C3.36662 2.5 3.13327 2.5 2.95501 2.59083C2.79821 2.67072 2.67072 2.79821 2.59083 2.95501C2.5 3.13327 2.5 3.36662 2.5 3.83333V7C2.5 7.46671 2.5 7.70007 2.59083 7.87833C2.67072 8.03513 2.79821 8.16261 2.95501 8.24251C3.13327 8.33333 3.36662 8.33333 3.83333 8.33333H7C7.46671 8.33333 7.70007 8.33333 7.87833 8.24251C8.03513 8.16261 8.16261 8.03513 8.24251 7.87833C8.33333 7.70007 8.33333 7.46671 8.33333 7V3.83333C8.33333 3.36662 8.33333 3.13327 8.24251 2.95501C8.16261 2.79821 8.03513 2.67072 7.87833 2.59083C7.70007 2.5 7.46671 2.5 7 2.5ZM16.1667 2.5H13C12.5333 2.5 12.2999 2.5 12.1217 2.59083C11.9649 2.67072 11.8374 2.79821 11.7575 2.95501C11.6667 3.13327 11.6667 3.36662 11.6667 3.83333V7C11.6667 7.46671 11.6667 7.70007 11.7575 7.87833C11.8374 8.03513 11.9649 8.16261 12.1217 8.24251C12.2999 8.33333 12.5333 8.33333 13 8.33333H16.1667C16.6334 8.33333 16.8667 8.33333 17.045 8.24251C17.2018 8.16261 17.3293 8.03513 17.4092 7.87833C17.5 7.70007 17.5 7.46671 17.5 7V3.83333C17.5 3.36662 17.5 3.13327 17.4092 2.95501C17.3293 2.79821 17.2018 2.67072 17.045 2.59083C16.8667 2.5 16.6334 2.5 16.1667 2.5ZM16.1667 11.6667H13C12.5333 11.6667 12.2999 11.6667 12.1217 11.7575C11.9649 11.8374 11.8374 11.9649 11.7575 12.1217C11.6667 12.2999 11.6667 12.5333 11.6667 13V16.1667C11.6667 16.6334 11.6667 16.8667 11.7575 17.045C11.8374 17.2018 11.9649 17.3293 12.1217 17.4092C12.2999 17.5 12.5333 17.5 13 17.5H16.1667C16.6334 17.5 16.8667 17.5 17.045 17.4092C17.2018 17.3293 17.3293 17.2018 17.4092 17.045C17.5 16.8667 17.5 16.6334 17.5 16.1667V13C17.5 12.5333 17.5 12.2999 17.4092 12.1217C17.3293 11.9649 17.2018 11.8374 17.045 11.7575C16.8667 11.6667 16.6334 11.6667 16.1667 11.6667ZM7 11.6667H3.83333C3.36662 11.6667 3.13327 11.6667 2.95501 11.7575C2.79821 11.8374 2.67072 11.9649 2.59083 12.1217C2.5 12.2999 2.5 12.5333 2.5 13V16.1667C2.5 16.6334 2.5 16.8667 2.59083 17.045C2.67072 17.2018 2.79821 17.3293 2.95501 17.4092C3.13327 17.5 3.36662 17.5 3.83333 17.5H7C7.46671 17.5 7.70007 17.5 7.87833 17.4092C8.03513 17.3293 8.16261 17.2018 8.24251 17.045C8.33333 16.8667 8.33333 16.6334 8.33333 16.1667V13C8.33333 12.5333 8.33333 12.2999 8.24251 12.1217C8.16261 11.9649 8.03513 11.8374 7.87833 11.7575C7.70007 11.6667 7.46671 11.6667 7 11.6667Z";

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,