@mci-ui/mci-ui 0.0.77 → 0.0.79

package/dist/types/index.d.ts

@@ -23,3 +23,4 @@ export { default as MciIdentityInput } from './shared/ui/mciIdentityInput/MciIde
 export { default as MciTableColumnsPanel } from './shared/ui/mciTable/MciTableColumnsPanel.tsx';
 export { default as useTableColumnSettings } from './shared/lib/hooks/useTableColumnSettings.ts';
 export type { MciTableColumn, MciTableProps, ColumnKey } from './shared/types/mci-table.types.ts';
+export type * from './shared/types/mci-ui.types.ts';

package/dist/types/shared/types/mci-ui.types.d.ts

@@ -0,0 +1 @@
+export type * from './ui';

package/dist/types/shared/types/ui/breadcrumb.types.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export type BreadcrumbItem = {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+    icon?: ReactNode;
+};
+export type Variant = 'blue' | 'yellow';
+export type MciBreadcrumbProps = {
+    items: BreadcrumbItem[];
+    variant?: Variant;
+    className?: string;
+};

package/dist/types/shared/types/ui/button.types.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export type ButtonProps = {
+    children?: ReactNode;
+    text?: string;
+    icon?: ReactNode;
+    iconPosition?: 'left' | 'right';
+    size?: 'sm' | 'md' | 'base';
+    variant?: 'primary' | 'secondary' | 'outline' | 'danger' | 'tertiary';
+    color?: 'blue' | 'yellow';
+    loading?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    className?: string;
+    type?: 'button' | 'submit' | 'reset';
+};

package/dist/types/shared/types/ui/check.types.d.ts

@@ -0,0 +1,15 @@
+import { ChangeEvent } from 'react';
+export type MciCheckProps = {
+    type?: 'checkbox' | 'radio';
+    label?: string;
+    supportText?: string;
+    checked?: boolean;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    className?: string;
+    variant?: 'blue' | 'yellow';
+    name?: string;
+    value?: string;
+};

package/dist/types/shared/types/ui/collapse.types.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export type CollapseProps = {
+    title: ReactNode | string;
+    children: ReactNode;
+    defaultOpen?: boolean;
+    icon?: ReactNode;
+    className?: string;
+    contentClassName?: string;
+};

package/dist/types/shared/types/ui/drawer.types.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export interface DrawerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    position?: 'left' | 'right';
+    children?: ReactNode;
+    footer?: ReactNode;
+    title?: string;
+    description?: string;
+    showCloseButton?: boolean;
+    drawerClassName?: string;
+    contentClassName?: string;
+    closeOnOverlayClick?: boolean;
+    closeOnEscape?: boolean;
+    width?: string | number;
+}

package/dist/types/shared/types/ui/identity-input.types.d.ts

@@ -0,0 +1,6 @@
+import { ChangeEvent } from 'react';
+import { InputProps } from './input.types';
+export interface MciDocumentInputProps extends Omit<InputProps, 'onChange'> {
+    mode: 'passport' | 'pinfl' | 'metirka';
+    onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
+}

package/dist/types/shared/types/ui/index.d.ts

@@ -0,0 +1,21 @@
+export type { ModalProps } from './modal.types';
+export type { BreadcrumbItem, Variant, MciBreadcrumbProps } from './breadcrumb.types';
+export type { ButtonProps } from './button.types';
+export type { MciCheckProps } from './check.types';
+export type { CollapseProps } from './collapse.types';
+export type { DrawerProps } from './drawer.types';
+export type { InputProps } from './input.types';
+export type { MciDocumentInputProps } from './identity-input.types';
+export type { MciLoaderProps } from './loader.types';
+export type { PaginationProps } from './pagination.types';
+export type { PhoneInputProps } from './phone.types';
+export type { DateValue, RangeValue, MciPickerValue, MciPickerProps } from './picker.types';
+export type { Option, SelectProps } from './select.types';
+export type { SkeletonProps } from './skeleton.types';
+export type { Tab, TabsProps } from './tabs.types';
+export type { TagProps } from './tag.types';
+export type { TextareaProps } from './textarea.types';
+export type { ToastType, ToastProps } from './toast.types';
+export type { ToggleProps } from './toggle.types';
+export type { TooltipProps } from './tooltip.types';
+export type { FileInfo, MciUploadProps } from './upload.types';

