@ecohouse/ui 0.1.16 → 0.1.18

package/package.json

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

package/src/components/StatCard/StatCard.tsx

@@ -7,7 +7,7 @@ import {
   type ViewProps,
   type ViewStyle,
 } from "react-native";
-import type { IconComponent } from "../../icons";
+import type { IconComponent, IconProps } from "../../icons";
 import { colors, statCardTypography } from "../../theme";
 import { mergeRefs } from "../../utils/mergeRefs";
 import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
@@ -15,6 +15,8 @@ import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
 export interface StatCardProps extends Omit<ViewProps, "style" | "children"> {
   label: string;
   icon: IconComponent;
+  iconProps?: Omit<IconProps, "size">;
+  iconSize?: number;
   style?: StyleProp<ViewStyle>;
   className?: string;
 }
@@ -22,7 +24,16 @@ export interface StatCardProps extends Omit<ViewProps, "style" | "children"> {
 const ICON_SIZE = 28;
 
 export const StatCard = forwardRef<ComponentRef<typeof View>, StatCardProps>(function StatCard(
-  { label, icon: Icon, style, className, accessibilityLabel, ...rest },
+  {
+    label,
+    icon: Icon,
+    iconProps,
+    iconSize = ICON_SIZE,
+    style,
+    className,
+    accessibilityLabel,
+    ...rest
+  },
   forwardedRef,
 ) {
   const containerRef = useRef<ComponentRef<typeof View>>(null);
@@ -39,7 +50,7 @@ export const StatCard = forwardRef<ComponentRef<typeof View>, StatCardProps>(fun
       accessibilityRole="text"
       accessibilityLabel={accessibilityLabel ?? label}
     >
-      <Icon size={ICON_SIZE} color={colors.white} />
+      <Icon {...iconProps} size={iconSize} color={iconProps?.color ?? colors.white} />
       <Text style={styles.label}>{label}</Text>
     </View>
   );

package/src/icons/CottageCard/CottageCardIcons.tsx

@@ -0,0 +1,106 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import {
+  BATHROOMS_PATH,
+  BEDROOMS_PATH,
+  CARD_LOCATION_BASE_PATH,
+  CARD_LOCATION_DOT_PATH,
+  CARD_LOCATION_PIN_PATH,
+  GUESTS_PATH,
+  RATING_STAR_PATH,
+  SAVE_HEART_PATH,
+} from "./cottageCardPaths";
+
+export function SaveHeartIcon({ size = 16, color = colors.white, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
+        d={SAVE_HEART_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export function RatingStarIcon({ size = 12, color = "#E38E5E", strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 12 12" fill="none">
+      <Path
+        d={RATING_STAR_PATH}
+        fill={color}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export function CardLocationIcon({
+  size = 13,
+  color = colors.grey0,
+  strokeWidth = 1.5,
+  secondaryColor = colors.grey700,
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 13 13" fill="none">
+      <Path
+        d={CARD_LOCATION_BASE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d={CARD_LOCATION_PIN_PATH}
+        fill={color}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinejoin="round"
+      />
+      <Path
+        d={CARD_LOCATION_DOT_PATH}
+        fill={secondaryColor}
+        stroke={secondaryColor}
+        strokeWidth={2}
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+function FilledCardIcon({
+  path,
+  size,
+  color,
+  fillOpacity,
+}: Required<Pick<IconProps, "size" | "color" | "fillOpacity">> & { path: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path d={path} fill={color} fillOpacity={fillOpacity} />
+    </Svg>
+  );
+}
+
+export function GuestsIcon({ size = 16, color = colors.white, fillOpacity = 0.4 }: IconProps) {
+  return <FilledCardIcon path={GUESTS_PATH} size={size} color={color} fillOpacity={fillOpacity} />;
+}
+
+export function BedroomsIcon({ size = 16, color = colors.white, fillOpacity = 0.4 }: IconProps) {
+  return (
+    <FilledCardIcon path={BEDROOMS_PATH} size={size} color={color} fillOpacity={fillOpacity} />
+  );
+}
+
+export function BathroomsIcon({ size = 16, color = colors.white, fillOpacity = 0.4 }: IconProps) {
+  return (
+    <FilledCardIcon path={BATHROOMS_PATH} size={size} color={color} fillOpacity={fillOpacity} />
+  );
+}
+
+export * from "./cottageCardPaths";

package/src/icons/CottageCard/CottageCardIcons.web.tsx

@@ -0,0 +1,105 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import {
+  BATHROOMS_PATH,
+  BEDROOMS_PATH,
+  CARD_LOCATION_BASE_PATH,
+  CARD_LOCATION_DOT_PATH,
+  CARD_LOCATION_PIN_PATH,
+  GUESTS_PATH,
+  RATING_STAR_PATH,
+  SAVE_HEART_PATH,
+} from "./cottageCardPaths";
+
+export function SaveHeartIcon({ size = 16, color = colors.white, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d={SAVE_HEART_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function RatingStarIcon({ size = 12, color = "#E38E5E", strokeWidth = 2 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 12 12" fill="none" aria-hidden>
+      <path
+        d={RATING_STAR_PATH}
+        fill={color}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function CardLocationIcon({
+  size = 13,
+  color = colors.grey0,
+  strokeWidth = 1.5,
+  secondaryColor = colors.grey700,
+}: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 13 13" fill="none" aria-hidden>
+      <path
+        d={CARD_LOCATION_BASE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d={CARD_LOCATION_PIN_PATH}
+        fill={color}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinejoin="round"
+      />
+      <path
+        d={CARD_LOCATION_DOT_PATH}
+        fill={secondaryColor}
+        stroke={secondaryColor}
+        strokeWidth={2}
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function FilledCardIcon({
+  path,
+  size,
+  color,
+  fillOpacity,
+}: Required<Pick<IconProps, "size" | "color" | "fillOpacity">> & { path: string }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path d={path} fill={color} fillOpacity={fillOpacity} />
+    </svg>
+  );
+}
+
+export function GuestsIcon({ size = 16, color = colors.white, fillOpacity = 0.4 }: IconProps) {
+  return <FilledCardIcon path={GUESTS_PATH} size={size} color={color} fillOpacity={fillOpacity} />;
+}
+
+export function BedroomsIcon({ size = 16, color = colors.white, fillOpacity = 0.4 }: IconProps) {
+  return (
+    <FilledCardIcon path={BEDROOMS_PATH} size={size} color={color} fillOpacity={fillOpacity} />
+  );
+}
+
+export function BathroomsIcon({ size = 16, color = colors.white, fillOpacity = 0.4 }: IconProps) {
+  return (
+    <FilledCardIcon path={BATHROOMS_PATH} size={size} color={color} fillOpacity={fillOpacity} />
+  );
+}
+
+export * from "./cottageCardPaths";

package/src/icons/CottageCard/cottageCardPaths.ts

@@ -0,0 +1,23 @@
+export const SAVE_HEART_PATH =
+  "M8 5.12971C6.66667 2.00008 2 2.33341 2 6.33343C2 10.3335 8 13.6669 8 13.6669C8 13.6669 14 10.3335 14 6.33343C14 2.33341 9.33333 2.00008 8 5.12971Z";
+
+export const RATING_STAR_PATH =
+  "M1.16748 5.16814C1.01086 5.0233 1.09593 4.76145 1.30778 4.73633L4.30957 4.38029C4.39591 4.37005 4.47091 4.31583 4.50732 4.23688L5.77344 1.49199C5.86279 1.29827 6.13819 1.29823 6.22754 1.49195L7.49365 4.23682C7.53007 4.31577 7.60458 4.37014 7.69092 4.38038L10.6929 4.73633C10.9047 4.76145 10.9896 5.02338 10.8329 5.16822L8.61388 7.22071C8.55005 7.27974 8.52163 7.36761 8.53857 7.45289L9.1275 10.4177C9.16908 10.627 8.94639 10.7891 8.76024 10.6849L6.12257 9.20806C6.0467 9.16559 5.95453 9.16579 5.87866 9.20826L3.24072 10.6845C3.05457 10.7887 2.83147 10.627 2.87305 10.4177L3.46207 7.45307C3.47902 7.36779 3.45067 7.27972 3.38683 7.22069L1.16748 5.16814Z";
+
+export const CARD_LOCATION_BASE_PATH =
+  "M2.66951 8.87207C1.68929 9.16614 1.08301 9.57239 1.08301 10.0211C1.08301 10.9186 3.50813 11.6461 6.49967 11.6461C9.49122 11.6461 11.9163 10.9186 11.9163 10.0211C11.9163 9.57239 11.3101 9.16614 10.3298 8.87207";
+
+export const CARD_LOCATION_PIN_PATH =
+  "M6.50032 9.47933C6.50032 9.47933 10.0212 7.17833 10.0212 4.51815C10.0212 2.62125 8.44483 1.0835 6.50032 1.0835C4.55582 1.0835 2.97949 2.62125 2.97949 4.51815C2.97949 7.17833 6.50032 9.47933 6.50032 9.47933Z";
+
+export const CARD_LOCATION_DOT_PATH =
+  "M6.49967 5.95833C7.24755 5.95833 7.85384 5.35205 7.85384 4.60417C7.85384 3.85629 7.24755 3.25 6.49967 3.25C5.7518 3.25 5.14551 3.85629 5.14551 4.60417C5.14551 5.35205 5.7518 5.95833 6.49967 5.95833Z";
+
+export const GUESTS_PATH =
+  "M8.20008 8.14683C8.5558 7.83892 8.84111 7.45809 9.03666 7.03018C9.23221 6.60227 9.33342 6.1373 9.33342 5.66683C9.33342 4.78277 8.98223 3.93493 8.3571 3.30981C7.73198 2.68469 6.88414 2.3335 6.00008 2.3335C5.11603 2.3335 4.26818 2.68469 3.64306 3.30981C3.01794 3.93493 2.66675 4.78277 2.66675 5.66683C2.66674 6.1373 2.76795 6.60227 2.9635 7.03018C3.15905 7.45809 3.44436 7.83892 3.80008 8.14683C2.86684 8.56942 2.07506 9.25185 1.5194 10.1125C0.963745 10.9732 0.667729 11.9757 0.666748 13.0002C0.666748 13.177 0.736986 13.3465 0.86201 13.4716C0.987034 13.5966 1.1566 13.6668 1.33341 13.6668C1.51023 13.6668 1.6798 13.5966 1.80482 13.4716C1.92984 13.3465 2.00008 13.177 2.00008 13.0002C2.00008 11.9393 2.42151 10.9219 3.17165 10.1717C3.9218 9.42159 4.93922 9.00016 6.00008 9.00016C7.06095 9.00016 8.07836 9.42159 8.82851 10.1717C9.57865 10.9219 10.0001 11.9393 10.0001 13.0002C10.0001 13.177 10.0703 13.3465 10.1953 13.4716C10.3204 13.5966 10.4899 13.6668 10.6667 13.6668C10.8436 13.6668 11.0131 13.5966 11.1382 13.4716C11.2632 13.3465 11.3334 13.177 11.3334 13.0002C11.3324 11.9757 11.0364 10.9732 10.4808 10.1125C9.92511 9.25185 9.13332 8.56942 8.20008 8.14683ZM6.00008 7.66683C5.60452 7.66683 5.21784 7.54953 4.88894 7.32977C4.56004 7.11001 4.3037 6.79765 4.15232 6.4322C4.00095 6.06674 3.96134 5.66461 4.03851 5.27665C4.11568 4.88869 4.30616 4.53232 4.58587 4.25262C4.86557 3.97291 5.22194 3.78243 5.6099 3.70526C5.99786 3.62809 6.4 3.6677 6.76545 3.81907C7.1309 3.97045 7.44326 4.22679 7.66302 4.55569C7.88278 4.88459 8.00008 5.27127 8.00008 5.66683C8.00008 6.19726 7.78937 6.70597 7.4143 7.08104C7.03922 7.45612 6.53051 7.66683 6.00008 7.66683ZM12.4934 7.88016C12.9201 7.39972 13.1988 6.8062 13.2959 6.17106C13.3931 5.53591 13.3047 4.88621 13.0413 4.30016C12.7778 3.71411 12.3506 3.21669 11.8111 2.86778C11.2715 2.51886 10.6426 2.33332 10.0001 2.3335C9.82327 2.3335 9.6537 2.40373 9.52868 2.52876C9.40365 2.65378 9.33342 2.82335 9.33342 3.00016C9.33342 3.17697 9.40365 3.34654 9.52868 3.47157C9.6537 3.59659 9.82327 3.66683 10.0001 3.66683C10.5305 3.66683 11.0392 3.87754 11.4143 4.25262C11.7894 4.62769 12.0001 5.1364 12.0001 5.66683C11.9991 6.01699 11.9063 6.36076 11.7308 6.66378C11.5553 6.96679 11.3033 7.21842 11.0001 7.3935C10.9012 7.45051 10.8187 7.53194 10.7603 7.62999C10.702 7.72804 10.6697 7.83943 10.6667 7.9535C10.664 8.06667 10.69 8.17869 10.7425 8.279C10.795 8.37931 10.8722 8.4646 10.9667 8.52683L11.2267 8.70016L11.3134 8.74683C12.117 9.12797 12.795 9.73082 13.2674 10.4844C13.7398 11.2379 13.9871 12.1108 13.9801 13.0002C13.9801 13.177 14.0503 13.3465 14.1753 13.4716C14.3004 13.5966 14.4699 13.6668 14.6467 13.6668C14.8236 13.6668 14.9931 13.5966 15.1182 13.4716C15.2432 13.3465 15.3134 13.177 15.3134 13.0002C15.3189 11.9771 15.0626 10.9697 14.5691 10.0735C14.0755 9.17741 13.361 8.42237 12.4934 7.88016Z";
+
+export const BEDROOMS_PATH =
+  "M4.66675 8.33333C5.06231 8.33333 5.44899 8.21604 5.77789 7.99627C6.10679 7.77651 6.36313 7.46415 6.51451 7.0987C6.66588 6.73325 6.70549 6.33111 6.62832 5.94315C6.55115 5.55519 6.36067 5.19882 6.08096 4.91912C5.80126 4.63941 5.44489 4.44893 5.05693 4.37176C4.66897 4.29459 4.26683 4.3342 3.90138 4.48557C3.53593 4.63695 3.22357 4.89329 3.00381 5.22219C2.78405 5.55109 2.66675 5.93777 2.66675 6.33333C2.66675 6.86377 2.87746 7.37247 3.25253 7.74755C3.62761 8.12262 4.13632 8.33333 4.66675 8.33333ZM4.66675 5.66667C4.7986 5.66667 4.9275 5.70577 5.03713 5.77902C5.14676 5.85227 5.23221 5.95639 5.28267 6.07821C5.33313 6.20003 5.34633 6.33407 5.32061 6.46339C5.29488 6.59271 5.23139 6.7115 5.13815 6.80474C5.04492 6.89797 4.92613 6.96147 4.79681 6.98719C4.66749 7.01291 4.53344 6.99971 4.41163 6.94925C4.28981 6.89879 4.18569 6.81335 4.11244 6.70371C4.03918 6.59408 4.00008 6.46519 4.00008 6.33333C4.00008 6.15652 4.07032 5.98695 4.19534 5.86193C4.32037 5.7369 4.48994 5.66667 4.66675 5.66667ZM13.3334 4.33333H8.00008C7.82327 4.33333 7.6537 4.40357 7.52868 4.5286C7.40365 4.65362 7.33342 4.82319 7.33342 5V9H2.00008V3.66667C2.00008 3.48986 1.92984 3.32029 1.80482 3.19526C1.6798 3.07024 1.51023 3 1.33341 3C1.1566 3 0.987034 3.07024 0.86201 3.19526C0.736986 3.32029 0.666748 3.48986 0.666748 3.66667V12.3333C0.666748 12.5101 0.736986 12.6797 0.86201 12.8047C0.987034 12.9298 1.1566 13 1.33341 13C1.51023 13 1.6798 12.9298 1.80482 12.8047C1.92984 12.6797 2.00008 12.5101 2.00008 12.3333V10.3333H14.0001V12.3333C14.0001 12.5101 14.0703 12.6797 14.1953 12.8047C14.3204 12.9298 14.4899 13 14.6667 13C14.8436 13 15.0131 12.9298 15.1382 12.8047C15.2632 12.6797 15.3334 12.5101 15.3334 12.3333V6.33333C15.3334 5.8029 15.1227 5.29419 14.7476 4.91912C14.3726 4.54405 13.8638 4.33333 13.3334 4.33333ZM14.0001 9H8.66675V5.66667H13.3334C13.5102 5.66667 13.6798 5.7369 13.8048 5.86193C13.9298 5.98695 14.0001 6.15652 14.0001 6.33333V9Z";
+
+export const BATHROOMS_PATH =
+  "M14.6667 7.99999H3.33341V4.27343C3.33108 4.03335 3.39444 3.7972 3.51664 3.59053C3.63885 3.38386 3.81525 3.21454 4.02675 3.10091C4.26062 2.97416 4.52713 2.92047 4.79184 2.94677C4.65711 3.35481 4.63797 3.79218 4.73654 4.21043C4.83511 4.62868 5.04755 5.01147 5.35031 5.3164L6.05737 6.02343C6.11926 6.08535 6.19274 6.13447 6.27362 6.16798C6.3545 6.20149 6.44118 6.21874 6.52873 6.21874C6.61627 6.21874 6.70296 6.20149 6.78384 6.16798C6.86471 6.13447 6.93819 6.08535 7.00008 6.02343L9.35686 3.66666C9.41877 3.60477 9.46789 3.53129 9.5014 3.45041C9.53492 3.36954 9.55217 3.28285 9.55217 3.19531C9.55217 3.10776 9.53492 3.02108 9.5014 2.9402C9.46789 2.85932 9.41877 2.78584 9.35686 2.72395L8.64982 2.01692C8.2563 1.62517 7.73578 1.38688 7.18209 1.34501C6.6284 1.30314 6.07796 1.46045 5.63001 1.78857C5.22612 1.63083 4.78981 1.57415 4.35902 1.62346C3.92824 1.67277 3.51602 1.82658 3.15823 2.07151C2.80043 2.31644 2.50789 2.64507 2.30605 3.02883C2.1042 3.41258 1.99917 3.83984 2.00008 4.27343V7.99999H1.33341C1.1566 7.99999 0.987034 8.07023 0.86201 8.19526C0.736986 8.32028 0.666748 8.48985 0.666748 8.66666C0.666748 8.84347 0.736986 9.01304 0.86201 9.13806C0.987034 9.26309 1.1566 9.33333 1.33341 9.33333H2.00008V11.3333C2.00135 11.7456 2.1302 12.1473 2.36893 12.4834C2.60766 12.8195 2.94458 13.0735 3.33341 13.2104V14C3.33341 14.1768 3.40365 14.3464 3.52868 14.4714C3.6537 14.5964 3.82327 14.6667 4.00008 14.6667C4.17689 14.6667 4.34646 14.5964 4.47149 14.4714C4.59651 14.3464 4.66675 14.1768 4.66675 14V13.3333H11.3334V14C11.3334 14.1768 11.4037 14.3464 11.5287 14.4714C11.6537 14.5964 11.8233 14.6667 12.0001 14.6667C12.1769 14.6667 12.3465 14.5964 12.4715 14.4714C12.5965 14.3464 12.6667 14.1768 12.6667 14V13.2105C13.0556 13.0735 13.3925 12.8195 13.6312 12.4834C13.87 12.1473 13.9988 11.7456 14.0001 11.3333V9.33333H14.6667C14.8436 9.33333 15.0131 9.26309 15.1382 9.13806C15.2632 9.01304 15.3334 8.84347 15.3334 8.66666C15.3334 8.48985 15.2632 8.32028 15.1382 8.19526C15.0131 8.07023 14.8436 7.99999 14.6667 7.99999ZM6.29305 2.95963C6.48074 2.77244 6.735 2.66731 7.00008 2.66731C7.26516 2.66731 7.51943 2.77244 7.70711 2.95963L7.94279 3.19531L6.52875 4.60937L6.29307 4.37369C6.10577 4.18606 6.00058 3.93178 6.00058 3.66666C6.00057 3.40155 6.10576 3.14727 6.29305 2.95963ZM12.6667 11.3333C12.6666 11.5101 12.5964 11.6796 12.4714 11.8046C12.3464 11.9296 12.1769 11.9999 12.0001 12H4.00008C3.82331 11.9999 3.65381 11.9296 3.52881 11.8046C3.40381 11.6796 3.33353 11.5101 3.33341 11.3333V9.33333H12.6667V11.3333Z";

package/src/icons/CottageCard/index.ts

@@ -0,0 +1,9 @@
+export {
+  BathroomsIcon,
+  BedroomsIcon,
+  CardLocationIcon,
+  GuestsIcon,
+  RatingStarIcon,
+  SaveHeartIcon,
+} from "./CottageCardIcons";
+export * from "./cottageCardPaths";

package/src/icons/CottageDetail/CottageDetailIcons.tsx

@@ -0,0 +1,106 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import {
+  AREA_EXPAND_PATHS,
+  CHECK_SUCCESS_PATH,
+  CLOCK_FILLED_PATH,
+  COPY_PATH,
+  QR_CODE_PATH,
+  SHARE_PATH,
+  TOOLTIP_ARROW_PATH,
+  WHATSAPP_PATH,
+} from "./cottageDetailPaths";
+
+export function ShareIcon({ size = 20, color = colors.white, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={SHARE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export function AreaExpandIcon({ size = 24, color = colors.white, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      {AREA_EXPAND_PATHS.map((path) => (
+        <Path
+          key={path}
+          d={path}
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      ))}
+    </Svg>
+  );
+}
+
+export function ClockFilledIcon({ size = 16, color = colors.white }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path d={CLOCK_FILLED_PATH} fill={color} />
+    </Svg>
+  );
+}
+
+export function QrCodeIcon({ size = 24, color = colors.primary }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d={QR_CODE_PATH} fill={color} />
+    </Svg>
+  );
+}
+
+export function WhatsAppIcon({ size = 24, color = colors.white }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d={WHATSAPP_PATH} fill={color} />
+    </Svg>
+  );
+}
+
+export function CopyIcon({ size = 20, color = colors.grey200, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={COPY_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export function CheckSuccessIcon({ size = 20, color = colors.green, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={CHECK_SUCCESS_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export function TooltipArrowIcon({ size = 10, color = colors.grey600 }: IconProps) {
+  return (
+    <Svg width={size} height={(size * 8) / 10} viewBox="0 0 10 8" fill="none">
+      <Path d={TOOLTIP_ARROW_PATH} fill={color} />
+    </Svg>
+  );
+}
+
+export * from "./cottageDetailPaths";

package/src/icons/CottageDetail/CottageDetailIcons.web.tsx

@@ -0,0 +1,105 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import {
+  AREA_EXPAND_PATHS,
+  CHECK_SUCCESS_PATH,
+  CLOCK_FILLED_PATH,
+  COPY_PATH,
+  QR_CODE_PATH,
+  SHARE_PATH,
+  TOOLTIP_ARROW_PATH,
+  WHATSAPP_PATH,
+} from "./cottageDetailPaths";
+
+export function ShareIcon({ 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={SHARE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function AreaExpandIcon({ size = 24, color = colors.white, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
+      {AREA_EXPAND_PATHS.map((path) => (
+        <path
+          key={path}
+          d={path}
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      ))}
+    </svg>
+  );
+}
+
+export function ClockFilledIcon({ size = 16, color = colors.white }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path d={CLOCK_FILLED_PATH} fill={color} />
+    </svg>
+  );
+}
+
+export function QrCodeIcon({ size = 24, color = colors.primary }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
+      <path d={QR_CODE_PATH} fill={color} />
+    </svg>
+  );
+}
+
+export function WhatsAppIcon({ size = 24, color = colors.white }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
+      <path d={WHATSAPP_PATH} fill={color} />
+    </svg>
+  );
+}
+
+export function CopyIcon({ size = 20, color = colors.grey200, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 20 20" fill="none" aria-hidden>
+      <path
+        d={COPY_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function CheckSuccessIcon({ size = 20, color = colors.green, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 20 20" fill="none" aria-hidden>
+      <path
+        d={CHECK_SUCCESS_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function TooltipArrowIcon({ size = 10, color = colors.grey600 }: IconProps) {
+  return (
+    <svg width={size} height={(size * 8) / 10} viewBox="0 0 10 8" fill="none" aria-hidden>
+      <path d={TOOLTIP_ARROW_PATH} fill={color} />
+    </svg>
+  );
+}
+
+export * from "./cottageDetailPaths";

package/src/icons/CottageDetail/cottageDetailPaths.ts

@@ -0,0 +1,26 @@
+export const SHARE_PATH =
+  "M7.5 11.25L12.5 13.75M12.5 6.25L7.5 8.75M15 17.5C13.6193 17.5 12.5 16.3807 12.5 15C12.5 13.6193 13.6193 12.5 15 12.5C16.3807 12.5 17.5 13.6193 17.5 15C17.5 16.3807 16.3807 17.5 15 17.5ZM5 12.5C3.61929 12.5 2.5 11.3807 2.5 10C2.5 8.61929 3.61929 7.5 5 7.5C6.38071 7.5 7.5 8.61929 7.5 10C7.5 11.3807 6.38071 12.5 5 12.5ZM15 7.5C13.6193 7.5 12.5 6.38071 12.5 5C12.5 3.61929 13.6193 2.5 15 2.5C16.3807 2.5 17.5 3.61929 17.5 5C17.5 6.38071 16.3807 7.5 15 7.5Z";
+
+export const AREA_EXPAND_PATHS = [
+  "M15 3H21V9",
+  "M9 21H3V15",
+  "M21 3L14 10",
+  "M3 21L10 14",
+] as const;
+
+export const CLOCK_FILLED_PATH =
+  "M8.00017 3.99967C7.91261 3.99965 7.82591 4.01688 7.74502 4.05037C7.66412 4.08387 7.59062 4.13298 7.52871 4.19489C7.4668 4.2568 7.4177 4.3303 7.3842 4.41119C7.3507 4.49209 7.33348 4.57879 7.3335 4.66634V6.84473L6.60173 6.4222C6.44858 6.3339 6.26663 6.31004 6.09589 6.35585C5.92515 6.40166 5.77959 6.51341 5.69121 6.66651C5.60284 6.81962 5.57888 7.00155 5.62461 7.17231C5.67033 7.34308 5.782 7.48869 5.93506 7.57715L7.66683 8.57715C7.76819 8.63566 7.88316 8.66647 8.0002 8.66646C8.11723 8.66646 8.2322 8.63564 8.33355 8.57712C8.4349 8.51859 8.51906 8.43441 8.57756 8.33305C8.63607 8.23169 8.66685 8.11671 8.66683 7.99967V4.66634C8.66686 4.57879 8.64963 4.49209 8.61613 4.41119C8.58264 4.3303 8.53353 4.2568 8.47162 4.19489C8.40971 4.13298 8.33621 4.08387 8.25532 4.05037C8.17442 4.01688 8.08772 3.99965 8.00017 3.99967ZM8.00017 1.33301C6.68162 1.33301 5.39269 1.724 4.29636 2.45654C3.20004 3.18909 2.34555 4.23028 1.84097 5.44845C1.33638 6.66663 1.20436 8.00707 1.4616 9.30028C1.71883 10.5935 2.35377 11.7814 3.28612 12.7137C4.21847 13.6461 5.40636 14.281 6.69956 14.5382C7.99277 14.7955 9.33322 14.6635 10.5514 14.1589C11.7696 13.6543 12.8108 12.7998 13.5433 11.7035C14.2758 10.6071 14.6668 9.31822 14.6668 7.99967C14.6648 6.23218 13.9618 4.53767 12.712 3.28786C11.4622 2.03806 9.76766 1.33503 8.00017 1.33301ZM8.00017 13.333C6.94533 13.333 5.91419 13.0202 5.03712 12.4342C4.16006 11.8481 3.47648 11.0152 3.07281 10.0407C2.66914 9.06611 2.56352 7.99376 2.76931 6.95919C2.9751 5.92463 3.48305 4.97432 4.22893 4.22844C4.97481 3.48256 5.92512 2.97461 6.95968 2.76882C7.99425 2.56303 9.06661 2.66865 10.0411 3.07232C11.0157 3.47598 11.8486 4.15957 12.4347 5.03663C13.0207 5.91369 13.3335 6.94484 13.3335 7.99967C13.3319 9.41366 12.7695 10.7693 11.7696 11.7691C10.7698 12.769 9.41416 13.3314 8.00017 13.333Z";
+
+export const QR_CODE_PATH =
+  "M8 21H4C3.73478 21 3.48043 20.8946 3.29289 20.7071C3.10536 20.5196 3 20.2652 3 20V16C3 15.7348 2.89464 15.4804 2.70711 15.2929C2.51957 15.1054 2.26522 15 2 15C1.73478 15 1.48043 15.1054 1.29289 15.2929C1.10536 15.4804 1 15.7348 1 16V20C1 20.7956 1.31607 21.5587 1.87868 22.1213C2.44129 22.6839 3.20435 23 4 23H8C8.26522 23 8.51957 22.8946 8.70711 22.7071C8.89464 22.5196 9 22.2652 9 22C9 21.7348 8.89464 21.4804 8.70711 21.2929C8.51957 21.1054 8.26522 21 8 21ZM22 15C21.7348 15 21.4804 15.1054 21.2929 15.2929C21.1054 15.4804 21 15.7348 21 16V20C21 20.2652 20.8946 20.5196 20.7071 20.7071C20.5196 20.8946 20.2652 21 20 21H16C15.7348 21 15.4804 21.1054 15.2929 21.2929C15.1054 21.4804 15 21.7348 15 22C15 22.2652 15.1054 22.5196 15.2929 22.7071C15.4804 22.8946 15.7348 23 16 23H20C20.7956 23 21.5587 22.6839 22.1213 22.1213C22.6839 21.5587 23 20.7956 23 20V16C23 15.7348 22.8946 15.4804 22.7071 15.2929C22.5196 15.1054 22.2652 15 22 15ZM20 1H16C15.7348 1 15.4804 1.10536 15.2929 1.29289C15.1054 1.48043 15 1.73478 15 2C15 2.26522 15.1054 2.51957 15.2929 2.70711C15.4804 2.89464 15.7348 3 16 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4V8C21 8.26522 21.1054 8.51957 21.2929 8.70711C21.4804 8.89464 21.7348 9 22 9C22.2652 9 22.5196 8.89464 22.7071 8.70711C22.8946 8.51957 23 8.26522 23 8V4C23 3.20435 22.6839 2.44129 22.1213 1.87868C21.5587 1.31607 20.7956 1 20 1ZM2 9C2.26522 9 2.51957 8.89464 2.70711 8.70711C2.89464 8.51957 3 8.26522 3 8V4C3 3.73478 3.10536 3.48043 3.29289 3.29289C3.48043 3.10536 3.73478 3 4 3H8C8.26522 3 8.51957 2.89464 8.70711 2.70711C8.89464 2.51957 9 2.26522 9 2C9 1.73478 8.89464 1.48043 8.70711 1.29289C8.51957 1.10536 8.26522 1 8 1H4C3.20435 1 2.44129 1.31607 1.87868 1.87868C1.31607 2.44129 1 3.20435 1 4V8C1 8.26522 1.10536 8.51957 1.29289 8.70711C1.48043 8.89464 1.73478 9 2 9ZM10 5H6C5.73478 5 5.48043 5.10536 5.29289 5.29289C5.10536 5.48043 5 5.73478 5 6V10C5 10.2652 5.10536 10.5196 5.29289 10.7071C5.48043 10.8946 5.73478 11 6 11H10C10.2652 11 10.5196 10.8946 10.7071 10.7071C10.8946 10.5196 11 10.2652 11 10V6C11 5.73478 10.8946 5.48043 10.7071 5.29289C10.5196 5.10536 10.2652 5 10 5ZM9 9H7V7H9V9ZM14 11H18C18.2652 11 18.5196 10.8946 18.7071 10.7071C18.8946 10.5196 19 10.2652 19 10V6C19 5.73478 18.8946 5.48043 18.7071 5.29289C18.5196 5.10536 18.2652 5 18 5H14C13.7348 5 13.4804 5.10536 13.2929 5.29289C13.1054 5.48043 13 5.73478 13 6V10C13 10.2652 13.1054 10.5196 13.2929 10.7071C13.4804 10.8946 13.7348 11 14 11ZM15 7H17V9H15V7ZM10 13H6C5.73478 13 5.48043 13.1054 5.29289 13.2929C5.10536 13.4804 5 13.7348 5 14V18C5 18.2652 5.10536 18.5196 5.29289 18.7071C5.48043 18.8946 5.73478 19 6 19H10C10.2652 19 10.5196 18.8946 10.7071 18.7071C10.8946 18.5196 11 18.2652 11 18V14C11 13.7348 10.8946 13.4804 10.7071 13.2929C10.5196 13.1054 10.2652 13 10 13ZM9 17H7V15H9V17ZM14 16C14.2652 16 14.5196 15.8946 14.7071 15.7071C14.8946 15.5196 15 15.2652 15 15C15.2652 15 15.5196 14.8946 15.7071 14.7071C15.8946 14.5196 16 14.2652 16 14C16 13.7348 15.8946 13.4804 15.7071 13.2929C15.5196 13.1054 15.2652 13 15 13H14C13.7348 13 13.4804 13.1054 13.2929 13.2929C13.1054 13.4804 13 13.7348 13 14V15C13 15.2652 13.1054 15.5196 13.2929 15.7071C13.4804 15.8946 13.7348 16 14 16ZM18 13C17.7348 13 17.4804 13.1054 17.2929 13.2929C17.1054 13.4804 17 13.7348 17 14V17C16.7348 17 16.4804 17.1054 16.2929 17.2929C16.1054 17.4804 16 17.7348 16 18C16 18.2652 16.1054 18.5196 16.2929 18.7071C16.4804 18.8946 16.7348 19 17 19H18C18.2652 19 18.5196 18.8946 18.7071 18.7071C18.8946 18.5196 19 18.2652 19 18V14C19 13.7348 18.8946 13.4804 18.7071 13.2929C18.5196 13.1054 18.2652 13 18 13ZM14 17C13.8022 17 13.6089 17.0586 13.4444 17.1685C13.28 17.2784 13.1518 17.4346 13.0761 17.6173C13.0004 17.8 12.9806 18.0011 13.0192 18.1951C13.0578 18.3891 13.153 18.5673 13.2929 18.7071C13.4327 18.847 13.6109 18.9422 13.8049 18.9808C13.9989 19.0194 14.2 18.9996 14.3827 18.9239C14.5654 18.8482 14.7216 18.72 14.8315 18.5556C14.9414 18.3911 15 18.1978 15 18C15 17.7348 14.8946 17.4804 14.7071 17.2929C14.5196 17.1054 14.2652 17 14 17Z";
+
+export const WHATSAPP_PATH =
+  "M16.6 13.9996C16.4 13.8996 15.1 13.2996 14.9 13.1996C14.7 13.0996 14.5 13.0996 14.3 13.2996C14.1 13.4996 13.7 14.0996 13.5 14.2996C13.4 14.4996 13.2 14.4996 13 14.3996C12.3 14.0996 11.6 13.6996 11 13.1996C10.5 12.6996 10 12.0996 9.6 11.4996C9.5 11.2996 9.6 11.0996 9.7 10.9996C9.8 10.8996 9.9 10.6996 10.1 10.5996C10.2 10.4996 10.3 10.2996 10.3 10.1996C10.4 10.0996 10.4 9.89961 10.3 9.79961C10.2 9.69961 9.7 8.49961 9.5 7.99961C9.4 7.29961 9.2 7.29961 9 7.29961C8.9 7.29961 8.7 7.29961 8.5 7.29961C8.3 7.29961 8 7.49961 7.9 7.59961C7.3 8.19961 7 8.89961 7 9.69961C7.1 10.5996 7.4 11.4996 8 12.2996C9.1 13.8996 10.5 15.1996 12.2 15.9996C12.7 16.1996 13.1 16.3996 13.6 16.4996C14.1 16.6996 14.6 16.6996 15.2 16.5996C15.9 16.4996 16.5 15.9996 16.9 15.3996C17.1 14.9996 17.1 14.5996 17 14.1996C17 14.1996 16.8 14.0996 16.6 13.9996ZM19.1 4.89961C15.2 0.999609 8.9 0.999609 5 4.89961C1.8 8.09961 1.2 12.9996 3.4 16.8996L2 21.9996L7.3 20.5996C8.8 21.3996 10.4 21.7996 12 21.7996C17.5 21.7996 21.9 17.3996 21.9 11.8996C22 9.29961 20.9 6.79961 19.1 4.89961ZM16.4 18.8996C15.1 19.6996 13.6 20.1996 12 20.1996C10.5 20.1996 9.1 19.7996 7.8 19.0996L7.5 18.8996L4.4 19.6996L5.2 16.6996L5 16.3996C2.6 12.3996 3.8 7.39961 7.7 4.89961C11.6 2.39961 16.6 3.69961 19 7.49961C21.4 11.3996 20.3 16.4996 16.4 18.8996Z";
+
+export const COPY_PATH =
+  "M6.66699 13.3337V15.667C6.66699 16.6004 6.66699 17.0671 6.84865 17.4236C7.00844 17.7372 7.2634 17.9922 7.57701 18.152C7.93353 18.3337 8.40024 18.3337 9.33366 18.3337H15.667C16.6004 18.3337 17.0671 18.3337 17.4236 18.152C17.7372 17.9922 17.9922 17.7372 18.152 17.4236C18.3337 17.0671 18.3337 16.6004 18.3337 15.667V9.33366C18.3337 8.40024 18.3337 7.93353 18.152 7.57701C17.9922 7.2634 17.7372 7.00844 17.4236 6.84865C17.0671 6.66699 16.6004 6.66699 15.667 6.66699H13.3337M4.33366 13.3337H10.667C11.6004 13.3337 12.0671 13.3337 12.4236 13.152C12.7372 12.9922 12.9922 12.7372 13.152 12.4236C13.3337 12.0671 13.3337 11.6004 13.3337 10.667V4.33366C13.3337 3.40024 13.3337 2.93353 13.152 2.57701C12.9922 2.2634 12.7372 2.00844 12.4236 1.84865C12.0671 1.66699 11.6004 1.66699 10.667 1.66699H4.33366C3.40024 1.66699 2.93353 1.66699 2.57701 1.84865C2.2634 2.00844 2.00844 2.2634 1.84865 2.57701C1.66699 2.93353 1.66699 3.40024 1.66699 4.33366V10.667C1.66699 11.6004 1.66699 12.0671 1.84865 12.4236C2.00844 12.7372 2.2634 12.9922 2.57701 13.152C2.93353 13.3337 3.40024 13.3337 4.33366 13.3337Z";
+
+export const CHECK_SUCCESS_PATH = "M16.6663 5L7.49967 14.1667L3.33301 10";
+
+export const TOOLTIP_ARROW_PATH =
+  "M3.21121 6.42229C3.94826 7.89639 6.05187 7.89639 6.78892 6.42229L10.0001 0H6.2595e-05L3.21121 6.42229Z";

package/src/icons/CottageDetail/index.ts

@@ -0,0 +1,11 @@
+export {
+  AreaExpandIcon,
+  CheckSuccessIcon,
+  ClockFilledIcon,
+  CopyIcon,
+  QrCodeIcon,
+  ShareIcon,
+  TooltipArrowIcon,
+  WhatsAppIcon,
+} from "./CottageDetailIcons";
+export * from "./cottageDetailPaths";

package/src/icons/Filters/FiltersIcon.tsx

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

package/src/icons/Filters/FiltersIcon.web.tsx

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

package/src/icons/Filters/filtersPath.ts

@@ -0,0 +1,2 @@
+/** Filters icon path — 20×20 viewBox. */
+export const FILTERS_PATH = "M5 10H15M2.5 5H17.5M7.5 15H12.5";

package/src/icons/Filters/index.ts

@@ -0,0 +1 @@
+export { FiltersIcon, FILTERS_PATH } from "./FiltersIcon";

package/src/icons/ListView/ListViewIcon.tsx

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