@ecohouse/ui 0.1.42 → 0.1.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.42",
+  "version": "0.1.44",
   "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/RadioButton/RadioButton.stories.tsx

@@ -0,0 +1,64 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { StyleSheet, Text, View } from "react-native";
+import { colors } from "../../theme";
+import { RadioButton } from "./RadioButton";
+
+const meta = {
+  title: "Components/RadioButton",
+  component: RadioButton,
+  args: {
+    defaultValue: false,
+    disabled: false,
+    variant: "default",
+    onValueChange: fn(),
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof RadioButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Active: Story = {
+  args: { defaultValue: true },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+};
+
+export const WithLabel: Story = {
+  args: { defaultValue: true, label: "Option" },
+};
+
+function ControlledGroup() {
+  const [value, setValue] = useState("first");
+
+  return (
+    <View style={styles.group} accessibilityRole="radiogroup">
+      {["first", "second", "third"].map((option) => (
+        <RadioButton key={option} value={value === option} onValueChange={() => setValue(option)}>
+          <Text style={styles.label}>{option}</Text>
+        </RadioButton>
+      ))}
+    </View>
+  );
+}
+
+export const Group: Story = {
+  render: () => <ControlledGroup />,
+};
+
+const styles = StyleSheet.create({
+  group: {
+    gap: 12,
+  },
+  label: {
+    color: colors.white,
+  },
+});

package/src/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,135 @@
+import { forwardRef, useMemo, useRef, useState, type ComponentRef, type ReactNode } from "react";
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
+import { colors, fonts } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export type RadioButtonVariant = "default";
+
+export interface RadioButtonProps extends Omit<
+  PressableProps,
+  "onPress" | "disabled" | "style" | "children" | "hitSlop"
+> {
+  value?: boolean;
+  defaultValue?: boolean;
+  onValueChange?: (value: true) => void;
+  disabled?: boolean;
+  variant?: RadioButtonVariant;
+  label?: string;
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  className?: string;
+  hitSlop?: PressableProps["hitSlop"];
+}
+
+const CONTROL_SIZE = 16;
+const DOT_SIZE = 8;
+
+export const RadioButton = forwardRef<ComponentRef<typeof Pressable>, RadioButtonProps>(
+  function RadioButton(
+    {
+      value,
+      defaultValue = false,
+      onValueChange,
+      disabled = false,
+      variant: _variant = "default",
+      label,
+      children,
+      style,
+      labelStyle,
+      className,
+      hitSlop = 8,
+      accessibilityLabel,
+      ...rest
+    },
+    forwardedRef,
+  ) {
+    const containerRef = useRef<ComponentRef<typeof Pressable>>(null);
+    const isControlled = typeof value === "boolean";
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const isActive = isControlled ? value : uncontrolledValue;
+    const labelContent = children ?? label;
+    const resolvedAccessibilityLabel =
+      accessibilityLabel ?? (typeof labelContent === "string" ? labelContent : undefined);
+    const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+
+    useApplyWebClassName(containerRef, className);
+
+    const handlePress = () => {
+      if (disabled || isActive) return;
+      if (!isControlled) setUncontrolledValue(true);
+      onValueChange?.(true);
+    };
+
+    return (
+      <Pressable
+        {...rest}
+        ref={setContainerRef}
+        onPress={handlePress}
+        disabled={disabled}
+        hitSlop={hitSlop}
+        accessibilityRole="radio"
+        accessibilityLabel={resolvedAccessibilityLabel}
+        accessibilityState={{ selected: isActive, disabled }}
+        style={[styles.root, disabled && styles.disabled, style]}
+      >
+        <View style={styles.control}>{isActive ? <View style={styles.dot} /> : null}</View>
+
+        {labelContent != null && labelContent !== false ? (
+          typeof labelContent === "string" || typeof labelContent === "number" ? (
+            <Text style={[styles.label, labelStyle]}>{labelContent}</Text>
+          ) : (
+            labelContent
+          )
+        ) : null}
+      </Pressable>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  root: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: 6,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  control: {
+    width: CONTROL_SIZE,
+    height: CONTROL_SIZE,
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: colors.grey700,
+    backgroundColor: colors.dark,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  dot: {
+    width: DOT_SIZE,
+    height: DOT_SIZE,
+    borderRadius: 43,
+    backgroundColor: colors.primary,
+  },
+  label: {
+    flexShrink: 1,
+    textAlign: "center",
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "400",
+    color: colors.white,
+  },
+});

package/src/components/RadioButton/index.ts

@@ -0,0 +1,2 @@
+export { RadioButton } from "./RadioButton";
+export type { RadioButtonProps, RadioButtonVariant } from "./RadioButton";

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/components/index.ts

@@ -118,3 +118,6 @@ export type { CommentCardProps } from "./CommentCard";
 
 export { Range } from "./Range";
 export type { RangeProps, RangeValue } from "./Range";
+
+export { RadioButton } from "./RadioButton";
+export type { RadioButtonProps, RadioButtonVariant } from "./RadioButton";

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/MoonStars/MoonStarsIcon.tsx

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

package/src/icons/MoonStars/MoonStarsIcon.web.tsx

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

package/src/icons/MoonStars/index.ts

@@ -0,0 +1,6 @@
+export {
+  MoonStarsIcon,
+  MOON_STARS_MOON_PATH,
+  MOON_STARS_PATHS,
+  MOON_STARS_SPARKLE_PATH,
+} from "./MoonStarsIcon";

package/src/icons/MoonStars/moonStarsPaths.ts

@@ -0,0 +1,7 @@
+export const MOON_STARS_SPARKLE_PATH =
+  "M11.4167 0.75L11.8285 1.57372C12.0055 1.92771 12.094 2.1047 12.2122 2.25808C12.3171 2.39417 12.4392 2.51618 12.5753 2.62109C12.7286 2.73932 12.9056 2.82781 13.2596 3.00481L14.0833 3.41667L13.2596 3.82853C12.9056 4.00552 12.7286 4.09402 12.5753 4.21224C12.4392 4.31715 12.3171 4.43916 12.2122 4.57526C12.094 4.72863 12.0055 4.90563 11.8285 5.25961L11.4167 6.08333L11.0048 5.25961C10.8278 4.90563 10.7393 4.72863 10.6211 4.57526C10.5162 4.43916 10.3942 4.31715 10.2581 4.21224C10.1047 4.09402 9.92771 4.00552 9.57372 3.82853L8.75 3.41667L9.57372 3.00481C9.92771 2.82781 10.1047 2.73932 10.2581 2.62109C10.3942 2.51618 10.5162 2.39417 10.6211 2.25808C10.7393 2.1047 10.8278 1.92771 11.0048 1.57372L11.4167 0.75Z";
+
+export const MOON_STARS_MOON_PATH =
+  "M13.4167 8.34286C12.5427 9.876 10.893 10.9097 9.00196 10.9097C6.19739 10.9097 3.92383 8.63612 3.92383 5.83155C3.92383 3.94036 4.95766 2.29063 6.491 1.41667C3.26986 1.72208 0.75 4.43461 0.75 7.73569C0.75 11.2414 3.59195 14.0833 7.09766 14.0833C10.3986 14.0833 13.111 11.5637 13.4167 8.34286Z";
+
+export const MOON_STARS_PATHS = [MOON_STARS_SPARKLE_PATH, MOON_STARS_MOON_PATH] as const;