@ecohouse/ui 0.1.4 → 0.1.6

package/src/icons/index.ts

@@ -10,10 +10,12 @@ export { BagIcon } from "./Bag";
 export { BellIcon } from "./Bell";
 export { BuildingIcon } from "./Building";
 export { CalendarIcon } from "./Calendar";
+export { CalendarOutlineIcon } from "./CalendarOutline";
 export { CameraIcon } from "./Camera";
 export { CheckIcon } from "./Check";
 export { CheckBadgeIcon } from "./CheckBadge";
 export { ChevronDownIcon } from "./ChevronDown";
+export { ChevronLeftIcon } from "./ChevronLeft";
 export { ClockIcon } from "./Clock";
 export { FacebookIcon } from "./Facebook";
 export { HeartIcon } from "./Heart";
@@ -27,8 +29,12 @@ export { LogOutIcon } from "./LogOut";
 export { MailIcon } from "./Mail";
 export { NavigateIcon } from "./Navigate";
 export { PhoneIcon } from "./Phone";
+export { PlusIcon } from "./Plus";
+export { MinusIcon } from "./Minus";
 export { SearchIcon } from "./Search";
 export { SettingsIcon } from "./Settings";
 export { ShowIcon } from "./Show";
+export { SidebarIcon } from "./Sidebar";
 export { UserIcon } from "./User";
+export { UsersAltIcon } from "./UsersAlt";
 export { VideoIcon } from "./Video";

package/src/icons/registry.ts

@@ -3,10 +3,12 @@ import { BagIcon } from "./Bag";
 import { BellIcon } from "./Bell";
 import { BuildingIcon } from "./Building";
 import { CalendarIcon } from "./Calendar";
+import { CalendarOutlineIcon } from "./CalendarOutline";
 import { CameraIcon } from "./Camera";
 import { CheckIcon } from "./Check";
 import { CheckBadgeIcon } from "./CheckBadge";
 import { ChevronDownIcon } from "./ChevronDown";
+import { ChevronLeftIcon } from "./ChevronLeft";
 import { ClockIcon } from "./Clock";
 import { FacebookIcon } from "./Facebook";
 import { HeartIcon } from "./Heart";
@@ -18,12 +20,16 @@ import { LayoutGridIcon } from "./LayoutGrid";
 import { LinkedInIcon } from "./LinkedIn";
 import { LogOutIcon } from "./LogOut";
 import { MailIcon } from "./Mail";
+import { MinusIcon } from "./Minus";
 import { NavigateIcon } from "./Navigate";
 import { PhoneIcon } from "./Phone";
+import { PlusIcon } from "./Plus";
 import { SearchIcon } from "./Search";
 import { SettingsIcon } from "./Settings";
 import { ShowIcon } from "./Show";
+import { SidebarIcon } from "./Sidebar";
 import { UserIcon } from "./User";
+import { UsersAltIcon } from "./UsersAlt";
 import { VideoIcon } from "./Video";
 import type { IconComponent } from "./types";
 
