@ultraviolet/ui 2.0.0-beta.8 → 2.0.0

package/dist/components/TextInput/index.d.ts

@@ -1,75 +1,81 @@
-import type { FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler, TextareaHTMLAttributes } from 'react';
-declare const inputSizes: {
-    medium: {
-        default: string;
-        full: string;
-    };
-    small: {
-        default: string;
-        full: string;
-    };
+import type { InputHTMLAttributes, ReactNode } from 'react';
+export declare const TEXTINPUT_SIZE_HEIGHT: {
+    readonly small: "400";
+    readonly medium: "500";
+    readonly large: "600";
 };
-type TextInputSizes = keyof typeof inputSizes;
-export declare const textInputSizes: TextInputSizes[];
-type StyledInputProps = {
-    disabled?: boolean;
-    error?: boolean;
-    fillAvailable?: boolean;
-    hasLabel?: boolean;
-    paddingRightFactor: number;
-    isPlaceholderVisible?: boolean;
-    multiline?: boolean;
-    resizable?: boolean;
-    inputSize: TextInputSizes;
-    unit?: string;
-    rightComponentLength: number;
-} & (InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>);
-type InputProps = Omit<Exclude<StyledInputProps, TextareaHTMLAttributes<HTMLTextAreaElement>>, 'inputSize'>;
-type TextInputProps = {
+type TextInputSize = keyof typeof TEXTINPUT_SIZE_HEIGHT;
+export declare const BasicPrefixStack: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    gap?: keyof import("../..").UltravioletUITheme["space"] | number | Partial<Record<keyof import("../..").UltravioletUITheme["breakpoints"], keyof import("../..").UltravioletUITheme["space"] | number>>;
+    direction?: "row" | "column" | Partial<Record<keyof import("../..").UltravioletUITheme["breakpoints"], "row" | "column">>;
+    alignItems?: import("react").CSSProperties["alignItems"] | Partial<Record<keyof import("../..").UltravioletUITheme["breakpoints"], import("react").CSSProperties["alignItems"]>>;
+    justifyContent?: import("react").CSSProperties["justifyContent"] | Partial<Record<keyof import("../..").UltravioletUITheme["breakpoints"], import("react").CSSProperties["justifyContent"]>>;
+    wrap?: boolean | import("react").CSSProperties["flexWrap"] | Partial<Record<keyof import("../..").UltravioletUITheme["breakpoints"], boolean | import("react").CSSProperties["flexWrap"]>>;
+    width?: import("react").CSSProperties["width"] | Partial<Record<keyof import("../..").UltravioletUITheme["breakpoints"], import("react").CSSProperties["width"]>>;
+    maxWidth?: import("react").CSSProperties["maxWidth"] | Partial<Record<keyof import("../..").UltravioletUITheme["breakpoints"], import("react").CSSProperties["maxWidth"]>>;
+    minWidth?: import("react").CSSProperties["minWidth"] | Partial<Record<keyof import("../..").UltravioletUITheme["breakpoints"], import("react").CSSProperties["minWidth"]>>;
+    flex?: import("react").CSSProperties["flex"] | Partial<Record<keyof import("../..").UltravioletUITheme["breakpoints"], import("react").CSSProperties["flex"]>>;
+    className?: string;
+    children: ReactNode;
     'data-testid'?: string;
-    ariaControls?: string;
-    autoComplete?: string;
-    autoFocus?: boolean;
+    id?: string;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const BasicSuffixStack: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    gap?: keyof import("../..").UltravioletUITheme["space"] | number | Partial<Record<keyof import("../..").UltravioletUITheme["breakpoints"], keyof import("../..").UltravioletUITheme["space"] | number>>;
+    direction?: "row" | "column" | Partial<Record<keyof import("../..").UltravioletUITheme["breakpoints"], "row" | "column">>;
+    alignItems?: import("react").CSSProperties["alignItems"] | Partial<Record<keyof import("../..").UltravioletUITheme["breakpoints"], import("react").CSSProperties["alignItems"]>>;
+    justifyContent?: import("react").CSSProperties["justifyContent"] | Partial<Record<keyof import("../..").UltravioletUITheme["breakpoints"], import("react").CSSProperties["justifyContent"]>>;
+    wrap?: boolean | import("react").CSSProperties["flexWrap"] | Partial<Record<keyof import("../..").UltravioletUITheme["breakpoints"], boolean | import("react").CSSProperties["flexWrap"]>>;
+    width?: import("react").CSSProperties["width"] | Partial<Record<keyof import("../..").UltravioletUITheme["breakpoints"], import("react").CSSProperties["width"]>>;
+    maxWidth?: import("react").CSSProperties["maxWidth"] | Partial<Record<keyof import("../..").UltravioletUITheme["breakpoints"], import("react").CSSProperties["maxWidth"]>>;
+    minWidth?: import("react").CSSProperties["minWidth"] | Partial<Record<keyof import("../..").UltravioletUITheme["breakpoints"], import("react").CSSProperties["minWidth"]>>;
+    flex?: import("react").CSSProperties["flex"] | Partial<Record<keyof import("../..").UltravioletUITheme["breakpoints"], import("react").CSSProperties["flex"]>>;
     className?: string;
-    cols?: number;
-    defaultValue?: string;
-    disabled?: boolean;
-    edit?: boolean;
-    error?: string;
-    fillAvailable?: boolean;
-    generated?: boolean;
-    height?: string | number;
+    children: ReactNode;
+    'data-testid'?: string;
     id?: string;
-    label?: string;
-    multiline?: boolean;
-    name?: string;
-    notice?: string;
-    noTopLabel?: boolean;
-    onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-    onChange?: (value: string) => void;
-    onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-    onKeyUp?: KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-    onKeyDown?: KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-    placeholder?: string;
-    random?: string;
-    readOnly?: boolean;
-    required?: boolean;
-    resizable?: boolean;
-    rows?: number;
-    size?: TextInputSizes;
-    tabIndex?: number;
-    type?: string;
-    unit?: string;
-    valid?: boolean;
-    value?: string | number;
-    wrap?: string;
-    inputProps?: InputProps;
-    max?: InputHTMLAttributes<HTMLInputElement>['max'];
-    min?: InputHTMLAttributes<HTMLInputElement>['min'];
-} & (Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> | Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'>);
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledInput: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    'data-size': TextInputSize;
+}, import("react").DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
 /**
- * TextInput component allows users to input text, with options for customization and validation.
- * It supports various input types and should be appropriately sized with clear labeling.
+ * This component offers an extended input HTML. The component can be controlled or uncontrolled.
+ * To control the component, you need to pass the value and the `onChange` function.
+ * If you don't pass the `onChange` function, the component will be uncontrolled and you can set the default value using `defaultValue`
  */
-export declare const TextInput: import("react").ForwardRefExoticComponent<TextInputProps & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;
+export declare const TextInput: import("react").ForwardRefExoticComponent<{
+    className?: string;
+    clearable?: boolean;
+    'data-testid'?: string;
+    error?: string;
+    helper?: ReactNode;
+    label?: string;
+    labelDescription?: ReactNode;
+    loading?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    onRandomize?: () => void;
+    prefix?: ReactNode;
+    size?: TextInputSize;
+    success?: string | boolean;
+    suffix?: ReactNode;
+    tooltip?: string;
+    type?: "text" | "password" | "url" | "email";
+    value?: string;
+    defaultValue?: string;
+    onChangeValue?: (value: string) => void;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, "autoFocus" | "id" | "tabIndex" | "role" | "aria-atomic" | "aria-label" | "aria-labelledby" | "aria-live" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "onKeyUp" | "name" | "disabled" | "autoComplete" | "placeholder" | "readOnly" | "required"> & import("react").RefAttributes<HTMLInputElement>>;
 export {};