@koobiq/react-components 0.11.0 → 0.12.0

package/dist/components/RadioGroup/types.js

@@ -1,8 +1,8 @@
-import { formControlPropLabelPlacement, formControlPropLabelAlign } from "../FormControl/types.js";
+import { formFieldPropLabelPlacement, formFieldPropLabelAlign } from "../FormField/types.js";
 const radioGroupPropSize = ["normal", "big"];
 const radioGroupPropOrientation = ["horizontal", "vertical"];
-const radioGroupPropLabelPlacement = formControlPropLabelPlacement;
-const radioGroupPropLabelAlign = formControlPropLabelAlign;
+const radioGroupPropLabelPlacement = formFieldPropLabelPlacement;
+const radioGroupPropLabelAlign = formFieldPropLabelAlign;
 export {
   radioGroupPropLabelAlign,
   radioGroupPropLabelPlacement,

package/dist/components/SearchInput/SearchInput.d.ts

@@ -1,7 +1,5 @@
-import { type FieldCaptionProps, type FieldContentGroupProps, type FieldInputProps, type FieldErrorProps } from '../FieldComponents';
-import { type FormControlProps } from '../FormControl';
-import { type FormControlLabelProps } from '../FormControlLabel';
-export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/searchfield").AriaSearchFieldProps, "validationState" | "description">, "caption" | "style" | "className" | "variant" | "labelPlacement" | "labelAlign" | `data-${string}` | "fullWidth" | "slotProps" | "startAddon" | "endAddon" | "isLabelHidden"> & {
+import type { FormFieldProps, FormFieldLabelProps, FormFieldInputProps, FormFieldErrorProps, FormFieldCaptionProps, FormFieldControlGroupProps } from '../FormField';
+export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/searchfield").AriaSearchFieldProps, "description" | "validationState">, "caption" | "style" | "className" | `data-${string}` | "startAddon" | "endAddon" | "variant" | "slotProps" | "labelPlacement" | "labelAlign" | "fullWidth" | "isLabelHidden"> & {
     className?: string;
     style?: import("react").CSSProperties;
     isLabelHidden?: boolean;
@@ -10,12 +8,12 @@ export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit
     startAddon?: import("react").ReactNode;
     endAddon?: import("react").ReactNode;
     slotProps?: {
-        root?: FormControlProps;
-        label?: FormControlLabelProps;
-        group?: FieldContentGroupProps;
-        input?: FieldInputProps;
-        caption?: FieldCaptionProps;
-        errorMessage?: FieldErrorProps;
+        root?: FormFieldProps;
+        label?: FormFieldLabelProps;
+        group?: FormFieldControlGroupProps;
+        input?: FormFieldInputProps;
+        caption?: FormFieldCaptionProps;
+        errorMessage?: FormFieldErrorProps;
         clearButton?: import("..").IconButtonProps;
     };
     caption?: import("react").ReactNode;

package/dist/components/SearchInput/SearchInput.js

@@ -5,14 +5,9 @@ import { useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
 import { IconMagnifyingGlass16, IconXmarkCircle16 } from "@koobiq/react-icons";
 import { useSearchFieldState, removeDataAttributes, useSlottedContext, FormContext, useSearchField, FieldErrorContext } from "@koobiq/react-primitives";
 import s from "./SearchInput.module.css.js";
+import { useForm } from "../Form/FormContext.js";
 import { IconButton } from "../IconButton/IconButton.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";
-import { FieldError } from "../FieldComponents/FieldError/FieldError.js";
+import { FormField } from "../FormField/FormField.js";
 const SearchInput = forwardRef(
   (props, ref) => {
     const {
@@ -28,14 +23,19 @@ const SearchInput = forwardRef(
       className,
       caption,
       isRequired,
-      isReadOnly,
+      isReadOnly: isReadOnlyProp,
       label,
       endAddon,
-      isDisabled,
+      isDisabled: isDisabledProp,
       slotProps
     } = props;
-    const state = useSearchFieldState(removeDataAttributes(props));
-    const domRef = useDOMRef(ref);
+    const { isDisabled: formIsDisabled, isReadOnly: formIsReadOnly } = useForm();
+    const isDisabled = isDisabledProp ?? formIsDisabled;
+    const isReadOnly = isReadOnlyProp ?? formIsReadOnly;
+    const state = useSearchFieldState(
+      removeDataAttributes({ ...props, isDisabled, isReadOnly })
+    );
+    const inputRef = useDOMRef(ref);
     const { validationBehavior: formValidationBehavior } = useSlottedContext(FormContext) || {};
     const validationBehavior = props.validationBehavior ?? formValidationBehavior ?? "aria";
     const hasClearButton = state.value !== "" && !isDisabled && !isReadOnly;
@@ -47,9 +47,12 @@ const SearchInput = forwardRef(
       clearButtonProps: clearButtonPropsAria,
       ...validation
     } = useSearchField(
-      { ...removeDataAttributes(props), validationBehavior },
+      {
+        ...removeDataAttributes({ ...props, isDisabled, isReadOnly }),
+        validationBehavior
+      },
       state,
-      domRef
+      inputRef
     );
     const { isInvalid } = validation;
     const rootProps = mergeProps(
@@ -70,19 +73,16 @@ const SearchInput = forwardRef(
     );
     const labelProps = mergeProps(
       { isHidden: isLabelHidden, isRequired, children: label },
-      slotProps?.label,
-      labelPropsAria
+      labelPropsAria,
+      slotProps?.label
     );
     const inputProps = mergeProps(
       {
-        variant,
-        isInvalid,
-        isDisabled,
-        ref: domRef,
+        ref: inputRef,
         className: s.input
       },
-      slotProps?.input,
-      inputPropsAria
+      inputPropsAria,
+      slotProps?.input
     );
     const groupProps = mergeProps(
       {
@@ -104,24 +104,33 @@ const SearchInput = forwardRef(
           ),
           endAddon
         ] }),
+        onMouseDown: (e) => {
+          if (e.currentTarget !== e.target) return;
+          e.preventDefault();
+          inputRef?.current?.focus();
+        },
         variant,
         isInvalid,
         isDisabled
       },
       slotProps?.group
     );
-    const captionProps = mergeProps({ children: caption }, slotProps?.caption, descriptionPropsAria);
+    const captionProps = mergeProps(
+      { children: caption },
+      descriptionPropsAria,
+      slotProps?.caption
+    );
     const errorProps = mergeProps(
       { children: errorMessage },
-      slotProps?.errorMessage,
-      errorMessagePropsAria
+      errorMessagePropsAria,
+      slotProps?.errorMessage
     );
-    return /* @__PURE__ */ jsxs(FormControl, { ...rootProps, children: [
-      /* @__PURE__ */ jsx(FormControlLabel, { ...labelProps, children: label }),
-      /* @__PURE__ */ jsxs(Field, { children: [
-        /* @__PURE__ */ jsx(FieldContentGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInput, { ...inputProps }) }),
-        /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
-        /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FieldError, { ...errorProps }) })
+    return /* @__PURE__ */ jsxs(FormField, { ...rootProps, children: [
+      /* @__PURE__ */ jsx(FormField.Label, { ...labelProps, children: label }),
+      /* @__PURE__ */ jsxs("div", { className: s.body, children: [
+        /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Input, { ...inputProps }) }),
+        /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps }),
+        /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) })
       ] })
     ] });
   }

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

