@koobiq/react-components 0.0.1-beta.30 → 0.0.1-beta.32

package/dist/components/FieldComponents/FieldAddon/FieldAddon.d.ts

@@ -3,7 +3,7 @@ import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
 export declare const fieldAddonPropPlacement: readonly ["start", "end"];
 export type FieldAddonPlacement = (typeof fieldAddonPropPlacement)[number];
 export type FieldAddonProps = ExtendableComponentPropsWithRef<{
-    error?: boolean;
+    isInvalid?: boolean;
     children?: ReactNode;
     placement?: FieldAddonPlacement;
 }, 'div'>;

package/dist/components/FieldComponents/FieldAddon/FieldAddon.js

@@ -3,10 +3,15 @@ import { forwardRef } from "react";
 import { isNotNil, clsx } from "@koobiq/react-core";
 import s from "./FieldAddon.module.css.js";
 const FieldAddon = forwardRef(
-  ({ placement = "start", error = false, className, children, ...other }, ref) => isNotNil(children) ? /* @__PURE__ */ jsx(
+  ({ placement = "start", isInvalid = false, className, children, ...other }, ref) => isNotNil(children) ? /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx(s.base, s[placement], error && s.error, className),
+      className: clsx(
+        s.base,
+        s[placement],
+        isInvalid && s.invalid,
+        className
+      ),
       ...other,
       ref,
       children

package/dist/components/FieldComponents/FieldAddon/FieldAddon.module.css.js

@@ -1,17 +1,17 @@
 const base = "kbq-fieldaddon-3388d3";
 const start = "kbq-fieldaddon-start-83aa84";
 const end = "kbq-fieldaddon-end-f314bf";
-const error = "kbq-fieldaddon-error-278697";
+const invalid = "kbq-fieldaddon-invalid-08b1fe";
 const s = {
   base,
   start,
   end,
-  error
+  invalid
 };
 export {
   base,
   s as default,
   end,
-  error,
+  invalid,
   start
 };

package/dist/components/FieldComponents/FieldControl/FieldControl.d.ts

@@ -1,7 +1,8 @@
 import type { ComponentPropsWithRef, ElementType } from 'react';
+import { type DataAttributeProps } from '@koobiq/react-core';
 export type FieldControlBaseProps = {
     fullWidth?: boolean;
     className?: string;
-};
+} & DataAttributeProps;
 export declare const FieldControl: import("@koobiq/react-core").PolyForwardComponent<"div", FieldControlBaseProps, ElementType>;
 export type FieldControlProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof FieldControl<As>>;

package/dist/components/FieldComponents/FieldError/FieldError.d.ts

@@ -1,6 +1,6 @@
 import { type TextProps, type TextRef } from '@koobiq/react-primitives';
 export type FieldErrorProps = TextProps & {
-    error?: boolean;
+    isInvalid?: boolean;
 };
 export type FieldErrorRef = TextRef;
 export declare const FieldError: import("react").ForwardRefExoticComponent<Omit<FieldErrorProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/components/FieldComponents/FieldError/FieldError.js

@@ -4,7 +4,7 @@ import { isNotNil, clsx } from "@koobiq/react-core";
 import { Text } from "@koobiq/react-primitives";
 import s from "./FieldError.module.css.js";
 const FieldError = forwardRef(
-  ({ children, className, error = false, ...other }, ref) => isNotNil(children) && error ? /* @__PURE__ */ jsx(
+  ({ children, className, isInvalid = false, ...other }, ref) => isNotNil(children) && isInvalid ? /* @__PURE__ */ jsx(
     Text,
     {
       className: clsx(s.base, className),

package/dist/components/FieldComponents/FieldInput/FieldInput.d.ts

@@ -1,8 +1,8 @@
 import type { ComponentPropsWithRef } from 'react';
 import type { InputPropVariant } from '../../Input';
 export type FieldInputBaseProps = {
-    error?: boolean;
-    disabled?: boolean;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
     className?: string;
     'data-testid'?: string;
     as?: 'input' | 'textarea';

package/dist/components/FieldComponents/FieldInput/FieldInput.js

@@ -4,9 +4,9 @@ import { Input, Textarea } from "@koobiq/react-primitives";
 import s from "./FieldInput.module.css.js";
 const FieldInput = polymorphicForwardRef(
   ({
-    error = false,
+    isInvalid = false,
     as = "input",
-    disabled = false,
+    isDisabled = false,
     variant = "filled",
     className,
     ...other
@@ -19,8 +19,8 @@ const FieldInput = polymorphicForwardRef(
         className: clsx(
           s.base,
           s[variant],
-          error && s.error,
-          disabled && s.disabled,
+          isInvalid && s.invalid,
+          isDisabled && s.disabled,
           className
         ),
         ref

package/dist/components/FieldComponents/FieldInput/FieldInput.module.css.js

@@ -1,20 +1,20 @@
 const base = "kbq-fieldinput-77b90b";
 const transparent = "kbq-fieldinput-transparent-ed7263";
 const filled = "kbq-fieldinput-filled-abb632";
-const error = "kbq-fieldinput-error-00c0a4";
+const invalid = "kbq-fieldinput-invalid-2af82b";
 const disabled = "kbq-fieldinput-disabled-59285a";
 const s = {
   base,
   transparent,
   filled,
-  error,
+  invalid,
   disabled
 };
 export {
   base,
   s as default,
   disabled,
-  error,
   filled,
+  invalid,
   transparent
 };

package/dist/components/FieldComponents/FieldInputGroup/FieldInputGroup.d.ts

@@ -5,9 +5,9 @@ export type FieldInputGroupProps = ExtendableComponentPropsWithRef<{
     children?: ReactNode;
     startAddon?: ReactNode;
     endAddon?: ReactNode;
-    disabled?: boolean;
+    isDisabled?: boolean;
     className?: string;
-    error?: boolean;
+    isInvalid?: boolean;
     /** The props used for each slot inside. */
     slotProps?: {
         start?: FieldAddonProps;

package/dist/components/FieldComponents/FieldInputGroup/FieldInputGroup.js

@@ -6,7 +6,15 @@ import s from "./FieldInputGroup.module.css.js";
 import { FieldInputGroupContext } from "./FieldInputGroupContext.js";
 import { FieldAddon } from "../FieldAddon/FieldAddon.js";
 const FieldInputGroup = forwardRef(
-  ({ children, className, startAddon, endAddon, error, slotProps, ...other }, ref) => {
+  ({
+    children,
+    className,
+    startAddon,
+    endAddon,
+    isInvalid,
+    slotProps,
+    ...other
+  }, ref) => {
     const { value } = useInputContext();
     const hasStartAddon = !!startAddon;
     const hasEndAddon = !!endAddon;
@@ -22,14 +30,30 @@ const FieldInputGroup = forwardRef(
         ),
         ...other,
         ref,
-        children: ({ hovered, focusWithin, disabled }) => /* @__PURE__ */ jsxs(
+        children: ({ isHovered, isFocusWithin, isDisabled }) => /* @__PURE__ */ jsxs(
           FieldInputGroupContext.Provider,
           {
-            value: { disabled, hovered, hasValue, focusWithin },
+            value: { isDisabled, isHovered, hasValue, isFocusWithin },
             children: [
-              /* @__PURE__ */ jsx(FieldAddon, { placement: "start", error, ...slotProps?.start, children: startAddon }),
+              /* @__PURE__ */ jsx(
+                FieldAddon,
+                {
+                  placement: "start",
+                  isInvalid,
+                  ...slotProps?.start,
+                  children: startAddon
+                }
+              ),
               children,
-              /* @__PURE__ */ jsx(FieldAddon, { placement: "end", error, ...slotProps?.end, children: endAddon })
+              /* @__PURE__ */ jsx(
+                FieldAddon,
+                {
+                  placement: "end",
+                  isInvalid,
+                  ...slotProps?.end,
+                  children: endAddon
+                }
+              )
             ]
           }
         )

package/dist/components/FieldComponents/FieldInputGroup/FieldInputGroupContext.d.ts

@@ -1,8 +1,8 @@
 export type FieldInputGroupContextProps = {
-    disabled?: boolean;
+    isDisabled?: boolean;
     hasValue?: boolean;
-    hovered?: boolean;
-    focusWithin?: boolean;
+    isHovered?: boolean;
+    isFocusWithin?: boolean;
 };
 export declare const FieldInputGroupContext: import("react").Context<FieldInputGroupContextProps>;
 export declare const useFieldInputGroup: () => FieldInputGroupContextProps;

package/dist/components/FieldComponents/FieldLabel/FieldLabel.d.ts

@@ -1,9 +1,9 @@
 import type { ReactNode } from 'react';
 import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
 export type FieldLabelProps = ExtendableComponentPropsWithRef<{
-    hidden?: boolean;
+    isHidden?: boolean;
     className?: string;
-    required?: boolean;
+    isRequired?: boolean;
     children?: ReactNode;
 }, 'label'>;
 export declare const FieldLabel: import("react").ForwardRefExoticComponent<Omit<FieldLabelProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;

package/dist/components/FieldComponents/FieldLabel/FieldLabel.js

@@ -4,16 +4,16 @@ import { isNotNil, clsx } from "@koobiq/react-core";
 import { Label } from "@koobiq/react-primitives";
 import s from "./FieldLabel.module.css.js";
 const FieldLabel = forwardRef(
-  ({ children, className, hidden = false, required = false, ...other }, ref) => isNotNil(children) ? /* @__PURE__ */ jsxs(
+  ({ children, className, isHidden = false, isRequired = false, ...other }, ref) => isNotNil(children) ? /* @__PURE__ */ jsxs(
     Label,
     {
-      className: clsx(s.base, hidden && s.hidden, className),
+      className: clsx(s.base, isHidden && s.hidden, className),
       ...other,
       ref,
       children: [
         children,
         " ",
-        required && /* @__PURE__ */ jsx("sup", { className: s.sup, children: "*" })
+        isRequired && /* @__PURE__ */ jsx("sup", { className: s.sup, children: "*" })
       ]
     }
   ) : null

package/dist/components/FieldComponents/FieldSelect/FieldSelect.d.ts

@@ -1,12 +1,13 @@
-import { type ReactNode } from 'react';
+import { type ReactNode, type Ref } from 'react';
 import type { InputPropVariant } from '../../Input';
 export type FieldSelectProps = {
-    error?: boolean;
-    disabled?: boolean;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
     className?: string;
     children?: ReactNode;
     'data-testid'?: string;
     variant?: InputPropVariant;
     placeholder?: string | number;
+    ref?: Ref<HTMLButtonElement>;
 };
-export declare const FieldSelect: import("react").ForwardRefExoticComponent<FieldSelectProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const FieldSelect: import("react").ForwardRefExoticComponent<Omit<FieldSelectProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/FieldComponents/FieldSelect/FieldSelect.js

@@ -5,8 +5,8 @@ import { Button } from "@koobiq/react-primitives";
 import s from "./FieldSelect.module.css.js";
 const FieldSelect = forwardRef(
   ({
-    error = false,
-    disabled = false,
+    isInvalid = false,
+    isDisabled = false,
     variant = "filled",
     placeholder,
     children,
@@ -16,13 +16,13 @@ const FieldSelect = forwardRef(
     Button,
     {
       ...other,
-      disabled,
+      isDisabled,
       "data-slot": "select-value",
       className: clsx(
         s.base,
         s[variant],
-        error && s.error,
-        disabled && s.disabled,
+        isInvalid && s.invalid,
+        isDisabled && s.disabled,
         !isNotNil(children) && s.hasPlaceholder,
         className
       ),

package/dist/components/FieldComponents/FieldSelect/FieldSelect.module.css.js

@@ -1,12 +1,12 @@
 const base = "kbq-fieldselect-0f0f5e";
 const content = "kbq-fieldselect-content-c36142";
-const error = "kbq-fieldselect-error-0cac4a";
+const invalid = "kbq-fieldselect-invalid-db8152";
 const disabled = "kbq-fieldselect-disabled-f0efd4";
 const hasPlaceholder = "kbq-fieldselect-hasPlaceholder-7b7518";
 const s = {
   base,
   content,
-  error,
+  invalid,
   disabled,
   hasPlaceholder
 };
@@ -15,6 +15,6 @@ export {
   content,
   s as default,
   disabled,
-  error,
-  hasPlaceholder
+  hasPlaceholder,
+  invalid
 };

package/dist/components/Input/Input.d.ts

@@ -1,23 +1,43 @@
-export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").UseTextFieldProps, "inputElementType">, "caption" | "label" | "style" | "className" | "disabled" | "required" | "error" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "errorMessage" | "startAddon" | "endAddon" | "hiddenLabel"> & {
+import { TextField } from '@koobiq/react-primitives';
+import { type FieldLabelProps, type FieldInputGroupProps, type FieldCaptionProps, type FieldErrorProps, type FieldInputProps, type FieldControlProps } from '../FieldComponents';
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLInputElement>, "children" | "style" | "className" | "validationBehavior" | "validate" | "description" | "inputElementType">, "value" | "caption" | "label" | "style" | "className" | "defaultValue" | "onChange" | "placeholder" | "isDisabled" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "isInvalid" | "isReadOnly" | "isRequired" | "errorMessage" | "startAddon" | "endAddon" | "isLabelHidden" | keyof {
+    disabled?: boolean;
+    error?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    hiddenLabel?: boolean;
+}> & {
     label?: import("react").ReactNode;
     className?: string;
+    placeholder?: import("@koobiq/react-primitives").TextFieldProps["placeholder"];
+    value?: import("@koobiq/react-primitives").TextFieldProps["value"];
+    defaultValue?: import("@koobiq/react-primitives").TextFieldProps["defaultValue"];
+    onChange?: import("@koobiq/react-primitives").TextFieldProps["onChange"];
     startAddon?: import("react").ReactNode;
     endAddon?: import("react").ReactNode;
     variant?: import("./types").InputPropVariant;
-    error?: boolean;
-    errorMessage?: string | number;
+    isInvalid?: boolean;
+    errorMessage?: import("react").ReactNode;
     fullWidth?: boolean;
-    disabled?: boolean;
-    hiddenLabel?: boolean;
-    caption?: string | number;
-    required?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isLabelHidden?: boolean;
+    caption?: import("react").ReactNode;
+    isRequired?: boolean;
     style?: import("react").CSSProperties;
     'data-testid'?: string | number;
     slotProps?: {
-        label?: import("../FieldComponents").FieldLabelProps;
-        input?: import("../FieldComponents").FieldInputProps;
-        caption?: import("../FieldComponents").FieldCaptionProps;
-        group?: import("../FieldComponents").FieldInputGroupProps;
-        errorMessage?: import("../FieldComponents").FieldErrorProps;
+        root?: FieldControlProps<typeof TextField<HTMLInputElement>>;
+        label?: FieldLabelProps;
+        caption?: FieldCaptionProps;
+        group?: FieldInputGroupProps;
+        errorMessage?: FieldErrorProps;
+        input?: FieldInputProps<"input">;
     };
+} & {
+    disabled?: boolean;
+    error?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    hiddenLabel?: boolean;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Input/Input.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { deprecate } from "@koobiq/logger";
 import { useDOMRef, mergeProps } from "@koobiq/react-core";
 import { TextField } from "@koobiq/react-primitives";
 import { FieldControl } from "../FieldComponents/FieldControl/FieldControl.js";
@@ -13,7 +14,16 @@ const Input = forwardRef((props, ref) => {
   const {
     variant = "filled",
     fullWidth = false,
-    hiddenLabel = false,
+    hiddenLabel,
+    isLabelHidden: isLabelHiddenProp,
+    disabled,
+    isDisabled: isDisabledProp,
+    error,
+    isInvalid: isInvalidProp,
+    required,
+    isRequired: isRequiredProp,
+    readonly,
+    isReadOnly: isReadOnlyProp,
     label,
     startAddon,
     endAddon,
@@ -22,46 +32,81 @@ const Input = forwardRef((props, ref) => {
     caption,
     ...other
   } = props;
+  const isDisabled = isDisabledProp ?? disabled ?? false;
+  const isRequired = isRequiredProp ?? required ?? false;
+  const isReadOnly = isReadOnlyProp ?? readonly ?? false;
+  const isInvalid = isInvalidProp ?? error ?? false;
+  const isLabelHidden = isLabelHiddenProp ?? hiddenLabel ?? false;
+  if (process.env.NODE_ENV !== "production" && "disabled" in props) {
+    deprecate(
+      'Input: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "required" in props) {
+    deprecate(
+      'Input: the "required" prop is deprecated. Use "isRequired" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "error" in props) {
+    deprecate(
+      'Input: the "error" prop is deprecated. Use "isInvalid" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "readonly" in props) {
+    deprecate(
+      'Input: the "readonly" prop is deprecated. Use "isReadOnly" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "hiddenLabel" in props) {
+    deprecate(
+      'Input: the "hiddenLabel" prop is deprecated. Use "isLabelHidden" prop to replace it.'
+    );
+  }
   const inputRef = useDOMRef(ref);
   const rootProps = mergeProps(
     {
       label,
       fullWidth,
+      isDisabled,
+      isRequired,
+      isReadOnly,
+      isInvalid,
       errorMessage,
       "data-variant": variant,
-      "data-fullwidth": fullWidth
+      "data-fullwidth": fullWidth,
+      ...other
     },
-    other
+    slotProps?.root
   );
-  return /* @__PURE__ */ jsx(FieldControl, { as: TextField, ...rootProps, children: ({ error, required, disabled }) => {
+  return /* @__PURE__ */ jsx(FieldControl, { as: TextField, inputElementType: "input", ...rootProps, children: ({ isInvalid: isInvalid2, isRequired: isRequired2, isDisabled: isDisabled2 }) => {
     const labelProps = mergeProps(
-      { hidden: hiddenLabel, required },
+      { isHidden: isLabelHidden, isRequired: isRequired2, children: label },
       slotProps?.label
     );
     const inputProps = mergeProps(
       {
-        error,
         variant,
-        disabled,
+        isInvalid: isInvalid2,
+        isDisabled: isDisabled2,
         ref: inputRef
       },
       slotProps?.input
     );
     const groupProps = mergeProps(
       {
-        error,
         endAddon,
+        isInvalid: isInvalid2,
         startAddon
       },
       slotProps?.group
     );
-    const captionProps = slotProps?.caption;
-    const errorProps = mergeProps({ error }, slotProps?.errorMessage);
+    const captionProps = mergeProps({ children: caption }, slotProps?.caption);
+    const errorProps = mergeProps({ isInvalid: isInvalid2, children: errorMessage }, slotProps?.errorMessage);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(FieldLabel, { ...labelProps, children: labelProps?.children || label }),
+      /* @__PURE__ */ jsx(FieldLabel, { ...labelProps }),
       /* @__PURE__ */ jsx(FieldInputGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInput, { ...inputProps }) }),
-      /* @__PURE__ */ jsx(FieldCaption, { ...captionProps, children: captionProps?.children || caption }),
-      /* @__PURE__ */ jsx(FieldError, { ...errorProps, children: errorProps.children || errorMessage })
+      /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
+      /* @__PURE__ */ jsx(FieldError, { ...errorProps })
     ] });
   } });
 });

package/dist/components/Input/types.d.ts

@@ -1,14 +1,64 @@
 import type { ComponentRef, CSSProperties, ReactNode } from 'react';
 import type { ExtendableProps } from '@koobiq/react-core';
-import type { UseTextFieldProps } from '@koobiq/react-primitives';
-import type { FieldCaptionProps, FieldErrorProps, FieldInputProps, FieldLabelProps, FieldInputGroupProps } from '../FieldComponents';
+import type { TextField, TextFieldProps } from '@koobiq/react-primitives';
+import type { FieldCaptionProps, FieldErrorProps, FieldInputProps, FieldLabelProps, FieldInputGroupProps, FieldControlProps } from '../FieldComponents';
 export declare const inputPropVariant: readonly ["filled", "transparent"];
 export type InputPropVariant = (typeof inputPropVariant)[number];
+type InputDeprecatedProps = {
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     *
+     * @deprecated
+     * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the input will indicate an error.
+     * @default false
+     *
+     * @deprecated
+     * The "error" prop is deprecated. Use "isInvalid" prop to replace it.
+     */
+    error?: boolean;
+    /**
+     * If `true`, the label is displayed as required and the input element is required.
+     * @default false
+     *
+     * @deprecated
+     * The "required" prop is deprecated. Use "isRequired" prop to replace it.
+     */
+    required?: boolean;
+    /**
+     * If `true`, the input can be selected but not changed by the user.
+     * @default false
+     *
+     * @deprecated
+     * The "readonly" prop is deprecated. Use "isReadOnly" prop to replace it.
+     */
+    readonly?: boolean;
+    /**
+     * If `true`, the label is hidden. Be sure to add aria-label to the input element.
+     * @default false
+     *
+     * @deprecated
+     * The "hiddenLabel" prop is deprecated. Use "isLabelHidden" prop to replace it.
+     */
+    hiddenLabel?: boolean;
+};
 export type InputProps = ExtendableProps<{
     /** The content to display as the label. */
     label?: ReactNode;
     /** Additional CSS-classes. */
     className?: string;
+    /** Temporary text that occupies the text input when it is empty. */
+    placeholder?: TextFieldProps['placeholder'];
+    /** The current value (controlled). */
+    value?: TextFieldProps['value'];
+    /** The default value (uncontrolled). */
+    defaultValue?: TextFieldProps['defaultValue'];
+    /** Handler that is called when the value changes. */
+    onChange?: TextFieldProps['onChange'];
     /** Addon placed before the children. */
     startAddon?: ReactNode;
     /** Addon placed after the children. */
@@ -22,9 +72,9 @@ export type InputProps = ExtendableProps<{
      * If `true`, the input will indicate an error.
      * @default false
      */
-    error?: boolean;
-    /** Message for the error state. */
-    errorMessage?: string | number;
+    isInvalid?: boolean;
+    /** Message for the error state */
+    errorMessage?: ReactNode;
     /**
      * If true, the input will take up the full width of its container.
      * @default false
@@ -34,30 +84,37 @@ export type InputProps = ExtendableProps<{
      * If `true`, the component is disabled.
      * @default false
      */
-    disabled?: boolean;
+    isDisabled?: boolean;
+    /**
+     * If `true`, the input can be selected but not changed by the user.
+     * @default false
+     */
+    isReadOnly?: boolean;
     /**
      * If `true`, the label is hidden. Be sure to add aria-label to the input element.
      * @default false
      */
-    hiddenLabel?: boolean;
+    isLabelHidden?: boolean;
     /** The helper text content. */
-    caption?: string | number;
+    caption?: ReactNode;
     /**
      * If `true`, the label is displayed as required and the input element is required.
      * @default false
      */
-    required?: boolean;
+    isRequired?: boolean;
     /** Inline styles. */
     style?: CSSProperties;
     /** Unique identifier for testing purposes. */
     'data-testid'?: string | number;
     /** The props used for each slot inside. */
     slotProps?: {
+        root?: FieldControlProps<typeof TextField<HTMLInputElement>>;
         label?: FieldLabelProps;
-        input?: FieldInputProps;
         caption?: FieldCaptionProps;
         group?: FieldInputGroupProps;
         errorMessage?: FieldErrorProps;
+        input?: FieldInputProps<'input'>;
     };
-}, Omit<UseTextFieldProps, 'inputElementType'>>;
+} & InputDeprecatedProps, Omit<TextFieldProps<HTMLInputElement>, 'description' | 'validationBehavior' | 'validate' | 'children' | 'style' | 'className' | 'inputElementType'>>;
 export type InputRef = ComponentRef<'input'>;
+export {};