@@ -33,10 +39,12 @@ export const icons = {
   bell: BellIcon,
   building: BuildingIcon,
   calendar: CalendarIcon,
+  calendarOutline: CalendarOutlineIcon,
   camera: CameraIcon,
   check: CheckIcon,
   checkBadge: CheckBadgeIcon,
   chevronDown: ChevronDownIcon,
+  chevronLeft: ChevronLeftIcon,
   clock: ClockIcon,
   facebook: FacebookIcon,
   heart: HeartIcon,
@@ -48,12 +56,16 @@ export const icons = {
   linkedin: LinkedInIcon,
   logOut: LogOutIcon,
   mail: MailIcon,
+  minus: MinusIcon,
   navigate: NavigateIcon,
   phone: PhoneIcon,
+  plus: PlusIcon,
   search: SearchIcon,
   settings: SettingsIcon,
   show: ShowIcon,
+  sidebar: SidebarIcon,
   user: UserIcon,
+  usersAlt: UsersAltIcon,
   video: VideoIcon,
 } as const satisfies Record<string, IconComponent>;
 
@@ -62,12 +74,25 @@ export type IconName = keyof typeof icons;
 export const iconNames = Object.keys(icons) as IconName[];
 
 export const iconGroups = {
-  navigation: ["arrowRight", "chevronDown", "home", "navigate"],
-  actions: ["show", "bell", "camera", "key", "check", "checkBadge", "search", "calendar", "heart"],
-  objects: ["bag", "building", "clock", "user", "video"],
+  navigation: ["arrowRight", "chevronDown", "chevronLeft", "home", "navigate"],
+  actions: [
+    "show",
+    "bell",
+    "camera",
+    "key",
+    "check",
+    "checkBadge",
+    "search",
+    "calendar",
+    "calendarOutline",
+    "heart",
+    "minus",
+    "plus",
+  ],
+  objects: ["bag", "building", "clock", "user", "usersAlt", "video"],
   communication: ["mail", "phone"],
   social: ["facebook", "instagram", "linkedin"],
-  interface: ["layoutGrid", "settings", "helpCircle", "logOut"],
+  interface: ["layoutGrid", "sidebar", "settings", "helpCircle", "logOut"],
 } as const satisfies Record<string, readonly IconName[]>;
 
 export type IconGroup = keyof typeof iconGroups;

package/src/index.ts

@@ -1,12 +1,35 @@
-export { Avatar, Button, Checkbox, Input, Select, Textarea, Toggle } from "./components";
+export {
+  Avatar,
+  Badge,
+  Counter,
+  SegmentedToggle,
+  StatCard,
+  Button,
+  Checkbox,
+  DatePicker,
+  Input,
+  Select,
+  Textarea,
+  Toggle,
+} from "./components";
 export type {
   AvatarProps,
   AvatarMenuItem,
+  BadgeProps,
+  BadgeVariant,
+  CounterProps,
+  SegmentedToggleOption,
+  SegmentedToggleProps,
+  StatCardProps,
   ButtonProps,
   ButtonSize,
   ButtonVariant,
   CheckboxProps,
   CheckboxVariant,
+  DatePickerProps,
+  DatePickerSingleProps,
+  DatePickerRangeProps,
+  DateRange,
   InputProps,
   InputSize,
   SelectOption,
@@ -17,6 +40,9 @@ export type {
   ToggleProps,
 } from "./components";
 
+export { MenuItem } from "./primitives";
+export type { MenuItemProps } from "./primitives";
+
 export {
   Icon,
   icons,
@@ -29,10 +55,12 @@ export {
   BellIcon,
   BuildingIcon,
   CalendarIcon,
+  CalendarOutlineIcon,
   CameraIcon,
   CheckIcon,
   CheckBadgeIcon,
   ChevronDownIcon,
+  ChevronLeftIcon,
   ClockIcon,
   FacebookIcon,
   HeartIcon,
@@ -44,12 +72,16 @@ export {
   LinkedInIcon,
   LogOutIcon,
   MailIcon,
+  MinusIcon,
   NavigateIcon,
   PhoneIcon,
+  PlusIcon,
   SearchIcon,
   SettingsIcon,
   ShowIcon,
+  SidebarIcon,
   UserIcon,
+  UsersAltIcon,
   VideoIcon,
 } from "./icons";
 export type { IconProps, IconName, IconGroup, IconComponent, IconByNameProps } from "./icons";
@@ -58,7 +90,12 @@ export {
   colors,
   grey,
   avatarTypography,
+  badgeTypography,
+  statCardTypography,
+  segmentedToggleTypography,
+  counterTypography,
   buttonTypography,
+  datePickerTypography,
   inputTypography,
   selectTypography,
   textareaTypography,

package/src/primitives/MenuItem/MenuItem.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { View, StyleSheet } from "react-native";
+import { MenuItem } from "./MenuItem";
+import {
+  CalendarIcon,
+  HeartIcon,
+  HelpCircleIcon,
+  LayoutGridIcon,
+  LogOutIcon,
+  SettingsIcon,
+  VideoIcon,
+} from "../../icons";
+import { colors } from "../../theme";
+
+const meta = {
+  title: "Primitives/MenuItem",
+  component: MenuItem,
+  args: {
+    label: "Bookings",
+    icon: <CalendarIcon size={16} />,
+    onPress: fn(),
+    disabled: false,
+  },
+  argTypes: {
+    disabled: { control: "boolean" },
+    backgroundColor: { control: "color" },
+    hoverColor: { control: "color" },
+    onPress: { action: "pressed" },
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+  decorators: [
+    (Story) => (
+      <View style={storyStyles.frame}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<typeof MenuItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithoutIcon: Story = {
+  args: { icon: undefined },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+};
+
+/** Optional resting / hover colors — transparent + grey600 by default. */
+export const CustomColors: Story = {
+  args: {
+    label: "Log out",
+    icon: <LogOutIcon size={16} />,
+    backgroundColor: colors.redMuted,
+    hoverColor: colors.redHover,
+  },
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <View style={storyStyles.column}>
+      <MenuItem label="Bookings" icon={<CalendarIcon size={16} />} onPress={fn()} />
+      <MenuItem label="Digital keys" icon={<LayoutGridIcon size={16} />} onPress={fn()} />
+      <MenuItem label="Cameras" icon={<VideoIcon size={16} />} onPress={fn()} />
+      <MenuItem label="Favorites" icon={<HeartIcon size={16} />} onPress={fn()} />
+      <MenuItem label="Support" icon={<HelpCircleIcon size={16} />} onPress={fn()} />
+      <MenuItem label="Settings" icon={<SettingsIcon size={16} />} onPress={fn()} />
+      <MenuItem
+        label="Log out"
+        icon={<LogOutIcon size={16} />}
+        onPress={fn()}
+        backgroundColor={colors.redMuted}
+        hoverColor={colors.redHover}
+      />
+      <MenuItem label="Disabled" icon={<SettingsIcon size={16} />} disabled onPress={fn()} />
+    </View>
+  ),
+};
+
+const storyStyles = StyleSheet.create({
+  frame: {
+    width: 282,
+    padding: 8,
+    borderRadius: 16,
+    gap: 8,
+    backgroundColor: colors.grey700,
+  },
+  column: {
+    gap: 8,
+  },
+});

package/src/primitives/MenuItem/MenuItem.tsx

@@ -0,0 +1,138 @@
+import { forwardRef, useMemo, useRef, useState, type ComponentRef, type ReactNode } from "react";
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type GestureResponderEvent,
+  type PressableProps,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
+import { avatarTypography, colors } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface MenuItemProps extends Omit<
+  PressableProps,
+  "onPress" | "disabled" | "style" | "children" | "hitSlop"
+> {
+  /** Leading icon, e.g. `<CalendarIcon size={16} />` — pass it pre-colored. */
+  icon?: ReactNode;
+  label: string;
+  onPress?: (event: GestureResponderEvent) => void;
+  disabled?: boolean;
+  /** Row background at rest. Defaults to transparent. */
+  backgroundColor?: string;
+  /** Row background on hover/press. Defaults to `colors.grey600`. */
+  hoverColor?: string;
+  style?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  className?: string;
+  hitSlop?: PressableProps["hitSlop"];
+}
+
+const ITEM_RADIUS = 12;
+const ICON_SIZE = 16;
+
+export const MenuItem = forwardRef<ComponentRef<typeof Pressable>, MenuItemProps>(function MenuItem(
+  {
+    icon,
+    label,
+    onPress,
+    disabled = false,
+    backgroundColor,
+    hoverColor,
+    style,
+    labelStyle,
+    className,
+    accessibilityLabel,
+    hitSlop = 4,
+    onHoverIn,
+    onHoverOut,
+    onPressIn,
+    onPressOut,
+    ...rest
+  },
+  forwardedRef,
+) {
+  const containerRef = useRef<ComponentRef<typeof Pressable>>(null);
+  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+  const [hovered, setHovered] = useState(false);
+
+  useApplyWebClassName(containerRef, className);
+
+  const resolvedBackground = hovered
+    ? (hoverColor ?? colors.grey600)
+    : (backgroundColor ?? "transparent");
+  const resolvedAccessibilityLabel = accessibilityLabel ?? label;
+
+  return (
+    <Pressable
+      {...rest}
+      ref={setContainerRef}
+      onPress={onPress}
+      disabled={disabled}
+      hitSlop={hitSlop}
+      onHoverIn={(event) => {
+        setHovered(true);
+        onHoverIn?.(event);
+      }}
+      onHoverOut={(event) => {
+        setHovered(false);
+        onHoverOut?.(event);
+      }}
+      onPressIn={(event) => {
+        setHovered(true);
+        onPressIn?.(event);
+      }}
+      onPressOut={(event) => {
+        setHovered(false);
+        onPressOut?.(event);
+      }}
+      accessibilityRole="menuitem"
+      accessibilityLabel={resolvedAccessibilityLabel}
+      accessibilityState={{ disabled }}
+      style={[
+        styles.root,
+        { backgroundColor: resolvedBackground },
+        disabled && styles.disabled,
+        style,
+      ]}
+    >
+      {icon ? <View style={styles.iconSlot}>{icon}</View> : null}
+      <Text style={[styles.label, labelStyle]} numberOfLines={1}>
+        {label}
+      </Text>
+    </Pressable>
+  );
+});
+
+const styles = StyleSheet.create({
+  root: {
+    minHeight: 40,
+    borderRadius: ITEM_RADIUS,
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    alignSelf: "stretch",
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  iconSlot: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  label: {
+    ...avatarTypography.menuItem,
+    color: colors.white,
+    flex: 1,
+  },
+});

package/src/primitives/MenuItem/index.ts

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

package/src/primitives/index.ts

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

package/src/theme/colors.test.ts

@@ -6,6 +6,12 @@ describe("design tokens", () => {
   it("exposes primary and button typography used by Button", () => {
     expect(colors.primary).toBe("#B46436");
     expect(colors.dark).toBe("#090909");
+    expect(colors.green).toBe("#34A853");
+    expect(colors.whiteAlpha86).toBe("#FFFFFFDB");
+    expect(colors.whiteAlpha40).toBe("#FFFFFF66");
+    expect(colors.whiteAlpha20).toBe("#FFFFFF33");
+    expect(colors.whiteAlpha10).toBe("#FFFFFF1A");
+    expect(colors.whiteAlpha5).toBe("#FFFFFF0D");
     expect(buttonTypography.lg.fontSize).toBe(14);
     expect(buttonTypography.lg.fontWeight).toBe("600");
   });

package/src/theme/colors.ts

@@ -22,10 +22,17 @@ export const colors = {
   primary: "#B46436",
   black: "#000000",
   white: "#ffffff",
+  whiteAlpha86: "#FFFFFFDB",
+  whiteAlpha40: "#FFFFFF66",
+  whiteAlpha20: "#FFFFFF33",
+  whiteAlpha10: "#FFFFFF1A",
+  whiteAlpha5: "#FFFFFF0D",
   dark: "#090909",
   red: "#A63E3E",
   lightGrey: "#B7B7B7",
+  green: "#34A853",
   primaryMuted: "#B464360F",
+  primaryHover: "#B4643633",
   redMuted: "#A63E3E0F",
   redHover: "#A63E3E33",
 

package/src/theme/index.ts

@@ -4,7 +4,12 @@ export type { GreyStep } from "./colors";
 export {
   fonts,
   avatarTypography,
+  badgeTypography,
+  statCardTypography,
+  segmentedToggleTypography,
+  counterTypography,
   buttonTypography,
+  datePickerTypography,
   inputTypography,
   selectTypography,
   textareaTypography,

package/src/theme/typography.ts

@@ -20,6 +20,42 @@ export const buttonTypography = {
   },
 } as const;
 
+/** Badge label — Regular 14, line-height 112%, letter-spacing 0. */
+export const badgeTypography = {
+  fontFamily: fonts.sans,
+  fontSize: 14,
+  fontWeight: "400" as const,
+  lineHeight: 16,
+  letterSpacing: 0,
+} as const;
+
+/** Stat card label — Medium 16, line-height 100%, letter-spacing 0. */
+export const statCardTypography = {
+  fontFamily: fonts.sans,
+  fontSize: 16,
+  fontWeight: "500" as const,
+  lineHeight: 16,
+  letterSpacing: 0,
+} as const;
+
+/** Segmented toggle label — Medium 14, line-height 100%, letter-spacing 0. */
+export const segmentedToggleTypography = {
+  fontFamily: fonts.sans,
+  fontSize: 14,
+  fontWeight: "500" as const,
+  lineHeight: 14,
+  letterSpacing: 0,
+} as const;
+
+/** Counter value — Bold 14, line-height 100%, letter-spacing 0. */
+export const counterTypography = {
+  fontFamily: fonts.sans,
+  fontSize: 14,
+  fontWeight: "700" as const,
+  lineHeight: 14,
+  letterSpacing: 0,
+} as const;
+
 /** Input label / field / hint typography. */
 export const inputTypography = {
   label: {
@@ -95,6 +131,46 @@ export const avatarTypography = {
   },
 } as const;
 
+/**
+ * DatePicker typography — trigger field text plus the calendar-panel type
+ * (month heading, weekday header, day-cell numbers). No label/hint chrome —
+ * the Figma trigger is a standalone field. Figma didn't spec the month
+ * heading / day-cell number sizes, so those reuse the existing type scale
+ * for visual consistency with the rest of the kit.
+ */
+export const datePickerTypography = {
+  field: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "400" as const,
+    lineHeight: 12,
+    letterSpacing: 0.36,
+  },
+  /** Calendar month/year heading — Bold, centered, White. */
+  monthHeading: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "700" as const,
+    lineHeight: 14,
+    letterSpacing: 0,
+  },
+  /** Weekday header (ԵՐ, ԵՔ, ...) — Regular, uppercase, centered, Grey/300. */
+  weekday: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "400" as const,
+    lineHeight: 12,
+    letterSpacing: 0,
+  },
+  day: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "400" as const,
+    lineHeight: 14,
+    letterSpacing: 0,
+  },
+} as const;
+
 /** Textarea label / field / hint typography — Medium/Regular 12–14, letter-spacing 3%. */
 export const textareaTypography = {
   label: {

package/src/utils/dateUtils.ts

@@ -0,0 +1,86 @@
+/**
+ * Small, dependency-free date helpers for the DatePicker component. These only
+ * ever operate on local calendar days (time-of-day is ignored/zeroed) so
+ * comparisons stay simple and predictable across the whole component.
+ */
+
+export function startOfDay(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
+export function isSameDay(a: Date | null | undefined, b: Date | null | undefined): boolean {
+  if (a == null || b == null) return false;
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+}
+
+export function isSameMonth(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+
+export function addMonths(date: Date, amount: number): Date {
+  return new Date(date.getFullYear(), date.getMonth() + amount, 1);
+}
+
+export function isBefore(a: Date, b: Date): boolean {
+  return startOfDay(a).getTime() < startOfDay(b).getTime();
+}
+
+export function isAfter(a: Date, b: Date): boolean {
+  return startOfDay(a).getTime() > startOfDay(b).getTime();
+}
+
+export function isWithinRange(date: Date, start: Date, end: Date): boolean {
+  const time = startOfDay(date).getTime();
+  return time >= startOfDay(start).getTime() && time <= startOfDay(end).getTime();
+}
+
+export function clampDate(date: Date, min?: Date | null, max?: Date | null): Date {
+  if (min && isBefore(date, min)) return startOfDay(min);
+  if (max && isAfter(date, max)) return startOfDay(max);
+  return startOfDay(date);
+}
+
+export function isDateDisabled(date: Date, min?: Date | null, max?: Date | null): boolean {
+  if (min && isBefore(date, min)) return true;
+  if (max && isAfter(date, max)) return true;
+  return false;
+}
+
+/** Zero-padded "DD.MM.YYYY" — matches the Figma reference formatting. */
+export function formatDate(date: Date): string {
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  return `${day}.${month}.${date.getFullYear()}`;
+}
+
+/**
+ * Builds a 6×7 grid of calendar days for the month containing `monthDate`,
+ * including the leading/trailing days from adjacent months needed to fill
+ * whole weeks. `weekStartsOn` follows the JS `Date#getDay()` convention
+ * (0 = Sunday, 1 = Monday, ...).
+ */
+export function getMonthMatrix(monthDate: Date, weekStartsOn: 0 | 1 = 1): Date[][] {
+  const year = monthDate.getFullYear();
+  const month = monthDate.getMonth();
+  const firstOfMonth = new Date(year, month, 1);
+
+  const firstWeekday = firstOfMonth.getDay();
+  const leadingDays = (firstWeekday - weekStartsOn + 7) % 7;
+  const gridStart = new Date(year, month, 1 - leadingDays);
+
+  const weeks: Date[][] = [];
+  let cursor = gridStart;
+  for (let week = 0; week < 6; week += 1) {
+    const days: Date[] = [];
+    for (let day = 0; day < 7; day += 1) {
+      days.push(cursor);
+      cursor = new Date(cursor.getFullYear(), cursor.getMonth(), cursor.getDate() + 1);
+    }
+    weeks.push(days);
+  }
+  return weeks;
+}