@xaui/native 0.0.19 → 0.0.21

package/dist/input/index.d.cts

@@ -0,0 +1,492 @@
+import { T as ThemeColor, R as Radius } from '../index-BOw6tbkc.cjs';
+import React, { ReactNode } from 'react';
+import * as react_native from 'react-native';
+import { StyleProp, ViewStyle, TextStyle, TextInputProps as TextInputProps$1, TextInput as TextInput$1 } from 'react-native';
+
+type TextInputVariant = 'flat' | 'faded' | 'bordered' | 'underlined';
+type TextInputSize = 'sm' | 'md' | 'lg';
+type TextInputLabelPlacement = 'outside' | 'inside';
+type TextInputCustomAppearance = {
+    container?: StyleProp<ViewStyle>;
+    inputContainer?: StyleProp<ViewStyle>;
+    inputWrapper?: StyleProp<ViewStyle>;
+    label?: StyleProp<TextStyle>;
+    input?: StyleProp<TextStyle>;
+    helperText?: StyleProp<TextStyle>;
+};
+type TextInputProps = Omit<TextInputProps$1, 'value' | 'defaultValue' | 'style'> & {
+    /**
+     * Controlled value of the input.
+     */
+    value?: string;
+    /**
+     * Uncontrolled default value of the input.
+     */
+    defaultValue?: string;
+    /**
+     * Called when the input value changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Input label.
+     */
+    label?: ReactNode;
+    /**
+     * Label position relative to the field.
+     * @default 'outside'
+     */
+    labelPlacement?: TextInputLabelPlacement;
+    /**
+     * Helper text displayed below the input.
+     */
+    description?: ReactNode;
+    /**
+     * Error text displayed below the input when invalid.
+     */
+    errorMessage?: ReactNode;
+    /**
+     * Start slot content.
+     */
+    startContent?: ReactNode;
+    /**
+     * End slot content.
+     */
+    endContent?: ReactNode;
+    /**
+     * Theme color used for focus/active states.
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Visual style variant.
+     * @default 'flat'
+     */
+    variant?: TextInputVariant;
+    /**
+     * Input size.
+     * @default 'md'
+     */
+    size?: TextInputSize;
+    /**
+     * Input radius.
+     * @default 'md'
+     */
+    radius?: Radius;
+    /**
+     * Whether the input should be secured (password mode).
+     * @default false
+     */
+    isSecured?: boolean;
+    /**
+     * Whether to show a clear button when input has value.
+     * @default false
+     */
+    isClearable?: boolean;
+    /**
+     * Whether the input is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the input is read-only.
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /**
+     * Whether the input is invalid.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether the component should take full available width.
+     * @default true
+     */
+    fullWidth?: boolean;
+    /**
+     * Optional custom styles for input parts.
+     */
+    customAppearance?: TextInputCustomAppearance;
+};
+
+declare const TextInput: React.ForwardRefExoticComponent<Omit<react_native.TextInputProps, "value" | "defaultValue" | "style"> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    label?: React.ReactNode;
+    labelPlacement?: TextInputLabelPlacement;
+    description?: React.ReactNode;
+    errorMessage?: React.ReactNode;
+    startContent?: React.ReactNode;
+    endContent?: React.ReactNode;
+    themeColor?: ThemeColor;
+    variant?: TextInputVariant;
+    size?: TextInputSize;
+    radius?: Radius;
+    isSecured?: boolean;
+    isClearable?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isInvalid?: boolean;
+    fullWidth?: boolean;
+    customAppearance?: TextInputCustomAppearance;
+} & React.RefAttributes<TextInput$1>>;
+
+type DateSeparator = '-' | '/' | '.';
+type DateOrder = 'YMD' | 'DMY' | 'MDY';
+type TimeInputGranularity = 'minute' | 'second';
+type DateInputProps = TextInputProps & {
+    /**
+     * Separator character between date segments.
+     * @default '-'
+     */
+    separator?: DateSeparator;
+    /**
+     * Date segment ordering.
+     * Auto-detected from locale if not provided.
+     */
+    dateOrder?: DateOrder;
+    /**
+     * Locale string used to auto-detect date order.
+     * @default 'en-US'
+     */
+    locale?: string;
+};
+type TimeInputProps = TextInputProps & {
+    /**
+     * Smallest time unit shown in the placeholder.
+     * @default 'minute'
+     */
+    granularity?: TimeInputGranularity;
+    /**
+     * 12-hour or 24-hour format placeholder hint.
+     * @default 24
+     */
+    hourCycle?: 12 | 24;
+};
+type DateTimeInputProps = TextInputProps & {
+    /**
+     * Separator character between date segments.
+     * @default '-'
+     */
+    separator?: DateSeparator;
+    /**
+     * Date segment ordering.
+     * Auto-detected from locale if not provided.
+     */
+    dateOrder?: DateOrder;
+    /**
+     * Locale string used to auto-detect date order.
+     * @default 'en-US'
+     */
+    locale?: string;
+    /**
+     * Smallest time unit shown in the placeholder.
+     * @default 'minute'
+     */
+    granularity?: TimeInputGranularity;
+    /**
+     * 12-hour or 24-hour format placeholder hint.
+     * @default 24
+     */
+    hourCycle?: 12 | 24;
+};
+
+declare const DateInput: React.ForwardRefExoticComponent<Omit<react_native.TextInputProps, "value" | "defaultValue" | "style"> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    label?: React.ReactNode;
+    labelPlacement?: TextInputLabelPlacement;
+    description?: React.ReactNode;
+    errorMessage?: React.ReactNode;
+    startContent?: React.ReactNode;
+    endContent?: React.ReactNode;
+    themeColor?: ThemeColor;
+    variant?: TextInputVariant;
+    size?: TextInputSize;
+    radius?: Radius;
+    isSecured?: boolean;
+    isClearable?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isInvalid?: boolean;
+    fullWidth?: boolean;
+    customAppearance?: TextInputCustomAppearance;
+} & {
+    separator?: DateSeparator;
+    dateOrder?: DateOrder;
+    locale?: string;
+} & React.RefAttributes<TextInput$1>>;
+declare const TimeInput: React.ForwardRefExoticComponent<Omit<react_native.TextInputProps, "value" | "defaultValue" | "style"> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    label?: React.ReactNode;
+    labelPlacement?: TextInputLabelPlacement;
+    description?: React.ReactNode;
+    errorMessage?: React.ReactNode;
+    startContent?: React.ReactNode;
+    endContent?: React.ReactNode;
+    themeColor?: ThemeColor;
+    variant?: TextInputVariant;
+    size?: TextInputSize;
+    radius?: Radius;
+    isSecured?: boolean;
+    isClearable?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isInvalid?: boolean;
+    fullWidth?: boolean;
+    customAppearance?: TextInputCustomAppearance;
+} & {
+    granularity?: TimeInputGranularity;
+    hourCycle?: 12 | 24;
+} & React.RefAttributes<TextInput$1>>;
+declare const DateTimeInput: React.ForwardRefExoticComponent<Omit<react_native.TextInputProps, "value" | "defaultValue" | "style"> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    label?: React.ReactNode;
+    labelPlacement?: TextInputLabelPlacement;
+    description?: React.ReactNode;
+    errorMessage?: React.ReactNode;
+    startContent?: React.ReactNode;
+    endContent?: React.ReactNode;
+    themeColor?: ThemeColor;
+    variant?: TextInputVariant;
+    size?: TextInputSize;
+    radius?: Radius;
+    isSecured?: boolean;
+    isClearable?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isInvalid?: boolean;
+    fullWidth?: boolean;
+    customAppearance?: TextInputCustomAppearance;
+} & {
+    separator?: DateSeparator;
+    dateOrder?: DateOrder;
+    locale?: string;
+    granularity?: TimeInputGranularity;
+    hourCycle?: 12 | 24;
+} & React.RefAttributes<TextInput$1>>;
+
+type OTPInputCustomAppearance = {
+    container?: StyleProp<ViewStyle>;
+    segmentContainer?: StyleProp<ViewStyle>;
+    segment?: StyleProp<ViewStyle>;
+    segmentText?: StyleProp<TextStyle>;
+    label?: StyleProp<TextStyle>;
+    helperText?: StyleProp<TextStyle>;
+};
+type OTPInputProps = {
+    /**
+     * Number of OTP segments.
+     * @default 4
+     */
+    length?: number;
+    /**
+     * Controlled value of the OTP input.
+     */
+    value?: string;
+    /**
+     * Uncontrolled default value.
+     */
+    defaultValue?: string;
+    /**
+     * Called when the OTP value changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Called when all segments are filled.
+     */
+    onComplete?: (value: string) => void;
+    /**
+     * Visual style variant.
+     * @default 'flat'
+     */
+    variant?: TextInputVariant;
+    /**
+     * Input size.
+     * @default 'md'
+     */
+    size?: TextInputSize;
+    /**
+     * Input radius.
+     * @default 'md'
+     */
+    radius?: Radius;
+    /**
+     * Theme color used for focus/active states.
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Whether the input is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the input is invalid.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether to hide entered characters.
+     * @default false
+     */
+    isSecured?: boolean;
+    /**
+     * Error text displayed below the input when invalid.
+     */
+    errorMessage?: string;
+    /**
+     * Helper text displayed below the input.
+     */
+    description?: string;
+    /**
+     * Input label.
+     */
+    label?: string;
+    /**
+     * Regex to filter allowed key input.
+     * @default /^[0-9]$/
+     */
+    allowedKeys?: RegExp;
+    /**
+     * Optional custom styles for input parts.
+     */
+    customAppearance?: OTPInputCustomAppearance;
+    /**
+     * Whether the component should take full available width.
+     * @default false
+     */
+    fullWidth?: boolean;
+};
+
+declare const OTPInput: {
+    ({ length, value, defaultValue, onValueChange, onComplete, variant, size, radius, themeColor, isDisabled, isInvalid, isSecured, errorMessage, description, label, allowedKeys, customAppearance, fullWidth, }: OTPInputProps): React.JSX.Element;
+    displayName: string;
+};
+
+type NumberInputCustomAppearance = TextInputCustomAppearance & {
+    stepperContainer?: StyleProp<ViewStyle>;
+    stepperButton?: StyleProp<ViewStyle>;
+};
+type NumberInputProps = {
+    /**
+     * Controlled numeric value.
+     */
+    value?: number;
+    /**
+     * Uncontrolled default numeric value.
+     */
+    defaultValue?: number;
+    /**
+     * Called when the numeric value changes.
+     */
+    onValueChange?: (value: number | undefined) => void;
+    /**
+     * Minimum allowed value.
+     */
+    minValue?: number;
+    /**
+     * Maximum allowed value.
+     */
+    maxValue?: number;
+    /**
+     * Step increment/decrement amount.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Whether to hide the stepper buttons.
+     * @default false
+     */
+    hideStepper?: boolean;
+    /**
+     * Intl.NumberFormat options for display formatting.
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    /**
+     * Locale for number formatting.
+     * @default 'en-US'
+     */
+    locale?: string;
+    /**
+     * Input label.
+     */
+    label?: string;
+    /**
+     * Label position relative to the field.
+     * @default 'outside'
+     */
+    labelPlacement?: TextInputLabelPlacement;
+    /**
+     * Helper text displayed below the input.
+     */
+    description?: string;
+    /**
+     * Error text displayed below the input when invalid.
+     */
+    errorMessage?: string;
+    /**
+     * Placeholder text.
+     */
+    placeholder?: string;
+    /**
+     * Theme color used for focus/active states.
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Visual style variant.
+     * @default 'flat'
+     */
+    variant?: TextInputVariant;
+    /**
+     * Input size.
+     * @default 'md'
+     */
+    size?: TextInputSize;
+    /**
+     * Input radius.
+     * @default 'md'
+     */
+    radius?: Radius;
+    /**
+     * Whether the input is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the input is read-only.
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /**
+     * Whether the input is invalid.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether to show a clear button.
+     * @default false
+     */
+    isClearable?: boolean;
+    /**
+     * Whether the component should take full available width.
+     * @default true
+     */
+    fullWidth?: boolean;
+    /**
+     * Optional custom styles for input parts.
+     */
+    customAppearance?: NumberInputCustomAppearance;
+};
+
+declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<TextInput$1>>;
+
+declare const getDateOrder: (locale: string) => DateOrder;
+
+export { DateInput, type DateInputProps, type DateOrder, type DateSeparator, DateTimeInput, type DateTimeInputProps, NumberInput, type NumberInputCustomAppearance, type NumberInputProps, OTPInput, type OTPInputCustomAppearance, type OTPInputProps, TextInput, type TextInputCustomAppearance, type TextInputLabelPlacement, type TextInputProps, type TextInputSize, type TextInputVariant, TimeInput, type TimeInputGranularity, type TimeInputProps, getDateOrder };