@koobiq/react-components 0.7.0 → 0.8.0

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import { type CheckboxProps as CheckboxPropsPrimitive } from '@koobiq/react-primitives';
-export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Omit<CheckboxPropsPrimitive, "validationState" | "inputRef">, "children" | "style" | "className" | "size" | "slotProps" | "data-testid" | "labelPlacement" | keyof {
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Omit<CheckboxPropsPrimitive, "validationState" | "inputRef">, "children" | "style" | "className" | "size" | "labelPlacement" | "slotProps" | "data-testid" | keyof {
     disabled?: boolean;
     error?: boolean;
     checked?: boolean;

package/dist/components/DateInput/DateInput.js

@@ -7,8 +7,9 @@ import { useDateFieldState, removeDataAttributes, useDateField } from "@koobiq/r
 import s from "./DateInput.module.css.js";
 import { FieldInputDate } from "../FieldComponents/FieldInputDate/FieldInputDate.js";
 import { DateSegment } from "../DateSegment/DateSegment.js";
-import { FieldControl } from "../FieldComponents/FieldControl/FieldControl.js";
-import { FieldLabel } from "../FieldComponents/FieldLabel/FieldLabel.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 { FieldCaption } from "../FieldComponents/FieldCaption/FieldCaption.js";
 import { FieldError } from "../FieldComponents/FieldError/FieldError.js";
@@ -22,6 +23,8 @@ function DateInputRender(props, ref) {
     startAddon,
     endAddon,
     isLabelHidden,
+    labelPlacement,
+    labelAlign,
     label,
     className,
     style,
@@ -47,11 +50,12 @@ function DateInputRender(props, ref) {
     {
       style,
       fullWidth,
+      labelPlacement,
+      labelAlign,
       "data-testid": testId,
       "data-variant": variant,
       "data-invalid": isInvalid,
       "data-disabled": isDisabled,
-      "data-fullwidth": fullWidth,
       "data-required": isRequired,
       "data-readonly": isReadOnly,
       className: clsx(s.base, className)
@@ -92,11 +96,13 @@ function DateInputRender(props, ref) {
     slotProps?.inputDate,
     fieldProps
   );
-  return /* @__PURE__ */ jsxs(FieldControl, { ...rootProps, children: [
-    /* @__PURE__ */ jsx(FieldLabel, { ...labelProps }),
-    /* @__PURE__ */ jsx(FieldContentGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInputDate, { ...controlProps, children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(DateSegment, { segment, state }, i)) }) }),
-    /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
-    /* @__PURE__ */ jsx(FieldError, { ...errorProps })
+  return /* @__PURE__ */ jsxs(FormControl, { ...rootProps, children: [
+    /* @__PURE__ */ jsx(FormControlLabel, { ...labelProps }),
+    /* @__PURE__ */ jsxs(Field, { children: [
+      /* @__PURE__ */ jsx(FieldContentGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInputDate, { ...controlProps, children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(DateSegment, { segment, state }, i)) }) }),
+      /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
+      /* @__PURE__ */ jsx(FieldError, { ...errorProps })
+    ] })
   ] });
 }
 const DateInput = forwardRef(DateInputRender);

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

@@ -1,8 +1,14 @@
 import type { ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
 import type { AriaDateFieldProps, DateValue } from '@koobiq/react-primitives';
-import { type FieldCaptionProps, type FieldControlProps, type FieldErrorProps, type FieldInputDateProps, type FieldContentGroupProps, type FieldLabelProps, type FieldContentGroupPropVariant } from '../FieldComponents';
+import { type FieldCaptionProps, type FieldErrorProps, type FieldInputDateProps, type FieldContentGroupProps, type FieldContentGroupPropVariant } from '../FieldComponents';
+import { type FormControlProps, type FormControlPropLabelAlign, type FormControlPropLabelPlacement } from '../FormControl';
+import type { FormControlLabelProps } from '../FormControlLabel';
 export declare const dateInputPropVariant: readonly ["filled", "transparent"];
 export type DateInputPropVariant = FieldContentGroupPropVariant;
+export declare const dateInputPropLabelPlacement: readonly ["top", "side"];
+export type DateInputPropLabelPlacement = FormControlPropLabelPlacement;
+export declare const dateInputPropLabelAlign: readonly ["start", "end"];
+export type DateInputPropLabelAlign = FormControlPropLabelAlign;
 export type DateInputProps<T extends DateValue> = {
     /** Inline styles. */
     style?: CSSProperties;
@@ -24,8 +30,8 @@ export type DateInputProps<T extends DateValue> = {
     fullWidth?: boolean;
     /** The props used for each slot inside. */
     slotProps?: {
-        root?: FieldControlProps;
-        label?: FieldLabelProps;
+        root?: FormControlProps;
+        label?: FormControlLabelProps;
         group?: FieldContentGroupProps;
         caption?: FieldCaptionProps;
         inputDate?: FieldInputDateProps;
@@ -38,6 +44,16 @@ export type DateInputProps<T extends DateValue> = {
      * @default false
      */
     isLabelHidden?: boolean;
+    /**
+     * The label's overall position relative to the element it is labeling.
+     * @default 'top'
+     */
+    labelPlacement?: DateInputPropLabelPlacement;
+    /**
+     * The label's horizontal alignment relative to the element it is labeling.
+     * @default 'start'
+     */
+    labelAlign?: DateInputPropLabelAlign;
     /** Addon placed before the children. */
     startAddon?: ReactNode;
     /** Addon placed after the children. */

package/dist/components/DateInput/types.js

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

package/dist/components/DatePicker/DatePicker.js

@@ -19,6 +19,8 @@ function DatePickerRender(props, ref) {
     slotProps,
     fullWidth,
     errorMessage,
+    labelPlacement,
+    labelAlign,
     startAddon,
     endAddon,
     "data-testid": testId
@@ -48,10 +50,12 @@ function DatePickerRender(props, ref) {
       fullWidth,
       className,
       startAddon,
+      labelPlacement,
+      labelAlign,
       errorMessage,
       "data-testid": testId,
       slotProps: {
-        label: labelProps,
+        label: mergeProps(labelProps, slotProps?.label),
         group: {
           endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
             endAddon,

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

@@ -1,7 +1,8 @@
 import type { CSSProperties, ReactElement, ReactNode, Ref } from 'react';
 import type { AriaDatePickerProps, DateValue } from '@koobiq/react-primitives';
 import type { CalendarProps } from '../Calendar';
-import type { DateInputProps, DateInputRef } from '../DateInput';
+import type { DateInputPropLabelAlign, DateInputPropLabelPlacement, DateInputProps, DateInputRef } from '../DateInput';
+import type { FormControlLabelProps } from '../FormControlLabel';
 import type { PopoverProps } from '../Popover';
 export type DatePickerProps<T extends DateValue> = {
     /**
@@ -21,11 +22,22 @@ export type DatePickerProps<T extends DateValue> = {
     style?: CSSProperties;
     /** Unique identifier for testing purposes. */
     'data-testid'?: string | number;
+    /**
+     * The label's overall position relative to the element it is labeling.
+     * @default 'top'
+     */
+    labelPlacement?: DateInputPropLabelPlacement;
+    /**
+     * The label's horizontal alignment relative to the element it is labeling.
+     * @default 'start'
+     */
+    labelAlign?: DateInputPropLabelAlign;
     /** Ref to the DateInput. */
     ref?: Ref<DateInputRef>;
     /** The props used for each slot inside. */
     slotProps?: {
         root?: DateInputProps<T>;
+        label?: FormControlLabelProps;
         popover?: PopoverProps;
         calendar?: CalendarProps<T>;
     };

package/dist/components/Dialog/components/DialogCloseButton.d.ts

@@ -4,10 +4,10 @@ export type DialogCloseButtonRef = ComponentRef<'button'>;
 export type DialogCloseButtonProps = ButtonProps;
 export declare const DialogCloseButton: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "children" | "value" | "form" | "style" | "as" | "className" | "autoFocus" | "id" | "tabIndex" | "rel" | "aria-controls" | "aria-describedby" | "aria-details" | "aria-expanded" | "aria-haspopup" | "aria-label" | "aria-labelledby" | "aria-pressed" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "onClick" | "name" | "target" | "type" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "isDisabled" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "onFocusChange" | "preventFocusOnPress" | "excludeFromTabOrder" | keyof import("@react-types/shared").HoverEvents | "isLoading" | "variant" | "onlyIcon" | "fullWidth" | "startIcon" | "endIcon" | "data-testid" | keyof {
+}, "children" | "value" | "form" | "style" | "as" | "className" | "autoFocus" | "id" | "tabIndex" | "rel" | "aria-controls" | "aria-describedby" | "aria-details" | "aria-expanded" | "aria-haspopup" | "aria-label" | "aria-labelledby" | "aria-pressed" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "onClick" | "name" | "target" | "type" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "fullWidth" | "isDisabled" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "onFocusChange" | "preventFocusOnPress" | "excludeFromTabOrder" | keyof import("@react-types/shared").HoverEvents | "isLoading" | "variant" | "onlyIcon" | "startIcon" | "endIcon" | "data-testid" | keyof {
     progress?: boolean;
     disabled?: boolean;
-}> & Omit<Omit<import("@koobiq/react-primitives").ButtonBaseProps, "slot">, "children" | "style" | "className" | "variant" | "onlyIcon" | "fullWidth" | "startIcon" | "endIcon" | "data-testid" | keyof {
+}> & Omit<Omit<import("@koobiq/react-primitives").ButtonBaseProps, "slot">, "children" | "style" | "className" | "fullWidth" | "variant" | "onlyIcon" | "startIcon" | "endIcon" | "data-testid" | keyof {
     progress?: boolean;
     disabled?: boolean;
 }> & {

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

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

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/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",
+    fullWidth = false,
+    as: Tag = "div",
+    className,
+    ...other
+  }, ref) => /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: clsx(
+        s.base,
+        className,
+        s[labelAlign],
+        s[labelPlacement],
+        fullWidth && s.fullWidth
+      ),
+      "data-fullwidth": fullWidth,
+      "data-label-align": labelAlign,
+      "data-label-placement": labelPlacement,
+      ...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/FormControlLabel/FormControlLabel.js

@@ -0,0 +1,33 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { polymorphicForwardRef, isNotNil, clsx } from "@koobiq/react-core";
+import { Label } from "@koobiq/react-primitives";
+import s from "./FormControlLabel.module.css.js";
+const FormControlLabel = polymorphicForwardRef(
+  ({
+    children,
+    className,
+    isHidden = false,
+    isRequired = false,
+    as = "label",
+    ...other
+  }, ref) => isNotNil(children) ? /* @__PURE__ */ jsxs(
+    Label,
+    {
+      as,
+      className: clsx(s.base, isHidden && s.hidden, className),
+      ...other,
+      ref,
+      children: [
+        children,
+        isRequired && /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsx("sup", { className: s.sup, children: "*" })
+        ] })
+      ]
+    }
+  ) : null
+);
+FormControlLabel.displayName = "FormControlLabel";
+export {
+  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/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 FieldErrorProps, type FieldInputProps } 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" | "validationBehavior" | "validate" | "description" | "inputElementType">, "caption" | "style" | "className" | "labelPlacement" | "labelAlign" | "fullWidth" | "variant" | "slotProps" | "data-testid" | "startAddon" | "endAddon" | "errorMessage" | "isLabelHidden" | keyof {
     disabled?: boolean;
     error?: boolean;
     required?: boolean;
@@ -14,12 +16,14 @@ export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<
     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,9 @@ 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 { 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";
@@ -24,6 +25,8 @@ const Input = forwardRef((props, ref) => {
     isRequired: isRequiredProp,
     readonly,
     isReadOnly: isReadOnlyProp,
+    labelPlacement,
+    labelAlign,
     label,
     startAddon,
     endAddon,
@@ -72,13 +75,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
@@ -105,10 +109,12 @@ const Input = forwardRef((props, ref) => {
     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 }),
-      /* @__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/types.d.ts

@@ -1,9 +1,15 @@
 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.
@@ -65,6 +71,16 @@ export type InputProps = ExtendableProps<{
      * @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,8 +89,8 @@ 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;

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
 };

package/dist/components/InputNumber/InputNumber.d.ts

@@ -1,6 +1,8 @@
 import { NumberField } from '@koobiq/react-primitives';
-import { type FieldControlProps, type FieldLabelProps, type FieldCaptionProps, type FieldErrorProps, type FieldContentGroupProps, type FieldInputProps } from '../FieldComponents';
-export declare const InputNumber: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").NumberFieldProps, "children" | "validationState" | "description" | "inputElementType">, "caption" | "style" | "className" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "startAddon" | "endAddon" | "errorMessage" | "isLabelHidden" | keyof {
+import { type FieldCaptionProps, type FieldErrorProps, type FieldContentGroupProps, type FieldInputProps } from '../FieldComponents';
+import { type FormControlProps } from '../FormControl';
+import { type FormControlLabelProps } from '../FormControlLabel';
+export declare const InputNumber: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").NumberFieldProps, "children" | "validationState" | "description" | "inputElementType">, "caption" | "style" | "className" | "labelPlacement" | "labelAlign" | "fullWidth" | "variant" | "slotProps" | "data-testid" | "startAddon" | "endAddon" | "errorMessage" | "isLabelHidden" | keyof {
     disabled?: boolean;
     error?: boolean;
     required?: boolean;
@@ -14,12 +16,14 @@ export declare const InputNumber: import("react").ForwardRefExoticComponent<Omit
     variant?: import("./types").InputNumberPropVariant;
     fullWidth?: boolean;
     isLabelHidden?: boolean;
+    labelPlacement?: import("./types").InputNumberPropLabelPlacement;
+    labelAlign?: import("./types").InputNumberPropLabelAlign;
     caption?: import("react").ReactNode;
     style?: import("react").CSSProperties;
     'data-testid'?: string | number;
     slotProps?: {
-        root?: FieldControlProps<typeof NumberField>;
-        label?: FieldLabelProps;
+        root?: FormControlProps<typeof NumberField>;
+        label?: FormControlLabelProps;
         input?: FieldInputProps;
         caption?: FieldCaptionProps;
         group?: FieldContentGroupProps;