@ecohouse/ui 0.1.0 → 0.1.2

package/dist/index.d.cts

@@ -1,8 +1,8 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
-import { GestureResponderEvent, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { ReactNode, ComponentType } from 'react';
+import { GestureResponderEvent, StyleProp, ViewStyle, TextStyle, TextInputProps } from 'react-native';
 
-type ButtonVariant = "white" | "primary" | "green" | "gray";
+type ButtonVariant = "primary" | "secondary";
 type ButtonSize = "lg" | "sm";
 interface ButtonProps {
     title?: string;
@@ -12,7 +12,6 @@ interface ButtonProps {
     variant?: ButtonVariant;
     size?: ButtonSize;
     showIcon?: boolean;
-    /** Custom icon inside the badge. Defaults to `ArrowUpRightIcon` when `showIcon` is true. */
     icon?: ReactNode;
     style?: StyleProp<ViewStyle>;
     textStyle?: StyleProp<TextStyle>;
@@ -21,289 +20,213 @@ interface ButtonProps {
 }
 declare function Button({ title, children, onPress, disabled, variant, size, showIcon, icon, style, textStyle, className, textClassName, }: ButtonProps): react.JSX.Element;
 
-interface ArrowUpRightIconProps {
+type InputState = "default" | "filled" | "active" | "error" | "disabled";
+type InputSize = "lg" | "sm";
+interface InputProps extends Omit<TextInputProps, "style" | "editable"> {
+    label?: string;
+    showLabel?: boolean;
+    hint?: string;
+    showHint?: boolean;
+    state?: InputState;
+    size?: InputSize;
+    disabled?: boolean;
+    error?: boolean;
+    leftIcon?: ReactNode;
+    showLeftIcon?: boolean;
+    rightIcon?: ReactNode;
+    showRightIcon?: boolean;
+    onRightIconPress?: () => void;
+    style?: StyleProp<ViewStyle>;
+    fieldStyle?: StyleProp<ViewStyle>;
+    inputStyle?: StyleProp<TextStyle>;
+    className?: string;
+    inputClassName?: string;
+}
+declare function Input({ label, showLabel, hint, showHint, placeholder, state: stateProp, size, disabled, error, value, defaultValue, onChangeText, onFocus, onBlur, leftIcon, showLeftIcon, rightIcon, showRightIcon, onRightIconPress, style, fieldStyle, inputStyle, className, inputClassName, ...textInputProps }: InputProps): react.JSX.Element;
+
+interface IconProps {
+    size?: number;
+    color?: string;
+    strokeWidth?: number;
+}
+type IconComponent = ComponentType<IconProps>;
+
+interface ArrowRightIconProps {
     size?: number;
     color?: string;
     strokeWidth?: number;
 }
 /** Native — react-native-svg (peer dependency). */
-declare function ArrowUpRightIcon({ size, color, strokeWidth, }: ArrowUpRightIconProps): react.JSX.Element;
+declare function ArrowRightIcon({ size, color, strokeWidth, }: ArrowRightIconProps): react.JSX.Element;
 
-/**
- * EcoHouse design tokens — aligned with the shared design system
- * (navy / storm gray / slate-blue palette).
- */
-/** Storm Gray scale — Figma steps 0 → 8.5 */
-declare const stormGray: {
-    readonly "0": "#fbfcfc";
-    readonly "0.5": "#eceef0";
-    readonly "1": "#dadde0";
-    readonly "1.5": "#c7cdd1";
-    readonly "2": "#b5bcc1";
-    readonly "3": "#8f9aa3";
-    readonly "4": "#6a7984";
-    readonly "5": "#455765";
-    readonly "6": "#374651";
-    readonly "7": "#29343d";
-    readonly "8": "#1c2328";
-    readonly "8.5": "#151a1e";
-};
-type StormGrayStep = keyof typeof stormGray;
-/** Navy scale — Figma steps 0 → 8.5 */
-declare const navy: {
-    readonly "0": "#f6fafe";
-    readonly "0.5": "#dee5eb";
-    readonly "1": "#c6d0d8";
-    readonly "1.5": "#afbac5";
-    readonly "2": "#97a5b2";
-    readonly "3": "#677b8c";
-    readonly "4": "#385066";
-    readonly "5": "#082640";
-    readonly "6": "#061e33";
-    readonly "7": "#051726";
-    readonly "8": "#030f1a";
-    readonly "8.5": "#020b13";
-};
-type NavyStep = keyof typeof navy;
-/** Ruby Red scale — Figma steps 0 → 8.5 */
-declare const rubyRed: {
-    readonly "0": "#fff5f6";
-    readonly "0.5": "#f7dddf";
-    readonly "1": "#efc4c8";
-    readonly "1.5": "#e7acb1";
-    readonly "2": "#df939a";
-    readonly "3": "#ce626d";
-    readonly "4": "#be313f";
-    readonly "5": "#ae0011";
-    readonly "6": "#8b000e";
-    readonly "7": "#68000a";
-    readonly "8": "#460007";
-    readonly "8.5": "#340005";
+declare function BagIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
+
+declare function BellIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
+
+declare function BuildingIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
+
+declare function CameraIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
+
+declare function CheckBadgeIcon({ 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;
+
+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;
+
+declare function LinkedInIcon({ size, color }: IconProps): react.JSX.Element;
+
+declare function MailIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
+
+declare function NavigateIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
+
+declare function PhoneIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
+
+interface ShowIconProps {
+    size?: number;
+    color?: string;
+    strokeWidth?: number;
+}
+/** Native — react-native-svg (peer dependency). */
+declare function ShowIcon({ size, color, strokeWidth }: ShowIconProps): react.JSX.Element;
+
+interface UserIconProps {
+    size?: number;
+    color?: string;
+    strokeWidth?: number;
+}
+/** Native — react-native-svg (peer dependency). */
+declare function UserIcon({ size, color, strokeWidth }: UserIconProps): react.JSX.Element;
+
+declare const icons: {
+    readonly arrowRight: typeof ArrowRightIcon;
+    readonly bag: typeof BagIcon;
+    readonly bell: typeof BellIcon;
+    readonly building: typeof BuildingIcon;
+    readonly camera: typeof CameraIcon;
+    readonly checkBadge: typeof CheckBadgeIcon;
+    readonly clock: typeof ClockIcon;
+    readonly facebook: typeof FacebookIcon;
+    readonly home: typeof HomeIcon;
+    readonly instagram: typeof InstagramIcon;
+    readonly key: typeof KeyIcon;
+    readonly linkedin: typeof LinkedInIcon;
+    readonly mail: typeof MailIcon;
+    readonly navigate: typeof NavigateIcon;
+    readonly phone: typeof PhoneIcon;
+    readonly show: typeof ShowIcon;
+    readonly user: typeof UserIcon;
 };
-type RubyRedStep = keyof typeof rubyRed;
-/** Emerald Green scale — Figma steps 0 → 8.5 */
-declare const emeraldGreen: {
-    readonly "0": "#f0fbf5";
-    readonly "0.5": "#dcf2e5";
-    readonly "1": "#c8e8d5";
-    readonly "1.5": "#b4dfc5";
-    readonly "2": "#a0d5b5";
-    readonly "3": "#77c394";
-    readonly "4": "#4fb074";
-    readonly "5": "#279d54";
-    readonly "6": "#1f7e43";
-    readonly "7": "#175e32";
-    readonly "8": "#103f22";
-    readonly "8.5": "#0c2f19";
+type IconName = keyof typeof icons;
+declare const iconNames: IconName[];
+declare const iconGroups: {
+    readonly navigation: readonly ["arrowRight", "home", "navigate"];
+    readonly actions: readonly ["show", "bell", "camera", "key", "checkBadge"];
+    readonly objects: readonly ["bag", "building", "clock", "user"];
+    readonly communication: readonly ["mail", "phone"];
+    readonly social: readonly ["facebook", "instagram", "linkedin"];
 };
-type EmeraldGreenStep = keyof typeof emeraldGreen;
-/** Figma brand palette — primary swatch per color family */
-declare const brand: {
-    readonly slateBlue: "#182e3c";
-    readonly stormGray: "#455765";
-    readonly navy: "#082640";
-    readonly rubyRed: "#ae0011";
-    readonly emeraldGreen: "#279d54";
+type IconGroup = keyof typeof iconGroups;
+declare const iconGroupNames: IconGroup[];
+declare function getIconsByGroup(group: IconGroup): IconName[];
+
+interface IconByNameProps extends IconProps {
+    name: IconName;
+}
+declare function Icon({ name, ...props }: IconByNameProps): react.JSX.Element;
+
+declare const grey: {
+    readonly "0": "#767676";
+    readonly "0.5": "#6E6E6E";
+    readonly "1": "#666666";
+    readonly "1.5": "#5E5E5E";
+    readonly "2": "#565656";
+    readonly "3": "#474747";
+    readonly "4": "#373737";
+    readonly "5": "#272727";
+    readonly "6": "#1F1F1F";
+    readonly "7": "#171717";
+    readonly "7.5": "#161616";
+    readonly "8": "#101010";
+    readonly "8.5": "#0C0C0C";
+    readonly "9": "#080808";
+    readonly "9.5": "#040404";
 };
+type GreyStep = keyof typeof grey;
 declare const colors: {
-    readonly slateBlue: "#182e3c";
-    readonly emeraldGreen0: "#f0fbf5";
-    readonly emeraldGreen50: "#dcf2e5";
-    readonly emeraldGreen100: "#c8e8d5";
-    readonly emeraldGreen150: "#b4dfc5";
-    readonly emeraldGreen200: "#a0d5b5";
-    readonly emeraldGreen300: "#77c394";
-    readonly emeraldGreen400: "#4fb074";
-    readonly emeraldGreen500: "#279d54";
-    readonly emeraldGreen600: "#1f7e43";
-    readonly emeraldGreen700: "#175e32";
-    readonly emeraldGreen800: "#103f22";
-    readonly emeraldGreen850: "#0c2f19";
-    /** Primary brand emerald green — Figma Emerald Green 5 */
-    readonly emeraldGreen: "#279d54";
-    readonly rubyRed0: "#fff5f6";
-    readonly rubyRed50: "#f7dddf";
-    readonly rubyRed100: "#efc4c8";
-    readonly rubyRed150: "#e7acb1";
-    readonly rubyRed200: "#df939a";
-    readonly rubyRed300: "#ce626d";
-    readonly rubyRed400: "#be313f";
-    readonly rubyRed500: "#ae0011";
-    readonly rubyRed600: "#8b000e";
-    readonly rubyRed700: "#68000a";
-    readonly rubyRed800: "#460007";
-    readonly rubyRed850: "#340005";
-    /** Primary brand ruby red — Figma Ruby Red 5 */
-    readonly rubyRed: "#ae0011";
-    readonly navy0: "#f6fafe";
-    readonly navy50: "#dee5eb";
-    readonly navy100: "#c6d0d8";
-    readonly navy150: "#afbac5";
-    readonly navy200: "#97a5b2";
-    readonly navy300: "#677b8c";
-    readonly navy400: "#385066";
-    readonly navy500: "#082640";
-    readonly navy600: "#061e33";
-    readonly navy700: "#051726";
-    readonly navy800: "#030f1a";
-    readonly navy850: "#020b13";
-    /** Primary brand navy — Figma Navy 5 */
-    readonly navy: "#082640";
-    readonly stormGray0: "#fbfcfc";
-    readonly stormGray50: "#eceef0";
-    readonly stormGray100: "#dadde0";
-    readonly stormGray150: "#c7cdd1";
-    readonly stormGray200: "#b5bcc1";
-    readonly stormGray300: "#8f9aa3";
-    readonly stormGray400: "#6a7984";
-    readonly stormGray500: "#455765";
-    /** Figma brand swatch "Storm Gray" — same as `stormGray500` */
-    readonly stormGrayBrand: "#455765";
-    readonly stormGray600: "#374651";
-    readonly stormGray700: "#29343d";
-    readonly stormGray800: "#1c2328";
-    readonly stormGray850: "#151a1e";
-    /** @deprecated Use `stormGray0` */
-    readonly storm0: "#fbfcfc";
-    /** @deprecated Use `stormGray50` */
-    readonly storm50: "#eceef0";
-    /** @deprecated Use `stormGray200` */
-    readonly storm200: "#b5bcc1";
-    /** @deprecated Use `stormGray300` */
-    readonly storm300: "#8f9aa3";
-    /** @deprecated Use `stormGray500` */
-    readonly storm500: "#455765";
-    /** @deprecated Use `stormGray700` */
-    readonly storm700: "#29343d";
-    /** @deprecated Use `stormGray850` */
-    readonly storm900: "#151a1e";
-    readonly countrySelectorSelectedBg: "#eceef099";
+    readonly primary: "#B46436";
+    readonly black: "#000000";
     readonly white: "#ffffff";
-    readonly error: "#dc2626";
-    readonly errorDark: "#b3261e";
-    readonly errorLight: "#fee2e2";
-    /** @deprecated Use `rubyRed` */
-    readonly inputError: "#ae0011";
-    readonly inputOutlineFocus: "#dee5eb";
-    readonly inputOutlineError: "#f7dddf";
-    readonly warning: "#92400e";
-    readonly warningBg: "#fef3c7";
-    readonly success: "#28a745";
-    readonly successMuted: "#9fd4a8";
-    /** @deprecated Use `emeraldGreen` */
-    readonly green: "#279d54";
-    readonly transparent: "transparent";
-};
-declare const radii: {
-    readonly sm: 8;
-    readonly md: 12;
-    readonly lg: 16;
-    readonly xl: 20;
-    readonly full: 9999;
-};
-declare const spacing: {
-    readonly xs: 4;
-    readonly sm: 8;
-    readonly md: 12;
-    readonly lg: 16;
-    readonly xl: 24;
-    readonly xxl: 32;
-};
-declare const fontSize: {
-    readonly xs: 11;
-    readonly sm: 12;
-    readonly md: 14;
-    readonly base: 16;
-    readonly lg: 18;
-    readonly xl: 24;
-    readonly xxl: 32;
-};
-/**
- * Canonical Homepad type scale (matches `.typography-*` in `src/web/styles/typography.css`).
- * font-size / line-height pairs:
- * 12/16 · 14/19 · 18/24 · 20/27 · 24/25 · 32/34
- */
-declare const typographyScale: {
-    readonly 12: {
-        readonly fontSize: 12;
-        readonly lineHeight: 16;
-    };
-    readonly 14: {
-        readonly fontSize: 14;
-        readonly lineHeight: 19;
-    };
-    readonly 18: {
-        readonly fontSize: 18;
-        readonly lineHeight: 24;
-    };
-    readonly 20: {
-        readonly fontSize: 20;
-        readonly lineHeight: 27;
-    };
-    readonly 24: {
-        readonly fontSize: 24;
-        readonly lineHeight: 25;
-    };
-    readonly 32: {
-        readonly fontSize: 32;
-        readonly lineHeight: 34;
-    };
-};
-declare const fontWeight: {
-    regular: "400";
-    medium: "500";
-    semibold: "600";
-    bold: "700";
+    readonly dark: "#090909";
+    readonly red: "#A63E3E";
+    readonly lightGrey: "#B7B7B7";
+    readonly primaryMuted: "#B464360F";
+    readonly redMuted: "#A63E3E0F";
+    readonly grey0: "#767676";
+    readonly grey50: "#6E6E6E";
+    readonly grey100: "#666666";
+    readonly grey150: "#5E5E5E";
+    readonly grey200: "#565656";
+    readonly grey300: "#474747";
+    readonly grey400: "#373737";
+    readonly grey500: "#272727";
+    readonly grey600: "#1F1F1F";
+    readonly grey700: "#171717";
+    readonly grey750: "#161616";
+    readonly grey800: "#101010";
+    readonly grey850: "#0C0C0C";
+    readonly grey900: "#080808";
+    readonly grey950: "#040404";
 };
+
 declare const fonts: {
     readonly sans: "Noto Sans Armenian";
 };
-/** Input label typography — Medium, typography-12 scale. */
-declare const labelTypography: {
-    readonly fontFamily: "Noto Sans Armenian";
-    readonly fontSize: 12;
-    readonly fontWeight: "500";
-    readonly lineHeight: 16;
-    readonly letterSpacing: 0;
-};
-/** Button label typography — SemiBold. */
+/** Button label — SemiBold, line-height 100%, letter-spacing 3%. */
 declare const buttonTypography: {
     readonly lg: {
         readonly fontFamily: "Noto Sans Armenian";
         readonly fontSize: 14;
         readonly fontWeight: "600";
-        readonly lineHeight: 19;
-        readonly letterSpacing: 0;
+        readonly lineHeight: 14;
+        readonly letterSpacing: 0.42;
     };
     readonly sm: {
         readonly fontFamily: "Noto Sans Armenian";
         readonly fontSize: 12;
         readonly fontWeight: "600";
+        readonly lineHeight: 12;
+        readonly letterSpacing: 0.36;
+    };
+};
+/** Input label / field / hint typography. */
+declare const inputTypography: {
+    readonly label: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 12;
+        readonly fontWeight: "500";
         readonly lineHeight: 16;
         readonly letterSpacing: 0;
     };
-};
-declare const shadows: {
-    readonly card: {
-        readonly shadowColor: "#082640";
-        readonly shadowOffset: {
-            readonly width: 0;
-            readonly height: 4;
-        };
-        readonly shadowOpacity: 0.05;
-        readonly shadowRadius: 20;
-        readonly elevation: 2;
+    readonly field: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 14;
+        readonly fontWeight: "400";
+        readonly lineHeight: 19;
+        readonly letterSpacing: 0;
     };
-    readonly cardLg: {
-        readonly shadowColor: "#082640";
-        readonly shadowOffset: {
-            readonly width: 0;
-            readonly height: 4;
-        };
-        readonly shadowOpacity: 0.1;
-        readonly shadowRadius: 20;
-        readonly elevation: 4;
+    readonly hint: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 12;
+        readonly fontWeight: "400";
+        readonly lineHeight: 16;
+        readonly letterSpacing: 0;
     };
 };
 
-export { ArrowUpRightIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type EmeraldGreenStep, type NavyStep, type RubyRedStep, type StormGrayStep, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray, typographyScale };
+export { ArrowRightIcon, BagIcon, BellIcon, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CameraIcon, CheckBadgeIcon, ClockIcon, FacebookIcon, type GreyStep, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputProps, type InputSize, type InputState, InstagramIcon, KeyIcon, LinkedInIcon, MailIcon, NavigateIcon, PhoneIcon, ShowIcon, UserIcon, buttonTypography, colors, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography };