@ecohouse/ui 0.1.31 → 0.1.33

package/src/components/StatusBadge/StatusBadge.tsx

@@ -0,0 +1,108 @@
+import { forwardRef, useMemo, useRef, type ComponentRef } from "react";
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import { colors, fonts } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export type StatusBadgeTone = "active" | "completed" | "cancelled";
+
+export interface StatusBadgeProps extends Omit<ViewProps, "style" | "children"> {
+  label: string;
+  tone?: StatusBadgeTone;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const toneConfig = {
+  active: {
+    backgroundColor: colors.greenMuted,
+    color: colors.green,
+  },
+  completed: {
+    backgroundColor: colors.greyMuted,
+    color: colors.grey0,
+  },
+  cancelled: {
+    backgroundColor: colors.cancelledMuted,
+    color: colors.red,
+  },
+} as const satisfies Record<StatusBadgeTone, { backgroundColor: string; color: string }>;
+
+const webBlurStyle: ViewStyle =
+  Platform.OS === "web"
+    ? ({
+        backdropFilter: "blur(39.5px)",
+        WebkitBackdropFilter: "blur(39.5px)",
+      } as ViewStyle)
+    : {};
+
+/**
+ * Compact status chip (e.g. booking active / completed / cancelled).
+ * Height 28, pill radius, Semibold 12 — distinct from amenity `Badge`.
+ */
+export const StatusBadge = forwardRef<ComponentRef<typeof View>, StatusBadgeProps>(
+  function StatusBadge(
+    { label, tone = "active", style, className, accessibilityLabel, ...rest },
+    forwardedRef,
+  ) {
+    const containerRef = useRef<ComponentRef<typeof View>>(null);
+    const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+    const preset = toneConfig[tone];
+
+    useApplyWebClassName(containerRef, className);
+
+    return (
+      <View
+        {...rest}
+        ref={setContainerRef}
+        accessibilityRole="text"
+        accessibilityLabel={accessibilityLabel ?? label}
+        style={[styles.base, { backgroundColor: preset.backgroundColor }, webBlurStyle, style]}
+      >
+        <Text
+          style={[
+            styles.label,
+            { color: preset.color },
+            Platform.OS === "android" ? styles.labelAndroid : null,
+          ]}
+        >
+          {label}
+        </Text>
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  base: {
+    height: 28,
+    minHeight: 28,
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    justifyContent: "center",
+    gap: 6,
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    borderRadius: 50,
+    overflow: "hidden",
+  },
+  label: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "600",
+    lineHeight: 12,
+    letterSpacing: 0,
+  },
+  labelAndroid: {
+    includeFontPadding: false,
+  },
+});

package/src/components/StatusBadge/index.ts

@@ -0,0 +1,2 @@
+export { StatusBadge } from "./StatusBadge";
+export type { StatusBadgeProps, StatusBadgeTone } from "./StatusBadge";

package/src/components/StepList/StepList.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { StyleSheet, View } from "react-native";
+import { StepList } from "./StepList";
+
+const meta = {
+  title: "Components/StepList",
+  component: StepList,
+  args: {
+    steps: [
+      "Ստացեք ակտիվ QR կոդը մուտքի օրը՝ ժամը 10:00-ին, այս էջի «Թվային բանալի» բաժնում։",
+      "Մոտեցեք քոթեջի մուտքի դռան սարքին (սկաներին) և պահեք հեռախոսի էկրանը։",
+      "Հաջող սկանավորումից հետո դուռը ավտոմատ կապակողպվի։",
+    ],
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof StepList>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <View style={styles.frame}>
+      <StepList {...args} />
+    </View>
+  ),
+};
+
+const styles = StyleSheet.create({
+  frame: {
+    padding: 24,
+    maxWidth: 560,
+    backgroundColor: "#090909",
+  },
+});

package/src/components/StepList/StepList.tsx

@@ -0,0 +1,152 @@
+import { forwardRef, useMemo, useRef, type ComponentRef } from "react";
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import { colors, fonts } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface StepListProps extends Omit<ViewProps, "style" | "children"> {
+  /** Step descriptions, numbered automatically from 1. */
+  steps: string[];
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const BADGE_SIZE = 42;
+const ROW_GAP = 12;
+const CONNECTOR_WIDTH = 2;
+const CONNECTOR_HEIGHT = 19;
+const CONNECTOR_GAP = 8;
+
+const webBlurStyle: ViewStyle =
+  Platform.OS === "web"
+    ? ({
+        backdropFilter: "blur(20px)",
+        WebkitBackdropFilter: "blur(20px)",
+      } as ViewStyle)
+    : {};
+
+/**
+ * Vertical numbered process list — 42px badges, 2×19 connectors with 8px gaps.
+ */
+export const StepList = forwardRef<ComponentRef<typeof View>, StepListProps>(function StepList(
+  { steps, style, className, accessibilityLabel, ...rest },
+  forwardedRef,
+) {
+  const containerRef = useRef<ComponentRef<typeof View>>(null);
+  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+
+  useApplyWebClassName(containerRef, className);
+
+  if (steps.length === 0) {
+    return null;
+  }
+
+  return (
+    <View
+      {...rest}
+      ref={setContainerRef}
+      accessibilityRole="summary"
+      accessibilityLabel={accessibilityLabel}
+      style={[styles.root, style]}
+    >
+      {steps.map((description, index) => {
+        const isLast = index === steps.length - 1;
+        const number = index + 1;
+
+        return (
+          <View key={`${number}-${description}`} style={styles.stepBlock}>
+            <View style={styles.row}>
+              <View style={[styles.badge, webBlurStyle]}>
+                <Text
+                  style={[
+                    styles.badgeLabel,
+                    Platform.OS === "android" ? styles.labelAndroid : null,
+                  ]}
+                >
+                  {String(number)}
+                </Text>
+              </View>
+              <Text
+                style={[styles.description, Platform.OS === "android" ? styles.labelAndroid : null]}
+              >
+                {description}
+              </Text>
+            </View>
+
+            {!isLast ? (
+              <View style={styles.connectorSlot}>
+                <View style={styles.connector} />
+              </View>
+            ) : null}
+          </View>
+        );
+      })}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  root: {
+    width: "100%",
+  },
+  stepBlock: {
+    width: "100%",
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: ROW_GAP,
+    width: "100%",
+  },
+  badge: {
+    width: BADGE_SIZE,
+    height: BADGE_SIZE,
+    borderRadius: 79,
+    backgroundColor: colors.grey600,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    overflow: "hidden",
+  },
+  badgeLabel: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "500",
+    lineHeight: 14,
+    letterSpacing: 0,
+    color: colors.white,
+    textAlign: "center",
+  },
+  description: {
+    flex: 1,
+    minWidth: 0,
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "400",
+    lineHeight: 14,
+    letterSpacing: 0,
+    color: colors.white,
+  },
+  connectorSlot: {
+    width: BADGE_SIZE,
+    alignItems: "center",
+    paddingVertical: CONNECTOR_GAP,
+  },
+  connector: {
+    width: CONNECTOR_WIDTH,
+    height: CONNECTOR_HEIGHT,
+    borderRadius: 98,
+    backgroundColor: colors.grey600,
+  },
+  labelAndroid: {
+    includeFontPadding: false,
+  },
+});

package/src/components/StepList/index.ts

@@ -0,0 +1,2 @@
+export { StepList } from "./StepList";
+export type { StepListProps } from "./StepList";

package/src/components/StepPager/StepPager.tsx

@@ -0,0 +1,150 @@
+import { forwardRef, useMemo, useRef, type ComponentRef } from "react";
+import {
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import { ChevronLeftIcon } from "../../icons";
+import { colors, fonts } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface StepPagerProps extends Omit<ViewProps, "style" | "children"> {
+  /** Zero-based active step index. */
+  index: number;
+  /** Total number of steps. */
+  count: number;
+  onPrevious?: () => void;
+  onNext?: () => void;
+  previousAccessibilityLabel?: string;
+  nextAccessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const WIDTH = 121;
+const HEIGHT = 48;
+const ICON_SIZE = 24;
+
+/**
+ * Compact prev / current-of-total / next control (e.g. camera fullscreen pager).
+ * Fixed 121×48 pill, 12 gap/padding, 77 radius.
+ */
+export const StepPager = forwardRef<ComponentRef<typeof View>, StepPagerProps>(function StepPager(
+  {
+    index,
+    count,
+    onPrevious,
+    onNext,
+    previousAccessibilityLabel = "Previous",
+    nextAccessibilityLabel = "Next",
+    style,
+    className,
+    accessibilityLabel,
+    ...rest
+  },
+  forwardedRef,
+) {
+  const containerRef = useRef<ComponentRef<typeof View>>(null);
+  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+  const safeCount = Math.max(0, count);
+  const safeIndex = safeCount === 0 ? 0 : Math.min(Math.max(index, 0), safeCount - 1);
+  const label = safeCount === 0 ? "0/0" : `${safeIndex + 1}/${safeCount}`;
+  const atStart = safeIndex <= 0;
+  const atEnd = safeIndex >= safeCount - 1;
+
+  useApplyWebClassName(containerRef, className);
+
+  return (
+    <View
+      {...rest}
+      ref={setContainerRef}
+      accessibilityRole="adjustable"
+      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityValue={{
+        min: safeCount === 0 ? 0 : 1,
+        max: safeCount,
+        now: safeCount === 0 ? 0 : safeIndex + 1,
+        text: label,
+      }}
+      style={[styles.root, webBlurStyle, style]}
+    >
+      <Pressable
+        onPress={onPrevious}
+        disabled={atStart || !onPrevious}
+        hitSlop={4}
+        accessibilityRole="button"
+        accessibilityLabel={previousAccessibilityLabel}
+        accessibilityState={{ disabled: atStart || !onPrevious }}
+        style={[styles.navButton, (atStart || !onPrevious) && styles.navDisabled]}
+      >
+        <ChevronLeftIcon size={ICON_SIZE} color={colors.white} strokeWidth={2} />
+      </Pressable>
+
+      <Text style={styles.label}>{label}</Text>
+
+      <Pressable
+        onPress={onNext}
+        disabled={atEnd || !onNext}
+        hitSlop={4}
+        accessibilityRole="button"
+        accessibilityLabel={nextAccessibilityLabel}
+        accessibilityState={{ disabled: atEnd || !onNext }}
+        style={[styles.navButton, (atEnd || !onNext) && styles.navDisabled]}
+      >
+        <View style={styles.chevronRight}>
+          <ChevronLeftIcon size={ICON_SIZE} color={colors.white} strokeWidth={2} />
+        </View>
+      </Pressable>
+    </View>
+  );
+});
+
+const webBlurStyle: ViewStyle =
+  Platform.OS === "web"
+    ? ({
+        backdropFilter: "blur(50px)",
+        WebkitBackdropFilter: "blur(50px)",
+      } as ViewStyle)
+    : {};
+
+const styles = StyleSheet.create({
+  root: {
+    width: WIDTH,
+    height: HEIGHT,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 12,
+    padding: 12,
+    borderRadius: 77,
+    backgroundColor: colors.whiteAlpha6,
+    overflow: "hidden",
+  },
+  navButton: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  navDisabled: {
+    opacity: 0.35,
+  },
+  chevronRight: {
+    transform: [{ scaleX: -1 }],
+  },
+  label: {
+    fontFamily: fonts.sans,
+    fontSize: 16,
+    fontWeight: "700",
+    lineHeight: 16,
+    letterSpacing: 0,
+    color: colors.white,
+    textAlign: "center",
+  },
+});

package/src/components/StepPager/index.ts

@@ -0,0 +1,2 @@
+export { StepPager } from "./StepPager";
+export type { StepPagerProps } from "./StepPager";

package/src/components/index.ts

@@ -4,9 +4,27 @@ export type { AvatarProps, AvatarMenuItem } from "./Avatar";
 export { AvatarSimple } from "./AvatarSimple";
 export type { AvatarSimpleProps } from "./AvatarSimple";
 
+export { AccountHeader } from "./AccountHeader";
+export type { AccountHeaderProps } from "./AccountHeader";
+
 export { Badge } from "./Badge";
 export type { BadgeProps, BadgeVariant } from "./Badge";
 
+export { StatusBadge } from "./StatusBadge";
+export type { StatusBadgeProps, StatusBadgeTone } from "./StatusBadge";
+
+export { PaginationDots } from "./PaginationDots";
+export type { PaginationDotsProps } from "./PaginationDots";
+
+export { StepPager } from "./StepPager";
+export type { StepPagerProps } from "./StepPager";
+
+export { InfoTile } from "./InfoTile";
+export type { InfoTileProps } from "./InfoTile";
+
+export { StepList } from "./StepList";
+export type { StepListProps } from "./StepList";
+
 export { Counter } from "./Counter";
 export type { CounterProps } from "./Counter";
 
@@ -37,6 +55,9 @@ export type {
   DateRange,
 } from "./DatePicker";
 
+export { FloatingActionButton } from "./FloatingActionButton";
+export type { FloatingActionButtonProps } from "./FloatingActionButton";
+
 export { Input } from "./Input";
 export type { InputIcon, InputProps, InputSize } from "./Input";
 

package/src/icons/AlertTriangle/AlertTriangleIcon.tsx

@@ -0,0 +1,19 @@
+import Svg, { Path } from "react-native-svg";
+import type { IconProps } from "../types";
+import { ALERT_TRIANGLE_PATH } from "./alertTrianglePath";
+
+export function AlertTriangleIcon({ size = 16, color = "#E38E5E", strokeWidth = 1.5 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
+        d={ALERT_TRIANGLE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export { ALERT_TRIANGLE_PATH } from "./alertTrianglePath";

package/src/icons/AlertTriangle/AlertTriangleIcon.web.tsx

@@ -0,0 +1,18 @@
+import type { IconProps } from "../types";
+import { ALERT_TRIANGLE_PATH } from "./alertTrianglePath";
+
+export function AlertTriangleIcon({ size = 16, color = "#E38E5E", strokeWidth = 1.5 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d={ALERT_TRIANGLE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { ALERT_TRIANGLE_PATH } from "./alertTrianglePath";

package/src/icons/AlertTriangle/alertTrianglePath.ts

@@ -0,0 +1,3 @@
+/** Alert triangle — viewBox 0 0 16 16. */
+export const ALERT_TRIANGLE_PATH =
+  "M8.00049 6.00015V8.66682M8.00049 11.3335H8.00715M7.07737 2.59464L1.59411 12.0657C1.28997 12.591 1.1379 12.8537 1.16038 13.0693C1.17998 13.2573 1.2785 13.4282 1.4314 13.5394C1.60671 13.6668 1.91022 13.6668 2.51723 13.6668H13.4837C14.0908 13.6668 14.3943 13.6668 14.5696 13.5394C14.7225 13.4282 14.821 13.2573 14.8406 13.0693C14.8631 12.8537 14.711 12.591 14.4069 12.0657L8.92361 2.59463C8.62056 2.07119 8.46904 1.80947 8.27135 1.72157C8.09892 1.64489 7.90206 1.64489 7.72962 1.72157C7.53194 1.80947 7.38041 2.07119 7.07737 2.59464Z";

package/src/icons/AlertTriangle/index.ts

@@ -0,0 +1 @@
+export { AlertTriangleIcon, ALERT_TRIANGLE_PATH } from "./AlertTriangleIcon";

package/src/icons/Ban/BanIcon.tsx

@@ -0,0 +1,15 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { BAN_PATH } from "./banPath";
+
+export { BAN_PATH } from "./banPath";
+
+/** Filled prohibition / deactivated mark (28×28 viewBox). */
+export function BanIcon({ size = 28, color = colors.primary }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 28 28" fill="none">
+      <Path d={BAN_PATH} fill={color} />
+    </Svg>
+  );
+}

package/src/icons/Ban/banPath.ts

@@ -0,0 +1,2 @@
+export const BAN_PATH =
+  "M14.0007 2.33301C11.6932 2.33301 9.43758 3.01725 7.519 4.2992C5.60043 5.58115 4.10508 7.40323 3.22206 9.53503C2.33904 11.6668 2.108 14.0126 2.55816 16.2757C3.00832 18.5388 4.11946 20.6176 5.75108 22.2493C7.38269 23.8809 9.46149 24.992 11.7246 25.4422C13.9877 25.8923 16.3335 25.6613 18.4653 24.7783C20.5971 23.8952 22.4192 22.3999 23.7011 20.4813C24.9831 18.5628 25.6673 16.3071 25.6673 13.9997C25.6673 12.4676 25.3656 10.9505 24.7793 9.53503C24.1929 8.11957 23.3336 6.83345 22.2502 5.7501C21.1669 4.66675 19.8808 3.80738 18.4653 3.22108C17.0498 2.63478 15.5327 2.33301 14.0007 2.33301ZM14.0007 23.333C11.5253 23.333 9.15133 22.3497 7.40099 20.5993C5.65065 18.849 4.66732 16.475 4.66732 13.9997C4.66475 11.9269 5.35917 9.91348 6.63899 8.28301L19.7173 21.3613C18.0869 22.6412 16.0734 23.3356 14.0007 23.333ZM21.3623 19.7163L8.28399 6.63801C9.91446 5.35819 11.9279 4.66376 14.0007 4.66634C16.476 4.66634 18.85 5.64967 20.6003 7.40001C22.3507 9.15035 23.334 11.5243 23.334 13.9997C23.3366 16.0724 22.6421 18.0859 21.3623 19.7163Z";

package/src/icons/Ban/index.ts

@@ -0,0 +1 @@
+export { BanIcon, BAN_PATH } from "./BanIcon";

package/src/icons/Bell/BellIcon.tsx

@@ -5,9 +5,9 @@ import type { IconProps } from "../types";
 
 export { BELL_PATH } from "./bellPath";
 
-export function BellIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+export function BellIcon({ size = 16, color = colors.white, strokeWidth = 1.5 }: IconProps) {
   return (
-    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
       <Path
         d={BELL_PATH}
         stroke={color}

package/src/icons/Bell/BellIcon.web.tsx

@@ -2,12 +2,12 @@ import { BELL_PATH } from "./bellPath";
 import { colors } from "../../theme";
 import type { IconProps } from "../types";
 
-export function BellIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+export function BellIcon({ size = 16, color = colors.white, strokeWidth = 1.5 }: IconProps) {
   return (
     <svg
       width={size}
       height={size}
-      viewBox="0 0 20 20"
+      viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       aria-hidden

package/src/icons/Bell/bellPath.ts

@@ -1,2 +1,2 @@
 export const BELL_PATH =
-  "M7.5 17.5H12.5M10 2.5C7.23858 2.5 5 4.73858 5 7.5C5 8.51208 5.3007 9.45393 5.81764 10.2411C6.61256 11.4515 7.00967 12.0564 7.06127 12.1467C7.52024 12.9508 7.43573 12.6672 7.49349 13.5913C7.49998 13.6952 7.5 13.8524 7.5 14.1667C7.5 14.6269 7.8731 15 8.33333 15L11.6667 15C12.1269 15 12.5 14.6269 12.5 14.1667C12.5 13.8524 12.5 13.6952 12.5065 13.5913C12.5643 12.6672 12.4793 12.9509 12.9382 12.1467C12.9898 12.0564 13.3876 11.4515 14.1825 10.2411C14.6995 9.45393 15.0002 8.51208 15.0002 7.5C15.0002 4.73858 12.7614 2.5 10 2.5Z";
+  "M6.23597 14C6.70606 14.4149 7.32355 14.6667 7.99985 14.6667C8.67615 14.6667 9.29364 14.4149 9.76373 14M11.9998 5.33337C11.9998 4.27251 11.5784 3.25509 10.8283 2.50495C10.0781 1.7548 9.06072 1.33337 7.99985 1.33337C6.93898 1.33337 5.92157 1.7548 5.17142 2.50495C4.42128 3.25509 3.99985 4.27251 3.99985 5.33337C3.99985 7.3935 3.48016 8.80401 2.89963 9.73698C2.40993 10.524 2.16509 10.9174 2.17407 11.0272C2.18401 11.1488 2.20976 11.1951 2.3077 11.2678C2.39616 11.3334 2.79491 11.3334 3.59242 11.3334H12.4073C13.2048 11.3334 13.6035 11.3334 13.692 11.2678C13.7899 11.1951 13.8157 11.1488 13.8256 11.0272C13.8346 10.9174 13.5898 10.524 13.1001 9.73698C12.5195 8.80401 11.9998 7.3935 11.9998 5.33337Z";

package/src/icons/CottageDetail/CottageDetailIcons.tsx

@@ -6,6 +6,7 @@ import {
   CHECK_SUCCESS_PATH,
   CLOCK_FILLED_PATH,
   COPY_PATH,
+  DOWNLOAD_PATH,
   QR_CODE_PATH,
   SHARE_PATH,
   TOOLTIP_ARROW_PATH,
@@ -26,6 +27,20 @@ export function ShareIcon({ size = 20, color = colors.white, strokeWidth = 2 }:
   );
 }
 
+export function DownloadIcon({ size = 24, color = colors.white, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        d={DOWNLOAD_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">

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

@@ -5,6 +5,7 @@ import {
   CHECK_SUCCESS_PATH,
   CLOCK_FILLED_PATH,
   COPY_PATH,
+  DOWNLOAD_PATH,
   QR_CODE_PATH,
   SHARE_PATH,
   TOOLTIP_ARROW_PATH,
@@ -25,6 +26,20 @@ export function ShareIcon({ size = 20, color = colors.white, strokeWidth = 2 }:
   );
 }
 
+export function DownloadIcon({ size = 24, color = colors.white, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
+      <path
+        d={DOWNLOAD_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>

package/src/icons/CottageDetail/cottageDetailPaths.ts

@@ -1,6 +1,9 @@
 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";
 
+/** Download — viewBox 0 0 24 24. */
+export const DOWNLOAD_PATH = "M21 21H3M6 11L12 17L18 11M12 17V3";
+
 export const AREA_EXPAND_PATHS = [
   "M15 3H21V9",
   "M9 21H3V15",