@ecohouse/ui 0.1.4 → 0.1.5

package/src/icons/CalendarOutline/calendarOutlinePath.ts

@@ -0,0 +1,3 @@
+/** Plain calendar icon path (no checkmark badge) — 16×16 viewBox. */
+export const CALENDAR_OUTLINE_PATH =
+  "M10.6667 1.33334V4.00001M5.33333 1.33334V4.00001M2 6.66668H14M5.2 2.66668H10.8C11.9201 2.66668 12.4802 2.66668 12.908 2.88466C13.2843 3.07641 13.5903 3.38237 13.782 3.7587C14 4.18652 14 4.74657 14 5.86668V11.4667C14 12.5868 14 13.1468 13.782 13.5747C13.5903 13.951 13.2843 14.2569 12.908 14.4487C12.4802 14.6667 11.9201 14.6667 10.8 14.6667H5.2C4.0799 14.6667 3.51984 14.6667 3.09202 14.4487C2.71569 14.2569 2.40973 13.951 2.21799 13.5747C2 13.1468 2 12.5868 2 11.4667V5.86668C2 4.74657 2 4.18652 2.21799 3.7587C2.40973 3.38237 2.71569 3.07641 3.09202 2.88466C3.51984 2.66668 4.0799 2.66668 5.2 2.66668Z";

package/src/icons/CalendarOutline/index.ts

@@ -0,0 +1 @@
+export { CalendarOutlineIcon, CALENDAR_OUTLINE_PATH } from "./CalendarOutlineIcon";

package/src/icons/ChevronLeft/ChevronLeftIcon.tsx

@@ -0,0 +1,21 @@
+import Svg, { Path } from "react-native-svg";
+import { CHEVRON_LEFT_PATH } from "./chevronLeftPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export { CHEVRON_LEFT_PATH } from "./chevronLeftPath";
+
+/** Native — react-native-svg (peer dependency). */
+export function ChevronLeftIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={CHEVRON_LEFT_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/ChevronLeft/ChevronLeftIcon.web.tsx

@@ -0,0 +1,27 @@
+import { CHEVRON_LEFT_PATH } from "./chevronLeftPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+/** Web / Storybook — plain SVG (no react-native-svg). */
+export function ChevronLeftIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={CHEVRON_LEFT_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { CHEVRON_LEFT_PATH } from "./chevronLeftPath";

package/src/icons/ChevronLeft/chevronLeftPath.ts

@@ -0,0 +1,2 @@
+/** Chevron left path — 20×20 viewBox. */
+export const CHEVRON_LEFT_PATH = "M12.5 15L7.5 10L12.5 5";

package/src/icons/ChevronLeft/index.ts

@@ -0,0 +1 @@
+export { ChevronLeftIcon, CHEVRON_LEFT_PATH } from "./ChevronLeftIcon";

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";

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";
@@ -33,10 +35,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,
@@ -62,8 +66,19 @@ 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"],
+  navigation: ["arrowRight", "chevronDown", "chevronLeft", "home", "navigate"],
+  actions: [
+    "show",
+    "bell",
+    "camera",
+    "key",
+    "check",
+    "checkBadge",
+    "search",
+    "calendar",
+    "calendarOutline",
+    "heart",
+  ],
   objects: ["bag", "building", "clock", "user", "video"],
   communication: ["mail", "phone"],
   social: ["facebook", "instagram", "linkedin"],

package/src/index.ts

@@ -1,4 +1,13 @@
-export { Avatar, Button, Checkbox, Input, Select, Textarea, Toggle } from "./components";
+export {
+  Avatar,
+  Button,
+  Checkbox,
+  DatePicker,
+  Input,
+  Select,
+  Textarea,
+  Toggle,
+} from "./components";
 export type {
   AvatarProps,
   AvatarMenuItem,
@@ -7,6 +16,10 @@ export type {
   ButtonVariant,
   CheckboxProps,
   CheckboxVariant,
+  DatePickerProps,
+  DatePickerSingleProps,
+  DatePickerRangeProps,
+  DateRange,
   InputProps,
   InputSize,
   SelectOption,
@@ -17,6 +30,9 @@ export type {
   ToggleProps,
 } from "./components";
 
+export { MenuItem } from "./primitives";
+export type { MenuItemProps } from "./primitives";
+
 export {
   Icon,
   icons,
@@ -29,10 +45,12 @@ export {
   BellIcon,
   BuildingIcon,
   CalendarIcon,
+  CalendarOutlineIcon,
   CameraIcon,
   CheckIcon,
   CheckBadgeIcon,
   ChevronDownIcon,
+  ChevronLeftIcon,
   ClockIcon,
   FacebookIcon,
   HeartIcon,
@@ -59,6 +77,7 @@ export {
   grey,
   avatarTypography,
   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.ts

@@ -26,6 +26,7 @@ export const colors = {
   red: "#A63E3E",
   lightGrey: "#B7B7B7",
   primaryMuted: "#B464360F",
+  primaryHover: "#B4643633",
   redMuted: "#A63E3E0F",
   redHover: "#A63E3E33",
 

package/src/theme/index.ts

@@ -5,6 +5,7 @@ export {
   fonts,
   avatarTypography,
   buttonTypography,
+  datePickerTypography,
   inputTypography,
   selectTypography,
   textareaTypography,

package/src/theme/typography.ts

@@ -95,6 +95,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;
+}