@scripso-homepad/ui 0.4.1 → 0.4.3

package/dist/index.d.cts

@@ -28,6 +28,8 @@ interface InputProps extends TextInputProps {
     rightIcon?: ReactNode;
     /** Validation or helper error message. Shown instead of `hint` when set. */
     error?: string;
+    /** Applies error field styling without showing a message (use with a form-level error). */
+    invalid?: boolean;
     /** Helper text shown below the input when there is no error. */
     hint?: string;
     containerStyle?: StyleProp<ViewStyle>;
@@ -44,7 +46,42 @@ interface InputProps extends TextInputProps {
     /** When `secureTextEntry` is set, show a toggleable eye icon. Pass `false` to disable. */
     showPasswordToggle?: boolean;
 }
-declare function Input({ label, leftIcon, rightIcon, error, hint, containerStyle, style, className, fieldClassName, fieldStyle, labelClassName, inputClassName, errorClassName, hintClassName, editable, secureTextEntry, showPasswordToggle, onFocus, onBlur, ...props }: InputProps): react.JSX.Element;
+declare function Input({ label, leftIcon, rightIcon, error, invalid, hint, containerStyle, style, className, fieldClassName, fieldStyle, labelClassName, inputClassName, errorClassName, hintClassName, editable, secureTextEntry, showPasswordToggle, onFocus, onBlur, ...props }: InputProps): react.JSX.Element;
+
+type SelectOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+interface SelectBaseProps {
+    label?: string;
+    placeholder?: string;
+    options: SelectOption[];
+    leftIcon?: ReactNode;
+    disabled?: boolean;
+    error?: string;
+    invalid?: boolean;
+    hint?: string;
+    containerStyle?: StyleProp<ViewStyle>;
+    className?: string;
+    fieldClassName?: string;
+    menuClassName?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    hintClassName?: string;
+}
+interface SingleSelectProps extends SelectBaseProps {
+    multiple?: false;
+    value?: string;
+    onValueChange?: (value: string) => void;
+}
+interface MultipleSelectProps extends SelectBaseProps {
+    multiple: true;
+    value?: string[];
+    onValueChange?: (value: string[]) => void;
+}
+type SelectProps = SingleSelectProps | MultipleSelectProps;
+declare function Select({ label, placeholder, value, onValueChange, options, leftIcon, multiple, disabled, error, invalid, hint, containerStyle, className, fieldClassName, menuClassName, labelClassName, errorClassName, hintClassName, }: SelectProps): react.JSX.Element;
 
 interface PhoneInputProps extends Omit<TextInputProps, "style"> {
     label?: string;
@@ -82,6 +119,103 @@ interface CountryCodeSelectorProps {
 }
 declare function CountryCodeSelector({ value, onValueChange, options, disabled, style, className, }: CountryCodeSelectorProps): react.JSX.Element;
 
+type DateRange = {
+    start: Date;
+    end?: Date;
+};
+
+type CalendarLocale = "hy-AM" | "en-US" | "ru-RU";
+type CalendarTranslationKey$1 = "datePlaceholder" | "rangePlaceholder" | "previousMonth" | "nextMonth" | "previousYear" | "nextYear" | "previousYears" | "nextYears" | "selectMonth" | "selectYear" | "closeCalendar";
+type CalendarTranslations = Record<CalendarTranslationKey$1, string> & {
+    /** Weekday labels in Monday-first order. */
+    weekdays: string[];
+    /** Short month labels used in compact calendar headers and month picker cells. */
+    monthsShort: string[];
+    /** Full month labels available for consumers that need long-form display. */
+    monthsLong: string[];
+};
+declare const calendarTranslations: Record<CalendarLocale, CalendarTranslations>;
+declare function resolveCalendarLocale(locale: string): CalendarLocale;
+declare function getCalendarTranslations(locale: string): CalendarTranslations;
+declare function resolveWeekdayLabels(locale: string): string[];
+declare function getCalendarMonthLabels(locale: string, width?: "short" | "long"): string[];
+declare function formatLocalizedCalendarMonthYear(date: Date, locale: string): string;
+
+type CalendarLabels = Partial<Pick<CalendarTranslations, CalendarTranslationKey>> & {
+    weekdays?: string[];
+    formatMonthYear?: (date: Date) => string;
+};
+type CalendarTranslationKey = "previousMonth" | "nextMonth" | "previousYear" | "nextYear" | "previousYears" | "nextYears" | "selectMonth" | "selectYear" | "closeCalendar";
+type CalendarBaseProps = {
+    viewDate?: Date;
+    defaultViewDate?: Date;
+    onViewDateChange?: (date: Date) => void;
+    locale?: string;
+    labels?: CalendarLabels;
+    minDate?: Date;
+    maxDate?: Date;
+    today?: Date;
+    style?: StyleProp<ViewStyle>;
+    className?: string;
+};
+type CalendarSingleProps = CalendarBaseProps & {
+    mode?: "single";
+    value?: Date;
+    onChange?: (date: Date) => void;
+};
+type CalendarRangeProps = CalendarBaseProps & {
+    mode: "range";
+    value?: DateRange;
+    onChange?: (range: DateRange) => void;
+};
+type CalendarProps = CalendarSingleProps | CalendarRangeProps;
+declare function Calendar(props: CalendarProps): react.JSX.Element;
+
+type CalendarLocaleProviderProps = {
+    locale: string;
+    children: ReactNode;
+};
+declare function CalendarLocaleProvider({ locale, children }: CalendarLocaleProviderProps): react.JSX.Element;
+declare function useCalendarLocale(locale?: string): CalendarLocale;
+
+type DatePickerFieldProps = {
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: string;
+    invalid?: boolean;
+    hint?: string;
+    containerStyle?: StyleProp<ViewStyle>;
+    className?: string;
+    fieldClassName?: string;
+    panelClassName?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    hintClassName?: string;
+    /** Opens the calendar popup on mount (useful for Storybook previews). */
+    defaultOpen?: boolean;
+    /** Closes the popup after a complete range is selected. Defaults to true in range mode. */
+    closeOnRangeComplete?: boolean;
+};
+type DatePickerSingleProps = Omit<CalendarSingleProps, "style" | "className"> & DatePickerFieldProps & {
+    mode?: "single";
+    formatDate?: (date: Date) => string;
+};
+type DatePickerRangeProps = Omit<CalendarRangeProps, "style" | "className"> & DatePickerFieldProps & {
+    mode: "range";
+    formatRange?: (range: DateRange) => string;
+    rangeSeparator?: string;
+};
+type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
+declare function DatePicker(props: DatePickerProps): react.JSX.Element;
+
+interface CalendarIconProps {
+    size?: number;
+    color?: string;
+    strokeWidth?: number;
+}
+declare function CalendarIcon({ size, color, strokeWidth, }: CalendarIconProps): react.JSX.Element;
+
 interface LabelProps extends TextProps {
     children: ReactNode;
     /** Render as a required field indicator. */
@@ -92,6 +226,14 @@ interface LabelProps extends TextProps {
 }
 declare function Label({ children, required, disabled, style, className, ...props }: LabelProps): react.JSX.Element;
 
+interface LockIconProps {
+    size?: number;
+    color?: string;
+    strokeWidth?: number;
+}
+/** Native — react-native-svg (peer dependency). */
+declare function LockIcon({ size, color, strokeWidth, }: LockIconProps): react.JSX.Element;
+
 /**
  * HomePad design tokens — aligned with the Figma design system
  * (navy / storm gray / slate-blue palette from HomePad brand).
@@ -338,4 +480,4 @@ declare const shadows: {
     };
 };
 
-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 };
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, CalendarIcon, type CalendarLabels, type CalendarLocale, CalendarLocaleProvider, type CalendarLocaleProviderProps, type CalendarProps, type CalendarRangeProps, type CalendarSingleProps, type CalendarTranslationKey$1 as CalendarTranslationKey, type CalendarTranslations, type Country, CountryCodeSelector, type CountryCodeSelectorProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, type EmeraldGreenStep, Input, type InputProps, Label, type LabelProps, LockIcon, type MultipleSelectProps, type NavyStep, PhoneInput, type PhoneInputProps, type RubyRedStep, Select, type SelectOption, type SelectProps, type SingleSelectProps, type StormGrayStep, brand, buttonTypography, calendarTranslations, colors, countries, defaultCountry, emeraldGreen, findCountry, fontSize, fontWeight, fonts, formatLocalizedCalendarMonthYear, getCalendarMonthLabels, getCalendarTranslations, labelTypography, navy, radii, resolveCalendarLocale, resolveWeekdayLabels, rubyRed, shadows, spacing, stormGray, useCalendarLocale };

package/dist/index.d.ts

@@ -28,6 +28,8 @@ interface InputProps extends TextInputProps {
     rightIcon?: ReactNode;
     /** Validation or helper error message. Shown instead of `hint` when set. */
     error?: string;
+    /** Applies error field styling without showing a message (use with a form-level error). */
+    invalid?: boolean;
     /** Helper text shown below the input when there is no error. */
     hint?: string;
     containerStyle?: StyleProp<ViewStyle>;
@@ -44,7 +46,42 @@ interface InputProps extends TextInputProps {
     /** When `secureTextEntry` is set, show a toggleable eye icon. Pass `false` to disable. */
     showPasswordToggle?: boolean;
 }
-declare function Input({ label, leftIcon, rightIcon, error, hint, containerStyle, style, className, fieldClassName, fieldStyle, labelClassName, inputClassName, errorClassName, hintClassName, editable, secureTextEntry, showPasswordToggle, onFocus, onBlur, ...props }: InputProps): react.JSX.Element;
+declare function Input({ label, leftIcon, rightIcon, error, invalid, hint, containerStyle, style, className, fieldClassName, fieldStyle, labelClassName, inputClassName, errorClassName, hintClassName, editable, secureTextEntry, showPasswordToggle, onFocus, onBlur, ...props }: InputProps): react.JSX.Element;
+
+type SelectOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+interface SelectBaseProps {
+    label?: string;
+    placeholder?: string;
+    options: SelectOption[];
+    leftIcon?: ReactNode;
+    disabled?: boolean;
+    error?: string;
+    invalid?: boolean;
+    hint?: string;
+    containerStyle?: StyleProp<ViewStyle>;
+    className?: string;
+    fieldClassName?: string;
+    menuClassName?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    hintClassName?: string;
+}
+interface SingleSelectProps extends SelectBaseProps {
+    multiple?: false;
+    value?: string;
+    onValueChange?: (value: string) => void;
+}
+interface MultipleSelectProps extends SelectBaseProps {
+    multiple: true;
+    value?: string[];
+    onValueChange?: (value: string[]) => void;
+}
+type SelectProps = SingleSelectProps | MultipleSelectProps;
+declare function Select({ label, placeholder, value, onValueChange, options, leftIcon, multiple, disabled, error, invalid, hint, containerStyle, className, fieldClassName, menuClassName, labelClassName, errorClassName, hintClassName, }: SelectProps): react.JSX.Element;
 
 interface PhoneInputProps extends Omit<TextInputProps, "style"> {
     label?: string;
@@ -82,6 +119,103 @@ interface CountryCodeSelectorProps {
 }
 declare function CountryCodeSelector({ value, onValueChange, options, disabled, style, className, }: CountryCodeSelectorProps): react.JSX.Element;
 
+type DateRange = {
+    start: Date;
+    end?: Date;
+};
+
+type CalendarLocale = "hy-AM" | "en-US" | "ru-RU";
+type CalendarTranslationKey$1 = "datePlaceholder" | "rangePlaceholder" | "previousMonth" | "nextMonth" | "previousYear" | "nextYear" | "previousYears" | "nextYears" | "selectMonth" | "selectYear" | "closeCalendar";
+type CalendarTranslations = Record<CalendarTranslationKey$1, string> & {
+    /** Weekday labels in Monday-first order. */
+    weekdays: string[];
+    /** Short month labels used in compact calendar headers and month picker cells. */
+    monthsShort: string[];
+    /** Full month labels available for consumers that need long-form display. */
+    monthsLong: string[];
+};
+declare const calendarTranslations: Record<CalendarLocale, CalendarTranslations>;
+declare function resolveCalendarLocale(locale: string): CalendarLocale;
+declare function getCalendarTranslations(locale: string): CalendarTranslations;
+declare function resolveWeekdayLabels(locale: string): string[];
+declare function getCalendarMonthLabels(locale: string, width?: "short" | "long"): string[];
+declare function formatLocalizedCalendarMonthYear(date: Date, locale: string): string;
+
+type CalendarLabels = Partial<Pick<CalendarTranslations, CalendarTranslationKey>> & {
+    weekdays?: string[];
+    formatMonthYear?: (date: Date) => string;
+};
+type CalendarTranslationKey = "previousMonth" | "nextMonth" | "previousYear" | "nextYear" | "previousYears" | "nextYears" | "selectMonth" | "selectYear" | "closeCalendar";
+type CalendarBaseProps = {
+    viewDate?: Date;
+    defaultViewDate?: Date;
+    onViewDateChange?: (date: Date) => void;
+    locale?: string;
+    labels?: CalendarLabels;
+    minDate?: Date;
+    maxDate?: Date;
+    today?: Date;
+    style?: StyleProp<ViewStyle>;
+    className?: string;
+};
+type CalendarSingleProps = CalendarBaseProps & {
+    mode?: "single";
+    value?: Date;
+    onChange?: (date: Date) => void;
+};
+type CalendarRangeProps = CalendarBaseProps & {
+    mode: "range";
+    value?: DateRange;
+    onChange?: (range: DateRange) => void;
+};
+type CalendarProps = CalendarSingleProps | CalendarRangeProps;
+declare function Calendar(props: CalendarProps): react.JSX.Element;
+
+type CalendarLocaleProviderProps = {
+    locale: string;
+    children: ReactNode;
+};
+declare function CalendarLocaleProvider({ locale, children }: CalendarLocaleProviderProps): react.JSX.Element;
+declare function useCalendarLocale(locale?: string): CalendarLocale;
+
+type DatePickerFieldProps = {
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: string;
+    invalid?: boolean;
+    hint?: string;
+    containerStyle?: StyleProp<ViewStyle>;
+    className?: string;
+    fieldClassName?: string;
+    panelClassName?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    hintClassName?: string;
+    /** Opens the calendar popup on mount (useful for Storybook previews). */
+    defaultOpen?: boolean;
+    /** Closes the popup after a complete range is selected. Defaults to true in range mode. */
+    closeOnRangeComplete?: boolean;
+};
+type DatePickerSingleProps = Omit<CalendarSingleProps, "style" | "className"> & DatePickerFieldProps & {
+    mode?: "single";
+    formatDate?: (date: Date) => string;
+};
+type DatePickerRangeProps = Omit<CalendarRangeProps, "style" | "className"> & DatePickerFieldProps & {
+    mode: "range";
+    formatRange?: (range: DateRange) => string;
+    rangeSeparator?: string;
+};
+type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
+declare function DatePicker(props: DatePickerProps): react.JSX.Element;
+
+interface CalendarIconProps {
+    size?: number;
+    color?: string;
+    strokeWidth?: number;
+}
+declare function CalendarIcon({ size, color, strokeWidth, }: CalendarIconProps): react.JSX.Element;
+
 interface LabelProps extends TextProps {
     children: ReactNode;
     /** Render as a required field indicator. */
@@ -92,6 +226,14 @@ interface LabelProps extends TextProps {
 }
 declare function Label({ children, required, disabled, style, className, ...props }: LabelProps): react.JSX.Element;
 
+interface LockIconProps {
+    size?: number;
+    color?: string;
+    strokeWidth?: number;
+}
+/** Native — react-native-svg (peer dependency). */
+declare function LockIcon({ size, color, strokeWidth, }: LockIconProps): react.JSX.Element;
+
 /**
  * HomePad design tokens — aligned with the Figma design system
  * (navy / storm gray / slate-blue palette from HomePad brand).
@@ -338,4 +480,4 @@ declare const shadows: {
     };
 };
 
-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 };
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, CalendarIcon, type CalendarLabels, type CalendarLocale, CalendarLocaleProvider, type CalendarLocaleProviderProps, type CalendarProps, type CalendarRangeProps, type CalendarSingleProps, type CalendarTranslationKey$1 as CalendarTranslationKey, type CalendarTranslations, type Country, CountryCodeSelector, type CountryCodeSelectorProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, type EmeraldGreenStep, Input, type InputProps, Label, type LabelProps, LockIcon, type MultipleSelectProps, type NavyStep, PhoneInput, type PhoneInputProps, type RubyRedStep, Select, type SelectOption, type SelectProps, type SingleSelectProps, type StormGrayStep, brand, buttonTypography, calendarTranslations, colors, countries, defaultCountry, emeraldGreen, findCountry, fontSize, fontWeight, fonts, formatLocalizedCalendarMonthYear, getCalendarMonthLabels, getCalendarTranslations, labelTypography, navy, radii, resolveCalendarLocale, resolveWeekdayLabels, rubyRed, shadows, spacing, stormGray, useCalendarLocale };