@koobiq/react-components 0.11.0 → 0.12.0

package/dist/components/FormField/FormFieldSelect/FormFieldSelect.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { polymorphicForwardRef, clsx, isNotNil } from "@koobiq/react-core";
+import { Button } from "@koobiq/react-primitives";
+import s from "./FormFieldSelect.module.css.js";
+import { isPrimitiveNode } from "../../../utils/isPrimitiveNode.js";
+import { useFormFieldControlGroup } from "../FormFieldControlGroup/FormFieldControlGroupContext.js";
+const FormFieldSelect = polymorphicForwardRef(({ as = "div", placeholder, children, className, ...other }, ref) => {
+  const content = children ?? placeholder;
+  const { isDisabled } = useFormFieldControlGroup();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      ...other,
+      as,
+      isDisabled,
+      "data-slot": "select-value",
+      className: clsx(
+        s.base,
+        !isNotNil(children) && s.hasPlaceholder,
+        className
+      ),
+      ref,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: s.hiddenPlaceholder, "aria-hidden": true, children: placeholder }),
+        /* @__PURE__ */ jsx("div", { className: s.container, children: isPrimitiveNode(content) ? /* @__PURE__ */ jsx("span", { className: s.content, children: content }) : children })
+      ]
+    }
+  );
+});
+FormFieldSelect.displayName = "FormFieldSelect";
+export {
+  FormFieldSelect
+};

package/dist/components/FormField/FormFieldSelect/FormFieldSelect.module.css.js

@@ -0,0 +1,20 @@
+const base = "kbq-formfieldselect-301ef6";
+const container = "kbq-formfieldselect-container-920d39";
+const content = "kbq-formfieldselect-content-9846b3";
+const hasPlaceholder = "kbq-formfieldselect-hasPlaceholder-29f7ed";
+const hiddenPlaceholder = "kbq-formfieldselect-hiddenPlaceholder-6598b6";
+const s = {
+  base,
+  container,
+  content,
+  hasPlaceholder,
+  hiddenPlaceholder
+};
+export {
+  base,
+  container,
+  content,
+  s as default,
+  hasPlaceholder,
+  hiddenPlaceholder
+};

package/dist/components/FormField/FormFieldSelect/index.d.ts

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

package/dist/components/FormField/FormFieldSelect/types.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export type FormFieldSelectBaseProps = {
+    className?: string;
+    children?: ReactNode;
+    'data-testid'?: string;
+    placeholder?: string | number;
+};

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

@@ -0,0 +1,9 @@
+export * from './FormFieldInput';
+export * from './FormFieldSelect';
+export * from './FormFieldCaption';
+export * from './FormFieldLabel';
+export * from './FormFieldError';
+export * from './FormFieldControlGroup';
+export * from './FormFieldInputDate';
+export * from './FormField';
+export * from './types';

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

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

package/dist/components/FormField/types.js

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

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

@@ -1,8 +1,6 @@
 import { TextField } from '@koobiq/react-primitives';
