@ecohouse/ui 0.1.12 → 0.1.13

package/README.md

@@ -140,8 +140,8 @@ export function Example() {
         placeholder="••••••••"
         hint="Use at least 8 characters"
         secureTextEntry
-        leftIcon={<UserIcon size={20} />}
-        rightIcon={<ShowIcon size={20} />}
+        leftIcon={UserIcon}
+        rightIcon={ShowIcon}
         onRightIconPress={() => {}}
         onChangeText={() => {}}
       />
@@ -201,18 +201,18 @@ Pill label chip — `default` / `transparent`. Optional leading `HomeIcon` (colo
 
 Extends React Native `TextInput` props. Default size `lg` (44px pill, radius 60).
 
-| Prop                     | Type                                                         | Default            | Description                |
-| ------------------------ | ------------------------------------------------------------ | ------------------ | -------------------------- |
-| `label` / `showLabel`    | `string` / `boolean`                                         | `"Label"` / `true` | Top label                  |
-| `hint` / `showHint`      | `string` / `boolean`                                         | `"Hint"` / `true`  | Bottom helper              |
-| `placeholder`            | `string`                                                     | `"placeholder"`    | Field placeholder          |
-| `size`                   | `"lg" \| "sm"`                                               | `"lg"`             | Field height               |
-| `state`                  | `"default" \| "filled" \| "active" \| "error" \| "disabled"` | derived            | Override auto state        |
-| `disabled` / `error`     | `boolean`                                                    | `false`            | Disabled / error chrome    |
-| `showLeftIcon`           | `boolean`                                                    | `false`            | Defaults to `UserIcon`     |
-| `showRightIcon`          | `boolean`                                                    | `false`            | Defaults to `ShowIcon`     |
-| `leftIcon` / `rightIcon` | `ReactNode`                                                  | —                  | Custom icons               |
-| `onRightIconPress`       | `() => void`                                                 | —                  | Makes right icon pressable |
+| Prop                     | Type                                                         | Default    | Description                                                     |
+| ------------------------ | ------------------------------------------------------------ | ---------- | --------------------------------------------------------------- |
+| `label` / `showLabel`    | `string` / `boolean`                                         | — / `true` | Top label; omitted when no label is provided                    |
+| `hint` / `showHint`      | `string` / `boolean`                                         | — / `true` | Bottom helper; omitted when no hint is provided                 |
+| `placeholder`            | `string`                                                     | —          | Field placeholder                                               |
+| `size`                   | `"lg" \| "sm"`                                               | `"lg"`     | Field height                                                    |
+| `state`                  | `"default" \| "filled" \| "active" \| "error" \| "disabled"` | derived    | Override auto state                                             |
+| `disabled` / `error`     | `boolean`                                                    | `false`    | Disabled / error chrome                                         |
+| `showLeftIcon`           | `boolean`                                                    | `false`    | Defaults to `UserIcon`                                          |
+| `showRightIcon`          | `boolean`                                                    | `false`    | Defaults to `ShowIcon`                                          |
+| `leftIcon` / `rightIcon` | `InputIcon`                                                  | —          | Custom icon component or element; receives state color and size |
+| `onRightIconPress`       | `() => void`                                                 | —          | Makes right icon pressable                                      |
 
 | State      | Behavior                                                             |
 | ---------- | -------------------------------------------------------------------- |

package/dist/index.cjs

@@ -2758,6 +2758,19 @@ var styles10 = reactNative.StyleSheet.create({
     backgroundColor: colors.primary
   }
 });
+function renderStatefulIcon(icon, FallbackIcon, props) {
+  if (icon == null) {
+    return /* @__PURE__ */ jsxRuntime.jsx(FallbackIcon, { ...props });
+  }
+  if (typeof icon === "function") {
+    const Icon2 = icon;
+    return /* @__PURE__ */ jsxRuntime.jsx(Icon2, { ...props });
+  }
+  if (react.isValidElement(icon)) {
+    return react.cloneElement(icon, props);
+  }
+  return icon;
+}
 var DEFAULT_WIDTH2 = 308;
 var sizeConfig2 = {
   lg: {
@@ -2837,11 +2850,11 @@ function chromeFor(state) {
   }
 }
 var Input = react.forwardRef(function Input2({
-  label = "Label",
+  label,
   showLabel = true,
-  hint = "Hint",
+  hint,
   showHint = true,
-  placeholder = "placeholder",
+  placeholder,
   size = "lg",
   disabled = false,
   error = false,
@@ -2878,8 +2891,14 @@ var Input = react.forwardRef(function Input2({
   const resolvedAccessibilityLabel = accessibilityLabel ?? (showLabel ? void 0 : label);
   const hasLeftIcon = showLeftIcon || leftIcon != null;
   const hasRightIcon = showRightIcon || rightIcon != null;
-  const leftIconNode = leftIcon ?? /* @__PURE__ */ jsxRuntime.jsx(UserIcon, { size: metrics.iconSize, color: chrome.leftIconColor });
-  const rightIconNode = rightIcon ?? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [styles11.root, disabled && styles11.disabled, style], children: [
@@ -3113,11 +3132,11 @@ function MultiValueChips({ options, disabled, onRemove }) {
 var Select = react.forwardRef(
   function Select2(props, forwardedRef) {
     const {
-      label = "Label",
+      label,
       showLabel = true,
       hint,
-      showHint = false,
-      placeholder = "placeholder",
+      showHint = true,
+      placeholder,
       options,
       open: openProp,
       defaultOpen = false,
@@ -3314,13 +3333,10 @@ var Select = react.forwardRef(
       handleSelect,
       setOpen
     ]);
-    const leftIconNode = leftIcon ?? /* @__PURE__ */ jsxRuntime.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;