@ecohouse/ui 0.1.3 → 0.1.4

package/dist/index.d.cts

@@ -1,7 +1,51 @@
 import * as react from 'react';
 import { ReactNode, ComponentType } from 'react';
 import * as react_native from 'react-native';
-import { TouchableOpacityProps, GestureResponderEvent, StyleProp, ViewStyle, TextStyle, View, PressableProps, TextInputProps, TextInput, ViewProps } from 'react-native';
+import { PressableProps, GestureResponderEvent, StyleProp, ViewStyle, View, TouchableOpacityProps, TextStyle, TextInputProps, TextInput, ViewProps } 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. */
+    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;
+}
+interface AvatarProps extends Omit<PressableProps, "onPress" | "disabled" | "style" | "children" | "hitSlop"> {
+    /** Logged-in user's display name. */
+    name: string;
+    /** Shown under the name, e.g. the user's email. */
+    email?: string;
+    /** Photo URL; falls back to a placeholder icon when missing or when it fails to load. */
+    imageUrl?: string | null;
+    /** Called on every press, in addition to any menu toggling driven by `menuItems`. */
+    onPress?: (event: GestureResponderEvent) => void;
+    /** External — non-interactive. */
+    disabled?: boolean;
+    /** Trailing chevron, typically used to hint a dropdown/menu. */
+    showChevron?: boolean;
+    /**
+     * 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.
+     */
+    menuItems?: AvatarMenuItem[];
+    /** Controlled open state for the menu. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Fixed menu width; defaults to matching the chip's width. */
+    menuWidth?: number;
+    style?: StyleProp<ViewStyle>;
+    className?: string;
+    hitSlop?: PressableProps["hitSlop"];
+}
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<View>>;
 
 type ButtonVariant = "primary" | "secondary";
 type ButtonSize = "lg" | "sm";
@@ -166,6 +210,9 @@ declare function BellIcon({ size, color, strokeWidth }: IconProps): react.JSX.El
 
 declare function BuildingIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
 