package/dist/types/shared/types/ui/input.types.d.ts

@@ -0,0 +1,25 @@
+import { ChangeEvent, ReactNode } from 'react';
+export type InputProps = {
+    label?: string;
+    placeholder?: string;
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel';
+    icon?: ReactNode;
+    rightIcon?: ReactNode;
+    iconPosition?: 'left' | 'right';
+    size?: 'sm' | 'md' | 'base';
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    value?: string;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    className?: string;
+    name?: string;
+    readOnly?: boolean;
+    maxLength?: number;
+    onClear?: () => void;
+    showClearButton?: boolean;
+    step?: string | number;
+    autoComplete?: string;
+};

package/dist/types/shared/types/ui/loader.types.d.ts

@@ -0,0 +1,8 @@
+export interface MciLoaderProps {
+    className?: string;
+    size?: number;
+    iconClassName?: string;
+    isLoading?: boolean;
+    isFullPage?: boolean;
+    variant?: 'yellow' | 'blue';
+}

package/dist/types/shared/types/ui/modal.types.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+export interface ModalProps {
+    show: boolean;
+    setShow: (show: boolean) => void;
+    title?: string;
+    description?: string;
+    Header?: ReactNode;
+    Body?: ReactNode;
+    footer?: ReactNode;
+    handleClickOutside?: boolean;
+    showCloseIcon?: boolean;
+    showHeader?: boolean;
+    overlayClassName?: string;
+    containerClassName?: string;
+    bodyClassName?: string;
+    footerClassName?: string;
+}

package/dist/types/shared/types/ui/pagination.types.d.ts

@@ -0,0 +1,13 @@
+export interface PaginationProps {
+    totalItems: number;
+    currentPage: number;
+    perPage: number;
+    onPageChange: (page: number) => void;
+    onPerPageChange?: (value: number) => void;
+    siblingCount?: number;
+    perPageOptions?: number[];
+    showPerPage?: boolean;
+    variant?: 'yellow' | 'blue';
+    size?: 'medium' | 'large';
+    paginationClassName?: string;
+}

package/dist/types/shared/types/ui/phone.types.d.ts

