@ecohouse/ui 0.1.4 → 0.1.5

package/dist/index.d.cts

@@ -1,21 +1,31 @@
 import * as react from 'react';
 import { ReactNode, ComponentType } from 'react';
 import * as react_native from 'react-native';
-import { PressableProps, GestureResponderEvent, StyleProp, ViewStyle, View, TouchableOpacityProps, TextStyle, TextInputProps, TextInput, ViewProps } from 'react-native';
+import { PressableProps, GestureResponderEvent, StyleProp, ViewStyle, TextStyle, View, TouchableOpacityProps, ViewProps, TextInputProps, TextInput } from 'react-native';
 
-interface AvatarMenuItem {
-    /** Stable identity for React keys / hover tracking; falls back to `label`. */
-    key?: string;
-    /** Leading icon, e.g. `<CalendarIcon />` — pass it pre-colored. */
+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: () => void;
+    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"];
 }
+declare const MenuItem: react.ForwardRefExoticComponent<MenuItemProps & react.RefAttributes<View>>;
+
+/** Data shape for an Avatar dropdown option — same fields as `MenuItem`. */
+type AvatarMenuItem = Pick<MenuItemProps, "icon" | "label" | "disabled" | "backgroundColor" | "hoverColor"> & {
+    /** Stable identity for React keys; falls back to `label`. */
+    key?: string;
+    onPress: () => void;
+};
 interface AvatarProps extends Omit<PressableProps, "onPress" | "disabled" | "style" | "children" | "hitSlop"> {
     /** Logged-in user's display name. */
     name: string;
@@ -32,7 +42,7 @@ interface AvatarProps extends Omit<PressableProps, "onPress" | "disabled" | "sty
     /**
      * 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. */
@@ -81,6 +91,51 @@ interface CheckboxProps extends Omit<PressableProps, "onPress" | "disabled" | "s
 }
 declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<View>>;
 
