@ecohouse/ui 0.1.12 → 0.1.13

package/dist/index.d.cts

@@ -438,7 +438,10 @@ type DatePickerRangeProps = DatePickerBaseProps & {
 type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
 declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<View>>;
 
+type StatefulIcon = ReactNode | IconComponent;
+
 type InputSize = "lg" | "sm";
+type InputIcon = StatefulIcon;
 interface InputProps extends Omit<TextInputProps, "style" | "editable"> {
     label?: string;
     showLabel?: boolean;
@@ -449,9 +452,9 @@ interface InputProps extends Omit<TextInputProps, "style" | "editable"> {
     error?: boolean;
     /** External — non-interactive. */
     disabled?: boolean;
-    leftIcon?: ReactNode;
+    leftIcon?: InputIcon;
     showLeftIcon?: boolean;
-    rightIcon?: ReactNode;
+    rightIcon?: InputIcon;
     showRightIcon?: boolean;
     onRightIconPress?: () => void;
     /** Accessible name for the right icon button, when `onRightIconPress` is set. */
@@ -468,6 +471,7 @@ type SelectOption = {
     label: string;
     value: string;
 };
+type SelectIcon = StatefulIcon;
 type SelectBaseProps = Omit<ViewProps, "style" | "children"> & {
     label?: string;
     showLabel?: boolean;
@@ -480,7 +484,7 @@ type SelectBaseProps = Omit<ViewProps, "style" | "children"> & {
     onOpenChange?: (open: boolean) => void;
     disabled?: boolean;
     error?: boolean;
-    leftIcon?: ReactNode;
+    leftIcon?: SelectIcon;
     showLeftIcon?: boolean;
     showSearch?: boolean;
     searchPlaceholder?: string;
@@ -871,4 +875,4 @@ declare const textareaTypography: {
     };
 };
 
-export { ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, type BadgeProps, type BadgeVariant, BagIcon, BellIcon, BrandLogo, type BrandLogoProps, type BrandLogoVariant, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockIcon, CommentCard, type CommentCardProps, Counter, type CounterProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, FacebookIcon, GlobeIcon, type GreyStep, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputProps, type InputSize, InstagramIcon, KeyIcon, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuIcon, type MenuIconProps, MenuItem, type MenuItemProps, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, RatingInput, type RatingInputProps, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShowIcon, SidebarIcon, StarFilledIcon, StarIcon, type StarIconProps, StatCard, type StatCardProps, Textarea, type TextareaProps, Toggle, type ToggleProps, UserIcon, UsersAltIcon, VideoIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
+export { ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, type BadgeProps, type BadgeVariant, BagIcon, BellIcon, BrandLogo, type BrandLogoProps, type BrandLogoVariant, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockIcon, CommentCard, type CommentCardProps, Counter, type CounterProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, FacebookIcon, GlobeIcon, type GreyStep, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputIcon, type InputProps, type InputSize, InstagramIcon, KeyIcon, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuIcon, type MenuIconProps, MenuItem, type MenuItemProps, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, RatingInput, type RatingInputProps, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectIcon, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShowIcon, SidebarIcon, StarFilledIcon, StarIcon, type StarIconProps, StatCard, type StatCardProps, Textarea, type TextareaProps, Toggle, type ToggleProps, UserIcon, UsersAltIcon, VideoIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };

package/dist/index.d.ts

@@ -438,7 +438,10 @@ type DatePickerRangeProps = DatePickerBaseProps & {
 type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
 declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<View>>;
 
+type StatefulIcon = ReactNode | IconComponent;
+
 type InputSize = "lg" | "sm";
+type InputIcon = StatefulIcon;
 interface InputProps extends Omit<TextInputProps, "style" | "editable"> {
     label?: string;
     showLabel?: boolean;
@@ -449,9 +452,9 @@ interface InputProps extends Omit<TextInputProps, "style" | "editable"> {
     error?: boolean;
     /** External — non-interactive. */
     disabled?: boolean;
-    leftIcon?: ReactNode;
+    leftIcon?: InputIcon;
     showLeftIcon?: boolean;
-    rightIcon?: ReactNode;
+    rightIcon?: InputIcon;
     showRightIcon?: boolean;
     onRightIconPress?: () => void;
     /** Accessible name for the right icon button, when `onRightIconPress` is set. */
@@ -468,6 +471,7 @@ type SelectOption = {
     label: string;
     value: string;
 };
+type SelectIcon = StatefulIcon;
 type SelectBaseProps = Omit<ViewProps, "style" | "children"> & {
     label?: string;
     showLabel?: boolean;
@@ -480,7 +484,7 @@ type SelectBaseProps = Omit<ViewProps, "style" | "children"> & {
     onOpenChange?: (open: boolean) => void;
     disabled?: boolean;
     error?: boolean;
-    leftIcon?: ReactNode;
+    leftIcon?: SelectIcon;
     showLeftIcon?: boolean;
     showSearch?: boolean;
     searchPlaceholder?: string;
@@ -871,4 +875,4 @@ declare const textareaTypography: {
     };
 };
 
-export { ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, type BadgeProps, type BadgeVariant, BagIcon, BellIcon, BrandLogo, type BrandLogoProps, type BrandLogoVariant, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockIcon, CommentCard, type CommentCardProps, Counter, type CounterProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, FacebookIcon, GlobeIcon, type GreyStep, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputProps, type InputSize, InstagramIcon, KeyIcon, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuIcon, type MenuIconProps, MenuItem, type MenuItemProps, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, RatingInput, type RatingInputProps, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShowIcon, SidebarIcon, StarFilledIcon, StarIcon, type StarIconProps, StatCard, type StatCardProps, Textarea, type TextareaProps, Toggle, type ToggleProps, UserIcon, UsersAltIcon, VideoIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
+export { ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, type BadgeProps, type BadgeVariant, BagIcon, BellIcon, BrandLogo, type BrandLogoProps, type BrandLogoVariant, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockIcon, CommentCard, type CommentCardProps, Counter, type CounterProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, FacebookIcon, GlobeIcon, type GreyStep, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputIcon, type InputProps, type InputSize, InstagramIcon, KeyIcon, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuIcon, type MenuIconProps, MenuItem, type MenuItemProps, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, RatingInput, type RatingInputProps, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectIcon, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShowIcon, SidebarIcon, StarFilledIcon, StarIcon, type StarIconProps, StatCard, type StatCardProps, Textarea, type TextareaProps, Toggle, type ToggleProps, UserIcon, UsersAltIcon, VideoIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { forwardRef, useRef, useMemo, useState, useCallback, useEffect, useLayoutEffect } from 'react';
+import { forwardRef, useRef, useMemo, useState, useCallback, useEffect, useLayoutEffect, isValidElement, cloneElement } from 'react';
 import { Pressable, View, Text, StyleSheet, Platform, Image, Animated, Easing, TouchableOpacity, TextInput, ScrollView } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -2752,6 +2752,19 @@ var styles10 = StyleSheet.create({
     backgroundColor: colors.primary
   }
 });
+function renderStatefulIcon(icon, FallbackIcon, props) {
+  if (icon == null) {
+    return /* @__PURE__ */ jsx(FallbackIcon, { ...props });
+  }
+  if (typeof icon === "function") {
+    const Icon2 = icon;
+    return /* @__PURE__ */ jsx(Icon2, { ...props });
+  }
+  if (isValidElement(icon)) {
+    return cloneElement(icon, props);
+  }
+  return icon;
+}
 var DEFAULT_WIDTH2 = 308;
 var sizeConfig2 = {
   lg: {
@@ -2831,11 +2844,11 @@ function chromeFor(state) {
   }
 }
 var Input = forwardRef(function Input2({
-  label = "Label",
+  label,
   showLabel = true,
-  hint = "Hint",
+  hint,
   showHint = true,
-  placeholder = "placeholder",
+  placeholder,
   size = "lg",
   disabled = false,
   error = false,
@@ -2872,8 +2885,14 @@ var Input = forwardRef(function Input2({
   const resolvedAccessibilityLabel = accessibilityLabel ?? (showLabel ? void 0 : label);
   const hasLeftIcon = showLeftIcon || leftIcon != null;
   const hasRightIcon = showRightIcon || rightIcon != null;
-  const leftIconNode = leftIcon ?? /* @__PURE__ */ jsx(UserIcon, { size: metrics.iconSize, color: chrome.leftIconColor });
-  const rightIconNode = rightIcon ?? /* @__PURE__ */ jsx(ShowIcon, { size: metrics.iconSize, color: chrome.rightIconColor });
+  const leftIconNode = renderStatefulIcon(leftIcon, UserIcon, {
+    size: metrics.iconSize,
+    color: chrome.leftIconColor
+  });
+  const rightIconNode = renderStatefulIcon(rightIcon, ShowIcon, {
+    size: metrics.iconSize,
+    color: chrome.rightIconColor
+  });
   useApplyWebClassName(rootRef, className);
   useApplyWebClassName(inputRef, inputClassName);
   return /* @__PURE__ */ jsxs(View, { ref: rootRef, style: [styles11.root, disabled && styles11.disabled, style], children: [
@@ -3107,11 +3126,11 @@ function MultiValueChips({ options, disabled, onRemove }) {
 var Select = forwardRef(
   function Select2(props, forwardedRef) {
     const {
-      label = "Label",
+      label,
       showLabel = true,
       hint,
-      showHint = false,
-      placeholder = "placeholder",
+      showHint = true,
+      placeholder,
       options,
       open: openProp,
       defaultOpen = false,
@@ -3308,13 +3327,10 @@ var Select = forwardRef(
       handleSelect,
       setOpen
     ]);
-    const leftIconNode = leftIcon ?? /* @__PURE__ */ jsx(
-      UserIcon,
-      {
-        size: ICON_SIZE7,
-        color: error ? colors.red : isOpen ? colors.primary : colors.grey100
-      }
-    );
+    const leftIconNode = renderStatefulIcon(leftIcon, UserIcon, {
+      size: ICON_SIZE7,
+      color: error ? colors.red : isOpen ? colors.primary : colors.grey100
+    });
     const hasLeftIcon = showLeftIcon || leftIcon != null;
     const triggerBorderColor = error ? colors.redMuted : isOpen ? colors.primaryMuted : colors.grey700;
     const triggerTextColor = hasValue ? error ? colors.red : colors.white : error ? colors.red : colors.grey100;