@scripso-homepad/ui 0.3.5 → 0.3.7

package/dist/index.d.ts

@@ -1,31 +1,335 @@
 import * as react from 'react';
-import { GestureResponderEvent, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { ReactNode } from 'react';
+import { GestureResponderEvent, StyleProp, ViewStyle, TextStyle, TextInputProps, TextProps } from 'react-native';
 
-type ButtonVariant = "primary" | "secondary" | "outline" | "ghost";
-type ButtonSize = "small" | "medium" | "large";
+type ButtonVariant = "white" | "primary" | "green" | "gray";
+type ButtonSize = "lg" | "sm";
 interface ButtonProps {
-    title: string;
+    title?: string;
+    children?: ReactNode;
     onPress: (event: GestureResponderEvent) => void;
     disabled?: boolean;
-    /** Visual style preset. */
     variant?: ButtonVariant;
-    /** Size preset. */
     size?: ButtonSize;
-    /** Additional container styles (works on web and native). */
+    showIcon?: boolean;
+    /** Custom icon inside the badge. Defaults to `ArrowUpRightIcon` when `showIcon` is true. */
+    icon?: ReactNode;
     style?: StyleProp<ViewStyle>;
-    /** Additional label styles (works on web and native). */
     textStyle?: StyleProp<TextStyle>;
-    /**
-     * CSS class names for the container (web: applied to the same DOM node as default styles).
-     * On native: ignored unless using NativeWind with cssInterop.
-     */
     className?: string;
-    /**
-     * CSS class names for the label (web).
-     * On native: ignored unless using NativeWind with cssInterop.
-     */
     textClassName?: string;
 }
-declare function Button({ title, onPress, disabled, variant, size, style, textStyle, className, textClassName, }: ButtonProps): react.JSX.Element;
+declare function Button({ title, children, onPress, disabled, variant, size, showIcon, icon, style, textStyle, className, textClassName, }: ButtonProps): react.JSX.Element;
 
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };
+interface InputProps extends TextInputProps {
+    /** Optional field label rendered above the input. */
+    label?: string;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    /** Validation or helper error message. Shown instead of `hint` when set. */
+    error?: string;
+    /** Helper text shown below the input when there is no error. */
+    hint?: string;
+    containerStyle?: StyleProp<ViewStyle>;
+    style?: StyleProp<TextStyle>;
+    className?: string;
+    labelClassName?: string;
+    inputClassName?: string;
+    errorClassName?: string;
+    hintClassName?: string;
+}
+declare function Input({ label, leftIcon, rightIcon, error, hint, containerStyle, style, className, labelClassName, inputClassName, errorClassName, hintClassName, editable, onFocus, onBlur, ...props }: InputProps): react.JSX.Element;
+
+interface PhoneInputProps extends Omit<TextInputProps, "style"> {
+    label?: string;
+    countryCode?: string;
+    onCountryCodeChange?: (countryCode: string) => void;
+    error?: string;
+    hint?: string;
+    containerStyle?: StyleProp<ViewStyle>;
+    style?: StyleProp<TextStyle>;
+    className?: string;
+    labelClassName?: string;
+    inputClassName?: string;
+    errorClassName?: string;
+    hintClassName?: string;
+}
+declare function PhoneInput({ label, countryCode, onCountryCodeChange, error, hint, containerStyle, style, className, labelClassName, inputClassName, errorClassName, hintClassName, editable, onFocus, onBlur, ...props }: PhoneInputProps): react.JSX.Element;
+
+type Country = {
+    code: string;
+    name: string;
+    dialCode: string;
+};
+declare const defaultCountry: Country;
+declare const countries: Country[];
+declare function findCountry(code: string): Country;
+
+interface CountryCodeSelectorProps {
+    value?: string;
+    onValueChange?: (countryCode: string) => void;
+    /** Country list (defaults to built-in list). */
+    options?: Country[];
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    className?: string;
+}
+declare function CountryCodeSelector({ value, onValueChange, options, disabled, style, className, }: CountryCodeSelectorProps): react.JSX.Element;
+
+interface LabelProps extends TextProps {
+    children: ReactNode;
+    /** Render as a required field indicator. */
+    required?: boolean;
+    disabled?: boolean;
+    style?: StyleProp<TextStyle>;
+    className?: string;
+}
+declare function Label({ children, required, disabled, style, className, ...props }: LabelProps): react.JSX.Element;
+
+/**
+ * HomePad design tokens — aligned with the Figma design system
+ * (navy / storm gray / slate-blue palette from HomePad brand).
+ */
+/** 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": "#f8f9fb";
+    readonly "0.5": "#e5e9ef";
+    readonly "1": "#cdd3df";
+    readonly "1.5": "#b4bece";
+    readonly "2": "#9ca8be";
+    readonly "3": "#6a7d9e";
+    readonly "4": "#39527d";
+    readonly "5": "#08275d";
+    readonly "6": "#061f4a";
+    readonly "7": "#051738";
+    readonly "8": "#031025";
+    readonly "8.5": "#020c1c";
+};
+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";
+};
+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 EmeraldGreenStep = keyof typeof emeraldGreen;
+/** Figma brand palette — primary swatch per color family */
+declare const brand: {
+    readonly slateBlue: "#182e3c";
+    readonly stormGray: "#455765";
+    readonly navy: "#08275d";
+    readonly rubyRed: "#ae0011";
+    readonly emeraldGreen: "#279d54";
+};
+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: "#f8f9fb";
+    readonly navy50: "#e5e9ef";
+    readonly navy100: "#cdd3df";
+    readonly navy150: "#b4bece";
+    readonly navy200: "#9ca8be";
+    readonly navy300: "#6a7d9e";
+    readonly navy400: "#39527d";
+    readonly navy500: "#08275d";
+    readonly navy600: "#061f4a";
+    readonly navy700: "#051738";
+    readonly navy800: "#031025";
+    readonly navy850: "#020c1c";
+    /** Primary brand navy — Figma Navy 5 */
+    readonly navy: "#08275d";
+    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 white: "#ffffff";
+    readonly error: "#dc2626";
+    readonly errorDark: "#b3261e";
+    readonly errorLight: "#fee2e2";
+    /** @deprecated Use `rubyRed` */
+    readonly inputError: "#ae0011";
+    readonly inputOutlineFocus: "#e5e9ef";
+    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;
+};
+declare const fontWeight: {
+    regular: "400";
+    medium: "500";
+    semibold: "600";
+    bold: "700";
+};
+declare const fonts: {
+    readonly sans: "Noto Sans Armenian";
+};
+/** Input label typography — matches Figma (Medium, 100% line-height). */
+declare const labelTypography: {
+    readonly fontFamily: "Noto Sans Armenian";
+    readonly fontSize: 12;
+    readonly fontWeight: "500";
+    readonly lineHeight: 12;
+    readonly letterSpacing: 0;
+};
+/** Button label typography — matches Figma (SemiBold, 100% line-height). */
+declare const buttonTypography: {
+    readonly lg: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 14;
+        readonly fontWeight: "600";
+        readonly lineHeight: 14;
+        readonly letterSpacing: 0;
+    };
+    readonly sm: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 12;
+        readonly fontWeight: "600";
+        readonly lineHeight: 12;
+        readonly letterSpacing: 0;
+    };
+};
+declare const shadows: {
+    readonly card: {
+        readonly shadowColor: "#08275d";
+        readonly shadowOffset: {
+            readonly width: 0;
+            readonly height: 4;
+        };
+        readonly shadowOpacity: 0.05;
+        readonly shadowRadius: 20;
+        readonly elevation: 2;
+    };
+    readonly cardLg: {
+        readonly shadowColor: "#08275d";
+        readonly shadowOffset: {
+            readonly width: 0;
+            readonly height: 4;
+        };
+        readonly shadowOpacity: 0.1;
+        readonly shadowRadius: 20;
+        readonly elevation: 4;
+    };
+};
+
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, type Country, CountryCodeSelector, type CountryCodeSelectorProps, type EmeraldGreenStep, Input, type InputProps, Label, type LabelProps, type NavyStep, PhoneInput, type PhoneInputProps, type RubyRedStep, type StormGrayStep, brand, buttonTypography, colors, countries, defaultCountry, emeraldGreen, findCountry, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray };