@ecohouse/ui 0.1.11 → 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

@@ -621,6 +621,28 @@ function MailIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
   ) });
 }
 
+// src/icons/Menu/menuPath.ts
+var MENU_PATH = "M8 12.6667H17.3333M1 6.83332H17.3333M8 0.999985H17.3333";
+var MENU_CLOSE_PATH = "M15 1L1 15M1 1L15 15";
+function MenuIcon({
+  size = 19,
+  color = colors.white,
+  strokeWidth = 2,
+  open = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 19 19", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Svg.Path,
+    {
+      d: open ? MENU_CLOSE_PATH : MENU_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      transform: open ? "translate(1.5 1.5)" : "translate(0 2.5)"
+    }
+  ) });
+}
+
 // src/icons/Minus/minusPath.ts
 var MINUS_PATH = "M3.33337 8H12.6667";
 function MinusIcon({ size = 16, color = colors.white, strokeWidth = 2 }) {
@@ -877,6 +899,7 @@ var icons = {
   linkedin: LinkedInIcon,
   logOut: LogOutIcon,
   mail: MailIcon,
+  menu: MenuIcon,
   minus: MinusIcon,
   navigate: NavigateIcon,
   phone: PhoneIcon,
@@ -893,7 +916,7 @@ var icons = {
 };
 var iconNames = Object.keys(icons);
 var iconGroups = {
-  navigation: ["arrowRight", "chevronDown", "chevronLeft", "home", "navigate"],
+  navigation: ["arrowRight", "chevronDown", "chevronLeft", "home", "menu", "navigate"],
   actions: [
     "show",
     "bell",
@@ -2042,6 +2065,7 @@ var Button = react.forwardRef(
         paddingRight: hasIcon ? metrics.paddingRightWithIcon : metrics.paddingRight,
         gap: hasIcon ? metrics.gap : 0
       },
+      hasIcon ? styles8.contentWithIcon : styles8.contentWithoutIcon,
       disabled && styles8.disabled,
       style
     ];
@@ -2097,6 +2121,12 @@ var styles8 = reactNative.StyleSheet.create({
   disabled: {
     opacity: 0.6
   },
+  contentWithIcon: {
+    justifyContent: "space-between"
+  },
+  contentWithoutIcon: {
+    justifyContent: "center"
+  },
   label: {},
   labelAndroid: {
     includeFontPadding: false
@@ -2303,6 +2333,7 @@ var DatePicker = react.forwardRef(
       weekdayLabels = DEFAULT_WEEKDAY_LABELS,
       formatValue = formatDate,
       weekStartsOn = 1,
+      calendarStyle,
       style,
       className,
       accessibilityLabel,
@@ -2457,7 +2488,7 @@ var DatePicker = react.forwardRef(
               ]
             }
           ),
-          isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles10.menu, children: [
+          isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles10.menu, calendarStyle], children: [
             /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles10.calendarHeader, children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 reactNative.Pressable,
@@ -2637,7 +2668,7 @@ var styles10 = reactNative.StyleSheet.create({
     position: "absolute",
     top: "100%",
     left: 0,
-    right: 0,
+    width: DEFAULT_WIDTH,
     marginTop: 8,
     zIndex: 10,
     borderRadius: MENU_RADIUS2,
@@ -2727,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: {
@@ -2806,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,
@@ -2847,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: [
@@ -3082,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,
@@ -3283,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;
@@ -4184,6 +4231,7 @@ exports.LayoutGridIcon = LayoutGridIcon;
 exports.LinkedInIcon = LinkedInIcon;
 exports.LogOutIcon = LogOutIcon;
 exports.MailIcon = MailIcon;
+exports.MenuIcon = MenuIcon;
 exports.MenuItem = MenuItem;
 exports.MinusIcon = MinusIcon;
 exports.NavigateIcon = NavigateIcon;