+/** Native — react-native-svg (peer dependency). */
+declare function CalendarIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
+
 declare function CameraIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
 
 interface CheckIconProps {
@@ -190,14 +237,26 @@ declare function ClockIcon({ size, color, strokeWidth }: IconProps): react.JSX.E
 
 declare function FacebookIcon({ size, color }: IconProps): react.JSX.Element;
 
+/** Native — react-native-svg (peer dependency). */
+declare function HeartIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
+
+/** Native — react-native-svg (peer dependency). */
+declare function HelpCircleIcon({ size, color, strokeWidth, }: IconProps): react.JSX.Element;
+
 declare function HomeIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
 
 declare function InstagramIcon({ size, color }: IconProps): react.JSX.Element;
 
 declare function KeyIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
 
+/** Native — react-native-svg (peer dependency). */
+declare function LayoutGridIcon({ size, color, strokeWidth, }: IconProps): react.JSX.Element;
+
 declare function LinkedInIcon({ size, color }: IconProps): react.JSX.Element;
 
+/** Native — react-native-svg (peer dependency). */
+declare function LogOutIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
+
 declare function MailIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
 
 declare function NavigateIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
@@ -212,6 +271,9 @@ interface SearchIconProps {
 /** Native — react-native-svg (peer dependency). */
 declare function SearchIcon({ size, color, strokeWidth, }: SearchIconProps): react.JSX.Element;
 
+/** Native — react-native-svg (peer dependency). */
+declare function SettingsIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
+
 interface ShowIconProps {
     size?: number;
     color?: string;
@@ -228,36 +290,47 @@ interface UserIconProps {
 /** Native — react-native-svg (peer dependency). */
 declare function UserIcon({ size, color, strokeWidth }: UserIconProps): react.JSX.Element;
 
+/** Native — react-native-svg (peer dependency). */
+declare function VideoIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
+
 declare const icons: {
     readonly arrowRight: typeof ArrowRightIcon;
     readonly bag: typeof BagIcon;
     readonly bell: typeof BellIcon;
     readonly building: typeof BuildingIcon;
+    readonly calendar: typeof CalendarIcon;
     readonly camera: typeof CameraIcon;
     readonly check: typeof CheckIcon;
     readonly checkBadge: typeof CheckBadgeIcon;
     readonly chevronDown: typeof ChevronDownIcon;
     readonly clock: typeof ClockIcon;
     readonly facebook: typeof FacebookIcon;
+    readonly heart: typeof HeartIcon;
+    readonly helpCircle: typeof HelpCircleIcon;
     readonly home: typeof HomeIcon;
     readonly instagram: typeof InstagramIcon;
     readonly key: typeof KeyIcon;
+    readonly layoutGrid: typeof LayoutGridIcon;
     readonly linkedin: typeof LinkedInIcon;
+    readonly logOut: typeof LogOutIcon;
     readonly mail: typeof MailIcon;
     readonly navigate: typeof NavigateIcon;
     readonly phone: typeof PhoneIcon;
     readonly search: typeof SearchIcon;
+    readonly settings: typeof SettingsIcon;
     readonly show: typeof ShowIcon;
     readonly user: typeof UserIcon;
+    readonly video: typeof VideoIcon;
 };
 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"];
-    readonly objects: readonly ["bag", "building", "clock", "user"];
+    readonly actions: readonly ["show", "bell", "camera", "key", "check", "checkBadge", "search", "calendar", "heart"];
+    readonly objects: readonly ["bag", "building", "clock", "user", "video"];
     readonly communication: readonly ["mail", "phone"];
     readonly social: readonly ["facebook", "instagram", "linkedin"];
+    readonly interface: readonly ["layoutGrid", "settings", "helpCircle", "logOut"];
 };
 type IconGroup = keyof typeof iconGroups;
 declare const iconGroupNames: IconGroup[];
@@ -295,6 +368,7 @@ declare const colors: {
     readonly lightGrey: "#B7B7B7";
     readonly primaryMuted: "#B464360F";
     readonly redMuted: "#A63E3E0F";
+    readonly redHover: "#A63E3E33";
     readonly grey0: "#767676";
     readonly grey50: "#6E6E6E";
     readonly grey100: "#666666";
@@ -380,6 +454,30 @@ declare const selectTypography: {
         readonly letterSpacing: 0.36;
     };
 };
+/** Avatar name / email / menu-item typography — 100% line-height, 0 letter-spacing. */
+declare const avatarTypography: {
+    readonly name: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 14;
+        readonly fontWeight: "600";
+        readonly lineHeight: 14;
+        readonly letterSpacing: 0;
+    };
+    readonly email: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 12;
+        readonly fontWeight: "400";
+        readonly lineHeight: 12;
+        readonly letterSpacing: 0;
+    };
+    readonly menuItem: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 12;
+        readonly fontWeight: "600";
+        readonly lineHeight: 12;
+        readonly letterSpacing: 0;
+    };
+};
 /** Textarea label / field / hint typography — Medium/Regular 12–14, letter-spacing 3%. */
 declare const textareaTypography: {
     readonly label: {
@@ -405,4 +503,4 @@ declare const textareaTypography: {
     };
 };
 
-export { ArrowRightIcon, BagIcon, BellIcon, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ClockIcon, FacebookIcon, type GreyStep, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputProps, type InputSize, InstagramIcon, KeyIcon, LinkedInIcon, MailIcon, NavigateIcon, PhoneIcon, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, ShowIcon, Textarea, type TextareaProps, Toggle, type ToggleProps, UserIcon, 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, 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 };

package/dist/index.d.ts

@@ -1,7 +1,51 @@
 import * as react from 'react';
 import { ReactNode, ComponentType } from 'react';
 import * as react_native from 'react-native';
-import { TouchableOpacityProps, GestureResponderEvent, StyleProp, ViewStyle, TextStyle, View, PressableProps, TextInputProps, TextInput, ViewProps } from 'react-native';
+import { PressableProps, GestureResponderEvent, StyleProp, ViewStyle, View, TouchableOpacityProps, TextStyle, TextInputProps, TextInput, ViewProps } 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. */
+    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;
+}
+interface AvatarProps extends Omit<PressableProps, "onPress" | "disabled" | "style" | "children" | "hitSlop"> {
+    /** Logged-in user's display name. */
+    name: string;
+    /** Shown under the name, e.g. the user's email. */
+    email?: string;
+    /** Photo URL; falls back to a placeholder icon when missing or when it fails to load. */
+    imageUrl?: string | null;
+    /** Called on every press, in addition to any menu toggling driven by `menuItems`. */
+    onPress?: (event: GestureResponderEvent) => void;
+    /** External — non-interactive. */
+    disabled?: boolean;
+    /** Trailing chevron, typically used to hint a dropdown/menu. */
+    showChevron?: boolean;
+    /**
+     * 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.
+     */
+    menuItems?: AvatarMenuItem[];
+    /** Controlled open state for the menu. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Fixed menu width; defaults to matching the chip's width. */
+    menuWidth?: number;
+    style?: StyleProp<ViewStyle>;
+    className?: string;
+    hitSlop?: PressableProps["hitSlop"];
+}
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<View>>;
 
 type ButtonVariant = "primary" | "secondary";
 type ButtonSize = "lg" | "sm";
@@ -166,6 +210,9 @@ declare function BellIcon({ size, color, strokeWidth }: IconProps): react.JSX.El
 
 declare function BuildingIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
 