+type DateRange = {
+    start: Date | null;
+    end: Date | null;
+};
+type DatePickerBaseProps = Omit<ViewProps, "style" | "children"> & {
+    placeholder?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    /**
+     * When true (default), the calendar closes after a complete selection —
+     * a single date, or both ends of a range. Set false to keep it open.
+     */
+    closeOnSelect?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    /** First visible month when the calendar opens; defaults to the selected value's month, else today. */
+    defaultVisibleMonth?: Date;
+    /** Monday-first full month names. Defaults to Armenian. */
+    monthNames?: string[];
+    /** Weekday abbreviations, ordered starting from `weekStartsOn`. Defaults to Armenian, Monday-first. */
+    weekdayLabels?: string[];
+    /** Formats a selected date for the trigger and day accessibility labels. Defaults to "DD.MM.YYYY". */
+    formatValue?: (date: Date) => string;
+    /** First day of the week column (0 = Sunday, 1 = Monday). Defaults to Monday. */
+    weekStartsOn?: 0 | 1;
+    style?: StyleProp<ViewStyle>;
+    className?: string;
+};
+type DatePickerSingleProps = DatePickerBaseProps & {
+    range?: false;
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onValueChange?: (value: Date | null) => void;
+};
+type DatePickerRangeProps = DatePickerBaseProps & {
+    range: true;
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onValueChange?: (value: DateRange) => void;
+};
+type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
+declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<View>>;
+
 type InputSize = "lg" | "sm";
 interface InputProps extends Omit<TextInputProps, "style" | "editable"> {
     label?: string;
@@ -213,6 +268,9 @@ declare function BuildingIcon({ size, color, strokeWidth }: IconProps): react.JS
 /** Native — react-native-svg (peer dependency). */
 declare function CalendarIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
 
+/** Native — react-native-svg (peer dependency). */
+declare function CalendarOutlineIcon({ size, color, strokeWidth, }: IconProps): react.JSX.Element;
+
 declare function CameraIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
 
 interface CheckIconProps {
@@ -233,6 +291,9 @@ interface ChevronDownIconProps {
 /** Native — react-native-svg (peer dependency). */
 declare function ChevronDownIcon({ size, color, strokeWidth, }: ChevronDownIconProps): react.JSX.Element;
 
+/** Native — react-native-svg (peer dependency). */
+declare function ChevronLeftIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
+
 declare function ClockIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
 
 declare function FacebookIcon({ size, color }: IconProps): react.JSX.Element;
@@ -299,10 +360,12 @@ declare const icons: {
     readonly bell: typeof BellIcon;
     readonly building: typeof BuildingIcon;
     readonly calendar: typeof CalendarIcon;
+    readonly calendarOutline: typeof CalendarOutlineIcon;
     readonly camera: typeof CameraIcon;
     readonly check: typeof CheckIcon;
     readonly checkBadge: typeof CheckBadgeIcon;
     readonly chevronDown: typeof ChevronDownIcon;
+    readonly chevronLeft: typeof ChevronLeftIcon;
     readonly clock: typeof ClockIcon;
     readonly facebook: typeof FacebookIcon;
     readonly heart: typeof HeartIcon;
@@ -325,8 +388,8 @@ declare const icons: {
 type IconName = keyof typeof icons;
 declare const iconNames: IconName[];
 declare const iconGroups: {
-    readonly navigation: readonly ["arrowRight", "chevronDown", "home", "navigate"];
-    readonly actions: readonly ["show", "bell", "camera", "key", "check", "checkBadge", "search", "calendar", "heart"];
+    readonly navigation: readonly ["arrowRight", "chevronDown", "chevronLeft", "home", "navigate"];
+    readonly actions: readonly ["show", "bell", "camera", "key", "check", "checkBadge", "search", "calendar", "calendarOutline", "heart"];
     readonly objects: readonly ["bag", "building", "clock", "user", "video"];
     readonly communication: readonly ["mail", "phone"];
     readonly social: readonly ["facebook", "instagram", "linkedin"];
@@ -367,6 +430,7 @@ declare const colors: {
     readonly red: "#A63E3E";
     readonly lightGrey: "#B7B7B7";
     readonly primaryMuted: "#B464360F";
+    readonly primaryHover: "#B4643633";
     readonly redMuted: "#A63E3E0F";
     readonly redHover: "#A63E3E33";
     readonly grey0: "#767676";
@@ -478,6 +542,45 @@ declare const avatarTypography: {
         readonly letterSpacing: 0;
     };
 };
+/**
+ * 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.
+ */
+declare const datePickerTypography: {
+    readonly field: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 12;
+        readonly fontWeight: "400";
+        readonly lineHeight: 12;
+        readonly letterSpacing: 0.36;
+    };
+    /** Calendar month/year heading — Bold, centered, White. */
+    readonly monthHeading: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 14;
+        readonly fontWeight: "700";
+        readonly lineHeight: 14;
+        readonly letterSpacing: 0;
+    };
+    /** Weekday header (ԵՐ, ԵՔ, ...) — Regular, uppercase, centered, Grey/300. */
+    readonly weekday: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 12;
+        readonly fontWeight: "400";
+        readonly lineHeight: 12;
+        readonly letterSpacing: 0;
+    };
+    readonly day: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 14;
+        readonly fontWeight: "400";
+        readonly lineHeight: 14;
+        readonly letterSpacing: 0;
+    };
+};
 /** Textarea label / field / hint typography — Medium/Regular 12–14, letter-spacing 3%. */
 declare const textareaTypography: {
     readonly label: {
@@ -503,4 +606,4 @@ declare const textareaTypography: {
     };
 };
 
-export { ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, BagIcon, BellIcon, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ClockIcon, FacebookIcon, type GreyStep, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputProps, type InputSize, InstagramIcon, KeyIcon, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, NavigateIcon, PhoneIcon, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShowIcon, Textarea, type TextareaProps, Toggle, type ToggleProps, UserIcon, VideoIcon, avatarTypography, buttonTypography, colors, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, selectTypography, textareaTypography };
+export { ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, BagIcon, BellIcon, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockIcon, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, FacebookIcon, type GreyStep, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputProps, type InputSize, InstagramIcon, KeyIcon, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuItem, type MenuItemProps, NavigateIcon, PhoneIcon, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShowIcon, Textarea, type TextareaProps, Toggle, type ToggleProps, UserIcon, VideoIcon, avatarTypography, buttonTypography, colors, datePickerTypography, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, selectTypography, textareaTypography };

package/dist/index.d.ts

@@ -1,21 +1,31 @@
 import * as react from 'react';
 import { ReactNode, ComponentType } from 'react';
 import * as react_native from 'react-native';
-import { PressableProps, GestureResponderEvent, StyleProp, ViewStyle, View, TouchableOpacityProps, TextStyle, TextInputProps, TextInput, ViewProps } from 'react-native';
+import { PressableProps, GestureResponderEvent, StyleProp, ViewStyle, TextStyle, View, TouchableOpacityProps, ViewProps, TextInputProps, TextInput } from 'react-native';
 
-interface AvatarMenuItem {
-    /** Stable identity for React keys / hover tracking; falls back to `label`. */
-    key?: string;
-    /** Leading icon, e.g. `<CalendarIcon />` — pass it pre-colored. */
+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: () => void;
+    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"];
 }
+declare const MenuItem: react.ForwardRefExoticComponent<MenuItemProps & react.RefAttributes<View>>;
+
+/** Data shape for an Avatar dropdown option — same fields as `MenuItem`. */
+type AvatarMenuItem = Pick<MenuItemProps, "icon" | "label" | "disabled" | "backgroundColor" | "hoverColor"> & {
+    /** Stable identity for React keys; falls back to `label`. */
+    key?: string;
+    onPress: () => void;
+};
 interface AvatarProps extends Omit<PressableProps, "onPress" | "disabled" | "style" | "children" | "hitSlop"> {
     /** Logged-in user's display name. */
     name: string;
@@ -32,7 +42,7 @@ interface AvatarProps extends Omit<PressableProps, "onPress" | "disabled" | "sty
     /**
      * 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. */
@@ -81,6 +91,51 @@ interface CheckboxProps extends Omit<PressableProps, "onPress" | "disabled" | "s
 }
 declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<View>>;
 
+type DateRange = {
+    start: Date | null;
+    end: Date | null;
+};
+type DatePickerBaseProps = Omit<ViewProps, "style" | "children"> & {
+    placeholder?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    /**
+     * When true (default), the calendar closes after a complete selection —
+     * a single date, or both ends of a range. Set false to keep it open.
+     */
+    closeOnSelect?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    /** First visible month when the calendar opens; defaults to the selected value's month, else today. */
+    defaultVisibleMonth?: Date;
+    /** Monday-first full month names. Defaults to Armenian. */
+    monthNames?: string[];
+    /** Weekday abbreviations, ordered starting from `weekStartsOn`. Defaults to Armenian, Monday-first. */
+    weekdayLabels?: string[];
+    /** Formats a selected date for the trigger and day accessibility labels. Defaults to "DD.MM.YYYY". */
+    formatValue?: (date: Date) => string;
+    /** First day of the week column (0 = Sunday, 1 = Monday). Defaults to Monday. */
+    weekStartsOn?: 0 | 1;
+    style?: StyleProp<ViewStyle>;
+    className?: string;
+};
+type DatePickerSingleProps = DatePickerBaseProps & {
+    range?: false;
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onValueChange?: (value: Date | null) => void;
+};
+type DatePickerRangeProps = DatePickerBaseProps & {
+    range: true;
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onValueChange?: (value: DateRange) => void;
+};
+type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
+declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<View>>;
+
 type InputSize = "lg" | "sm";
 interface InputProps extends Omit<TextInputProps, "style" | "editable"> {
     label?: string;
@@ -213,6 +268,9 @@ declare function BuildingIcon({ size, color, strokeWidth }: IconProps): react.JS
 /** Native — react-native-svg (peer dependency). */
 declare function CalendarIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
 
+/** Native — react-native-svg (peer dependency). */
+declare function CalendarOutlineIcon({ size, color, strokeWidth, }: IconProps): react.JSX.Element;
+
 declare function CameraIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
 
 interface CheckIconProps {
@@ -233,6 +291,9 @@ interface ChevronDownIconProps {
 /** Native — react-native-svg (peer dependency). */
 declare function ChevronDownIcon({ size, color, strokeWidth, }: ChevronDownIconProps): react.JSX.Element;
 
+/** Native — react-native-svg (peer dependency). */
+declare function ChevronLeftIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
+
 declare function ClockIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
 
 declare function FacebookIcon({ size, color }: IconProps): react.JSX.Element;
@@ -299,10 +360,12 @@ declare const icons: {
     readonly bell: typeof BellIcon;
     readonly building: typeof BuildingIcon;
     readonly calendar: typeof CalendarIcon;
+    readonly calendarOutline: typeof CalendarOutlineIcon;
     readonly camera: typeof CameraIcon;
     readonly check: typeof CheckIcon;
     readonly checkBadge: typeof CheckBadgeIcon;
     readonly chevronDown: typeof ChevronDownIcon;
+    readonly chevronLeft: typeof ChevronLeftIcon;
     readonly clock: typeof ClockIcon;
     readonly facebook: typeof FacebookIcon;
     readonly heart: typeof HeartIcon;
@@ -325,8 +388,8 @@ declare const icons: {
 type IconName = keyof typeof icons;
 declare const iconNames: IconName[];
 declare const iconGroups: {
-    readonly navigation: readonly ["arrowRight", "chevronDown", "home", "navigate"];
-    readonly actions: readonly ["show", "bell", "camera", "key", "check", "checkBadge", "search", "calendar", "heart"];
+    readonly navigation: readonly ["arrowRight", "chevronDown", "chevronLeft", "home", "navigate"];
+    readonly actions: readonly ["show", "bell", "camera", "key", "check", "checkBadge", "search", "calendar", "calendarOutline", "heart"];
     readonly objects: readonly ["bag", "building", "clock", "user", "video"];
     readonly communication: readonly ["mail", "phone"];
     readonly social: readonly ["facebook", "instagram", "linkedin"];
@@ -367,6 +430,7 @@ declare const colors: {
     readonly red: "#A63E3E";
     readonly lightGrey: "#B7B7B7";
     readonly primaryMuted: "#B464360F";
+    readonly primaryHover: "#B4643633";
     readonly redMuted: "#A63E3E0F";
     readonly redHover: "#A63E3E33";
     readonly grey0: "#767676";
@@ -478,6 +542,45 @@ declare const avatarTypography: {
         readonly letterSpacing: 0;
     };
 };
+/**
+ * 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.
+ */
+declare const datePickerTypography: {
+    readonly field: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 12;
+        readonly fontWeight: "400";
+        readonly lineHeight: 12;
+        readonly letterSpacing: 0.36;
+    };
+    /** Calendar month/year heading — Bold, centered, White. */
+    readonly monthHeading: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 14;
+        readonly fontWeight: "700";
+        readonly lineHeight: 14;
+        readonly letterSpacing: 0;
+    };
+    /** Weekday header (ԵՐ, ԵՔ, ...) — Regular, uppercase, centered, Grey/300. */
+    readonly weekday: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 12;
+        readonly fontWeight: "400";
+        readonly lineHeight: 12;
+        readonly letterSpacing: 0;
+    };
+    readonly day: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 14;
+        readonly fontWeight: "400";
+        readonly lineHeight: 14;
+        readonly letterSpacing: 0;
+    };
+};
 /** Textarea label / field / hint typography — Medium/Regular 12–14, letter-spacing 3%. */
 declare const textareaTypography: {
     readonly label: {
@@ -503,4 +606,4 @@ declare const textareaTypography: {
     };
 };
 
-export { ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, BagIcon, BellIcon, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ClockIcon, FacebookIcon, type GreyStep, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputProps, type InputSize, InstagramIcon, KeyIcon, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, NavigateIcon, PhoneIcon, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShowIcon, Textarea, type TextareaProps, Toggle, type ToggleProps, UserIcon, VideoIcon, avatarTypography, buttonTypography, colors, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, selectTypography, textareaTypography };
+export { ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, BagIcon, BellIcon, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockIcon, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, FacebookIcon, type GreyStep, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputProps, type InputSize, InstagramIcon, KeyIcon, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuItem, type MenuItemProps, NavigateIcon, PhoneIcon, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShowIcon, Textarea, type TextareaProps, Toggle, type ToggleProps, UserIcon, VideoIcon, avatarTypography, buttonTypography, colors, datePickerTypography, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, selectTypography, textareaTypography };