@ecohouse/ui 0.1.11 → 0.1.12

package/package.json

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

@@ -87,6 +87,7 @@ export {
   LinkedInIcon,
   LogOutIcon,
   MailIcon,
+  MenuIcon,
   MinusIcon,
   NavigateIcon,
   PhoneIcon,
@@ -107,6 +108,7 @@ export type {
   IconGroup,
   IconComponent,
   IconByNameProps,
+  MenuIconProps,
   StarIconProps,
 } from "./icons";