+/** Native — react-native-svg (peer dependency). */
+declare function CalendarIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
+
 declare function CameraIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
 
 interface CheckIconProps {
@@ -190,14 +237,26 @@ declare function ClockIcon({ size, color, strokeWidth }: IconProps): react.JSX.E
 
 declare function FacebookIcon({ size, color }: IconProps): react.JSX.Element;
 
+/** Native — react-native-svg (peer dependency). */
+declare function HeartIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
+
+/** Native — react-native-svg (peer dependency). */
+declare function HelpCircleIcon({ size, color, strokeWidth, }: IconProps): react.JSX.Element;
+
 declare function HomeIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
 
 declare function InstagramIcon({ size, color }: IconProps): react.JSX.Element;
 
 declare function KeyIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
 
+/** Native — react-native-svg (peer dependency). */
+declare function LayoutGridIcon({ size, color, strokeWidth, }: IconProps): react.JSX.Element;
+
 declare function LinkedInIcon({ size, color }: IconProps): react.JSX.Element;
 
+/** Native — react-native-svg (peer dependency). */
+declare function LogOutIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
+
 declare function MailIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
 
 declare function NavigateIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
@@ -212,6 +271,9 @@ interface SearchIconProps {
 /** Native — react-native-svg (peer dependency). */
 declare function SearchIcon({ size, color, strokeWidth, }: SearchIconProps): react.JSX.Element;
 
+/** Native — react-native-svg (peer dependency). */
+declare function SettingsIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
+
 interface ShowIconProps {
     size?: number;
     color?: string;
@@ -228,36 +290,47 @@ interface UserIconProps {
 /** Native — react-native-svg (peer dependency). */
 declare function UserIcon({ size, color, strokeWidth }: UserIconProps): react.JSX.Element;
 
+/** Native — react-native-svg (peer dependency). */
+declare function VideoIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
+
 declare const icons: {
     readonly arrowRight: typeof ArrowRightIcon;
     readonly bag: typeof BagIcon;
     readonly bell: typeof BellIcon;
     readonly building: typeof BuildingIcon;
+    readonly calendar: typeof CalendarIcon;
     readonly camera: typeof CameraIcon;
     readonly check: typeof CheckIcon;
     readonly checkBadge: typeof CheckBadgeIcon;
     readonly chevronDown: typeof ChevronDownIcon;
     readonly clock: typeof ClockIcon;
     readonly facebook: typeof FacebookIcon;
+    readonly heart: typeof HeartIcon;
+    readonly helpCircle: typeof HelpCircleIcon;
     readonly home: typeof HomeIcon;
     readonly instagram: typeof InstagramIcon;
     readonly key: typeof KeyIcon;
+    readonly layoutGrid: typeof LayoutGridIcon;
     readonly linkedin: typeof LinkedInIcon;
+    readonly logOut: typeof LogOutIcon;
     readonly mail: typeof MailIcon;
     readonly navigate: typeof NavigateIcon;
     readonly phone: typeof PhoneIcon;
     readonly search: typeof SearchIcon;
+    readonly settings: typeof SettingsIcon;
     readonly show: typeof ShowIcon;
     readonly user: typeof UserIcon;
+    readonly video: typeof VideoIcon;
 };
 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"];
-    readonly objects: readonly ["bag", "building", "clock", "user"];
+    readonly actions: readonly ["show", "bell", "camera", "key", "check", "checkBadge", "search", "calendar", "heart"];
+    readonly objects: readonly ["bag", "building", "clock", "user", "video"];
     readonly communication: readonly ["mail", "phone"];
     readonly social: readonly ["facebook", "instagram", "linkedin"];
+    readonly interface: readonly ["layoutGrid", "settings", "helpCircle", "logOut"];
 };
 type IconGroup = keyof typeof iconGroups;
 declare const iconGroupNames: IconGroup[];
@@ -295,6 +368,7 @@ declare const colors: {
     readonly lightGrey: "#B7B7B7";
     readonly primaryMuted: "#B464360F";
     readonly redMuted: "#A63E3E0F";
+    readonly redHover: "#A63E3E33";
     readonly grey0: "#767676";
     readonly grey50: "#6E6E6E";
     readonly grey100: "#666666";
@@ -380,6 +454,30 @@ declare const selectTypography: {
         readonly letterSpacing: 0.36;
     };
 };
+/** Avatar name / email / menu-item typography — 100% line-height, 0 letter-spacing. */
+declare const avatarTypography: {
+    readonly name: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 14;
+        readonly fontWeight: "600";
+        readonly lineHeight: 14;
+        readonly letterSpacing: 0;
+    };
+    readonly email: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 12;
+        readonly fontWeight: "400";
+        readonly lineHeight: 12;
+        readonly letterSpacing: 0;
+    };
+    readonly menuItem: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 12;
+        readonly fontWeight: "600";
+        readonly lineHeight: 12;
+        readonly letterSpacing: 0;
+    };
+};
 /** Textarea label / field / hint typography — Medium/Regular 12–14, letter-spacing 3%. */
 declare const textareaTypography: {
     readonly label: {
@@ -405,4 +503,4 @@ declare const textareaTypography: {
     };
 };
 
-export { ArrowRightIcon, BagIcon, BellIcon, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ClockIcon, FacebookIcon, type GreyStep, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputProps, type InputSize, InstagramIcon, KeyIcon, LinkedInIcon, MailIcon, NavigateIcon, PhoneIcon, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, ShowIcon, Textarea, type TextareaProps, Toggle, type ToggleProps, UserIcon, 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, 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 };