@koobiq/react-components 0.7.1 → 0.9.0

package/dist/components/FieldComponents/Field/Field.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
+import s from "./Field.module.css.js";
+const Field = polymorphicForwardRef(
+  ({ as: Tag = "div", className, ...other }, ref) => /* @__PURE__ */ jsx(Tag, { className: clsx(s.base, className), ...other, ref })
+);
+Field.displayName = "Field";
+export {
+  Field
+};

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

@@ -0,0 +1,8 @@
+const base = "kbq-field-25e8f8";
+const s = {
+  base
+};
+export {
+  base,
+  s as default
+};

package/dist/components/FieldComponents/Field/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Field';
+export * from './types';

package/dist/components/FieldComponents/Field/types.d.ts

@@ -0,0 +1,4 @@
+import type { DataAttributeProps } from '@koobiq/react-core';
+export type FieldBaseProps = {
+    className?: string;
+} & DataAttributeProps;

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

@@ -5,8 +5,8 @@ import s from "./FieldAddon.module.css.js";
 const FieldAddon = forwardRef(
   ({
     placement = "start",
-    isInvalid = false,
-    isDisabled = false,
+    isInvalid,
+    isDisabled,
     className,
     children,
     ...other
@@ -21,8 +21,8 @@ const FieldAddon = forwardRef(
         className
       ),
       "data-placement": placement,
-      "data-invalid": isInvalid,
-      "data-disabled": isDisabled,
+      "data-invalid": isInvalid || void 0,
+      "data-disabled": isDisabled || void 0,
       "data-testid": `field-addon-${placement}`,
       ...other,
       ref,

package/dist/components/FieldComponents/FieldContentGroup/FieldContentGroup.js

@@ -7,8 +7,8 @@ import { FieldContentGroupContext } from "./FieldContentGroupContext.js";
 import { FieldAddon } from "../FieldAddon/FieldAddon.js";
 const FieldContentGroup = forwardRef(function FieldContentGroup2({
   variant = "filled",
-  isInvalid = false,
-  isDisabled = false,
+  isInvalid,
+  isDisabled,
   children,
   className,
   startAddon,

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

@@ -1,6 +1,8 @@
+import { type ReactNode } from 'react';
+import { type ValidationResult } from '@koobiq/react-core';
 import { type TextProps, type TextRef } from '@koobiq/react-primitives';
-export type FieldErrorProps = TextProps & {
-    isInvalid?: boolean;
+export type FieldErrorProps = Omit<TextProps, 'children'> & {
+    children?: ReactNode | ((v: ValidationResult) => ReactNode);
 };
 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

@@ -1,19 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { isNotNil, clsx } from "@koobiq/react-core";
-import { Text } from "@koobiq/react-primitives";
+import { clsx } from "@koobiq/react-core";
+import { FieldError as FieldError$1 } from "@koobiq/react-primitives";
 import s from "./FieldError.module.css.js";
 const FieldError = forwardRef(
-  ({ children, className, isInvalid = false, ...other }, ref) => isNotNil(children) && isInvalid ? /* @__PURE__ */ jsx(
-    Text,
+  ({ className, ...other }, ref) => /* @__PURE__ */ jsx(
+    FieldError$1,
     {
       className: clsx(s.base, className),
-      slot: "errorMessage",
       ...other,
-      ref,
-      children
+      ref
     }
-  ) : null
+  )
 );
 FieldError.displayName = "FieldError";
 export {

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

@@ -4,10 +4,10 @@ import { Input, Textarea } from "@koobiq/react-primitives";
 import s from "./FieldInput.module.css.js";
 const FieldInput = polymorphicForwardRef(
   ({
-    isInvalid = false,
-    as = "input",
-    isDisabled = false,
     variant = "filled",
+    as = "input",
+    isInvalid,
+    isDisabled,
     className,
     ...other
   }, ref) => {

package/dist/components/FieldComponents/FieldInputDate/FieldInputDate.js

@@ -4,9 +4,9 @@ import { clsx } from "@koobiq/react-core";
 import s from "./FieldInputDate.module.css.js";
 const FieldInputDate = forwardRef(
   ({
-    isInvalid = false,
-    isDisabled = false,
     variant = "filled",
+    isInvalid,
+    isDisabled,
     children,
     className,
     ...other

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

@@ -5,10 +5,10 @@ import s from "./FieldSelect.module.css.js";
 import { isPrimitiveNode } from "./utils.js";
 const FieldSelect = polymorphicForwardRef(
   ({
-    as = "div",
-    isInvalid = false,
-    isDisabled = false,
     variant = "filled",
+    as = "div",
+    isInvalid,
+    isDisabled,
     placeholder,
     children,
     className,

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

@@ -1,7 +1,6 @@
-export * from './FieldControl';
+export * from './Field';
 export * from './FieldInput';
 export * from './FieldSelect';
-export * from './FieldLabel';
 export * from './FieldAddon';
 export * from './FieldCaption';
 export * from './FieldError';

package/dist/components/FormControl/FormControl.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentPropsWithRef, ElementType } from 'react';
+import type { FormControlBaseProps } from './types';
+export declare const FormControl: import("@koobiq/react-core").PolyForwardComponent<"div", FormControlBaseProps, ElementType>;
+export type FormControlProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof FormControl<As>>;

package/dist/components/FormControl/FormControl.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
+import s from "./FormControl.module.css.js";
+const FormControl = polymorphicForwardRef(
+  ({
+    labelPlacement = "top",
+    labelAlign = "start",
+    as: Tag = "div",
+    fullWidth,
+    className,
+    ...other
+  }, ref) => /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: clsx(
+        s.base,
+        className,
+        s[labelAlign],
+        s[labelPlacement],
+        fullWidth && s.fullWidth
+      ),
+      "data-label-align": labelAlign,
+      "data-label-placement": labelPlacement,
+      "data-fullwidth": fullWidth || void 0,
+      ...other,
+      ref
+    }
+  )
+);
+FormControl.displayName = "FormControl";
+export {
+  FormControl
+};

package/dist/components/FormControl/FormControl.module.css.js

@@ -0,0 +1,17 @@
+const base = "kbq-formcontrol-dbb0e4";
+const fullWidth = "kbq-formcontrol-fullWidth-b3e32c";
+const top = "kbq-formcontrol-top-17ba41";
+const side = "kbq-formcontrol-side-3e528f";
+const s = {
+  base,
+  fullWidth,
+  top,
+  side
+};
+export {
+  base,
+  s as default,
+  fullWidth,
+  side,
+  top
+};

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

@@ -0,0 +1,2 @@
+export * from './FormControl';
+export * from './types';

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

@@ -0,0 +1,19 @@
+import type { DataAttributeProps } from '@koobiq/react-core';
+export declare const formControlPropLabelPlacement: readonly ["top", "side"];
+export type FormControlPropLabelPlacement = (typeof formControlPropLabelPlacement)[number];
+export declare const formControlPropLabelAlign: readonly ["start", "end"];
+export type FormControlPropLabelAlign = (typeof formControlPropLabelAlign)[number];
+export type FormControlBaseProps = {
+    fullWidth?: boolean;
+    className?: string;
+    /**
+     * The label's overall position relative to the element it is labeling.
+     * @default 'top'
+     */
+    labelPlacement?: FormControlPropLabelPlacement;
+    /**
+     * The label's horizontal alignment relative to the element it is labeling.
+     * @default 'start'
+     */
+    labelAlign?: FormControlPropLabelAlign;
+} & DataAttributeProps;

package/dist/components/FormControl/types.js

@@ -0,0 +1,6 @@
+const formControlPropLabelPlacement = ["top", "side"];
+const formControlPropLabelAlign = ["start", "end"];
+export {
+  formControlPropLabelAlign,
+  formControlPropLabelPlacement
+};

package/dist/components/FormControlLabel/FormControlLabel.d.ts

@@ -1,2 +1,4 @@
-import type { FormControlLabelProps } from './index';
-export declare const FormControlLabel: import("react").ForwardRefExoticComponent<Omit<FormControlLabelProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+import type { ComponentPropsWithRef, ElementType } from 'react';
+import type { FormControlLabelBaseProps } from './types';
+export declare const FormControlLabel: import("@koobiq/react-core").PolyForwardComponent<"label", FormControlLabelBaseProps, ElementType>;
+export type FormControlLabelProps<As extends ElementType = 'label'> = ComponentPropsWithRef<typeof FormControlLabel<As>>;

package/dist/components/{FieldComponents/FieldLabel/FieldLabel.js → FormControlLabel/FormControlLabel.js}

@@ -1,12 +1,12 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { isNotNil, clsx } from "@koobiq/react-core";
+import { polymorphicForwardRef, isNotNil, clsx } from "@koobiq/react-core";
 import { Label } from "@koobiq/react-primitives";
-import s from "./FieldLabel.module.css.js";
-const FieldLabel = forwardRef(
-  ({ children, className, isHidden = false, isRequired = false, ...other }, ref) => isNotNil(children) ? /* @__PURE__ */ jsxs(
+import s from "./FormControlLabel.module.css.js";
+const FormControlLabel = polymorphicForwardRef(
+  ({ children, className, isHidden, isRequired, as = "label", ...other }, ref) => isNotNil(children) ? /* @__PURE__ */ jsxs(
     Label,
     {
+      as,
       className: clsx(s.base, isHidden && s.hidden, className),
       ...other,
       ref,
@@ -20,7 +20,7 @@ const FieldLabel = forwardRef(
     }
   ) : null
 );
-FieldLabel.displayName = "FieldLabel";
+FormControlLabel.displayName = "FormControlLabel";
 export {
-  FieldLabel
+  FormControlLabel
 };

package/dist/components/FormControlLabel/FormControlLabel.module.css.js

@@ -0,0 +1,14 @@
+const base = "kbq-formcontrollabel-f90f77";
+const hidden = "kbq-formcontrollabel-hidden-b6c00b";
+const sup = "kbq-formcontrollabel-sup-08dbc0";
+const s = {
+  base,
+  hidden,
+  sup
+};
+export {
+  base,
+  s as default,
+  hidden,
+  sup
+};

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

@@ -1,32 +1,7 @@
-import type { ComponentPropsWithRef, ReactNode } from 'react';
-import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
-export declare const formControlLabelPropSize: readonly ["normal", "big"];
-export type FormControlLabelPropSize = (typeof formControlLabelPropSize)[number];
-export declare const formControlLabelPlacement: readonly ["start", "end"];
-export type FormControlLabelPropLabelPlacement = (typeof formControlLabelPlacement)[number];
-export type FormControlLabelProps = ExtendableComponentPropsWithRef<{
-    /** The content to display as the label. */
-    label?: ReactNode;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /** The helper text content. */
-    caption?: ReactNode;
-    /** The content of the component. */
+import type { ReactNode } from 'react';
+export type FormControlLabelBaseProps = {
+    isHidden?: boolean;
+    className?: string;
+    isRequired?: boolean;
     children?: ReactNode;
-    /**
-     * Size.
-     * @default 'normal'
-     */
-    size?: FormControlLabelPropSize;
-    /**
-     * The position of the label.
-     * @default 'end'
-     */
-    labelPlacement?: FormControlLabelPropLabelPlacement;
-    slotProps?: {
-        content?: ComponentPropsWithRef<'div'>;
-    };
-}, 'label'>;
+};

package/dist/components/IconButton/IconButton.js

@@ -18,8 +18,8 @@ const IconButton = polymorphicForwardRef(
       className,
       ...other
     } = props;
-    const isCompact = isCompactProp ?? compact ?? false;
-    const isDisabled = isDisabledProp ?? disabled ?? false;
+    const isCompact = isCompactProp ?? compact;
+    const isDisabled = isDisabledProp ?? disabled;
     if (process.env.NODE_ENV !== "production" && "compact" in props) {
       deprecate(
         'IconButton: the "compact" prop is deprecated. Use "isCompact" prop to replace it.'
@@ -54,9 +54,9 @@ const IconButton = polymorphicForwardRef(
         as: Tag,
         isDisabled,
         className: classNameFn,
-        "data-compact": isCompact,
-        "data-variant": variant,
         "data-size": size,
+        "data-variant": variant,
+        "data-compact": isCompact || void 0,
         ...other,
         ref,
         children

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

@@ -8,14 +8,12 @@ export type IconButtonPropSize = (typeof iconButtonPropSize)[number];
 type IconButtonBaseDeprecatedProps = {
     /**
      * If `true`, the component is disabled.
-     * @default false
      * @deprecated
      * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
      */
     disabled?: boolean;
     /**
      * If `true`, reduce the size of the component canvas.
-     * @default false
      * @deprecated
      * The "compact" prop is deprecated. Use "isCompact" prop to replace it.
      */
@@ -36,7 +34,6 @@ export type IconButtonBaseProps = ExtendableProps<{
     size?: IconButtonPropSize;
     /**
      * If `true`, reduce the size of the component canvas.
-     * @default false
      */
     isCompact?: boolean;
     /** Additional CSS-classes. */

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

@@ -1,6 +1,8 @@
 import { TextField } from '@koobiq/react-primitives';
-import { type FieldLabelProps, type FieldContentGroupProps, 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" | "validationBehavior" | "validate" | "description" | "inputElementType">, "caption" | "style" | "className" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "startAddon" | "endAddon" | "errorMessage" | "isLabelHidden" | keyof {
+import { type FieldContentGroupProps, type FieldCaptionProps, type FieldInputProps, type FieldErrorProps } from '../FieldComponents';
+import { type FormControlProps } from '../FormControl';
+import { type FormControlLabelProps } from '../FormControlLabel';
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLInputElement>, "children" | "validationState" | "description" | "inputElementType">, "caption" | "style" | "className" | "labelPlacement" | "labelAlign" | "fullWidth" | "variant" | "slotProps" | "data-testid" | "startAddon" | "endAddon" | "isLabelHidden" | keyof {
     disabled?: boolean;
     error?: boolean;
     required?: boolean;
@@ -11,15 +13,16 @@ export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<
     startAddon?: import("react").ReactNode;
     endAddon?: import("react").ReactNode;
     variant?: import("./types").InputPropVariant;
-    errorMessage?: import("react").ReactNode;
     fullWidth?: boolean;
     isLabelHidden?: boolean;
+    labelPlacement?: import("./types").InputPropLabelPlacement;
+    labelAlign?: import("./types").InputPropLabelAlign;
     caption?: import("react").ReactNode;
     style?: import("react").CSSProperties;
     'data-testid'?: string | number;
     slotProps?: {
-        root?: FieldControlProps<typeof TextField<HTMLInputElement>>;
-        label?: FieldLabelProps;
+        root?: FormControlProps<typeof TextField<HTMLInputElement>>;
+        label?: FormControlLabelProps;
         caption?: FieldCaptionProps;
         group?: FieldContentGroupProps;
         errorMessage?: FieldErrorProps;

package/dist/components/Input/Input.js

@@ -4,8 +4,10 @@ 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";
-import { FieldLabel } from "../FieldComponents/FieldLabel/FieldLabel.js";
+import s from "./Input.module.css.js";
+import { FormControl } from "../FormControl/FormControl.js";
+import { FormControlLabel } from "../FormControlLabel/FormControlLabel.js";
+import { Field } from "../FieldComponents/Field/Field.js";
 import { FieldContentGroup } from "../FieldComponents/FieldContentGroup/FieldContentGroup.js";
 import { FieldInput } from "../FieldComponents/FieldInput/FieldInput.js";
 import { FieldCaption } from "../FieldComponents/FieldCaption/FieldCaption.js";
@@ -13,7 +15,7 @@ import { FieldError } from "../FieldComponents/FieldError/FieldError.js";
 const Input = forwardRef((props, ref) => {
   const {
     variant = "filled",
-    fullWidth = false,
+    fullWidth,
     hiddenLabel,
     isLabelHidden: isLabelHiddenProp,
     disabled,
@@ -24,6 +26,8 @@ const Input = forwardRef((props, ref) => {
     isRequired: isRequiredProp,
     readonly,
     isReadOnly: isReadOnlyProp,
+    labelPlacement,
+    labelAlign,
     label,
     startAddon,
     endAddon,
@@ -32,11 +36,11 @@ 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;
+  const isDisabled = isDisabledProp ?? disabled;
+  const isRequired = isRequiredProp ?? required;
+  const isReadOnly = isReadOnlyProp ?? readonly;
+  const isInvalid = isInvalidProp ?? error;
+  const isLabelHidden = isLabelHiddenProp ?? hiddenLabel;
   if (process.env.NODE_ENV !== "production" && "disabled" in props) {
     deprecate(
       'Input: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
@@ -72,13 +76,14 @@ const Input = forwardRef((props, ref) => {
       isReadOnly,
       isInvalid,
       errorMessage,
+      labelPlacement,
+      labelAlign,
       "data-variant": variant,
-      "data-fullwidth": fullWidth,
       ...other
     },
     slotProps?.root
   );
-  return /* @__PURE__ */ jsx(FieldControl, { as: TextField, inputElementType: "input", ...rootProps, children: ({ isInvalid: isInvalid2, isRequired: isRequired2, isDisabled: isDisabled2 }) => {
+  return /* @__PURE__ */ jsx(FormControl, { as: TextField, inputElementType: "input", ...rootProps, children: ({ isInvalid: isInvalid2, isRequired: isRequired2, isDisabled: isDisabled2 }) => {
     const labelProps = mergeProps(
       { isHidden: isLabelHidden, isRequired: isRequired2, children: label },
       slotProps?.label
@@ -103,12 +108,17 @@ const Input = forwardRef((props, ref) => {
       slotProps?.group
     );
     const captionProps = mergeProps({ children: caption }, slotProps?.caption);
-    const errorProps = mergeProps({ isInvalid: isInvalid2, children: errorMessage }, slotProps?.errorMessage);
+    const errorProps = mergeProps(
+      { children: errorMessage, className: s.error },
+      slotProps?.errorMessage
+    );
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(FieldLabel, { ...labelProps }),
-      /* @__PURE__ */ jsx(FieldContentGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInput, { ...inputProps }) }),
-      /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
-      /* @__PURE__ */ jsx(FieldError, { ...errorProps })
+      /* @__PURE__ */ jsx(FormControlLabel, { ...labelProps }),
+      /* @__PURE__ */ jsxs(Field, { children: [
+        /* @__PURE__ */ jsx(FieldContentGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInput, { ...inputProps }) }),
+        /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
+        /* @__PURE__ */ jsx(FieldError, { ...errorProps })
+      ] })
     ] });
   } });
 });

package/dist/components/Input/Input.module.css.js

@@ -0,0 +1,4 @@
+const s = {};
+export {
+  s as default
+};

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

@@ -1,41 +1,42 @@
 import type { ComponentRef, CSSProperties, ReactNode } from 'react';
 import type { ExtendableProps } from '@koobiq/react-core';
 import type { TextField, TextFieldProps } from '@koobiq/react-primitives';
-import { type FieldCaptionProps, type FieldErrorProps, type FieldInputProps, type FieldLabelProps, type FieldContentGroupProps, type FieldControlProps, type FieldContentGroupPropVariant } from '../FieldComponents';
+import { type FieldCaptionProps, type FieldErrorProps, type FieldInputProps, type FieldContentGroupProps, type FieldContentGroupPropVariant } from '../FieldComponents';
+import { type FormControlProps, type FormControlPropLabelAlign, type FormControlPropLabelPlacement } from '../FormControl';
+import type { FormControlLabelProps } from '../FormControlLabel';
 export declare const inputPropVariant: readonly ["filled", "transparent"];
+export declare const inputPropLabelPlacement: readonly ["top", "side"];
 export type InputPropVariant = FieldContentGroupPropVariant;
+export type InputPropLabelPlacement = FormControlPropLabelPlacement;
+export declare const inputPropLabelAlign: readonly ["start", "end"];
+export type InputPropLabelAlign = FormControlPropLabelAlign;
 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.
      */
@@ -53,18 +54,24 @@ export type InputProps = ExtendableProps<{
      * @default 'filled'
      */
     variant?: InputPropVariant;
-    /** An error message for the field. */
-    errorMessage?: ReactNode;
     /**
      * If true, the input will take up the full width of its container.
-     * @default false
      */
     fullWidth?: boolean;
     /**
      * If `true`, the label is hidden. Be sure to add aria-label to the input element.
-     * @default false
      */
     isLabelHidden?: boolean;
+    /**
+     * The label's overall position relative to the element it is labeling.
+     * @default 'top'
+     */
+    labelPlacement?: InputPropLabelPlacement;
+    /**
+     * The label's horizontal alignment relative to the element it is labeling.
+     * @default 'start'
+     */
+    labelAlign?: InputPropLabelAlign;
     /** The helper text content. */
     caption?: ReactNode;
     /** Inline styles. */
@@ -73,13 +80,13 @@ export type InputProps = ExtendableProps<{
     'data-testid'?: string | number;
     /** The props used for each slot inside. */
     slotProps?: {
-        root?: FieldControlProps<typeof TextField<HTMLInputElement>>;
-        label?: FieldLabelProps;
+        root?: FormControlProps<typeof TextField<HTMLInputElement>>;
+        label?: FormControlLabelProps;
         caption?: FieldCaptionProps;
         group?: FieldContentGroupProps;
         errorMessage?: FieldErrorProps;
         input?: FieldInputProps;
     };
-} & InputDeprecatedProps, Omit<TextFieldProps<HTMLInputElement>, 'description' | 'validationBehavior' | 'validate' | 'children' | 'inputElementType'>>;
+} & InputDeprecatedProps, Omit<TextFieldProps<HTMLInputElement>, 'description' | 'children' | 'inputElementType' | 'validationState'>>;
 export type InputRef = ComponentRef<'input'>;
 export {};

package/dist/components/Input/types.js

@@ -1,5 +1,10 @@
 import { fieldContentGroupPropVariant } from "../FieldComponents/FieldContentGroup/types.js";
+import { formControlPropLabelPlacement, formControlPropLabelAlign } from "../FormControl/types.js";
 const inputPropVariant = fieldContentGroupPropVariant;
+const inputPropLabelPlacement = formControlPropLabelPlacement;
+const inputPropLabelAlign = formControlPropLabelAlign;
 export {
+  inputPropLabelAlign,
+  inputPropLabelPlacement,
   inputPropVariant
 };