@@ -2,13 +2,16 @@ const input = "kbq-searchinput-input-f896b1";
 const startAddon = "kbq-searchinput-startAddon-08187f";
 const searchIcon = "kbq-searchinput-searchIcon-8bce0f";
 const clearButton = "kbq-searchinput-clearButton-71f872";
+const body = "kbq-searchinput-body-972749";
 const s = {
   input,
   startAddon,
   searchIcon,
-  clearButton
+  clearButton,
+  body
 };
 export {
+  body,
   clearButton,
   s as default,
   input,

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

@@ -1,16 +1,14 @@
 import type { ComponentRef, CSSProperties, ReactNode } from 'react';
 import type { DataAttributeProps, ExtendableProps } from '@koobiq/react-core';
 import type { AriaSearchFieldProps } from '@koobiq/react-primitives';
-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';
+import type { FormFieldProps, FormFieldLabelProps, FormFieldInputProps, FormFieldErrorProps, FormFieldCaptionProps, FormFieldPropLabelAlign, FormFieldControlGroupProps, FormFieldPropLabelPlacement, FormFieldControlGroupPropVariant } from '../FormField';
 import type { IconButtonProps } from '../IconButton';
 export declare const searchInputPropVariant: readonly ["filled", "transparent"];
-export type SearchInputPropVariant = FieldContentGroupPropVariant;
+export type SearchInputPropVariant = FormFieldControlGroupPropVariant;
 export declare const searchInputPropLabelPlacement: readonly ["top", "side"];
-export type SearchInputPropLabelPlacement = FormControlPropLabelPlacement;
+export type SearchInputPropLabelPlacement = FormFieldPropLabelPlacement;
 export declare const searchInputPropLabelAlign: readonly ["start", "end"];
-export type SearchInputPropLabelAlign = FormControlPropLabelAlign;
+export type SearchInputPropLabelAlign = FormFieldPropLabelAlign;
 export type SearchInputProps = ExtendableProps<{
     /** Additional CSS-classes. */
     className?: string;
@@ -36,12 +34,12 @@ export type SearchInputProps = ExtendableProps<{
     endAddon?: ReactNode;
     /** The props used for each slot inside. */
     slotProps?: {
-        root?: FormControlProps;
-        label?: FormControlLabelProps;
-        group?: FieldContentGroupProps;
-        input?: FieldInputProps;
-        caption?: FieldCaptionProps;
-        errorMessage?: FieldErrorProps;
+        root?: FormFieldProps;
+        label?: FormFieldLabelProps;
+        group?: FormFieldControlGroupProps;
+        input?: FormFieldInputProps;
+        caption?: FormFieldCaptionProps;
+        errorMessage?: FormFieldErrorProps;
         clearButton?: IconButtonProps;
     };
     /** The helper text content. */

package/dist/components/SearchInput/types.js

@@ -1,8 +1,8 @@
-import { fieldContentGroupPropVariant } from "../FieldComponents/FieldContentGroup/types.js";
-import { formControlPropLabelPlacement, formControlPropLabelAlign } from "../FormControl/types.js";
-const searchInputPropVariant = fieldContentGroupPropVariant;
-const searchInputPropLabelPlacement = formControlPropLabelPlacement;
-const searchInputPropLabelAlign = formControlPropLabelAlign;
+import { formFieldControlGroupPropVariant } from "../FormField/FormFieldControlGroup/types.js";
+import { formFieldPropLabelPlacement, formFieldPropLabelAlign } from "../FormField/types.js";
+const searchInputPropVariant = formFieldControlGroupPropVariant;
+const searchInputPropLabelPlacement = formFieldPropLabelPlacement;
+const searchInputPropLabelAlign = formFieldPropLabelAlign;
 export {
   searchInputPropLabelAlign,
   searchInputPropLabelPlacement,

package/dist/components/Select/Select.js

@@ -1,22 +1,17 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback } from "react";
-import { useLocalizedStringFormatter, useDOMRef, useElementSize, mergeProps, clsx } from "@koobiq/react-core";
+import { useLocalizedStringFormatter, useDOMRef, useElementSize, mergeProps } from "@koobiq/react-core";
 import { IconXmarkCircle16, IconChevronDownS16 } from "@koobiq/react-icons";
 import { useSlottedContext, FormContext, useMultiSelectState, removeDataAttributes, useMultiSelect, FieldErrorContext } from "@koobiq/react-primitives";
 import { PopoverInner } from "../Popover/PopoverInner.js";
 import intlMessages from "./intl.js";
 import s from "./Select.module.css.js";
-import { FieldSelect } from "../FieldComponents/FieldSelect/FieldSelect.js";
 import { SelectList } from "./components/SelectList/SelectList.js";
 import { TagGroup } from "./components/TagGroup/TagGroup.js";
 import { List } from "../List/List.js";
+import { useForm } from "../Form/FormContext.js";
 import { IconButton } from "../IconButton/IconButton.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";
+import { FormField } from "../FormField/FormField.js";
 import { Item } from "../Collections/Item.js";
 import { Section } from "../Collections/Section.js";
 import { Divider } from "../Collections/Divider.js";
@@ -31,7 +26,7 @@ function SelectRender(props, ref) {
     labelPlacement,
     labelAlign,
     isRequired,
-    isDisabled,
+    isDisabled: isDisabledProp,
     caption,
     errorMessage,
     className,
@@ -45,16 +40,18 @@ function SelectRender(props, ref) {
     label,
     renderValue: renderValueProp
   } = props;
+  const { isDisabled: formIsDisabled } = useForm();
+  const isDisabled = isDisabledProp ?? formIsDisabled;
   const t = useLocalizedStringFormatter(intlMessages);
   const domRef = useDOMRef(ref);
   const { validationBehavior: formValidationBehavior } = useSlottedContext(FormContext) || {};
   const validationBehavior = props.validationBehavior ?? formValidationBehavior ?? "aria";
   const state = useMultiSelectState(
-    removeDataAttributes({ ...props, selectionMode })
+    removeDataAttributes({ ...props, isDisabled, selectionMode })
   );
   const hasClearButton = isClearable && !isDisabled && state.selectedItems;
   const handleClear = useCallback(() => {
-    state.selectionManager.clearSelection();
+    state.selectionManager.setSelectedKeys(/* @__PURE__ */ new Set());
     onClear?.();
   }, [onClear, state]);
   const {
@@ -69,6 +66,7 @@ function SelectRender(props, ref) {
     removeDataAttributes({
       ...props,
       selectionMode,
+      isDisabled,
       disallowEmptySelection: true,
       validationBehavior
     }),
@@ -80,8 +78,8 @@ function SelectRender(props, ref) {
   const rootProps = mergeProps({
     "data-testid": testId,
     "data-invalid": isInvalid || void 0,
-    "data-disabled": props.isDisabled || void 0,
-    "data-required": props.isRequired || void 0,
+    "data-disabled": isDisabled || void 0,
+    "data-required": isRequired || void 0,
     className,
     fullWidth,
     labelPlacement,
@@ -114,8 +112,13 @@ function SelectRender(props, ref) {
         endAddon: { className: s.addon },
         startAddon: { className: s.addon }
       },
-      className: clsx(isClearable && s.clearable),
       startAddon,
+      onMouseDown: (e) => {
+        if (e.currentTarget !== e.target || isDisabled) return;
+        e.preventDefault();
+        domRef?.current?.focus();
+        state.open();
+      },
       endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
         endAddon,
         hasClearButton && /* @__PURE__ */ jsx(IconButton, { ...clearButtonProps, children: /* @__PURE__ */ jsx(IconXmarkCircle16, {}) }),
@@ -130,13 +133,11 @@ function SelectRender(props, ref) {
   const controlProps = mergeProps(
     {
       ref: domRef,
-      placeholder,
-      isInvalid,
-      isDisabled
+      placeholder
     },
-    slotProps?.control,
     valueProps,
-    triggerProps
+    triggerProps,
+    slotProps?.control
   );
   const popoverProps = mergeProps(
     {
@@ -144,15 +145,23 @@ function SelectRender(props, ref) {
       offset: 4,
       size: width,
       hideArrow: true,
-      anchorRef: domRef,
+      anchorRef: containerRef,
       className: s.popover,
       placement: "bottom start",
       type: "listbox"
     },
     slotProps?.popover
   );
-  const captionProps = mergeProps({ children: caption }, slotProps?.caption, descriptionProps);
-  const errorProps = mergeProps({ children: errorMessage }, slotProps?.errorMessage, errorMessageProps);
+  const captionProps = mergeProps(
+    { children: caption },
+    descriptionProps,
+    slotProps?.caption
+  );
+  const errorProps = mergeProps(
+    { children: errorMessage },
+    errorMessageProps,
+    slotProps?.errorMessage
+  );
   const renderDefaultValue = (state2, states) => {
     if (!state2.selectedItems?.length) return null;
     if (selectionMode === "multiple")
@@ -168,16 +177,16 @@ function SelectRender(props, ref) {
   };
   const renderValue = renderValueProp || renderDefaultValue;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(FormControl, { ...rootProps, children: [
-      /* @__PURE__ */ jsx(FormControlLabel, { ...labelProps }),
-      /* @__PURE__ */ jsxs(Field, { children: [
-        /* @__PURE__ */ jsx(FieldContentGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldSelect, { ...controlProps, children: renderValue(state, {
+    /* @__PURE__ */ jsxs(FormField, { ...rootProps, children: [
+      /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
+      /* @__PURE__ */ jsxs("div", { className: s.body, children: [
+        /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Select, { ...controlProps, children: renderValue(state, {
           isInvalid,
           isDisabled: props.isDisabled,
           isRequired: props.isRequired
         }) }) }),
-        /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
-        /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FieldError, { ...errorProps }) })
+        /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps }),
+        /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) })
       ] })
     ] }),
     /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(SelectList, { ...listProps }) })

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

@@ -1,22 +1,22 @@
 const addon = "kbq-select-addon-cbc524";
 const chevron = "kbq-select-chevron-0b4fa3";
+const body = "kbq-select-body-69aa88";
 const list = "kbq-select-list-8ffac0";
 const popover = "kbq-select-popover-79fc05";
 const clearButton = "kbq-select-clearButton-8031a1";
-const clearable = "kbq-select-clearable-2f5092";
 const s = {
   addon,
   chevron,
+  body,
   list,
   popover,
-  clearButton,
-  clearable
+  clearButton
 };
 export {
   addon,
+  body,
   chevron,
   clearButton,
-  clearable,
   s as default,
   list,
   popover

package/dist/components/Select/components/TagGroup/TagGroupMultiline.js

@@ -3,14 +3,14 @@ import { useLocalizedStringFormatter, clsx } from "@koobiq/react-core";
 import intlMessages from "../../intl.js";
 import s from "./TagGroup.module.css.js";
 import { Tag } from "../Tag/Tag.js";
-import { useFieldContentGroup } from "../../../FieldComponents/FieldContentGroup/FieldContentGroupContext.js";
+import { useFormFieldControlGroup } from "../../../FormField/FormFieldControlGroup/FormFieldControlGroupContext.js";
 const TagGroupMultiline = ({
   state,
   states
 }) => {
   const { isDisabled, isInvalid } = states;
   const t = useLocalizedStringFormatter(intlMessages);
-  const { hasStartAddon } = useFieldContentGroup();
+  const { hasStartAddon } = useFormFieldControlGroup();
   return /* @__PURE__ */ jsx(
     "div",
     {

package/dist/components/Select/components/TagGroup/TagGroupResponsive.js

@@ -3,7 +3,7 @@ import { useHideOverflowItems, useLocalizedStringFormatter, clsx } from "@koobiq
 import intlMessages from "../../intl.js";
 import s from "./TagGroup.module.css.js";
 import { getHiddenCount } from "./utils.js";
-import { useFieldContentGroup } from "../../../FieldComponents/FieldContentGroup/FieldContentGroupContext.js";
+import { useFormFieldControlGroup } from "../../../FormField/FormFieldControlGroup/FormFieldControlGroupContext.js";
 import { Tag } from "../Tag/Tag.js";
 const TagGroupResponsive = ({
   state,
@@ -17,7 +17,7 @@ const TagGroupResponsive = ({
   });
   const hiddenCount = getHiddenCount(visibleMap);
   const t = useLocalizedStringFormatter(intlMessages);
-  const { hasStartAddon } = useFieldContentGroup();
+  const { hasStartAddon } = useFormFieldControlGroup();
   return /* @__PURE__ */ jsxs(
     "div",
     {

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

@@ -1,18 +1,16 @@
 import type { ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
 import type { ExtendableProps } from '@koobiq/react-core';
 import type { AriaSelectProps, MultiSelectState, useMultiSelectState } from '@koobiq/react-primitives';
-import { type FieldErrorProps, type FieldSelectProps, type FieldCaptionProps, type FieldContentGroupProps } from '../FieldComponents';
-import { type FormControlPropLabelAlign, type FormControlPropLabelPlacement } from '../FormControl';
-import type { FormControlLabelProps } from '../FormControlLabel';
+import type { FormFieldLabelProps, FormFieldErrorProps, FormFieldSelectProps, FormFieldCaptionProps, FormFieldPropLabelAlign, FormFieldControlGroupProps, FormFieldPropLabelPlacement } from '../FormField';
 import type { IconButtonProps } from '../IconButton';
 import type { PopoverProps } from '../Popover';
 import type { SelectListProps } from './components';
 export declare const selectPropSelectedTagsOverflow: readonly ["multiline", "responsive"];
 export type SelectPropSelectedTagsOverflow = (typeof selectPropSelectedTagsOverflow)[number];
 export declare const selectPropLabelPlacement: readonly ["top", "side"];
-export type SelectPropLabelPlacement = FormControlPropLabelPlacement;
+export type SelectPropLabelPlacement = FormFieldPropLabelPlacement;
 export declare const selectPropLabelAlign: readonly ["start", "end"];
-export type SelectPropLabelAlign = FormControlPropLabelAlign;
+export type SelectPropLabelAlign = FormFieldPropLabelAlign;
 export type SelectProps<T> = ExtendableProps<{
     /**
      * Defines how selected tags are displayed when they exceed the available space.
@@ -82,12 +80,12 @@ export type SelectProps<T> = ExtendableProps<{
     /** The props used for each slot inside. */
     slotProps?: {
         popover?: PopoverProps;
-        label?: FormControlLabelProps;
+        label?: FormFieldLabelProps;
         list?: Omit<SelectListProps<object>, 'state'>;
-        control?: FieldSelectProps;
-        caption?: FieldCaptionProps;
-        group?: FieldContentGroupProps;
-        errorMessage?: FieldErrorProps;
+        control?: FormFieldSelectProps;
+        caption?: FormFieldCaptionProps;
+        group?: FormFieldControlGroupProps;
+        errorMessage?: FormFieldErrorProps;
         clearButton?: IconButtonProps;
     };
 }, Omit<AriaSelectProps<T>, 'description' | 'validationBehavior' | 'validate' | 'validationState' | 'selectedKey' | 'onSelectionChange' | 'defaultSelectedKey'>>;

package/dist/components/Select/types.js

@@ -1,10 +1,10 @@
-import { formControlPropLabelPlacement, formControlPropLabelAlign } from "../FormControl/types.js";
+import { formFieldPropLabelPlacement, formFieldPropLabelAlign } from "../FormField/types.js";
 const selectPropSelectedTagsOverflow = [
   "multiline",
   "responsive"
 ];
-const selectPropLabelPlacement = formControlPropLabelPlacement;
-const selectPropLabelAlign = formControlPropLabelAlign;
+const selectPropLabelPlacement = formFieldPropLabelPlacement;
+const selectPropLabelAlign = formFieldPropLabelAlign;
 export {
   selectPropLabelAlign,
   selectPropLabelPlacement,

package/dist/components/Textarea/Textarea.d.ts

@@ -4,7 +4,7 @@ export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<{
     required?: boolean;
     hiddenLabel?: boolean;
     readonly?: boolean;
-} & Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLTextAreaElement>, "children" | "style" | "className" | "validationState" | "description" | "inputElementType">, "caption" | "style" | "className" | "cols" | "rows" | "variant" | "labelPlacement" | "labelAlign" | "fullWidth" | "slotProps" | "data-testid" | "isLabelHidden" | "expand"> & {
+} & Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLTextAreaElement>, "children" | "style" | "className" | "description" | "validationState" | "inputElementType">, "caption" | "style" | "className" | "cols" | "rows" | "data-testid" | "variant" | "slotProps" | "labelPlacement" | "labelAlign" | "fullWidth" | "isLabelHidden" | "expand"> & {
     className?: string;
     style?: import("react").CSSProperties;
     variant?: import("./types").TextareaPropVariant;
@@ -18,9 +18,9 @@ export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<{
     expand?: import("./types").TextareaPropExpand;
     'data-testid'?: string | number;
     slotProps?: {
-        label?: import("..").FormControlLabelProps;
-        caption?: import("../FieldComponents").FieldCaptionProps;
-        textarea?: import("../FieldComponents").FieldInputProps<"textarea">;
-        errorMessage?: import("../FieldComponents").FieldErrorProps;
+        label?: import("..").FormFieldLabelProps;
+        caption?: import("..").FormFieldCaptionProps;
+        textarea?: import("..").FormFieldInputProps<"textarea">;
+        errorMessage?: import("..").FormFieldErrorProps;
     };
 } & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/Textarea/Textarea.js

@@ -5,7 +5,8 @@ import { deprecate } from "@koobiq/logger";
 import { mergeProps } from "@koobiq/react-core";
 import { TextField } from "@koobiq/react-primitives";
 import { TextareaContextConsumer } from "./components/TextareaContextConsumer/TextareaContextConsumer.js";
-import { FormControl } from "../FormControl/FormControl.js";
+import { useForm } from "../Form/FormContext.js";
+import { FormField } from "../FormField/FormField.js";
 const Textarea = forwardRef((props, ref) => {
   const {
     variant = "filled",
@@ -31,9 +32,10 @@ const Textarea = forwardRef((props, ref) => {
     label,
     ...other
   } = props;
-  const isDisabled = isDisabledProp ?? disabled;
+  const { isDisabled: formIsDisabled, isReadOnly: formIsReadOnly } = useForm();
+  const isDisabled = isDisabledProp ?? disabled ?? formIsDisabled;
+  const isReadOnly = isReadOnlyProp ?? readonly ?? formIsReadOnly;
   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) {
@@ -76,7 +78,7 @@ const Textarea = forwardRef((props, ref) => {
     },
     other
   );
-  return /* @__PURE__ */ jsx(FormControl, { as: TextField, inputElementType: "textarea", ...rootProps, children: (values) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(FormField, { as: TextField, inputElementType: "textarea", ...rootProps, children: (values) => /* @__PURE__ */ jsx(
     TextareaContextConsumer,
     {
       ...values,

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

@@ -1,7 +1,13 @@
+const body = "kbq-textarea-body-943a69";
+const group = "kbq-textarea-group-c8f6ff";
 const s = {
   "auto-size": "kbq-textarea-auto-size-566580",
-  "vertical-resize": "kbq-textarea-vertical-resize-bde131"
+  "vertical-resize": "kbq-textarea-vertical-resize-bde131",
+  body,
+  group
 };
 export {
-  s as default
+  body,
+  s as default,
+  group
 };

package/dist/components/Textarea/components/TextareaContextConsumer/TextareaContextConsumer.d.ts

@@ -3,4 +3,4 @@ export declare const TextareaContextConsumer: import("react").ForwardRefExoticCo
     isRequired?: boolean;
     isInvalid?: boolean;
     isDisabled?: boolean;
-} & Pick<TextareaProps, "caption" | "label" | "cols" | "rows" | "variant" | "labelPlacement" | "slotProps" | "errorMessage" | "isLabelHidden" | "expand"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+} & Pick<TextareaProps, "caption" | "label" | "cols" | "rows" | "variant" | "slotProps" | "labelPlacement" | "errorMessage" | "isLabelHidden" | "expand"> & import("react").RefAttributes<HTMLTextAreaElement>>;