@ecohouse/ui 0.1.11 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "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

@@ -52,6 +52,17 @@ export const WithCustomIcon: Story = {
   },
 };
 
+export const WithCustomWidth: Story = {
+  args: {
+    title: "Button",
+    showIcon: true,
+    style: { width: 400 },
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+};
+
 export const AllVariants: Story = {
   render: () => (
     <View style={storyStyles.grid}>

package/src/components/Button/Button.tsx

@@ -140,6 +140,7 @@ export const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonPr
         paddingRight: hasIcon ? metrics.paddingRightWithIcon : metrics.paddingRight,
         gap: hasIcon ? metrics.gap : 0,
       },
+      hasIcon ? styles.contentWithIcon : styles.contentWithoutIcon,
       disabled && styles.disabled,
       style,
     ];
@@ -203,6 +204,12 @@ const styles = StyleSheet.create({
   disabled: {
     opacity: 0.6,
   },
+  contentWithIcon: {
+    justifyContent: "space-between",
+  },
+  contentWithoutIcon: {
+    justifyContent: "center",
+  },
   label: {},
   labelAndroid: {
     includeFontPadding: false,

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -35,6 +35,14 @@ export const Open: Story = {
   args: { defaultOpen: true },
 };
 
+export const IndependentWidths: Story = {
+  args: {
+    defaultOpen: true,
+    style: { width: 240 },
+    calendarStyle: { width: 420 },
+  },
+};
+
 export const WithValue: Story = {
   args: {
     defaultValue: new Date(2026, 8, 15),

package/src/components/DatePicker/DatePicker.tsx

@@ -78,6 +78,8 @@ type DatePickerBaseProps = Omit<ViewProps, "style" | "children"> & {
   formatValue?: (date: Date) => string;
   /** First day of the week column (0 = Sunday, 1 = Monday). Defaults to Monday. */
   weekStartsOn?: 0 | 1;
+  /** Styles the calendar popup independently from the trigger width. */
+  calendarStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<ViewStyle>;
   className?: string;
 };
@@ -123,6 +125,7 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
       weekdayLabels = DEFAULT_WEEKDAY_LABELS,
       formatValue = formatDate,
       weekStartsOn = 1,
+      calendarStyle,
       style,
       className,
       accessibilityLabel,
@@ -329,7 +332,7 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
           </Pressable>
 
           {isOpen ? (
-            <View style={styles.menu}>
+            <View style={[styles.menu, calendarStyle]}>
               <View style={styles.calendarHeader}>
                 <Pressable
                   onPress={handlePrevMonth}
@@ -536,7 +539,7 @@ const styles = StyleSheet.create({
     position: "absolute",
     top: "100%",
     left: 0,
-    right: 0,
+    width: DEFAULT_WIDTH,
     marginTop: 8,
     zIndex: 10,
     borderRadius: MENU_RADIUS,

package/src/components/Input/Input.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
 import { View, StyleSheet } from "react-native";
+import { MailIcon } from "../../icons";
 import { Input } from "./Input";
 
 const meta = {
@@ -8,9 +9,7 @@ const meta = {
   component: Input,
   args: {
     label: "Label",
-    showLabel: true,
     hint: "Hint",
-    showHint: true,
     placeholder: "placeholder",
     size: "lg",
     showLeftIcon: true,
@@ -51,8 +50,12 @@ export const WithoutIcons: Story = {
   args: { showLeftIcon: false, showRightIcon: false },
 };
 
+export const CustomIcon: Story = {
+  args: { leftIcon: MailIcon },
+};
+
 export const WithoutLabelAndHint: Story = {
-  args: { showLabel: false, showHint: false },
+  render: () => <Input placeholder="placeholder" showLeftIcon showRightIcon />,
 };
 
 export const AllStates: Story = {

package/src/components/Input/Input.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useMemo, useRef, useState, type ComponentRef, type ReactNode } from "react";
+import { forwardRef, useMemo, useRef, useState, type ComponentRef } from "react";
 import {
   Platform,
   StyleSheet,
@@ -11,13 +11,14 @@ import {
   type ViewStyle,
   type TextInputProps,
 } from "react-native";
-import { ShowIcon } from "../../icons";
-import { UserIcon } from "../../icons";
+import { ShowIcon, UserIcon } from "../../icons";
 import { colors, inputTypography } from "../../theme";
 import { mergeRefs } from "../../utils/mergeRefs";
+import { renderStatefulIcon, type StatefulIcon } from "../../utils/renderStatefulIcon";
 import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
 
 export type InputSize = "lg" | "sm";
+export type InputIcon = StatefulIcon;
 
 export interface InputProps extends Omit<TextInputProps, "style" | "editable"> {
   label?: string;
@@ -29,9 +30,9 @@ export 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. */
@@ -147,11 +148,11 @@ function chromeFor(state: VisualState): FieldChrome {
 
 export const Input = forwardRef<ComponentRef<typeof TextInput>, InputProps>(function Input(
   {
-    label = "Label",
+    label,
     showLabel = true,
-    hint = "Hint",
+    hint,
     showHint = true,
-    placeholder = "placeholder",
+    placeholder,
     size = "lg",
     disabled = false,
     error = false,
@@ -194,12 +195,14 @@ export const Input = forwardRef<ComponentRef<typeof TextInput>, InputProps>(func
   const hasLeftIcon = showLeftIcon || leftIcon != null;
   const hasRightIcon = showRightIcon || rightIcon != null;
 
-  const leftIconNode = leftIcon ?? (
-    <UserIcon size={metrics.iconSize} color={chrome.leftIconColor} />
-  );
-  const rightIconNode = rightIcon ?? (
-    <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);

package/src/components/Input/index.ts

@@ -1,2 +1,2 @@
 export { Input } from "./Input";
-export type { InputProps, InputSize } from "./Input";
+export type { InputIcon, InputProps, InputSize } from "./Input";

package/src/components/Select/Select.stories.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
 import { View, StyleSheet, Text } from "react-native";
+import { MailIcon } from "../../icons";
 import { Select, type SelectOption } from "./Select";
 import { colors } from "../../theme";
 
@@ -24,7 +25,6 @@ const meta = {
   component: Select,
   args: {
     label: "Label",
-    showLabel: true,
     placeholder: "placeholder",
     options: defaultOptions,
     showLeftIcon: true,
@@ -82,11 +82,18 @@ export const WithoutLeftIcon: Story = {
   args: { showLeftIcon: false },
 };
 
+export const CustomIcon: Story = {
+  args: { leftIcon: MailIcon },
+};
+
+export const WithoutLabelAndHint: Story = {
+  render: () => <Select options={namedOptions} placeholder="Select a city" />,
+};
+
 export const Error: Story = {
   args: {
     error: true,
     hint: "Hint",
-    showHint: true,
   },
 };
 

package/src/components/Select/Select.tsx

@@ -6,7 +6,6 @@ import {
   useRef,
   useState,
   type ComponentRef,
-  type ReactNode,
 } from "react";
 import {
   Platform,
@@ -26,6 +25,7 @@ import { Checkbox } from "../Checkbox";
 import { ChevronDownIcon, SearchIcon, UserIcon } from "../../icons";
 import { colors, selectTypography } from "../../theme";
 import { mergeRefs } from "../../utils/mergeRefs";
+import { renderStatefulIcon, type StatefulIcon } from "../../utils/renderStatefulIcon";
 import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
 
 export type SelectOption = {
@@ -33,6 +33,8 @@ export type SelectOption = {
   value: string;
 };
 
+export type SelectIcon = StatefulIcon;
+
 type SelectBaseProps = Omit<ViewProps, "style" | "children"> & {
   label?: string;
   showLabel?: boolean;
@@ -45,7 +47,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;
@@ -244,11 +246,11 @@ function MultiValueChips({ options, disabled, onRemove }: MultiValueChipsProps)
 export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
   function Select(props, forwardedRef) {
     const {
-      label = "Label",
+      label,
       showLabel = true,
       hint,
-      showHint = false,
-      placeholder = "placeholder",
+      showHint = true,
+      placeholder,
       options,
       open: openProp,
       defaultOpen = false,
@@ -504,12 +506,10 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
       setOpen,
     ]);
 
-    const leftIconNode = leftIcon ?? (
-      <UserIcon
-        size={ICON_SIZE}
-        color={error ? colors.red : isOpen ? colors.primary : colors.grey100}
-      />
-    );
+    const leftIconNode = renderStatefulIcon(leftIcon, UserIcon, {
+      size: ICON_SIZE,
+      color: error ? colors.red : isOpen ? colors.primary : colors.grey100,
+    });
     const hasLeftIcon = showLeftIcon || leftIcon != null;
 
     const triggerBorderColor = error

package/src/components/Select/index.ts

@@ -1,2 +1,8 @@
 export { Select } from "./Select";
-export type { SelectProps, SelectOption, SelectSingleProps, SelectMultipleProps } from "./Select";
+export type {
+  SelectIcon,
+  SelectProps,
+  SelectOption,
+  SelectSingleProps,
+  SelectMultipleProps,
+} from "./Select";

package/src/components/index.ts

@@ -31,10 +31,16 @@ export type {
 } from "./DatePicker";
 
 export { Input } from "./Input";
-export type { InputProps, InputSize } from "./Input";
+export type { InputIcon, InputProps, InputSize } from "./Input";
 
 export { Select } from "./Select";
-export type { SelectOption, SelectProps, SelectSingleProps, SelectMultipleProps } from "./Select";
+export type {
+  SelectIcon,
+  SelectOption,
+  SelectProps,
+  SelectSingleProps,
+  SelectMultipleProps,
+} from "./Select";
 
 export { Textarea } from "./Textarea";
 export type { TextareaProps } from "./Textarea";

package/src/icons/Icons.stories.tsx

@@ -1,7 +1,9 @@
+import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { View, Text, StyleSheet } from "react-native";
+import { Pressable, View, Text, StyleSheet } from "react-native";
 import { colors } from "../theme";
 import { Icon } from "./Icon";
+import { MenuIcon } from "./Menu";
 import {
   getIconsByGroup,
   iconGroupNames,
@@ -140,6 +142,30 @@ export const Social: Story = {
   ),
 };
 
+function AnimatedMenuPreview() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <View style={styles.menuPreview}>
+      <Pressable
+        accessibilityLabel={open ? "Close menu" : "Open menu"}
+        accessibilityRole="button"
+        accessibilityState={{ expanded: open }}
+        onPress={() => setOpen((current) => !current)}
+        style={styles.menuButton}
+      >
+        <MenuIcon open={open} size={24} />
+      </Pressable>
+      <Text style={styles.label}>Click to {open ? "close" : "open"}</Text>
+    </View>
+  );
+}
+
+export const AnimatedMenu: Story = {
+  name: "Animated / Menu",
+  render: () => <AnimatedMenuPreview />,
+};
+
 const styles = StyleSheet.create({
   sections: {
     gap: 32,
@@ -171,4 +197,16 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontFamily: "Noto Sans Armenian",
   },
+  menuPreview: {
+    alignItems: "center",
+    gap: 12,
+  },
+  menuButton: {
+    width: 48,
+    height: 48,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 24,
+    backgroundColor: colors.primary,
+  },
 });

package/src/icons/Menu/MenuIcon.tsx

@@ -0,0 +1,30 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { MENU_CLOSE_PATH, MENU_PATH } from "./menuPath";
+
+export { MENU_CLOSE_PATH, MENU_PATH } from "./menuPath";
+
+export interface MenuIconProps extends IconProps {
+  open?: boolean;
+}
+
+export function MenuIcon({
+  size = 19,
+  color = colors.white,
+  strokeWidth = 2,
+  open = false,
+}: MenuIconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 19 19" fill="none">
+      <Path
+        d={open ? MENU_CLOSE_PATH : MENU_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        transform={open ? "translate(1.5 1.5)" : "translate(0 2.5)"}
+      />
+    </Svg>
+  );
+}

package/src/icons/Menu/MenuIcon.web.tsx

@@ -0,0 +1,58 @@
+import { colors } from "../../theme";
+import type { MenuIconProps } from "./MenuIcon";
+import { MENU_CLOSE_PATH, MENU_PATH } from "./menuPath";
+
+export function MenuIcon({
+  size = 19,
+  color = colors.white,
+  strokeWidth = 2,
+  open = false,
+}: MenuIconProps) {
+  const transition = "opacity 180ms ease, transform 180ms ease";
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 19 19"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <g transform="translate(0 2.5)">
+        <path
+          d={MENU_PATH}
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          style={{
+            opacity: open ? 0 : 1,
+            transform: open ? "rotate(45deg) scale(0.75)" : "rotate(0deg) scale(1)",
+            transformBox: "fill-box",
+            transformOrigin: "center",
+            transition,
+          }}
+        />
+      </g>
+      <g transform="translate(1.5 1.5)">
+        <path
+          d={MENU_CLOSE_PATH}
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          style={{
+            opacity: open ? 1 : 0,
+            transform: open ? "rotate(0deg) scale(1)" : "rotate(-45deg) scale(0.75)",
+            transformBox: "fill-box",
+            transformOrigin: "center",
+            transition,
+          }}
+        />
+      </g>
+    </svg>
+  );
+}
+
+export { MENU_CLOSE_PATH, MENU_PATH } from "./menuPath";

package/src/icons/Menu/index.ts

@@ -0,0 +1,2 @@
+export { MenuIcon, MENU_CLOSE_PATH, MENU_PATH } from "./MenuIcon";
+export type { MenuIconProps } from "./MenuIcon";

package/src/icons/Menu/menuPath.ts

@@ -0,0 +1,3 @@
+export const MENU_PATH = "M8 12.6667H17.3333M1 6.83332H17.3333M8 0.999985H17.3333";
+
+export const MENU_CLOSE_PATH = "M15 1L1 15M1 1L15 15";

package/src/icons/index.ts

@@ -28,6 +28,8 @@ export { LayoutGridIcon } from "./LayoutGrid";
 export { LinkedInIcon } from "./LinkedIn";
 export { LogOutIcon } from "./LogOut";
 export { MailIcon } from "./Mail";
+export { MenuIcon } from "./Menu";
+export type { MenuIconProps } from "./Menu";
 export { NavigateIcon } from "./Navigate";
 export { PhoneIcon } from "./Phone";
 export { PlusIcon } from "./Plus";

package/src/icons/registry.ts

@@ -21,6 +21,7 @@ import { LayoutGridIcon } from "./LayoutGrid";
 import { LinkedInIcon } from "./LinkedIn";
 import { LogOutIcon } from "./LogOut";
 import { MailIcon } from "./Mail";
+import { MenuIcon } from "./Menu";
 import { MinusIcon } from "./Minus";
 import { NavigateIcon } from "./Navigate";
 import { PhoneIcon } from "./Phone";
@@ -60,6 +61,7 @@ export const icons = {
   linkedin: LinkedInIcon,
   logOut: LogOutIcon,
   mail: MailIcon,
+  menu: MenuIcon,
   minus: MinusIcon,
   navigate: NavigateIcon,
   phone: PhoneIcon,
@@ -80,7 +82,7 @@ export type IconName = keyof typeof icons;
 export const iconNames = Object.keys(icons) as IconName[];
 
 export const iconGroups = {
-  navigation: ["arrowRight", "chevronDown", "chevronLeft", "home", "navigate"],
+  navigation: ["arrowRight", "chevronDown", "chevronLeft", "home", "menu", "navigate"],
   actions: [
     "show",
     "bell",

package/src/index.ts

@@ -36,8 +36,10 @@ export type {
   DatePickerSingleProps,
   DatePickerRangeProps,
   DateRange,
+  InputIcon,
   InputProps,
   InputSize,
+  SelectIcon,
   SelectOption,
   SelectProps,
   SelectSingleProps,
@@ -87,6 +89,7 @@ export {
   LinkedInIcon,
   LogOutIcon,
   MailIcon,
+  MenuIcon,
   MinusIcon,
   NavigateIcon,
   PhoneIcon,
@@ -107,6 +110,7 @@ export type {
   IconGroup,
   IconComponent,
   IconByNameProps,
+  MenuIconProps,
   StarIconProps,
 } from "./icons";
 

package/src/utils/renderStatefulIcon.tsx

@@ -0,0 +1,25 @@
+import { cloneElement, isValidElement, type ReactNode } from "react";
+import type { IconComponent, IconProps } from "../icons";
+
+export type StatefulIcon = ReactNode | IconComponent;
+
+export function renderStatefulIcon(
+  icon: StatefulIcon | undefined,
+  FallbackIcon: IconComponent,
+  props: Pick<IconProps, "color" | "size">,
+) {
+  if (icon == null) {
+    return <FallbackIcon {...props} />;
+  }
+
+  if (typeof icon === "function") {
+    const Icon = icon as IconComponent;
+    return <Icon {...props} />;
+  }
+
+  if (isValidElement<IconProps>(icon)) {
+    return cloneElement(icon, props);
+  }
+
+  return icon;
+}