@ecohouse/ui 0.1.43 → 0.1.45

package/package.json

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

package/src/components/Button/Button.stories.tsx

@@ -10,6 +10,7 @@ const meta = {
     title: "Button",
     onPress: fn(),
     disabled: false,
+    loading: false,
     variant: "primary",
     size: "lg",
     showIcon: true,
@@ -105,6 +106,10 @@ export const Disabled: Story = {
   args: { disabled: true },
 };
 
+export const Loading: Story = {
+  args: { loading: true },
+};
+
 const storyStyles = StyleSheet.create({
   column: {
     gap: 12,

package/src/components/Button/Button.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, useMemo, useRef, type ComponentRef, type ReactNode } from "react";
 import {
+  ActivityIndicator,
   Platform,
   StyleSheet,
   Text,
@@ -27,6 +28,8 @@ export interface ButtonProps extends Omit<
   children?: ReactNode;
   onPress: (event: GestureResponderEvent) => void;
   disabled?: boolean;
+  /** Replaces the visible content with a centered spinner and prevents interaction. */
+  loading?: boolean;
   variant?: ButtonVariant;
   size?: ButtonSize;
   showIcon?: boolean;
@@ -123,6 +126,7 @@ export const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonPr
       children,
       onPress,
       disabled = false,
+      loading = false,
       variant = "primary",
       size = "lg",
       showIcon = false,
@@ -146,6 +150,7 @@ export const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonPr
     const hasCustomChildren = typeof children !== "undefined";
     const customIcon = icon != null && typeof icon !== "boolean" ? icon : undefined;
     const hasIcon = showIcon || icon === true || customIcon != null;
+    const interactionDisabled = disabled || loading;
     const resolvedContainerClassName = className?.trim() || undefined;
     const resolvedAccessibilityLabel =
       accessibilityLabel ?? (typeof label === "string" ? label : undefined);
@@ -173,7 +178,7 @@ export const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonPr
         gap: hasIcon ? metrics.gap : 0,
       },
       hasIcon ? styles.contentWithIcon : styles.contentWithoutIcon,
-      disabled && styles.disabled,
+      disabled && !loading && styles.disabled,
       style,
     ];
 
@@ -192,16 +197,20 @@ export const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonPr
         ref={setContainerRef}
         style={containerStyle}
         onPress={onPress}
-        disabled={disabled}
+        disabled={interactionDisabled}
         activeOpacity={0.7}
         accessibilityRole="button"
         accessibilityLabel={resolvedAccessibilityLabel}
-        accessibilityState={{ disabled }}
+        accessibilityState={{ busy: loading, disabled: interactionDisabled }}
       >
         {hasCustomChildren ? (
-          children
+          loading ? (
+            <View style={styles.loadingContent}>{children}</View>
+          ) : (
+            children
+          )
         ) : (
-          <Text ref={textRef} style={labelStyle}>
+          <Text ref={textRef} style={[labelStyle, loading && styles.loadingContent]}>
             {label}
           </Text>
         )}
@@ -216,11 +225,18 @@ export const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonPr
                 borderRadius: metrics.iconContainerSize / 2,
                 backgroundColor: iconBadgeBackgroundColor ?? preset.iconBadgeBackgroundColor,
               },
+              loading && styles.loadingContent,
             ]}
           >
             {iconNode}
           </View>
         ) : null}
+
+        {loading ? (
+          <View pointerEvents="none" style={styles.loadingIndicator}>
+            <ActivityIndicator color={preset.textColor} size="small" />
+          </View>
+        ) : null}
       </TouchableOpacity>
     );
   },
@@ -232,6 +248,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     alignSelf: "flex-start",
     borderWidth: 0,
+    position: "relative",
   },
   disabled: {
     opacity: 0.6,
@@ -254,4 +271,16 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     flexShrink: 0,
   },
+  loadingContent: {
+    opacity: 0,
+  },
+  loadingIndicator: {
+    alignItems: "center",
+    bottom: 0,
+    justifyContent: "center",
+    left: 0,
+    position: "absolute",
+    right: 0,
+    top: 0,
+  },
 });

