@koobiq/react-components 0.11.1 → 0.12.0

package/dist/components/Button/Button.js

@@ -62,7 +62,7 @@ const Button = polymorphicForwardRef(
         "data-variant": variant,
         "data-loading": isLoading || void 0,
         "data-fullwidth": fullWidth || void 0,
-        "data-onlyicon": iconOnly || void 0,
+        "data-onlyicon": !!iconOnly || void 0,
         ...other,
         ref,
         children: [

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" | "labelPlacement" | "slotProps" | "data-testid" | keyof {
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Omit<CheckboxPropsPrimitive, "validationState" | "inputRef">, "children" | "style" | "className" | "size" | "data-testid" | "slotProps" | "labelPlacement" | keyof {
     disabled?: boolean;
     error?: boolean;
     checked?: boolean;

package/dist/components/Container/Container.js

@@ -11,7 +11,8 @@ const Container = polymorphicForwardRef(
     const {
       as: Tag = "div",
       margins: marginsProp = 0,
-      position: positionProp = "center",
+      position: positionProp,
+      placement: placementProp,
       fixed,
       isFixed: isFixedProp,
       children,
@@ -26,14 +27,22 @@ const Container = polymorphicForwardRef(
         'Container: the "fixed" prop is deprecated. Use "isFixed" prop to replace it.'
       );
     }
+    if (process.env.NODE_ENV !== "production" && "position" in props) {
+      deprecate(
+        'Container: the "position" prop is deprecated. Use "placement" prop to replace it.'
+      );
+    }
     const breakpoints = useMatchedBreakpoints();
     const maxInlineSize = getResponsiveValue(maxInlineSizeProp, breakpoints);
-    const position = getResponsiveValue(positionProp, breakpoints);
+    const placement = getResponsiveValue(
+      placementProp ?? positionProp ?? "center",
+      breakpoints
+    );
     const margins = getResponsiveValue(marginsProp, breakpoints);
     const style = {
       ...styleProp,
       "--container-max-inline-size": isFixed ? void 0 : normalizeMaxInlineSize(maxInlineSize),
-      "--container-position": normalizePosition(position),
+      "--container-placement": normalizePosition(placement),
       "--container-margins": normalizeMargins(margins)
     };
     return /* @__PURE__ */ jsx(
@@ -41,7 +50,7 @@ const Container = polymorphicForwardRef(
       {
         "data-fixed": isFixed || void 0,
         "data-margins": margins,
-        "data-position": position,
+        "data-placement": placement,
         className: clsx(s.base, className),
         style,
         ...other,

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

@@ -3,8 +3,16 @@ import type { ResponsiveValue } from '../../utils';
 export declare const containerMarginsProp: readonly [0, "3xs", "xxs", "xs", "s", "m", "l", "xl", "xxl", "3xl", "4xl", "5xl", "6xl", "7xl"];
 export type ContainerMarginsProp = (typeof containerMarginsProp)[number];
 export type ContainerMaxInlineSizeProp = CSSProperties['maxInlineSize'];
+export declare const containerPlacementProp: readonly ["start", "center", "end"];
+export type ContainerPlacementProp = (typeof containerPlacementProp)[number];
+/**
+ * @deprecated
+ */
 export declare const containerPositionProp: readonly ["start", "center", "end"];
-export type ContainerPositionProp = (typeof containerPositionProp)[number];
+/**
+ * @deprecated
+ */
+export type ContainerPositionProp = ContainerPlacementProp;
 type ContainerDeprecatedProps = {
     /**
      * If `true`, doesn't set the max-inline-size of the container.
@@ -12,13 +20,20 @@ type ContainerDeprecatedProps = {
      * The "fixed" prop is deprecated. Use "isFixed" prop to replace it.
      */
     fixed?: boolean;
-};
-export type ContainerBaseProps = {
     /**
      * Container position.
      * @default 'center'
+     * @deprecated
+     * The "position" prop is deprecated. Use "placement" prop to replace it.
      */
     position?: ContainerPositionProp | ResponsiveValue<ContainerPositionProp>;
+};
+export type ContainerBaseProps = {
+    /**
+     * Container placement.
+     * @default 'center'
+     */
+    placement?: ContainerPlacementProp | ResponsiveValue<ContainerPlacementProp>;
     /** Determine the max-inline-size of the container. */
     maxInlineSize?: ContainerMaxInlineSizeProp | ResponsiveValue<ContainerMaxInlineSizeProp>;
     /**

package/dist/components/Container/types.js

@@ -14,8 +14,10 @@ const containerMarginsProp = [
   "6xl",
   "7xl"
 ];
-const containerPositionProp = ["start", "center", "end"];
+const containerPlacementProp = ["start", "center", "end"];
+const containerPositionProp = containerPlacementProp;
 export {
   containerMarginsProp,
+  containerPlacementProp,
   containerPositionProp
 };

package/dist/components/DateInput/DateInput.js

@@ -5,14 +5,9 @@ import { createCalendar } from "@internationalized/date";
 import { useLocale, useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
 import { useDateFieldState, removeDataAttributes, useSlottedContext, FormContext, useDateField, FieldErrorContext } from "@koobiq/react-primitives";
 import s from "./DateInput.module.css.js";
-import { FieldInputDate } from "../FieldComponents/FieldInputDate/FieldInputDate.js";
 import { DateSegment } from "../DateSegment/DateSegment.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 { useForm } from "../Form/FormContext.js";
+import { FormField } from "../FormField/FormField.js";
 function DateInputRender(props, ref) {
   const { locale } = useLocale();
   const {
@@ -29,11 +24,16 @@ function DateInputRender(props, ref) {
     className,
     style,
     fullWidth,
-    isReadOnly,
+    isRequired,
+    isDisabled: isDisabledProp,
+    isReadOnly: isReadOnlyProp,
     "data-testid": testId
   } = props;
+  const { isDisabled: formIsDisabled, isReadOnly: formIsReadOnly } = useForm();
+  const isDisabled = isDisabledProp ?? formIsDisabled;
+  const isReadOnly = isReadOnlyProp ?? formIsReadOnly;
   const state = useDateFieldState({
-    ...removeDataAttributes(props),
+    ...removeDataAttributes({ ...props, isDisabled, isReadOnly }),
     locale,
     createCalendar
   });
@@ -48,11 +48,13 @@ function DateInputRender(props, ref) {
     inputProps,
     ...validation
   } = useDateField(
-    { ...removeDataAttributes(props), validationBehavior },
+    {
+      ...removeDataAttributes({ ...props, isDisabled, isReadOnly }),
+      validationBehavior
+    },
     state,
     domRef
   );
-  const { isRequired, isDisabled } = state;
   const { isInvalid } = validation;
   const rootProps = mergeProps(
     {
@@ -81,37 +83,39 @@ function DateInputRender(props, ref) {
       isInvalid,
       isDisabled,
       startAddon,
-      variant
+      variant,
+      onMouseDown: (e) => {
+        if (e.currentTarget !== e.target) return;
+        e.preventDefault();
+        labelPropReactAria?.onClick?.(e);
+      }
     },
     slotProps?.group
   );
-  const captionProps = mergeProps({ children: caption }, slotProps?.caption, descriptionProps);
+  const captionProps = mergeProps(
+    { children: caption },
+    descriptionProps,
+    slotProps?.caption
+  );
   const errorProps = mergeProps(
-    {
-      children: errorMessage
-    },
-    slotProps?.errorMessage,
-    errorMessageProps
+    { children: errorMessage },
+    errorMessageProps,
+    slotProps?.errorMessage
   );
   const controlProps = mergeProps(
-    {
-      variant,
-      isInvalid,
-      isDisabled,
-      ref: domRef
-    },
-    slotProps?.inputDate,
-    fieldProps
+    { ref: domRef },
+    fieldProps,
+    slotProps?.inputDate
   );
-  return /* @__PURE__ */ jsxs(FormControl, { ...rootProps, children: [
-    /* @__PURE__ */ jsx(FormControlLabel, { ...labelProps }),
-    /* @__PURE__ */ jsxs(Field, { children: [
-      /* @__PURE__ */ jsx(FieldContentGroup, { ...groupProps, children: /* @__PURE__ */ jsxs(FieldInputDate, { ...controlProps, children: [
+  return /* @__PURE__ */ jsxs(FormField, { ...rootProps, children: [
+    /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
+    /* @__PURE__ */ jsxs("div", { className: s.body, children: [
+      /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsxs(FormField.InputDate, { ...controlProps, children: [
         state.segments.map((segment, i) => /* @__PURE__ */ jsx(DateSegment, { segment, state }, i)),
         /* @__PURE__ */ jsx("input", { ...inputProps })
       ] }) }),
-      /* @__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 }) })
     ] })
   ] });
 }

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

@@ -1,8 +1,11 @@
 const base = "kbq-dateinput-a4c39b";
+const body = "kbq-dateinput-body-64bfc5";
 const s = {
-  base
+  base,
+  body
 };
 export {
   base,
+  body,
   s as default
 };

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

@@ -1,14 +1,12 @@
 import type { ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
 import type { AriaDateFieldProps, DateValue } from '@koobiq/react-primitives';
-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';
+import type { FormFieldProps, FormFieldLabelProps, FormFieldErrorProps, FormFieldCaptionProps, FormFieldPropLabelAlign, FormFieldInputDateProps, FormFieldControlGroupProps, FormFieldPropLabelPlacement, FormFieldControlGroupPropVariant } from '../FormField';
 export declare const dateInputPropVariant: readonly ["filled", "transparent"];
-export type DateInputPropVariant = FieldContentGroupPropVariant;
+export type DateInputPropVariant = FormFieldControlGroupPropVariant;
 export declare const dateInputPropLabelPlacement: readonly ["top", "side"];
-export type DateInputPropLabelPlacement = FormControlPropLabelPlacement;
+export type DateInputPropLabelPlacement = FormFieldPropLabelPlacement;
 export declare const dateInputPropLabelAlign: readonly ["start", "end"];
-export type DateInputPropLabelAlign = FormControlPropLabelAlign;
+export type DateInputPropLabelAlign = FormFieldPropLabelAlign;
 export type DateInputProps<T extends DateValue> = {
     /** Inline styles. */
     style?: CSSProperties;
@@ -29,12 +27,12 @@ export type DateInputProps<T extends DateValue> = {
     fullWidth?: boolean;
     /** The props used for each slot inside. */
     slotProps?: {
-        root?: FormControlProps;
-        label?: FormControlLabelProps;
-        group?: FieldContentGroupProps;
-        caption?: FieldCaptionProps;
-        inputDate?: FieldInputDateProps;
-        errorMessage?: FieldErrorProps;
+        root?: FormFieldProps;
+        label?: FormFieldLabelProps;
+        group?: FormFieldControlGroupProps;
+        caption?: FormFieldCaptionProps;
+        inputDate?: FormFieldInputDateProps;
+        errorMessage?: FormFieldErrorProps;
     };
     /** Ref to the control */
     ref?: Ref<HTMLDivElement>;

package/dist/components/DateInput/types.js

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

package/dist/components/DatePicker/DatePicker.js

@@ -8,6 +8,7 @@ import { PopoverInner } from "../Popover/PopoverInner.js";
 import s from "./DatePicker.module.css.js";
 import { DateInput } from "../DateInput/DateInput.js";
 import { Calendar } from "../Calendar/Calendar.js";
+import { useForm } from "../Form/FormContext.js";
 import { IconButton } from "../IconButton/IconButton.js";
 function DatePickerRender(props, ref) {
   const anchorRef = useRef(null);
@@ -20,13 +21,23 @@ function DatePickerRender(props, ref) {
     fullWidth,
     errorMessage,
     labelPlacement,
+    isDisabled: isDisabledProp,
+    isReadOnly: isReadOnlyProp,
     labelAlign,
     startAddon,
     endAddon,
     "data-testid": testId
   } = props;
+  const { isDisabled: formIsDisabled, isReadOnly: formIsReadOnly } = useForm();
+  const isDisabled = isDisabledProp ?? formIsDisabled;
+  const isReadOnly = isReadOnlyProp ?? formIsReadOnly;
   const state = useDatePickerState(
-    removeDataAttributes({ ...props, description: caption })
+    removeDataAttributes({
+      ...props,
+      isDisabled,
+      isReadOnly,
+      description: caption
+    })
   );
   const {
     isInvalid,
@@ -37,7 +48,12 @@ function DatePickerRender(props, ref) {
     dialogProps,
     calendarProps: calendarPropsAria
   } = useDatePicker(
-    removeDataAttributes({ ...props, description: caption }),
+    removeDataAttributes({
+      ...props,
+      isDisabled,
+      isReadOnly,
+      description: caption
+    }),
     state,
     anchorRef
   );

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

@@ -2,7 +2,7 @@ import type { CSSProperties, ReactElement, ReactNode, Ref } from 'react';
 import type { AriaDatePickerProps, DateValue } from '@koobiq/react-primitives';
 import type { CalendarProps } from '../Calendar';
 import type { DateInputPropLabelAlign, DateInputPropLabelPlacement, DateInputProps, DateInputRef } from '../DateInput';
-import type { FormControlLabelProps } from '../FormControlLabel';
+import type { FormFieldLabelProps } from '../FormField';
 import type { PopoverProps } from '../Popover';
 export type DatePickerProps<T extends DateValue> = {
     /**
@@ -36,7 +36,7 @@ export type DatePickerProps<T extends DateValue> = {
     /** The props used for each slot inside. */
     slotProps?: {
         root?: DateInputProps<T>;
-        label?: FormControlLabelProps;
+        label?: FormFieldLabelProps;
         popover?: PopoverProps;
         calendar?: CalendarProps<T>;
     };

package/dist/components/Dialog/Dialog.js

@@ -38,8 +38,8 @@ const DialogComponent = forwardRef(
     };
     const { ref: bodyRef, height } = useElementSize();
     useEffect(() => {
-      if (bodyRef.current) updateOverflow(bodyRef.current);
-    }, [bodyRef.current, height]);
+      updateOverflow(bodyRef.current);
+    }, [height]);
     useEventListener({
       element: bodyRef,
       eventName: "scroll",

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" | "variant" | "fullWidth" | "isDisabled" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "onFocusChange" | "preventFocusOnPress" | "excludeFromTabOrder" | keyof import("@react-types/shared").HoverEvents | "isLoading" | "onlyIcon" | "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" | "data-testid" | "isDisabled" | "variant" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "onFocusChange" | "preventFocusOnPress" | "excludeFromTabOrder" | keyof import("@react-types/shared").HoverEvents | "isLoading" | "fullWidth" | "onlyIcon" | "startIcon" | "endIcon" | keyof {
     progress?: boolean;
     disabled?: boolean;
-}> & Omit<Omit<import("@koobiq/react-primitives").ButtonBaseProps, "slot">, "children" | "style" | "className" | "variant" | "fullWidth" | "onlyIcon" | "startIcon" | "endIcon" | "data-testid" | keyof {
+}> & Omit<Omit<import("@koobiq/react-primitives").ButtonBaseProps, "slot">, "children" | "style" | "className" | "data-testid" | "variant" | "fullWidth" | "onlyIcon" | "startIcon" | "endIcon" | keyof {
     progress?: boolean;
     disabled?: boolean;
 }> & {

package/dist/components/Form/Form.d.ts

@@ -1,19 +1,15 @@
-export declare const FormComponent: import("react").ForwardRefExoticComponent<{
-    labelPlacement?: import("..").FormControlPropLabelPlacement | import("../../utils").ResponsiveValue<import("..").FormControlPropLabelPlacement>;
-    labelAlign?: import("..").FormControlPropLabelAlign | import("../../utils").ResponsiveValue<import("..").FormControlPropLabelAlign>;
+import { FormGroup, FormCaption, FormActions } from './components';
+declare const FormComponent: import("react").ForwardRefExoticComponent<{
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    labelPlacement?: import("..").FormFieldPropLabelPlacement | import("../../utils").ResponsiveValue<import("..").FormFieldPropLabelPlacement>;
+    labelAlign?: import("..").FormFieldPropLabelAlign | import("../../utils").ResponsiveValue<import("..").FormFieldPropLabelAlign>;
     labelInlineSize?: import("./types").FormPropLabelInlineSize | import("../../utils").ResponsiveValue<import("./types").FormPropLabelInlineSize>;
 } & import("@koobiq/react-primitives").FormProps & import("react").RefAttributes<HTMLFormElement>>;
-export declare const Fieldset: import("@koobiq/react-core").PolyForwardComponent<"div", {
-    className?: string;
-}, import("react").ElementType>;
-export declare const Legend: import("@koobiq/react-core").PolyForwardComponent<"p", Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-    ref?: ((instance: HTMLParagraphElement | 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<HTMLParagraphElement> | null | undefined;
-}, "as" | keyof import("..").TypographyBaseProps> & import("..").TypographyBaseProps & {
-    as?: "p" | undefined;
-}, import("react").ElementType>;
 type CompoundedComponent = typeof FormComponent & {
-    Fieldset: typeof Fieldset;
-    Legend: typeof Legend;
+    Group: typeof FormGroup;
+    Caption: typeof FormCaption;
+    Actions: typeof FormActions;
 };
 export declare const Form: CompoundedComponent;
 export {};

package/dist/components/Form/Form.js

@@ -1,11 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
+import { clsx } from "@koobiq/react-core";
 import { Form as Form$1 } from "@koobiq/react-primitives";
 import s from "./Form.module.css.js";
 import { FormContext } from "./FormContext.js";
 import { templatePresets } from "./utils.js";
-import { Typography } from "../Typography/Typography.js";
+import { FormGroup } from "./components/FormGroup/FormGroup.js";
+import { FormCaption } from "./components/FormCaption/FormCaption.js";
+import { FormActions } from "./components/FormActions/FormActions.js";
 import { useMatchedBreakpoints } from "../Provider/BreakpointsContext.js";
 import { getResponsiveValue } from "../../utils/getResponsiveValue/getResponsiveValue.js";
 const FormComponent = forwardRef((props, ref) => {
@@ -13,6 +15,8 @@ const FormComponent = forwardRef((props, ref) => {
     labelPlacement: labelPlacementProp,
     labelAlign: labelAlignProp,
     labelInlineSize: labelInlineSizeProp,
+    isReadOnly,
+    isDisabled,
     className,
     style,
     ...other
@@ -23,41 +27,34 @@ const FormComponent = forwardRef((props, ref) => {
   const labelInlineSize = getResponsiveValue(labelInlineSizeProp, breakpoints);
   const orientation = labelPlacement === "side" ? "horizontal" : "vertical";
   const formStyle = labelInlineSize ? {
-    "--template-columns": templatePresets[labelInlineSize]
+    "--label-inline-size": templatePresets[labelInlineSize]
   } : void 0;
-  return /* @__PURE__ */ jsx(FormContext.Provider, { value: { labelPlacement, labelAlign }, children: /* @__PURE__ */ jsx(
-    Form$1,
+  return /* @__PURE__ */ jsx(
+    FormContext.Provider,
     {
-      "data-orientation": orientation,
-      className: clsx(s.base, s[orientation], className),
-      style: { ...style, ...formStyle },
-      ...other,
-      ref
+      value: { labelPlacement, labelAlign, isDisabled, isReadOnly },
+      children: /* @__PURE__ */ jsx(
+        Form$1,
+        {
+          "data-label-align": labelAlign,
+          "data-orientation": orientation,
+          "data-label-placement": labelPlacement,
+          "data-readonly": isReadOnly || void 0,
+          "data-disabled": isDisabled || void 0,
+          className: clsx(s.base, s[orientation], className),
+          style: { ...style, ...formStyle },
+          ...other,
+          ref
+        }
+      )
     }
-  ) });
+  );
 });
-const Fieldset = polymorphicForwardRef(
-  ({ className, as: Tag = "fieldset", ...other }, ref) => /* @__PURE__ */ jsx(Tag, { className: clsx(s.fieldset, className), ...other, ref })
-);
-const Legend = polymorphicForwardRef(
-  ({ className, as = "p", ...other }, ref) => /* @__PURE__ */ jsx(
-    Typography,
-    {
-      as,
-      variant: "text-big",
-      className: clsx(s.legend, className),
-      ...other,
-      ref
-    }
-  )
-);
 FormComponent.displayName = "Form";
 const Form = FormComponent;
-Form.Fieldset = Fieldset;
-Form.Legend = Legend;
+Form.Group = FormGroup;
+Form.Caption = FormCaption;
+Form.Actions = FormActions;
 export {
-  Fieldset,
-  Form,
-  FormComponent,
-  Legend
+  Form
 };

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

@@ -1,17 +1,29 @@
 const base = "kbq-form-40d37e";
-const fieldset = "kbq-form-fieldset-b2924b";
-const legend = "kbq-form-legend-91e738";
+const group = "kbq-form-group-4158f5";
+const caption = "kbq-form-caption-052541";
+const top = "kbq-form-top-605582";
+const bottom = "kbq-form-bottom-c13772";
+const vertical = "kbq-form-vertical-2f3a00";
 const horizontal = "kbq-form-horizontal-52dea8";
+const actions = "kbq-form-actions-22aca9";
 const s = {
   base,
-  fieldset,
-  legend,
-  horizontal
+  group,
+  caption,
+  top,
+  bottom,
+  vertical,
+  horizontal,
+  actions
 };
 export {
+  actions,
   base,
+  bottom,
+  caption,
   s as default,
-  fieldset,
+  group,
   horizontal,
-  legend
+  top,
+  vertical
 };

package/dist/components/Form/FormContext.d.ts

@@ -1,7 +1,9 @@
-import type { FormControlPropLabelAlign, FormControlPropLabelPlacement } from '../FormControl';
+import type { FormFieldPropLabelAlign, FormFieldPropLabelPlacement } from '../FormField';
 export type FormContextProps = {
-    labelPlacement?: FormControlPropLabelPlacement;
-    labelAlign?: FormControlPropLabelAlign;
+    labelPlacement?: FormFieldPropLabelPlacement;
+    labelAlign?: FormFieldPropLabelAlign;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
 };
 export declare const FormContext: import("react").Context<FormContextProps>;
 export declare const useForm: () => FormContextProps;

package/dist/components/Form/components/FormActions/FormActions.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithRef, ElementType } from 'react';
+export type FormActionsBaseProps = {
+    /** Additional CSS-classes. */
+    className?: string;
+};
+export declare const FormActions: import("@koobiq/react-core").PolyForwardComponent<"div", FormActionsBaseProps, ElementType>;
+export type FormActionsProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof FormActions<As>>;

package/dist/components/Form/components/FormActions/FormActions.js

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

package/dist/components/Form/components/FormActions/index.d.ts

@@ -0,0 +1 @@
+export * from './FormActions';

package/dist/components/Form/components/FormCaption/FormCaption.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentPropsWithRef, ElementType } from 'react';
+export declare const formCaptionPropSide: readonly ["top", "bottom"];
+export type FormCaptionPropSide = (typeof formCaptionPropSide)[number];
+export type FormCaptionBaseProps = {
+    /** Additional CSS-classes. */
+    className?: string;
+    /**
+     * Placement of the caption relative to the form.
+     * - `top` — renders the caption above the form.
+     * - `bottom` — renders the caption below the form.
+     * @default 'top'
+     */
+    side?: FormCaptionPropSide;
+};
+export declare const FormCaption: import("@koobiq/react-core").PolyForwardComponent<"div", FormCaptionBaseProps, ElementType>;
+export type FormCationProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof FormCaption<As>>;

package/dist/components/Form/components/FormCaption/FormCaption.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
+import s from "../../Form.module.css.js";
+const FormCaption = polymorphicForwardRef(
+  ({ className, as: Tag = "div", side = "top", ...other }, ref) => /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: clsx(s.caption, s[side], className),
+      "data-side": side,
+      ...other,
+      ref
+    }
+  )
+);
+export {
+  FormCaption
+};

package/dist/components/Form/components/FormCaption/index.d.ts

@@ -0,0 +1 @@
+export * from './FormCaption';

package/dist/components/Form/components/FormGroup/FormGroup.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithRef, ElementType } from 'react';
+export type FormGroupBaseProps = {
+    /** Additional CSS-classes. */
+    className?: string;
+};
+export declare const FormGroup: import("@koobiq/react-core").PolyForwardComponent<"div", FormGroupBaseProps, ElementType>;
+export type FormGroupProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof FormGroup<As>>;