@@ -0,0 +1,15 @@
+export type PhoneInputProps = {
+    label?: string;
+    placeholder?: string;
+    size?: 'sm' | 'md' | 'base';
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    value?: string;
+    onChange?: (value: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    className?: string;
+    name?: string;
+    showIcon?: boolean;
+};

package/dist/types/shared/types/ui/picker.types.d.ts

@@ -0,0 +1,24 @@
+import { Locale } from '../../lib/locales';
+export type DateValue = Date | string | null;
+export type RangeValue = [DateValue, DateValue];
+export type MciPickerValue = DateValue | RangeValue;
+export interface MciPickerProps {
+    type?: 'date' | 'range';
+    value?: MciPickerValue;
+    onChange?: (value: MciPickerValue) => void;
+    placeholder?: string | [string, string];
+    label?: string;
+    disabled?: boolean;
+    required?: boolean;
+    className?: string;
+    format?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    error?: string;
+    showClear?: boolean;
+    allowManualInput?: boolean;
+    locale?: Locale;
+    startView?: 'day' | 'month' | 'year';
+    iconPosition?: 'left' | 'right';
+    align?: 'left' | 'right' | 'center' | 'auto';
+}

package/dist/types/shared/types/ui/select.types.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+export type Option = {
+    value: string | number;
+    label: string;
+};
+export type SelectProps = {
+    label?: string;
+    placeholder?: string;
+    options: Option[];
+    icon?: ReactNode;
+    iconPosition?: 'left' | 'right';
+    size?: 'sm' | 'md' | 'base';
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    value?: string | number;
+    onChange?: (value: string | number) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    className?: string;
+    clearable?: boolean;
+    searchable?: boolean;
+    onSearch?: (searchTerm: string) => void;
+    name?: string;
+};

package/dist/types/shared/types/ui/skeleton.types.d.ts

@@ -0,0 +1,6 @@
+export type SkeletonProps = {
+    width?: string | number;
+    height?: string | number;
+    className?: string;
+    variant?: 'default' | 'circle' | 'rounded';
+};

package/dist/types/shared/types/ui/tabs.types.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+export type Tab = {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+};
+export type TabsProps = {
+    tabs: Tab[];
+    defaultTab?: string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    className?: string;
+    tabListClassName?: string;
+    contentClassName?: string;
+    extra?: ReactNode;
+    onChange?: (tabId: string | number) => void;
+};

package/dist/types/shared/types/ui/tag.types.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export type TagProps = {
+    children: ReactNode;
+    variant?: 'success' | 'warning' | 'error' | 'gray' | 'blue';
+    size?: 'sm' | 'md' | 'lg';
+    icon?: ReactNode;
+    iconPosition?: 'left' | 'right';
+    rounded?: boolean;
+    className?: string;
+};

package/dist/types/shared/types/ui/textarea.types.d.ts

@@ -0,0 +1,12 @@
+export type TextareaProps = {
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    className?: string;
+    rows?: number;
+    name?: string;
+};

package/dist/types/shared/types/ui/toast.types.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export type ToastType = 'success' | 'error' | 'warning' | 'info' | 'loading';
+export interface ToastProps {
+    title: string;
+    description?: string;
+    type?: ToastType;
+    duration?: number;
+    action?: ReactNode;
+    onClose?: () => void;
+}

package/dist/types/shared/types/ui/toggle.types.d.ts

@@ -0,0 +1,9 @@
+export type ToggleProps = {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    variant?: 'blue' | 'yellow';
+    label?: string;
+    supportText?: string;
+    className?: string;
+};

package/dist/types/shared/types/ui/tooltip.types.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export type TooltipProps = {
+    content: ReactNode;
+    children: ReactNode;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    delay?: number;
+    className?: string;
+};

package/dist/types/shared/types/ui/upload.types.d.ts

@@ -0,0 +1,27 @@
+import { UploadLocale } from '../../lib/uploadLanguage';
+export interface FileInfo {
+    id: string;
+    file: File;
+    preview?: string;
+    progress: number;
+    status: 'uploading' | 'success' | 'error';
+    error?: string;
+}
+export interface MciUploadProps {
+    multiple?: boolean;
+    accept?: string;
+    maxSize?: number;
+    maxFiles?: number;
+    disabled?: boolean;
+    label?: string;
+    required?: boolean;
+    error?: string;
+    className?: string;
+    onFilesChange?: (files: File[]) => void;
+    onUpload?: (files: FileInfo[]) => Promise<void>;
+    showPreview?: boolean;
+    locale?: UploadLocale;
+    showFileTypeIcon?: boolean;
+    customValidator?: (file: File) => string | null;
+    variant?: 'yellow' | 'blue';
+}

package/dist/types/shared/ui/MciModal/MciModal.d.ts

@@ -1,19 +1,2 @@
-import { default as React } from 'react';
-interface ModalProps {
-    show: boolean;
-    setShow: (show: boolean) => void;
-    title?: string;
-    description?: string;
-    Header?: React.ReactNode;
-    Body?: React.ReactNode;
-    footer?: React.ReactNode;
-    handleClickOutside?: boolean;
-    showCloseIcon?: boolean;
-    showHeader?: boolean;
-    overlayClassName?: string;
-    containerClassName?: string;
-    bodyClassName?: string;
-    footerClassName?: string;
-}
+import { ModalProps } from '../../types/ui/modal.types';
 export default function MciModal({ show, setShow, title, description, Header, Body, footer, handleClickOutside, showCloseIcon, showHeader, overlayClassName, containerClassName, bodyClassName, footerClassName, }: ModalProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/shared/ui/mciBreadcrumb/MciBreadcrumb.d.ts

@@ -1,15 +1,2 @@
-import { default as React } from 'react';
-type BreadcrumbItem = {
-    label: string;
-    href?: string;
-    onClick?: () => void;
-    icon?: React.ReactNode;
-};
-type Variant = 'blue' | 'yellow';
-type MciBreadcrumbProps = {
-    items: BreadcrumbItem[];
-    variant?: Variant;
-    className?: string;
-};
+import { MciBreadcrumbProps } from '../../types/ui/breadcrumb.types';
 export default function MciBreadcrumb({ items, variant, className, }: MciBreadcrumbProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/shared/ui/mciButton/MciButton.d.ts

@@ -1,17 +1,2 @@
-import { default as React } from 'react';
-type ButtonProps = {
-    children?: React.ReactNode;
-    text?: string;
-    icon?: React.ReactNode;
-    iconPosition?: 'left' | 'right';
-    size?: 'sm' | 'md' | 'base';
-    variant?: 'primary' | 'secondary' | 'outline' | 'danger' | 'tertiary';
-    color?: 'blue' | 'yellow';
-    loading?: boolean;
-    disabled?: boolean;
-    onClick?: () => void;
-    className?: string;
-    type?: 'button' | 'submit' | 'reset';
-};
+import { ButtonProps } from '../../types/ui/button.types';
 export default function MciButton({ children, text, icon, iconPosition, size, variant, color, loading, disabled, onClick, className, type, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/shared/ui/mciCheck/MciCheck.d.ts

@@ -1,17 +1,4 @@
 import { default as React } from 'react';
-type MciCheckProps = {
-    type?: 'checkbox' | 'radio';
-    label?: string;
-    supportText?: string;
-    checked?: boolean;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    error?: string;
-    disabled?: boolean;
-    required?: boolean;
-    className?: string;
-    variant?: 'blue' | 'yellow';
-    name?: string;
-    value?: string;
-};
+import { MciCheckProps } from '../../types/ui/check.types';
 declare const MciCheck: React.NamedExoticComponent<MciCheckProps>;
 export default MciCheck;

package/dist/types/shared/ui/mciCollapse/MciCollapse.d.ts

@@ -1,11 +1,2 @@
-import { default as React } from 'react';
-type CollapseProps = {
-    title: React.ReactNode | string;
-    children: React.ReactNode;
-    defaultOpen?: boolean;
-    icon?: React.ReactNode;
-    className?: string;
-    contentClassName?: string;
-};
+import { CollapseProps } from '../../types/ui/collapse.types';
 export default function MciCollapse({ title, children, defaultOpen, icon, className, contentClassName, }: CollapseProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/shared/ui/mciDrawer/MciDrawer.d.ts

@@ -1,18 +1,2 @@
-import { default as React } from 'react';
-interface DrawerProps {
-    isOpen: boolean;
-    onClose: () => void;
-    position?: 'left' | 'right';
-    children?: React.ReactNode;
-    footer?: React.ReactNode;
-    title?: string;
-    description?: string;
-    showCloseButton?: boolean;
-    drawerClassName?: string;
-    contentClassName?: string;
-    closeOnOverlayClick?: boolean;
-    closeOnEscape?: boolean;
-    width?: string | number;
-}
+import { DrawerProps } from '../../types/ui/drawer.types';
 export default function MciDrawer({ isOpen, onClose, position, children, footer, title, description, showCloseButton, drawerClassName, contentClassName, closeOnOverlayClick, closeOnEscape, width, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/shared/ui/mciIdentityInput/MciIdentityInput.d.ts

@@ -1,9 +1,4 @@
-import { default as React, ComponentProps } from 'react';
-import { default as MciInput } from '../mciInput/MciInput';
-type MciInputProps = ComponentProps<typeof MciInput>;
-interface MciDocumentInputProps extends Omit<MciInputProps, 'onChange'> {
-    mode: 'passport' | 'pinfl' | 'metirka';
-    onChange?: (value: string, e: React.ChangeEvent<HTMLInputElement>) => void;
-}
-declare const MciIdentityInput: React.ForwardRefExoticComponent<Omit<MciDocumentInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+import { default as React } from 'react';
+import { MciDocumentInputProps } from '../../types/ui/identity-input.types';
+declare const MciIdentityInput: React.ForwardRefExoticComponent<MciDocumentInputProps & React.RefAttributes<HTMLInputElement>>;
 export default MciIdentityInput;

package/dist/types/shared/ui/mciIdentityInput/mci-identity-input.utils.d.ts

@@ -0,0 +1,9 @@
+import { MciDocumentInputProps } from '../../types/ui/identity-input.types';
+type IdentityMode = MciDocumentInputProps['mode'];
+export declare function formatPassport(rawValue: string): string;
+export declare function formatPinfl(rawValue: string): string;
+export declare function formatMetirka(rawValue: string): string;
+export declare function formatIdentityValue(mode: IdentityMode, rawValue: string): string;
+export declare function getIdentityPlaceholder(mode: IdentityMode, fallback?: string): string;
+export declare function getIdentityMaxLength(mode: IdentityMode, fallback?: number): number;
+export {};

package/dist/types/shared/ui/mciInput/MciInput.d.ts

@@ -1,27 +1,4 @@
 import { default as React } from 'react';
-type InputProps = {
-    label?: string;
-    placeholder?: string;
-    type?: 'text' | 'email' | 'password' | 'number' | 'tel';
-    icon?: React.ReactNode;
-    rightIcon?: React.ReactNode;
-    iconPosition?: 'left' | 'right';
-    size?: 'sm' | 'md' | 'base';
-    error?: string;
-    disabled?: boolean;
-    required?: boolean;
-    value?: string;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    onFocus?: () => void;
-    onBlur?: () => void;
-    className?: string;
-    name?: string;
-    readOnly?: boolean;
-    maxLength?: number;
-    onClear?: () => void;
-    showClearButton?: boolean;
-    step?: string | number;
-    autoComplete?: string;
-};
+import { InputProps } from '../../types/ui/input.types';
 declare const MciInput: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export default MciInput;

package/dist/types/shared/ui/mciInput/mci-input.utils.d.ts

@@ -0,0 +1,19 @@
+type InputSizeConfig = {
+    input: string;
+    icon: string;
+    leftIcon: string;
+    rightIcon: string;
+    labelFont: string;
+    iconWrapper: string;
+};
+type InputSizeWithPadding = InputSizeConfig & {
+    padding: string;
+};
+export declare function getInputSizes(hasLeftIcon: boolean, hasRightIcon: boolean): {
+    sm: InputSizeWithPadding;
+    md: InputSizeWithPadding;
+    base: InputSizeWithPadding;
+};
+export declare function getInputStateStyles(error?: string): "border-red-600 focus:border-red-600 shadow-red" | "border-slate-200 hover:border-slate-400 focus:shadow-blue focus:border-blue-600";
+export declare function getInputIconColor(disabled: boolean, error: string | undefined, isFocused: boolean): "text-slate-400" | "text-red-600" | "text-black";
+export {};

package/dist/types/shared/ui/mciLoader/MciLoader.d.ts

@@ -1,10 +1,2 @@
-interface MciLoaderProps {
-    className?: string;
-    size?: number;
-    iconClassName?: string;
-    isLoading?: boolean;
-    isFullPage?: boolean;
-    variant?: 'yellow' | 'blue';
-}
+import { MciLoaderProps } from '../../types/ui/loader.types';
 export default function MciLoader({ className, size, iconClassName, isLoading, isFullPage, variant }: MciLoaderProps): import("react/jsx-runtime").JSX.Element | null;
-export {};

package/dist/types/shared/ui/mciPagination/MciPagination.d.ts

@@ -1,15 +1,2 @@
-interface PaginationProps {
-    totalItems: number;
-    currentPage: number;
-    perPage: number;
-    onPageChange: (page: number) => void;
-    onPerPageChange?: (value: number) => void;
-    siblingCount?: number;
-    perPageOptions?: number[];
-    showPerPage?: boolean;
-    variant?: 'yellow' | 'blue';
-    size?: 'medium' | 'large';
-    paginationClassName?: string;
-}
+import { PaginationProps } from '../../types/ui/pagination.types';
 export default function MciPagination({ totalItems, currentPage, perPage, onPageChange, onPerPageChange, siblingCount, perPageOptions, showPerPage, variant, size, paginationClassName }: PaginationProps): import("react/jsx-runtime").JSX.Element | null;
-export {};

package/dist/types/shared/ui/mciPagination/mci-pagination.utils.d.ts

@@ -0,0 +1 @@
+export declare function createPageRange(currentPage: number, siblingCount: number, totalPages: number): Array<number | string>;

package/dist/types/shared/ui/mciPhone/MciPhone.d.ts

@@ -1,18 +1,4 @@
 import { default as React } from 'react';
-type PhoneInputProps = {
-    label?: string;
-    placeholder?: string;
-    size?: 'sm' | 'md' | 'base';
-    error?: string;
-    disabled?: boolean;
-    required?: boolean;
-    value?: string;
-    onChange?: (value: string) => void;
-    onFocus?: () => void;
-    onBlur?: () => void;
-    className?: string;
-    name?: string;
-    showIcon?: boolean;
-};
+import { PhoneInputProps } from '../../types/ui/phone.types';
 declare const MciPhone: React.ForwardRefExoticComponent<PhoneInputProps & React.RefAttributes<HTMLInputElement>>;
 export default MciPhone;

package/dist/types/shared/ui/mciPhone/mci-phone.utils.d.ts

@@ -0,0 +1,32 @@
+export declare const PHONE_SIZES: {
+    readonly sm: {
+        readonly input: "h-9 text-sm";
+        readonly iconPadding: "pl-8 pr-2";
+        readonly defaultPadding: "px-2";
+        readonly iconSize: "w-4 h-4";
+        readonly iconLeft: "left-2";
+        readonly labelFont: "text-sm";
+        readonly iconWrapper: "h-4";
+    };
+    readonly md: {
+        readonly input: "h-10 text-sm";
+        readonly iconPadding: "pl-10 pr-4";
+        readonly defaultPadding: "px-4";
+        readonly iconSize: "w-4 h-4";
+        readonly iconLeft: "left-3";
+        readonly labelFont: "text-base";
+        readonly iconWrapper: "h-4";
+    };
+    readonly base: {
+        readonly input: "h-12 text-base";
+        readonly iconPadding: "pl-11 pr-4";
+        readonly defaultPadding: "px-4";
+        readonly iconSize: "w-5 h-5";
+        readonly iconLeft: "left-3";
+        readonly labelFont: "text-base";
+        readonly iconWrapper: "h-5";
+    };
+};
+export declare function formatPhoneValue(input: string): string;
+export declare function getPhoneStateStyles(hasError?: string): "border-red-600 focus:border-red-600 shadow-red" | "border-slate-200 hover:border-slate-400 focus:shadow-blue focus:border-blue-600";
+export declare function getPhoneIconColor(disabled: boolean, error: string | undefined, isFocused: boolean): "text-slate-400" | "text-red-600" | "text-black";