@ecohouse/ui 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "private": false,
   "description": "Cross-platform presentation-only UI components for EcoHouse (React Native + React Native Web)",

package/src/components/Avatar/Avatar.tsx

@@ -6,7 +6,6 @@ import {
   useRef,
   useState,
   type ComponentRef,
-  type ReactNode,
 } from "react";
 import {
   Image,
@@ -24,20 +23,17 @@ import { ChevronDownIcon, UserIcon } from "../../icons";
 import { avatarTypography, colors } from "../../theme";
 import { mergeRefs } from "../../utils/mergeRefs";
 import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+import { MenuItem, type MenuItemProps } from "../../primitives";
 
-export interface AvatarMenuItem {
-  /** Stable identity for React keys / hover tracking; falls back to `label`. */
+/** Data shape for an Avatar dropdown option — same fields as `MenuItem`. */
+export type AvatarMenuItem = Pick<
+  MenuItemProps,
+  "icon" | "label" | "disabled" | "backgroundColor" | "hoverColor"
+> & {
+  /** Stable identity for React keys; falls back to `label`. */
   key?: string;
-  /** Leading icon, e.g. `<CalendarIcon />` — pass it pre-colored. */
-  icon?: ReactNode;
-  label: string;
   onPress: () => void;
-  disabled?: boolean;
-  /** Row background at rest. Defaults to transparent. */
-  backgroundColor?: string;
-  /** Row background on hover/press. Defaults to `colors.grey600`. */
-  hoverColor?: string;
-}
+};
 
 export interface AvatarProps extends Omit<
   PressableProps,
@@ -58,7 +54,7 @@ export interface AvatarProps extends Omit<
   /**
    * Account-menu options, supplied entirely by the consumer (icon, label,
    * action, and per-item colors). When set, pressing the chip opens a
-   * dropdown listing them.
+   * dropdown listing them via `MenuItem`.
    */
   menuItems?: AvatarMenuItem[];
   /** Controlled open state for the menu. */
@@ -77,8 +73,6 @@ const CONTAINER_RADIUS = 71;
 const CHEVRON_SIZE = 20;
 const FALLBACK_ICON_SIZE = 20;
 const MENU_RADIUS = 16;
-const MENU_ITEM_RADIUS = 12;
-const MENU_ITEM_ICON_SIZE = 16;
 
 export const Avatar = forwardRef<ComponentRef<typeof View>, AvatarProps>(function Avatar(
   {
@@ -105,9 +99,9 @@ export const Avatar = forwardRef<ComponentRef<typeof View>, AvatarProps>(functio
   const containerRef = useRef<ComponentRef<typeof View>>(null);
   const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
   const [imageFailed, setImageFailed] = useState(false);
-  const [hoveredKey, setHoveredKey] = useState<string | null>(null);
 
-  const hasMenu = Boolean(menuItems && menuItems.length > 0);
+  const resolvedMenuItems = menuItems ?? [];
+  const hasMenu = resolvedMenuItems.length > 0;
   const isInteractive = onPress != null || hasMenu;
   const isOpenControlled = typeof openProp === "boolean";
   const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
@@ -119,7 +113,6 @@ export const Avatar = forwardRef<ComponentRef<typeof View>, AvatarProps>(functio
     (next: boolean) => {
       if (!isOpenControlled) setUncontrolledOpen(next);
       onOpenChange?.(next);
-      if (!next) setHoveredKey(null);
     },
     [isOpenControlled, onOpenChange],
   );
@@ -237,39 +230,18 @@ export const Avatar = forwardRef<ComponentRef<typeof View>, AvatarProps>(functio
 
       {hasMenu && isOpen ? (
         <View style={[styles.menu, menuWidth != null && { right: undefined, width: menuWidth }]}>
-          {menuItems!.map((item) => {
+          {resolvedMenuItems.map((item) => {
             const itemKey = item.key ?? item.label;
-            const isHovered = hoveredKey === itemKey;
-            const backgroundColor = isHovered
-              ? (item.hoverColor ?? colors.grey600)
-              : (item.backgroundColor ?? "transparent");
-
             return (
-              <Pressable
+              <MenuItem
                 key={itemKey}
-                onPress={() => handleItemPress(item)}
+                icon={item.icon}
+                label={item.label}
                 disabled={item.disabled}
-                onHoverIn={() => setHoveredKey(itemKey)}
-                onHoverOut={() =>
-                  setHoveredKey((current) => (current === itemKey ? null : current))
-                }
-                onPressIn={() => setHoveredKey(itemKey)}
-                onPressOut={() =>
-                  setHoveredKey((current) => (current === itemKey ? null : current))
-                }
-                accessibilityRole="menuitem"
-                accessibilityState={{ disabled: item.disabled }}
-                style={[
-                  styles.menuItem,
-                  { backgroundColor },
-                  item.disabled && styles.menuItemDisabled,
-                ]}
-              >
-                {item.icon ? <View style={styles.menuItemIcon}>{item.icon}</View> : null}
-                <Text style={styles.menuItemLabel} numberOfLines={1}>
-                  {item.label}
-                </Text>
-              </Pressable>
+                backgroundColor={item.backgroundColor}
+                hoverColor={item.hoverColor}
+                onPress={() => handleItemPress(item)}
+              />
             );
           })}
         </View>
@@ -362,28 +334,4 @@ const styles = StyleSheet.create({
       },
     }),
   },
-  menuItem: {
-    minHeight: 40,
-    borderRadius: MENU_ITEM_RADIUS,
-    paddingVertical: 12,
-    paddingHorizontal: 12,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-  },
-  menuItemDisabled: {
-    opacity: 0.5,
-  },
-  menuItemIcon: {
-    width: MENU_ITEM_ICON_SIZE,
-    height: MENU_ITEM_ICON_SIZE,
-    alignItems: "center",
-    justifyContent: "center",
-    flexShrink: 0,
-  },
-  menuItemLabel: {
-    ...avatarTypography.menuItem,
-    color: colors.white,
-    flex: 1,
-  },
 });

package/src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { View, StyleSheet } from "react-native";
+import { HomeIcon } from "../../icons";
+import { Badge } from "./Badge";
+
+const meta = {
+  title: "Components/Badge",
+  component: Badge,
+  args: {
+    label: "Label",
+    variant: "default",
+    icon: HomeIcon,
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "transparent"],
+    },
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Transparent: Story = {
+  args: { variant: "transparent" },
+};
+
+export const WithNoIcon: Story = {
+  args: { icon: undefined },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <View style={storyStyles.column}>
+      <Badge label="Label" icon={HomeIcon} variant="default" />
+      <Badge label="Label" icon={HomeIcon} variant="transparent" />
+    </View>
+  ),
+};
+
+const storyStyles = StyleSheet.create({
+  column: {
+    gap: 12,
+    alignItems: "flex-start",
+  },
+});

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,131 @@
+import { forwardRef, useMemo, useRef, type ComponentRef } from "react";
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import type { IconComponent } from "../../icons";
+import { badgeTypography, colors } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export type BadgeVariant = "default" | "transparent";
+
+export interface BadgeProps extends Omit<ViewProps, "style" | "children"> {
+  label: string;
+  variant?: BadgeVariant;
+  icon?: IconComponent;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const ICON_SIZE = 20;
+
+const webBlurStyle: ViewStyle =
+  Platform.OS === "web"
+    ? ({
+        backdropFilter: "blur(10.3px)",
+        WebkitBackdropFilter: "blur(10.3px)",
+      } as ViewStyle)
+    : {};
+
+/**
+ * Variant chrome — icon color is part of the variant, not a separate prop.
+ * - default: grey fill, no border, white icon
+ * - transparent: muted white fill + 1px border, primary icon, blur on web
+ */
+const variantConfig = {
+  default: {
+    backgroundColor: colors.grey750,
+    iconColor: colors.white,
+    border: false,
+    blur: false,
+  },
+  transparent: {
+    backgroundColor: colors.whiteAlpha5,
+    iconColor: colors.primary,
+    border: true,
+    blur: true,
+  },
+} as const satisfies Record<
+  BadgeVariant,
+  { backgroundColor: string; iconColor: string; border: boolean; blur: boolean }
+>;
+
+export const Badge = forwardRef<ComponentRef<typeof View>, BadgeProps>(function Badge(
+  { label, variant = "default", icon: Icon, style, className, accessibilityLabel, ...rest },
+  forwardedRef,
+) {
+  const containerRef = useRef<ComponentRef<typeof View>>(null);
+  const preset = variantConfig[variant];
+  const resolvedClassName = className?.trim() || undefined;
+  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+
+  useApplyWebClassName(containerRef, resolvedClassName);
+
+  return (
+    <View
+      {...rest}
+      ref={setContainerRef}
+      style={[
+        styles.base,
+        { backgroundColor: preset.backgroundColor },
+        preset.border ? styles.transparentBorder : null,
+        preset.blur ? webBlurStyle : null,
+        style,
+      ]}
+      accessibilityRole="text"
+      accessibilityLabel={accessibilityLabel ?? label}
+    >
+      {Icon ? (
+        <View style={styles.iconSlot}>
+          <Icon size={ICON_SIZE} color={preset.iconColor} />
+        </View>
+      ) : null}
+
+      <Text style={[styles.label, Platform.OS === "android" ? styles.labelAndroid : null]}>
+        {label}
+      </Text>
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    minHeight: 44,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    gap: 12,
+    borderRadius: 79,
+    overflow: "hidden",
+    borderWidth: 0,
+    borderColor: "transparent",
+    borderStyle: "solid",
+  },
+  transparentBorder: {
+    borderWidth: 1,
+    borderColor: colors.whiteAlpha5,
+    borderStyle: "solid",
+  },
+  iconSlot: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  label: {
+    ...badgeTypography,
+    color: colors.white,
+  },
+  labelAndroid: {
+    includeFontPadding: false,
+  },
+});

package/src/components/Badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge } from "./Badge";
+export type { BadgeProps, BadgeVariant } from "./Badge";

package/src/components/Counter/Counter.stories.tsx

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Counter } from "./Counter";
+
+const meta = {
+  title: "Components/Counter",
+  component: Counter,
+  args: {
+    defaultValue: 1,
+    min: 1,
+  },
+  argTypes: {
+    value: { control: "number" },
+    defaultValue: { control: "number" },
+    min: { control: "number" },
+    max: { control: "number" },
+    step: { control: "number" },
+    disabled: { control: "boolean" },
+    onValueChange: { action: "valueChange" },
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof Counter>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const AtMaximum: Story = {
+  args: { defaultValue: 5, max: 5 },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+};
+
+function ControlledCounter() {
+  const [value, setValue] = useState(1);
+  return <Counter value={value} min={1} max={5} onValueChange={setValue} />;
+}
+
+export const Controlled: Story = {
+  render: () => <ControlledCounter />,
+};

package/src/components/Counter/Counter.tsx

@@ -0,0 +1,135 @@
+import { forwardRef, useMemo, useRef, useState, type ComponentRef } from "react";
+import {
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import { MinusIcon, PlusIcon } from "../../icons";
+import { colors, counterTypography } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface CounterProps extends Omit<ViewProps, "style" | "children"> {
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+  hitSlop?: PressableProps["hitSlop"];
+}
+
+const BUTTON_SIZE = 32;
+
+const webBlurStyle: ViewStyle =
+  Platform.OS === "web"
+    ? ({
+        backdropFilter: "blur(20px)",
+        WebkitBackdropFilter: "blur(20px)",
+      } as ViewStyle)
+    : {};
+
+function clamp(value: number, min: number, max?: number) {
+  return Math.max(min, max === undefined ? value : Math.min(value, max));
+}
+
+export const Counter = forwardRef<ComponentRef<typeof View>, CounterProps>(function Counter(
+  {
+    value,
+    defaultValue,
+    onValueChange,
+    min = 1,
+    max,
+    step = 1,
+    disabled = false,
+    style,
+    className,
+    hitSlop,
+    ...rest
+  },
+  forwardedRef,
+) {
+  const containerRef = useRef<ComponentRef<typeof View>>(null);
+  const isControlled = value !== undefined;
+  const [uncontrolledValue, setUncontrolledValue] = useState(() =>
+    clamp(defaultValue ?? min, min, max),
+  );
+  const resolvedValue = clamp(isControlled ? value : uncontrolledValue, min, max);
+  const resolvedClassName = className?.trim() || undefined;
+  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+  const decrementDisabled = disabled || resolvedValue <= min;
+  const incrementDisabled = disabled || (max !== undefined && resolvedValue >= max);
+
+  useApplyWebClassName(containerRef, resolvedClassName);
+
+  const updateValue = (nextValue: number) => {
+    const next = clamp(nextValue, min, max);
+    if (next === resolvedValue) return;
+    if (!isControlled) setUncontrolledValue(next);
+    onValueChange?.(next);
+  };
+
+  return (
+    <View {...rest} ref={setContainerRef} style={[styles.base, style]}>
+      <Pressable
+        disabled={decrementDisabled}
+        hitSlop={hitSlop}
+        onPress={() => updateValue(resolvedValue - step)}
+        accessibilityRole="button"
+        accessibilityLabel="Decrease value"
+        accessibilityState={{ disabled: decrementDisabled }}
+        style={[styles.button, webBlurStyle, decrementDisabled && styles.buttonDisabled]}
+      >
+        <MinusIcon />
+      </Pressable>
+
+      <Text style={styles.value}>{resolvedValue}</Text>
+
+      <Pressable
+        disabled={incrementDisabled}
+        hitSlop={hitSlop}
+        onPress={() => updateValue(resolvedValue + step)}
+        accessibilityRole="button"
+        accessibilityLabel="Increase value"
+        accessibilityState={{ disabled: incrementDisabled }}
+        style={[styles.button, webBlurStyle, incrementDisabled && styles.buttonDisabled]}
+      >
+        <PlusIcon />
+      </Pressable>
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: 17,
+  },
+  button: {
+    width: BUTTON_SIZE,
+    height: BUTTON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1,
+    borderColor: colors.whiteAlpha10,
+    borderRadius: 39,
+  },
+  buttonDisabled: {
+    opacity: 0.25,
+  },
+  value: {
+    ...counterTypography,
+    color: colors.white,
+  },
+});

package/src/components/Counter/index.ts

@@ -0,0 +1,2 @@
+export { Counter } from "./Counter";
+export type { CounterProps } from "./Counter";

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

@@ -0,0 +1,172 @@
+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 { DatePicker, type DateRange } from "./DatePicker";
+import { colors } from "../../theme";
+
+const meta = {
+  title: "Components/DatePicker",
+  component: DatePicker,
+  args: {
+    placeholder: "Select date",
+    defaultOpen: false,
+    disabled: false,
+    range: false,
+    onValueChange: fn(),
+    onOpenChange: fn(),
+  },
+  argTypes: {
+    range: { control: "boolean" },
+    onValueChange: { action: "valueChange" },
+    onOpenChange: { action: "openChange" },
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof DatePicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Open: Story = {
+  args: { defaultOpen: true },
+};
+
+export const WithValue: Story = {
+  args: {
+    defaultValue: new Date(2026, 8, 15),
+    defaultOpen: true,
+  },
+};
+
+export const Range: Story = {
+  args: {
+    range: true,
+    placeholder: "Select dates",
+    defaultValue: { start: new Date(2026, 8, 15), end: new Date(2026, 8, 24) },
+    defaultOpen: true,
+  },
+};
+
+export const RangeInProgress: Story = {
+  args: {
+    range: true,
+    placeholder: "Select dates",
+    defaultValue: { start: new Date(2026, 8, 15), end: null },
+    defaultOpen: true,
+  },
+};
+
+export const MinMaxDate: Story = {
+  args: {
+    defaultOpen: true,
+    minDate: new Date(2026, 8, 10),
+    maxDate: new Date(2026, 8, 20),
+    defaultVisibleMonth: new Date(2026, 8, 1),
+  },
+};
+
+export const KeepOpenOnSelect: Story = {
+  args: {
+    defaultOpen: true,
+    closeOnSelect: false,
+  },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true, defaultValue: new Date(2026, 8, 15) },
+};
+
+/** Verifies that a disabled DatePicker stays non-interactive even when forced open. */
+export const DisabledOpen: Story = {
+  args: {
+    disabled: true,
+    defaultOpen: true,
+    defaultValue: new Date(2026, 8, 15),
+  },
+};
+
+function ControlledDatePicker() {
+  const [value, setValue] = useState<Date | null>(null);
+  const [open, setOpen] = useState(false);
+
+  return (
+    <View style={storyStyles.column}>
+      <DatePicker
+        placeholder="Select date"
+        value={value}
+        onValueChange={setValue}
+        open={open}
+        onOpenChange={setOpen}
+      />
+      <Text style={storyStyles.meta}>
+        value: {value ? value.toDateString() : "—"} · open: {String(open)}
+      </Text>
+    </View>
+  );
+}
+
+function ControlledRangeDatePicker() {
+  const [value, setValue] = useState<DateRange>({ start: null, end: null });
+  const [open, setOpen] = useState(true);
+
+  return (
+    <View style={storyStyles.column}>
+      <DatePicker
+        range
+        placeholder="Select dates"
+        value={value}
+        onValueChange={setValue}
+        open={open}
+        onOpenChange={setOpen}
+      />
+      <Text style={storyStyles.meta}>
+        {value.start ? value.start.toDateString() : "—"} →{" "}
+        {value.end ? value.end.toDateString() : "—"}
+      </Text>
+    </View>
+  );
+}
+
+export const Controlled: Story = {
+  render: () => <ControlledDatePicker />,
+};
+
+export const ControlledRange: Story = {
+  render: () => <ControlledRangeDatePicker />,
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <View style={storyStyles.row}>
+      <DatePicker placeholder="Select date" />
+      <DatePicker placeholder="Select date" defaultOpen defaultValue={new Date(2026, 8, 15)} />
+      <DatePicker
+        range
+        placeholder="Select dates"
+        defaultValue={{ start: new Date(2026, 8, 15), end: new Date(2026, 8, 24) }}
+        defaultOpen
+      />
+    </View>
+  ),
+};
+
+const storyStyles = StyleSheet.create({
+  column: {
+    gap: 12,
+    alignItems: "flex-start",
+  },
+  row: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 24,
+    alignItems: "flex-start",
+  },
+  meta: {
+    color: colors.grey100,
+    fontSize: 12,
+  },
+});