package/src/components/Input/Input.tsx

@@ -168,6 +168,8 @@ export const Input = forwardRef<ComponentRef<typeof TextInput>, InputProps>(func
     showRightIcon = false,
     onRightIconPress,
     rightIconAccessibilityLabel,
+    autoComplete = "off",
+    importantForAutofill,
     style,
     fieldStyle,
     inputStyle,
@@ -194,6 +196,8 @@ export const Input = forwardRef<ComponentRef<typeof TextInput>, InputProps>(func
   const visualState = resolveVisualState({ disabled, error, focused, hasValue });
   const chrome = chromeFor(visualState);
   const resolvedAccessibilityLabel = accessibilityLabel ?? (showLabel ? undefined : label);
+  const resolvedImportantForAutofill =
+    importantForAutofill ?? (autoComplete === "off" ? "no" : "auto");
 
   const hasLeftIcon = showLeftIcon || leftIcon != null;
   const hasRightIcon = showRightIcon || rightIcon != null;
@@ -256,6 +260,8 @@ export const Input = forwardRef<ComponentRef<typeof TextInput>, InputProps>(func
           ref={setInputRef}
           {...textInputProps}
           nativeID={inputDomId}
+          autoComplete={autoComplete}
+          importantForAutofill={resolvedImportantForAutofill}
           value={isControlled ? value : undefined}
           defaultValue={isControlled ? undefined : defaultValue}
           editable={!disabled}

package/src/components/LanguageSwitcher/LanguageSwitcher.tsx

@@ -58,7 +58,7 @@ export const defaultLanguageOptions = [
   { value: "ru", label: "Рус" },
 ] as const satisfies readonly LanguageOption[];
 
-const CONTROL_WIDTH = 90;
+const CONTROL_WIDTH = 96;
 const CONTROL_HEIGHT = 35;
 const ICON_SIZE = 16;
 const ICON_BUTTON_SIZE = 32;

package/src/components/SegmentedToggle/SegmentedToggle.tsx

@@ -90,6 +90,7 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
     const resolvedClassName = className?.trim() || undefined;
     const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
     const progress = useRef(new Animated.Value(selectedIndex)).current;
+    const hasMounted = useRef(false);
     const [contentWidths, setContentWidths] = useState<number[]>(() =>
       Array.from({ length: optionCount }, () => 0),
     );
@@ -128,6 +129,12 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
     }, [optionCount]);
 
     useEffect(() => {
+      if (!hasMounted.current) {
+        hasMounted.current = true;
+        progress.setValue(selectedIndex);
+        return;
+      }
+
       const animation = Animated.timing(progress, {
         toValue: selectedIndex,
         duration: ANIMATION_DURATION,
@@ -202,7 +209,7 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
         {options.map(({ value: optionValue, label, icon: Icon, showLabel = true }, index) => {
           const selected = optionValue === selectedValue;
           const iconColor = selected ? colors.primary : colors.whiteAlpha20;
-          const labelColor = selected ? colors.whiteAlpha86 : colors.whiteAlpha40;
+          const labelColor = selected ? colors.white : colors.grey150;
           const optionWidth = optionWidths[index] ?? 0;
 
           return (
@@ -219,6 +226,7 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
                 fullWidth
                   ? styles.optionFullWidth
                   : [styles.optionContentWidth, optionWidth > 0 && { width: optionWidth }],
+                selected && selectedOptionWidth === 0 && styles.initialSelectedOption,
               ]}
             >
               <View style={styles.optionContent}>
@@ -228,6 +236,7 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
                     numberOfLines={fullWidth ? 1 : undefined}
                     style={[
                       styles.label,
+                      selected ? styles.selectedLabel : styles.inactiveLabel,
                       !fullWidth && styles.contentWidthLabel,
                       { color: labelColor },
                     ]}
@@ -292,6 +301,9 @@ const styles = StyleSheet.create({
   optionContentWidth: {
     minWidth: OPTION_MIN_WIDTH,
   },
+  initialSelectedOption: {
+    backgroundColor: colors.grey600,
+  },
   activeIndicator: {
     position: "absolute",
     top: TRACK_PADDING,
@@ -304,6 +316,14 @@ const styles = StyleSheet.create({
     ...segmentedToggleTypography,
     flexShrink: 1,
   },
+  selectedLabel: {
+    fontWeight: "600",
+    letterSpacing: 0.36,
+  },
+  inactiveLabel: {
+    fontWeight: "400",
+    letterSpacing: 0.36,
+  },
   contentWidthLabel: {
     flexShrink: 0,
   },

package/src/components/Select/Select.tsx

@@ -347,15 +347,24 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
       return null;
     }, [menuStyle]);
 
+    const resolvedOptionListMaxHeight = useMemo(() => {
+      const flat = StyleSheet.flatten(menuStyle);
+      const menuMaxHeight = flat?.maxHeight;
+      if (typeof menuMaxHeight !== "number") return MENU_MAX_LIST_HEIGHT;
+
+      const menuChromeHeight = 24 + (showSearch ? 48 : 0);
+      return Math.max(43, menuMaxHeight - menuChromeHeight);
+    }, [menuStyle, showSearch]);
+
     const estimatedMenuHeight = useMemo(() => {
       const searchBlock = showSearch ? 40 + 8 : 0;
       const optionCount = Math.max(filteredOptions.length, 1);
       const listHeight = Math.min(
         optionCount * 43 + Math.max(0, optionCount - 1) * 8,
-        MENU_MAX_LIST_HEIGHT,
+        resolvedOptionListMaxHeight,
       );
       return 24 + searchBlock + listHeight;
-    }, [filteredOptions.length, showSearch]);
+    }, [filteredOptions.length, resolvedOptionListMaxHeight, showSearch]);
 
     const setOpen = useCallback(
       (next: boolean) => {
@@ -675,7 +684,7 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
               ) : null}
 
               <ScrollView
-                style={styles.optionList}
+                style={[styles.optionList, { maxHeight: resolvedOptionListMaxHeight }]}
                 contentContainerStyle={styles.optionListContent}
                 keyboardShouldPersistTaps="handled"
                 showsVerticalScrollIndicator={false}

package/src/icons/Amenity/amenityPaths.ts

@@ -1,3 +1,5 @@
+import { WASHER_PATHS } from "../Washer/washerPaths";
+
 export const amenityNames = [
   "kitchen",
   "wifi",
@@ -46,16 +48,7 @@ export const AMENITY_PATHS: Record<AmenityName, readonly AmenityPathDefinition[]
       strokeWidth: 2,
     },
   ],
-  washer: [
-    {
-      d: "M15.833 1.66699H4.16634C3.7061 1.66699 3.33301 2.04009 3.33301 2.50033V17.5003C3.33301 17.9606 3.7061 18.3337 4.16634 18.3337H15.833C16.2932 18.3337 16.6663 17.9606 16.6663 17.5003V2.50033C16.6663 2.04009 16.2932 1.66699 15.833 1.66699ZM3.33301 5.00033C3.33301 5.46058 3.7061 5.83366 4.16634 5.83366H15.833C16.2933 5.83366 16.6663 5.46058 16.6663 5.00033V2.50033C16.6663 2.04009 16.2933 1.66699 15.833 1.66699H4.16634C3.7061 1.66699 3.33301 2.04009 3.33301 2.50033V5.00033ZM9.99967 15.0003C11.6105 15.0003 12.9163 13.6945 12.9163 12.0837C12.9163 10.4728 11.6105 9.16699 9.99967 9.16699C8.38884 9.16699 7.08301 10.4728 7.08301 12.0837C7.08301 13.6945 8.38884 15.0003 9.99967 15.0003Z",
-      strokeWidth: 1.5,
-    },
-    {
-      d: "M5.83333 4.58317C6.29357 4.58317 6.66667 4.21007 6.66667 3.74984C6.66667 3.2896 6.29357 2.9165 5.83333 2.9165C5.3731 2.9165 5 3.2896 5 3.74984C5 4.21007 5.3731 4.58317 5.83333 4.58317ZM8.33333 4.58317C8.79357 4.58317 9.16667 4.21007 9.16667 3.74984C9.16667 3.2896 8.79357 2.9165 8.33333 2.9165C7.8731 2.9165 7.5 3.2896 7.5 3.74984C7.5 4.21007 7.8731 4.58317 8.33333 4.58317Z",
-      fill: true,
-    },
-  ],
+  washer: WASHER_PATHS,
   ac: [
     {
       d: "M17.5003 3.33301H2.50033C2.04009 3.33301 1.66699 3.7061 1.66699 4.16634V10.833C1.66699 11.2932 2.04009 11.6663 2.50033 11.6663H17.5003C17.9606 11.6663 18.3337 11.2932 18.3337 10.833V4.16634C18.3337 3.7061 17.9606 3.33301 17.5003 3.33301ZM15 8.3335H5V11.6668H15V8.3335ZM13.333 5.83301H14.9997M10 14.1665V16.6665M6.66699 15V15.8333M13.333 15V15.8333",

package/src/icons/Dram/DramIcon.tsx

@@ -0,0 +1,14 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { DRAM_PATH } from "./dramPath";
+
+export function DramIcon({ size = 12, color = colors.grey0 }: IconProps) {
+  return (
+    <Svg width={(size * 11) / 12} height={size} viewBox="0 0 11 12" fill="none">
+      <Path d={DRAM_PATH} fill={color} />
+    </Svg>
+  );
+}
+
+export { DRAM_PATH } from "./dramPath";

package/src/icons/Dram/DramIcon.web.tsx

@@ -0,0 +1,20 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { DRAM_PATH } from "./dramPath";
+
+export function DramIcon({ size = 12, color = colors.grey0 }: IconProps) {
+  return (
+    <svg
+      width={(size * 11) / 12}
+      height={size}
+      viewBox="0 0 11 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path d={DRAM_PATH} fill={color} />
+    </svg>
+  );
+}
+
+export { DRAM_PATH } from "./dramPath";

package/src/icons/Dram/dramPath.ts

@@ -0,0 +1,2 @@
+export const DRAM_PATH =
+  "M8.72034 11.584H6.78434V4.06398C6.78434 3.23198 6.58168 2.61332 6.17634 2.20798C5.77101 1.80265 5.16834 1.59998 4.36834 1.59998C3.81368 1.59998 3.35501 1.70665 2.99234 1.91998C2.64034 2.12265 2.37901 2.44265 2.20834 2.87998C2.03768 3.31732 1.95234 3.88265 1.95234 4.57598H0.0003438C0.0003438 3.63732 0.160344 2.82665 0.480344 2.14398C0.811011 1.45065 1.30168 0.922651 1.95234 0.559984C2.61368 0.186651 3.43501 -1.62125e-05 4.41634 -1.62125e-05C5.34434 -1.62125e-05 6.12834 0.17065 6.76834 0.511984C7.41901 0.842651 7.90434 1.32798 8.22434 1.96798C8.55501 2.59732 8.72034 3.34932 8.72034 4.22398V11.584ZM4.67234 4.81598H10.8323V6.03198H4.67234V4.81598ZM4.67234 7.08798H10.8323V8.31998H4.67234V7.08798Z";

package/src/icons/Dram/index.ts

@@ -0,0 +1 @@
+export { DramIcon, DRAM_PATH } from "./DramIcon";

package/src/icons/HouseRules/houseRulesPaths.ts

@@ -4,10 +4,10 @@ export const QUIET_HOURS_PATH =
 
 /** No-smoking — stroke paths, 20×20 viewBox. */
 export const NO_SMOKING_PATHS = [
-  "M6.66602 10.8334V14.1667",
-  "M13.334 4.16663V4.58329C13.334 5.02532 13.5096 5.44924 13.8221 5.7618C14.1347 6.07436 14.5586 6.24996 15.0007 6.24996C15.4427 6.24996 15.8666 6.42555 16.1792 6.73811C16.4917 7.05068 16.6673 7.4746 16.6673 7.91663V8.33329",
+  "M6.66797 10.834V14.1673",
+  "M13.332 4.16602V4.58268C13.332 5.02471 13.5076 5.44863 13.8202 5.76119C14.1327 6.07375 14.5567 6.24935 14.9987 6.24935C15.4407 6.24935 15.8646 6.42494 16.1772 6.7375C16.4898 7.05007 16.6654 7.47399 16.6654 7.91602V8.33268",
   "M2.5 2.5L17.5 17.5",
-  "M14.1667 10.8334H16.6667C16.8877 10.8334 17.0996 10.9212 17.2559 11.0775C17.4122 11.2337 17.5 11.4457 17.5 11.6667V13.3334C17.5 13.5667 17.4042 13.7775 17.25 13.9284M14.1667 14.1667H3.33333C3.11232 14.1667 2.90036 14.0789 2.74408 13.9226C2.5878 13.7663 2.5 13.5544 2.5 13.3334V11.6667C2.5 11.4457 2.5878 11.2337 2.74408 11.0775C2.90036 10.9212 3.11232 10.8334 3.33333 10.8334H10.8333",
+  "M14.1667 10.834H16.6667C16.8877 10.834 17.0996 10.9218 17.2559 11.0781C17.4122 11.2343 17.5 11.4463 17.5 11.6673V13.334C17.5 13.5673 17.4042 13.7782 17.25 13.929M14.1667 14.1673H3.33333C3.11232 14.1673 2.90036 14.0795 2.74408 13.9232C2.5878 13.767 2.5 13.555 2.5 13.334V11.6673C2.5 11.4463 2.5878 11.2343 2.74408 11.0781C2.90036 10.9218 3.11232 10.834 3.33333 10.834H10.8333",
 ] as const;
 
 /** Paw / pets — stroke paths, 20×20 viewBox. */

package/src/icons/NoPets/NoPetsIcon.tsx

@@ -0,0 +1,23 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { NO_PETS_PATHS } from "./noPetsPaths";
+
+export function NoPetsIcon({ size = 20, color = colors.white, strokeWidth = 1.5 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      {NO_PETS_PATHS.map((path, index) => (
+        <Path
+          key={`no-pets-${index}`}
+          d={path}
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      ))}
+    </Svg>
+  );
+}
+
+export { NO_PETS_PATHS } from "./noPetsPaths";

package/src/icons/NoPets/NoPetsIcon.web.tsx

@@ -0,0 +1,29 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { NO_PETS_PATHS } from "./noPetsPaths";
+
+export function NoPetsIcon({ size = 20, color = colors.white, strokeWidth = 1.5 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      {NO_PETS_PATHS.map((path, index) => (
+        <path
+          key={`no-pets-${index}`}
+          d={path}
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      ))}
+    </svg>
+  );
+}
+
+export { NO_PETS_PATHS } from "./noPetsPaths";

package/src/icons/NoPets/index.ts

@@ -0,0 +1 @@
+export { NoPetsIcon, NO_PETS_PATHS } from "./NoPetsIcon";

package/src/icons/NoPets/noPetsPaths.ts

@@ -0,0 +1,8 @@
+export const NO_PETS_PATHS = [
+  "M9.30729 9.29492C8.71562 9.55326 8.32062 10.2174 7.64062 11.4558C6.85562 12.8749 5.26896 12.9933 4.87312 14.1983C4.79229 14.4191 4.75229 14.7624 4.75396 14.9999C4.75396 15.9799 5.40979 16.6666 6.25396 16.6666C7.30312 16.6666 8.75396 15.8333 10.004 15.8333C11.254 15.8333 12.7048 16.6666 13.754 16.6666C14.5265 16.6666 15.1406 16.0924 15.2398 15.2433",
+  "M16.8222 6.73435C16.7151 6.6891 16.6001 6.66586 16.4838 6.66602H16.4713C15.8588 6.67602 15.1713 7.29102 14.8105 8.22102C14.378 9.33352 14.5772 10.471 15.2588 10.7643C15.3663 10.8102 15.4813 10.8327 15.5972 10.8327C16.213 10.8327 16.9097 10.2143 17.273 9.27768C17.703 8.16518 17.4997 7.02768 16.8222 6.73435Z",
+  "M9.16562 5.82732C9.17486 5.62532 9.16369 5.42291 9.13229 5.22315C8.96312 4.14232 8.25979 3.33398 7.52229 3.33398C7.29304 3.33531 7.07077 3.41301 6.89062 3.55482",
+  "M13.7119 5.61149C13.8903 4.46482 13.3994 3.44982 12.6119 3.34315C12.5672 3.33696 12.5221 3.3339 12.4769 3.33399C11.7394 3.33399 11.0369 4.14232 10.8686 5.22315C10.6903 6.36982 11.1811 7.38482 11.9686 7.49149C12.0136 7.49732 12.0586 7.50065 12.1036 7.50065C12.8411 7.50065 13.5453 6.68899 13.7119 5.61149Z",
+  "M4.74152 10.7643C5.42152 10.471 5.61985 9.33185 5.18819 8.22102C4.82485 7.28435 4.12902 6.66602 3.51402 6.66602C3.39735 6.66602 3.28319 6.68852 3.17485 6.73435C2.49485 7.02768 2.29652 8.16685 2.72819 9.27768C3.09152 10.2143 3.78735 10.8327 4.40235 10.8327C4.51902 10.8327 4.63319 10.8102 4.74152 10.7643Z",
+  "M2.5 2.5L17.5 17.5",
+] as const;

package/src/icons/NoReview/NoReviewIcon.tsx

@@ -0,0 +1,20 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { NO_REVIEW_PATH } from "./noReviewPath";
+
+export { NO_REVIEW_PATH } from "./noReviewPath";
+
+export function NoReviewIcon({ size = 20, color = colors.grey150, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={NO_REVIEW_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/NoReview/NoReviewIcon.web.tsx

@@ -0,0 +1,19 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { NO_REVIEW_PATH } from "./noReviewPath";
+
+export function NoReviewIcon({ size = 20, color = colors.grey150, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 20 20" fill="none" aria-hidden>
+      <path
+        d={NO_REVIEW_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { NO_REVIEW_PATH } from "./noReviewPath";

package/src/icons/NoReview/index.ts

@@ -0,0 +1 @@
+export { NoReviewIcon, NO_REVIEW_PATH } from "./NoReviewIcon";

package/src/icons/NoReview/noReviewPath.ts

@@ -0,0 +1,3 @@
+/** No-review / empty comment path — 20×20 viewBox. */
+export const NO_REVIEW_PATH =
+  "M8.33333 10.833L9.99999 9.16633M9.99999 9.16633L11.6666 7.49967M9.99999 9.16633L8.33333 7.49967M9.99999 9.16633L11.6666 10.833M5.93631 15.584L4.66634 16.6C3.97287 17.1547 3.62596 17.4322 3.33415 17.4326C3.08036 17.4328 2.84037 17.3174 2.68205 17.1191C2.5 16.891 2.5 16.4471 2.5 15.559V5.99984C2.5 5.06642 2.5 4.59936 2.68166 4.24284C2.84144 3.92924 3.09623 3.67445 3.40983 3.51466C3.76635 3.33301 4.23341 3.33301 5.16683 3.33301H14.8335C15.7669 3.33301 16.233 3.33301 16.5895 3.51466C16.9031 3.67445 17.1587 3.92924 17.3185 4.24284C17.5 4.59901 17.5 5.0655 17.5 5.9971V12.336C17.5 13.2676 17.5 13.7334 17.3185 14.0896C17.1587 14.4032 16.9036 14.6584 16.59 14.8182C16.2338 14.9997 15.7675 14.9997 14.8359 14.9997H7.60173C7.25503 14.9997 7.08231 14.9997 6.9165 15.0337C6.7694 15.0639 6.6268 15.1136 6.49307 15.182C6.34401 15.2581 6.21041 15.365 5.94565 15.5768L5.93631 15.584Z";

package/src/icons/StarOutline/StarOutlineIcon.tsx

@@ -0,0 +1,24 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { STAR_OUTLINE_PATH } from "./starOutlinePath";
+
+export function StarOutlineIcon({
+  size = 24,
+  color = colors.grey200,
+  strokeWidth = 1.35,
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        d={STAR_OUTLINE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export { STAR_OUTLINE_PATH } from "./starOutlinePath";

package/src/icons/StarOutline/StarOutlineIcon.web.tsx

@@ -0,0 +1,30 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { STAR_OUTLINE_PATH } from "./starOutlinePath";
+
+export function StarOutlineIcon({
+  size = 24,
+  color = colors.grey200,
+  strokeWidth = 1.35,
+}: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={STAR_OUTLINE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { STAR_OUTLINE_PATH } from "./starOutlinePath";

package/src/icons/StarOutline/index.ts

@@ -0,0 +1 @@
+export { StarOutlineIcon, STAR_OUTLINE_PATH } from "./StarOutlineIcon";

package/src/icons/StarOutline/starOutlinePath.ts

@@ -0,0 +1,2 @@
+export const STAR_OUTLINE_PATH =
+  "M12.0002 3.67578L14.546 8.83423L20.2387 9.66143L16.1195 13.6767L17.092 19.3463L12.0002 16.6696L6.90856 19.3463L7.88098 13.6767L3.76172 9.66143L9.45441 8.83423L12.0002 3.67578Z";

package/src/icons/Sun/SunIcon.tsx

@@ -0,0 +1,20 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { SUN_PATH } from "./sunPath";
+
+export function SunIcon({ size = 16, color = colors.primary, strokeWidth = 1.5 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
+        d={SUN_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export { SUN_PATH } from "./sunPath";

package/src/icons/Sun/SunIcon.web.tsx

@@ -0,0 +1,26 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { SUN_PATH } from "./sunPath";
+
+export function SunIcon({ size = 16, color = colors.primary, strokeWidth = 1.5 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={SUN_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { SUN_PATH } from "./sunPath";

package/src/icons/Sun/index.ts

@@ -0,0 +1 @@
+export { SunIcon, SUN_PATH } from "./SunIcon";

package/src/icons/Sun/sunPath.ts

@@ -0,0 +1,2 @@
+export const SUN_PATH =
+  "M8 1.33333V2.66667M8 13.3333V14.6667M1.33333 8H2.66667M13.3333 8H14.6667M3.28667 3.28667L4.22667 4.22667M11.7733 11.7733L12.7133 12.7133M12.7133 3.28667L11.7733 4.22667M4.22667 11.7733L3.28667 12.7133M10.6667 8C10.6667 9.47276 9.47276 10.6667 8 10.6667C6.52724 10.6667 5.33333 9.47276 5.33333 8C5.33333 6.52724 6.52724 5.33333 8 5.33333C9.47276 5.33333 10.6667 6.52724 10.6667 8Z";

package/src/icons/Washer/WasherIcon.tsx

@@ -0,0 +1,25 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { WASHER_PATHS } from "./washerPaths";
+
+export function WasherIcon({ size = 20, color = colors.white, strokeWidth = 1.5 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      {WASHER_PATHS.map((path, index) => {
+        const filled = path.fill === true;
+        return (
+          <Path
+            key={`washer-${index}`}
+            d={path.d}
+            fill={filled ? color : "none"}
+            stroke={filled ? undefined : color}
+            strokeWidth={filled ? undefined : strokeWidth}
+          />
+        );
+      })}
+    </Svg>
+  );
+}
+
+export { WASHER_PATHS } from "./washerPaths";