-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" | "variant" | "labelPlacement" | "labelAlign" | "fullWidth" | "slotProps" | "data-testid" | "startAddon" | "endAddon" | "isLabelHidden" | keyof {
+import type { FormFieldProps, FormFieldLabelProps, FormFieldInputProps, FormFieldErrorProps, FormFieldCaptionProps, FormFieldControlGroupProps } from '../FormField';
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLInputElement>, "children" | "description" | "validationState" | "inputElementType">, "caption" | "style" | "className" | "data-testid" | "startAddon" | "endAddon" | "variant" | "slotProps" | "labelPlacement" | "labelAlign" | "fullWidth" | "isLabelHidden" | keyof {
     disabled?: boolean;
     error?: boolean;
     required?: boolean;
@@ -21,12 +19,12 @@ export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<
     style?: import("react").CSSProperties;
     'data-testid'?: string | number;
     slotProps?: {
-        root?: FormControlProps<typeof TextField<HTMLInputElement>>;
-        label?: FormControlLabelProps;
-        caption?: FieldCaptionProps;
-        group?: FieldContentGroupProps;
-        errorMessage?: FieldErrorProps;
-        input?: FieldInputProps;
+        root?: FormFieldProps<typeof TextField<HTMLInputElement>>;
+        label?: FormFieldLabelProps;
+        caption?: FormFieldCaptionProps;
+        group?: FormFieldControlGroupProps;
+        errorMessage?: FormFieldErrorProps;
+        input?: FormFieldInputProps;
     };
 } & {
     disabled?: boolean;

package/dist/components/Input/Input.js

@@ -5,13 +5,8 @@ import { deprecate } from "@koobiq/logger";
 import { useDOMRef, mergeProps } from "@koobiq/react-core";
 import { TextField } from "@koobiq/react-primitives";
 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";
-import { FieldError } from "../FieldComponents/FieldError/FieldError.js";
+import { FormField } from "../FormField/FormField.js";
+import { useForm } from "../Form/FormContext.js";
 const Input = forwardRef((props, ref) => {
   const {
     variant = "filled",
@@ -36,9 +31,10 @@ const Input = forwardRef((props, ref) => {
     caption,
     ...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) {
@@ -83,41 +79,44 @@ const Input = forwardRef((props, ref) => {
     },
     slotProps?.root
   );
-  return /* @__PURE__ */ jsx(FormControl, { as: TextField, inputElementType: "input", ...rootProps, children: ({ isInvalid: isInvalid2, isRequired: isRequired2, isDisabled: isDisabled2 }) => {
+  return /* @__PURE__ */ jsx(FormField, { as: TextField, inputElementType: "input", ...rootProps, children: ({ isInvalid: isInvalid2, isRequired: isRequired2, isDisabled: isDisabled2 }) => {
     const labelProps = mergeProps(
       { isHidden: isLabelHidden, isRequired: isRequired2, children: label },
       slotProps?.label
     );
     const inputProps = mergeProps(
-      {
-        variant,
-        isInvalid: isInvalid2,
-        isDisabled: isDisabled2,
-        ref: inputRef
-      },
+      { ref: inputRef },
       slotProps?.input
     );
     const groupProps = mergeProps(
       {
         endAddon,
         variant,
+        onMouseDown: (e) => {
+          if (e.currentTarget !== e.target) return;
+          e.preventDefault();
+          inputRef?.current?.focus();
+        },
         isInvalid: isInvalid2,
         isDisabled: isDisabled2,
         startAddon
       },
       slotProps?.group
     );
-    const captionProps = mergeProps({ children: caption }, slotProps?.caption);
+    const captionProps = mergeProps(
+      { children: caption },
+      slotProps?.caption
+    );
     const errorProps = mergeProps(
-      { children: errorMessage, className: s.error },
+      { children: errorMessage },
       slotProps?.errorMessage
     );
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__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 })
+      /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
+      /* @__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(FormField.Error, { ...errorProps })
       ] })
     ] });
   } });

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

@@ -1,4 +1,8 @@
-const s = {};
+const body = "kbq-input-body-3b6f04";
+const s = {
+  body
+};
 export {
+  body,
   s as default
 };

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

@@ -1,15 +1,13 @@
 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 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';
 export declare const inputPropVariant: readonly ["filled", "transparent"];
 export declare const inputPropLabelPlacement: readonly ["top", "side"];
-export type InputPropVariant = FieldContentGroupPropVariant;
-export type InputPropLabelPlacement = FormControlPropLabelPlacement;
+export type InputPropVariant = FormFieldControlGroupPropVariant;
+export type InputPropLabelPlacement = FormFieldPropLabelPlacement;
 export declare const inputPropLabelAlign: readonly ["start", "end"];
-export type InputPropLabelAlign = FormControlPropLabelAlign;
+export type InputPropLabelAlign = FormFieldPropLabelAlign;
 type InputDeprecatedProps = {
     /**
      * If `true`, the component is disabled.
@@ -80,12 +78,12 @@ export type InputProps = ExtendableProps<{
     'data-testid'?: string | number;
     /** The props used for each slot inside. */
     slotProps?: {
-        root?: FormControlProps<typeof TextField<HTMLInputElement>>;
-        label?: FormControlLabelProps;
-        caption?: FieldCaptionProps;
-        group?: FieldContentGroupProps;
-        errorMessage?: FieldErrorProps;
-        input?: FieldInputProps;
+        root?: FormFieldProps<typeof TextField<HTMLInputElement>>;
+        label?: FormFieldLabelProps;
+        caption?: FormFieldCaptionProps;
+        group?: FormFieldControlGroupProps;
+        errorMessage?: FormFieldErrorProps;
+        input?: FormFieldInputProps;
     };
 } & InputDeprecatedProps, Omit<TextFieldProps<HTMLInputElement>, 'description' | 'children' | 'inputElementType' | 'validationState'>>;
 export type InputRef = ComponentRef<'input'>;

package/dist/components/Input/types.js

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

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

@@ -1,8 +1,6 @@
 import { NumberField } from '@koobiq/react-primitives';
-import { type FieldCaptionProps, type FieldContentGroupProps, type FieldInputProps, type FieldErrorProps } 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" | "variant" | "labelPlacement" | "labelAlign" | "fullWidth" | "slotProps" | "data-testid" | "startAddon" | "endAddon" | "isLabelHidden" | keyof {
+import type { FormFieldProps, FormFieldLabelProps, FormFieldInputProps, FormFieldErrorProps, FormFieldCaptionProps, FormFieldControlGroupProps } from '../FormField';
+export declare const InputNumber: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").NumberFieldProps, "children" | "description" | "validationState" | "inputElementType">, "caption" | "style" | "className" | "data-testid" | "startAddon" | "endAddon" | "variant" | "slotProps" | "labelPlacement" | "labelAlign" | "fullWidth" | "isLabelHidden" | keyof {
     disabled?: boolean;
     error?: boolean;
     required?: boolean;
@@ -21,12 +19,12 @@ export declare const InputNumber: import("react").ForwardRefExoticComponent<Omit
     style?: import("react").CSSProperties;
     'data-testid'?: string | number;
     slotProps?: {
-        root?: FormControlProps<typeof NumberField>;
-        label?: FormControlLabelProps;
-        input?: FieldInputProps;
-        caption?: FieldCaptionProps;
-        group?: FieldContentGroupProps;
-        errorMessage?: FieldErrorProps;
+        root?: FormFieldProps<typeof NumberField>;
+        label?: FormFieldLabelProps;
+        input?: FormFieldInputProps;
+        caption?: FormFieldCaptionProps;
+        group?: FormFieldControlGroupProps;
+        errorMessage?: FormFieldErrorProps;
     };
 } & {
     disabled?: boolean;

package/dist/components/InputNumber/InputNumber.js

@@ -4,14 +4,10 @@ import { forwardRef } from "react";
 import { deprecate } from "@koobiq/logger";
 import { useDOMRef, mergeProps } from "@koobiq/react-core";
 import { NumberField } from "@koobiq/react-primitives";
+import s from "./InputNumber.module.css.js";
 import { InputNumberCounterControls } from "./components/InputNumberCounterControls.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 { useForm } from "../Form/FormContext.js";
+import { FormField } from "../FormField/FormField.js";
 const InputNumber = forwardRef(
   (props, ref) => {
     const {
@@ -37,10 +33,11 @@ const InputNumber = forwardRef(
       caption,
       ...other
     } = props;
+    const { isDisabled: formIsDisabled, isReadOnly: formIsReadOnly } = useForm();
     const inputRef = useDOMRef(ref);
-    const isDisabled = isDisabledProp ?? disabled;
+    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) {
@@ -84,28 +81,31 @@ const InputNumber = forwardRef(
       },
       slotProps?.root
     );
-    return /* @__PURE__ */ jsx(FormControl, { as: NumberField, ...rootProps, children: ({ isInvalid: isInvalid2, isRequired: isRequired2, isDisabled: isDisabled2 }) => {
+    return /* @__PURE__ */ jsx(FormField, { as: NumberField, ...rootProps, children: ({ isInvalid: isInvalid2, isRequired: isRequired2, isDisabled: isDisabled2 }) => {
       const labelProps = mergeProps(
         { isHidden: isLabelHidden, children: label, isRequired: isRequired2 },
         slotProps?.label
       );
       const inputProps = mergeProps(
-        {
-          variant,
-          isInvalid: isInvalid2,
-          isDisabled: isDisabled2,
-          ref: inputRef
-        },
+        { ref: inputRef },
         slotProps?.input
       );
       const captionProps = mergeProps({ children: caption }, slotProps?.caption);
-      const errorProps = mergeProps({ children: errorMessage }, slotProps?.errorMessage);
+      const errorProps = mergeProps(
+        { children: errorMessage },
+        slotProps?.errorMessage
+      );
       const groupProps = mergeProps(
         {
           endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
             endAddon,
             /* @__PURE__ */ jsx(InputNumberCounterControls, {})
           ] }),
+          onMouseDown: (e) => {
+            if (e.currentTarget !== e.target) return;
+            e.preventDefault();
+            inputRef?.current?.focus();
+          },
           isInvalid: isInvalid2,
           variant,
           startAddon,
@@ -114,11 +114,11 @@ const InputNumber = forwardRef(
         slotProps?.group
       );
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__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 })
+        /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
+        /* @__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(FormField.Error, { ...errorProps })
         ] })
       ] });
     } });

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

@@ -0,0 +1,8 @@
+const body = "kbq-inputnumber-body-4de1da";
+const s = {
+  body
+};
+export {
+  body,
+  s as default
+};

package/dist/components/InputNumber/components/InputNumberCounterControls.js

@@ -2,10 +2,10 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { clsx } from "@koobiq/react-core";
 import { IconChevronUpS16, IconChevronDownS16 } from "@koobiq/react-icons";
 import s from "./InputNumberCounterControls.module.css.js";
-import { useFieldContentGroup } from "../../FieldComponents/FieldContentGroup/FieldContentGroupContext.js";
+import { useFormFieldControlGroup } from "../../FormField/FormFieldControlGroup/FormFieldControlGroupContext.js";
 import { IconButton } from "../../IconButton/IconButton.js";
 const InputNumberCounterControls = () => {
-  const { isInvalid } = useFieldContentGroup();
+  const { isInvalid } = useFormFieldControlGroup();
   const variant = isInvalid ? "error" : "fade-contrast";
   return /* @__PURE__ */ jsxs("div", { className: s.base, children: [
     /* @__PURE__ */ jsx(

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

@@ -1,15 +1,13 @@
 import type { ComponentRef, CSSProperties, ReactNode } from 'react';
 import type { ExtendableProps } from '@koobiq/react-core';
 import type { NumberField, NumberFieldProps } from '@koobiq/react-primitives';
-import { type FieldCaptionProps, type FieldErrorProps, type FieldContentGroupProps, type FieldInputProps, 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';
 export declare const inputNumberPropVariant: readonly ["filled", "transparent"];
-export type InputNumberPropVariant = FieldContentGroupPropVariant;
+export type InputNumberPropVariant = FormFieldControlGroupPropVariant;
 export declare const inputNumberPropLabelPlacement: readonly ["top", "side"];
-export type InputNumberPropLabelPlacement = FormControlPropLabelPlacement;
+export type InputNumberPropLabelPlacement = FormFieldPropLabelPlacement;
 export declare const inputNumberPropLabelAlign: readonly ["start", "end"];
-export type InputNumberPropLabelAlign = FormControlPropLabelAlign;
+export type InputNumberPropLabelAlign = FormFieldPropLabelAlign;
 type InputNumberDeprecatedProps = {
     /**
      * If `true`, the component is disabled.
@@ -80,12 +78,12 @@ export type InputNumberProps = ExtendableProps<{
     'data-testid'?: string | number;
     /** The props used for each slot inside. */
     slotProps?: {
-        root?: FormControlProps<typeof NumberField>;
-        label?: FormControlLabelProps;
-        input?: FieldInputProps;
-        caption?: FieldCaptionProps;
-        group?: FieldContentGroupProps;
-        errorMessage?: FieldErrorProps;
+        root?: FormFieldProps<typeof NumberField>;
+        label?: FormFieldLabelProps;
+        input?: FormFieldInputProps;
+        caption?: FormFieldCaptionProps;
+        group?: FormFieldControlGroupProps;
+        errorMessage?: FormFieldErrorProps;
     };
 } & InputNumberDeprecatedProps, Omit<NumberFieldProps, 'description' | 'children' | 'inputElementType' | 'validationState'>>;
 export type InputNumberRef = ComponentRef<'input'>;

package/dist/components/InputNumber/types.js

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

package/dist/components/List/components/ListSection/ListSection.js

@@ -2,8 +2,8 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { useListBoxSection } from "@koobiq/react-primitives";
 import { utilClasses } from "../../../../styles/utility.js";
-import { ListOption } from "../ListOption/ListOption.js";
 import { Typography } from "../../../Typography/Typography.js";
+import { ListOption } from "../ListOption/ListOption.js";
 const { listHeading } = utilClasses;
 function ListSection({ section, state }) {
   const { itemProps, headingProps, groupProps } = useListBoxSection({

package/dist/components/RadioGroup/RadioGroup.js

@@ -6,12 +6,9 @@ import { mergeProps } from "@koobiq/react-core";
 import { RadioGroup as RadioGroup$1 } from "@koobiq/react-primitives";
 import s from "./RadioGroup.module.css.js";
 import { RadioGroupContext } from "./RadioContext.js";
+import { useForm } from "../Form/FormContext.js";
 import { flex } from "../layout/flex/flex.js";
-import { FormControl } from "../FormControl/FormControl.js";
-import { FormControlLabel } from "../FormControlLabel/FormControlLabel.js";
-import { Field } from "../FieldComponents/Field/Field.js";
-import { FieldCaption } from "../FieldComponents/FieldCaption/FieldCaption.js";
-import { FieldError } from "../FieldComponents/FieldError/FieldError.js";
+import { FormField } from "../FormField/FormField.js";
 const RadioGroup = forwardRef(
   (props, ref) => {
     const {
@@ -38,10 +35,11 @@ const RadioGroup = forwardRef(
       readonly,
       required
     } = props;
+    const { isDisabled: formIsDisabled, isReadOnly: formIsReadOnly } = useForm();
     const caption = captionProp ?? description;
-    const isDisabled = isDisabledProp ?? disabled;
+    const isDisabled = isDisabledProp ?? disabled ?? formIsDisabled;
     const isInvalid = isInvalidProp ?? error;
-    const isReadOnly = isReadOnlyProp ?? readonly;
+    const isReadOnly = isReadOnlyProp ?? readonly ?? formIsReadOnly;
     const isRequired = isRequiredProp ?? required;
     if (process.env.NODE_ENV !== "production" && "description" in props) {
       deprecate(
@@ -96,7 +94,7 @@ const RadioGroup = forwardRef(
       },
       slotProps?.radioGroup
     );
-    return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(FormControl, { as: RadioGroup$1, ...rootProps, children: ({ isRequired: isRequired2 }) => {
+    return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(FormField, { as: RadioGroup$1, ...rootProps, children: ({ isRequired: isRequired2 }) => {
       const labelProps = mergeProps(
         {
           as: "span",
@@ -107,14 +105,17 @@ const RadioGroup = forwardRef(
         },
         slotProps?.label
       );
-      const errorProps = mergeProps({ children: errorMessage }, slotProps?.errorMessage);
+      const errorProps = mergeProps(
+        { children: errorMessage },
+        slotProps?.errorMessage
+      );
       const captionProps = mergeProps({ children: caption }, slotProps?.caption);
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(FormControlLabel, { ...labelProps }),
-        /* @__PURE__ */ jsxs(Field, { children: [
+        /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
+        /* @__PURE__ */ jsxs("div", { className: s.body, children: [
           /* @__PURE__ */ jsx("div", { ...radioGroupProps, children }),
-          /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
-          /* @__PURE__ */ jsx(FieldError, { ...errorProps })
+          /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps }),
+          /* @__PURE__ */ jsx(FormField.Error, { ...errorProps })
         ] })
       ] });
     } }) });

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

@@ -1,8 +1,11 @@
 const label = "kbq-radiogroup-label-750809";
+const body = "kbq-radiogroup-body-4c887c";
 const s = {
-  label
+  label,
+  body
 };
 export {
+  body,
   s as default,
   label
 };

package/dist/components/RadioGroup/components/Radio/Radio.d.ts

@@ -1,5 +1,5 @@
 import { type RadioProps as RadioPropsPrimitive } from '@koobiq/react-primitives';
-export declare const Radio: import("react").ForwardRefExoticComponent<Omit<RadioPropsPrimitive, "children" | "style" | "className" | "disabled" | "size" | "labelPlacement" | "slotProps" | "data-testid"> & {
+export declare const Radio: import("react").ForwardRefExoticComponent<Omit<RadioPropsPrimitive, "children" | "style" | "className" | "disabled" | "size" | "data-testid" | "slotProps" | "labelPlacement"> & {
     children?: import("react").ReactNode;
     size?: import("./types").RadioPropSize;
     labelPlacement?: import("./types").RadioPropLabelPlacement;

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

@@ -1,17 +1,15 @@
 import type { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
 import type { ExtendableComponentPropsWithRef, ExtendableProps } from '@koobiq/react-core';
 import type { RadioGroup as RadioGroupPrimitive, RadioGroupProps as RadioGroupPrimitiveProps } from '@koobiq/react-primitives';
-import type { FieldCaptionProps, FieldErrorProps } from '../FieldComponents';
-import { type FormControlPropLabelAlign, type FormControlPropLabelPlacement, type FormControlProps } from '../FormControl';
-import type { FormControlLabelProps } from '../FormControlLabel';
+import type { FormFieldProps, FormFieldLabelProps, FormFieldErrorProps, FormFieldCaptionProps, FormFieldPropLabelAlign, FormFieldPropLabelPlacement } from '../FormField';
 export declare const radioGroupPropSize: readonly ["normal", "big"];
 export type RadioGroupPropSize = (typeof radioGroupPropSize)[number];
 export declare const radioGroupPropOrientation: readonly ["horizontal", "vertical"];
 export type RadioGroupPropOrientation = (typeof radioGroupPropOrientation)[number];
 export declare const radioGroupPropLabelPlacement: readonly ["top", "side"];
-export type RadioGroupPropLabelPlacement = FormControlPropLabelPlacement;
+export type RadioGroupPropLabelPlacement = FormFieldPropLabelPlacement;
 export declare const radioGroupPropLabelAlign: readonly ["start", "end"];
-export type RadioGroupPropLabelAlign = FormControlPropLabelAlign;
+export type RadioGroupPropLabelAlign = FormFieldPropLabelAlign;
 type RadioGroupDeprecatedProps = {
     /**
      * If `true`, the component is disabled.
@@ -81,10 +79,10 @@ export type RadioGroupBaseProps = ExtendableProps<{
     labelAlign?: RadioGroupPropLabelAlign;
     /** The props used for each slot inside. */
     slotProps?: {
-        root?: FormControlProps<typeof RadioGroupPrimitive>;
-        caption?: FieldCaptionProps;
-        errorMessage?: FieldErrorProps;
-        label?: FormControlLabelProps<'span'>;
+        root?: FormFieldProps<typeof RadioGroupPrimitive>;
+        caption?: FormFieldCaptionProps;
+        errorMessage?: FormFieldErrorProps;
+        label?: FormFieldLabelProps<'span'>;
         radioGroup?: ComponentPropsWithRef<'div'>;
     };
 } & RadioGroupDeprecatedProps, Omit<RadioGroupPrimitiveProps, 'validationState'>>;