@koobiq/react-components 0.7.0 → 0.8.0

package/dist/components/InputNumber/InputNumber.js

@@ -5,8 +5,9 @@ import { deprecate } from "@koobiq/logger";
 import { useDOMRef, mergeProps } from "@koobiq/react-core";
 import { NumberField } from "@koobiq/react-primitives";
 import { InputNumberCounterControls } from "./components/InputNumberCounterControls.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 { FieldInput } from "../FieldComponents/FieldInput/FieldInput.js";
 import { FieldCaption } from "../FieldComponents/FieldCaption/FieldCaption.js";
@@ -27,6 +28,8 @@ const InputNumber = forwardRef(
       readonly,
       isReadOnly: isReadOnlyProp,
       label,
+      labelAlign,
+      labelPlacement,
       startAddon,
       endAddon,
       errorMessage,
@@ -68,6 +71,8 @@ const InputNumber = forwardRef(
     const rootProps = mergeProps(
       {
         label,
+        labelAlign,
+        labelPlacement,
         fullWidth,
         isDisabled,
         isRequired,
@@ -75,12 +80,11 @@ const InputNumber = forwardRef(
         isInvalid,
         errorMessage,
         "data-variant": variant,
-        "data-fullwidth": fullWidth,
         ...other
       },
       slotProps?.root
     );
-    return /* @__PURE__ */ jsx(FieldControl, { as: NumberField, ...rootProps, children: ({ isInvalid: isInvalid2, isRequired: isRequired2, isDisabled: isDisabled2 }) => {
+    return /* @__PURE__ */ jsx(FormControl, { as: NumberField, ...rootProps, children: ({ isInvalid: isInvalid2, isRequired: isRequired2, isDisabled: isDisabled2 }) => {
       const labelProps = mergeProps(
         { isHidden: isLabelHidden, children: label, isRequired: isRequired2 },
         slotProps?.label
@@ -110,10 +114,12 @@ const InputNumber = forwardRef(
         slotProps?.group
       );
       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/InputNumber/types.d.ts

@@ -1,9 +1,15 @@
 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 FieldControlProps, type FieldErrorProps, type FieldContentGroupProps, type FieldInputProps, type FieldLabelProps, type FieldContentGroupPropVariant } from '../FieldComponents';
+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';
 export declare const inputNumberPropVariant: readonly ["filled", "transparent"];
 export type InputNumberPropVariant = FieldContentGroupPropVariant;
+export declare const inputNumberPropLabelPlacement: readonly ["top", "side"];
+export type InputNumberPropLabelPlacement = FormControlPropLabelPlacement;
+export declare const inputNumberPropLabelAlign: readonly ["start", "end"];
+export type InputNumberPropLabelAlign = FormControlPropLabelAlign;
 type InputNumberDeprecatedProps = {
     /**
      * If `true`, the component is disabled.
@@ -65,6 +71,16 @@ export type InputNumberProps = ExtendableProps<{
      * @default false
      */
     isLabelHidden?: boolean;
+    /**
+     * The label's overall position relative to the element it is labeling.
+     * @default 'top'
+     */
+    labelPlacement?: InputNumberPropLabelPlacement;
+    /**
+     * The label's horizontal alignment relative to the element it is labeling.
+     * @default 'start'
+     */
+    labelAlign?: InputNumberPropLabelAlign;
     /** The helper text content. */
     caption?: ReactNode;
     /** Inline styles. */
@@ -73,8 +89,8 @@ export type InputNumberProps = ExtendableProps<{
     'data-testid'?: string | number;
     /** The props used for each slot inside. */
     slotProps?: {
-        root?: FieldControlProps<typeof NumberField>;
-        label?: FieldLabelProps;
+        root?: FormControlProps<typeof NumberField>;
+        label?: FormControlLabelProps;
         input?: FieldInputProps;
         caption?: FieldCaptionProps;
         group?: FieldContentGroupProps;

package/dist/components/InputNumber/types.js

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

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 s from "./ListSection.module.css.js";
-import { ListOption } from "../ListOption/ListOption.js";
 import { Typography } from "../../../Typography/Typography.js";
+import { ListOption } from "../ListOption/ListOption.js";
 function ListSection({ section, state }) {
   const { itemProps, headingProps, groupProps } = useListBoxSection({
     heading: section.rendered,

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,13 +1,17 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { deprecate } from "@koobiq/logger";
-import { mergeProps, clsx } from "@koobiq/react-core";
+import { mergeProps } from "@koobiq/react-core";
 import { RadioGroup as RadioGroup$1 } from "@koobiq/react-primitives";
-import { RadioGroupLabel } from "./components/RadioGroupLabel/RadioGroupLabel.js";
+import s from "./RadioGroup.module.css.js";
 import { RadioGroupContext } from "./RadioContext.js";
-import { RadioGroupDescription } from "./components/RadioGroupDescription/RadioGroupDescription.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";
 const RadioGroup = forwardRef(
   (props, ref) => {
     const {
@@ -15,21 +19,35 @@ const RadioGroup = forwardRef(
       label,
       children,
       slotProps,
+      style,
+      className,
       description,
+      caption: captionProp,
       orientation,
       isInvalid: isInvalidProp,
       isDisabled: isDisabledProp,
       isRequired: isRequiredProp,
       isReadOnly: isReadOnlyProp,
+      "data-testid": testId,
+      errorMessage,
+      labelAlign,
+      labelPlacement,
+      isLabelHidden,
       disabled,
       error,
       readonly,
       required
     } = props;
+    const caption = captionProp ?? description;
     const isDisabled = isDisabledProp ?? disabled ?? false;
     const isInvalid = isInvalidProp ?? error ?? false;
     const isReadOnly = isReadOnlyProp ?? readonly ?? false;
     const isRequired = isRequiredProp ?? required ?? false;
+    if (process.env.NODE_ENV !== "production" && "description" in props) {
+      deprecate(
+        'RadioGroup: the "description" prop is deprecated. Use "caption" prop to replace it.'
+      );
+    }
     if (process.env.NODE_ENV !== "production" && "disabled" in props) {
       deprecate(
         'RadioGroup: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
@@ -50,24 +68,59 @@ const RadioGroup = forwardRef(
         'RadioGroup: the "required" prop is deprecated. Use "isRequired" prop to replace it.'
       );
     }
-    const commonRootProps = mergeProps(
-      { ...props, isDisabled, isInvalid, isReadOnly, isRequired },
+    const rootProps = mergeProps(
       {
-        className: clsx(
-          flex({
-            direction: orientation === "horizontal" ? "row" : "column",
-            alignItems: orientation === "horizontal" ? "center" : "flex-start",
-            gap: "m"
-          })
-        )
+        style,
+        labelPlacement,
+        className,
+        labelAlign,
+        isDisabled,
+        isInvalid,
+        isReadOnly,
+        isRequired,
+        ...props,
+        ref,
+        "data-size": size,
+        "data-testid": testId,
+        "data-invalid": isInvalid,
+        "data-disabled": isDisabled,
+        "data-required": isRequired,
+        "data-readonly": isReadOnly
       },
       slotProps?.root
     );
-    return /* @__PURE__ */ jsxs(RadioGroup$1, { ...commonRootProps, ref, children: [
-      /* @__PURE__ */ jsx(RadioGroupLabel, { ...slotProps?.label, children: label }),
-      /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { size }, children }),
-      /* @__PURE__ */ jsx(RadioGroupDescription, { ...slotProps?.description, children: description })
-    ] });
+    const radioGroupProps = mergeProps(
+      {
+        className: flex({
+          direction: orientation === "horizontal" ? "row" : "column",
+          alignItems: orientation === "horizontal" ? "center" : "flex-start",
+          gap: "s"
+        })
+      },
+      slotProps?.radioGroup
+    );
+    return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(FormControl, { as: RadioGroup$1, ...rootProps, children: ({ isInvalid: isInvalid2, isRequired: isRequired2 }) => {
+      const labelProps = mergeProps(
+        {
+          as: "span",
+          isRequired: isRequired2,
+          children: label,
+          className: s.label,
+          isHidden: isLabelHidden
+        },
+        slotProps?.label
+      );
+      const errorProps = mergeProps({ isInvalid: isInvalid2, 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("div", { ...radioGroupProps, children }),
+          /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
+          /* @__PURE__ */ jsx(FieldError, { ...errorProps })
+        ] })
+      ] });
+    } }) });
   }
 );
 RadioGroup.displayName = "RadioGroup";

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

@@ -0,0 +1,8 @@
+const label = "kbq-radiogroup-label-750809";
+const s = {
+  label
+};
+export {
+  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" | "slotProps" | "data-testid" | "labelPlacement"> & {
+export declare const Radio: import("react").ForwardRefExoticComponent<Omit<RadioPropsPrimitive, "children" | "style" | "className" | "disabled" | "size" | "labelPlacement" | "slotProps" | "data-testid"> & {
     children?: import("react").ReactNode;
     size?: import("./types").RadioPropSize;
     labelPlacement?: import("./types").RadioPropLabelPlacement;

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

@@ -1,3 +1 @@
 export * from './Radio';
-export * from './RadioGroupLabel';
-export * from './RadioGroupDescription';

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

@@ -1,11 +1,17 @@
 import type { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
 import type { ExtendableComponentPropsWithRef, ExtendableProps } from '@koobiq/react-core';
-import type { RadioGroupProps as RadioGroupPrimitiveProps } from '@koobiq/react-primitives';
-import type { RadioGroupDescriptionProps, RadioGroupLabelProps } from './components';
+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';
 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 declare const radioGroupPropLabelAlign: readonly ["start", "end"];
+export type RadioGroupPropLabelAlign = FormControlPropLabelAlign;
 type RadioGroupDeprecatedProps = {
     /**
      * If `true`, the component is disabled.
@@ -35,10 +41,20 @@ type RadioGroupDeprecatedProps = {
      * The "required" prop is deprecated. Use "isRequired" prop to replace it.
      */
     required?: boolean;
+    /**
+     * The helper text content.
+     * @deprecated
+     * The "description" prop is deprecated. Use "caption" prop to replace it.
+     */
+    description?: ReactNode;
 };
 export type RadioGroupBaseProps = ExtendableProps<{
     /** Additional CSS-classes. */
     className?: string;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** The helper text content. */
+    caption?: ReactNode;
     /** Inline styles. */
     style?: CSSProperties;
     /** The content of the component. */
@@ -53,11 +69,30 @@ export type RadioGroupBaseProps = ExtendableProps<{
      * @default 'vertical'
      */
     orientation?: RadioGroupPropOrientation;
+    /**
+     * If `true`, the label is hidden. Be sure to add aria-label to the input element.
+     * @default false
+     */
+    isLabelHidden?: boolean;
+    /** An error message for the field. */
+    errorMessage?: ReactNode;
+    /**
+     * The label's overall position relative to the element it is labeling.
+     * @default 'top'
+     */
+    labelPlacement?: RadioGroupPropLabelPlacement;
+    /**
+     * The label's horizontal alignment relative to the element it is labeling.
+     * @default 'start'
+     */
+    labelAlign?: RadioGroupPropLabelAlign;
     /** The props used for each slot inside. */
     slotProps?: {
-        root?: ComponentPropsWithRef<'div'>;
-        description?: RadioGroupDescriptionProps;
-        label?: RadioGroupLabelProps;
+        root?: FormControlProps<typeof RadioGroupPrimitive>;
+        caption?: FieldCaptionProps;
+        errorMessage?: FieldErrorProps;
+        label?: FormControlLabelProps<'span'>;
+        radioGroup?: ComponentPropsWithRef<'div'>;
     };
 } & RadioGroupDeprecatedProps, Omit<RadioGroupPrimitiveProps, 'validate' | 'validationBehavior' | 'validationState' | 'errorMessage'>>;
 export type RadioGroupProps = ExtendableComponentPropsWithRef<RadioGroupBaseProps, 'div'>;

package/dist/components/RadioGroup/types.js

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

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

@@ -1,13 +1,17 @@
-import { type FieldCaptionProps, type FieldContentGroupProps, type FieldControlProps, type FieldErrorProps, type FieldInputProps, type FieldLabelProps } from '../FieldComponents';
-export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/searchfield").AriaSearchFieldProps, "validationState" | "description" | "errorMessage">, "caption" | "style" | "className" | "variant" | "slotProps" | "fullWidth" | `data-${string}` | "startAddon" | "endAddon" | "errorMessage" | "isLabelHidden"> & {
+import { type FieldCaptionProps, type FieldContentGroupProps, type FieldErrorProps, type FieldInputProps } 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" | "errorMessage">, "caption" | "style" | "className" | `data-${string}` | "labelPlacement" | "labelAlign" | "fullWidth" | "variant" | "slotProps" | "startAddon" | "endAddon" | "errorMessage" | "isLabelHidden"> & {
     className?: string;
     style?: import("react").CSSProperties;
     isLabelHidden?: boolean;
+    labelPlacement?: import("./types").SearchInputPropLabelPlacement;
+    labelAlign?: import("./types").SearchInputPropLabelAlign;
     startAddon?: import("react").ReactNode;
     endAddon?: import("react").ReactNode;
     slotProps?: {
-        root?: FieldControlProps;
-        label?: FieldLabelProps;
+        root?: FormControlProps;
+        label?: FormControlLabelProps;
         group?: FieldContentGroupProps;
         input?: FieldInputProps;
         caption?: FieldCaptionProps;

package/dist/components/SearchInput/SearchInput.js

@@ -6,8 +6,9 @@ import { IconMagnifyingGlass16, IconXmarkCircle16 } from "@koobiq/react-icons";
 import { useSearchFieldState, removeDataAttributes, useSearchField } from "@koobiq/react-primitives";
 import s from "./SearchInput.module.css.js";
 import { IconButton } from "../IconButton/IconButton.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 { FieldInput } from "../FieldComponents/FieldInput/FieldInput.js";
 import { FieldCaption } from "../FieldComponents/FieldCaption/FieldCaption.js";
@@ -19,6 +20,8 @@ const SearchInput = forwardRef(
       variant = "filled",
       fullWidth = false,
       isLabelHidden = false,
+      labelPlacement,
+      labelAlign,
       "data-testid": testId,
       style,
       className,
@@ -45,12 +48,13 @@ const SearchInput = forwardRef(
     const rootProps = mergeProps(
       {
         style,
+        labelPlacement,
+        labelAlign,
         fullWidth,
         "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)
@@ -105,11 +109,13 @@ const SearchInput = forwardRef(
       slotProps?.errorMessage,
       errorMessagePropsAria
     );
-    return /* @__PURE__ */ jsxs(FieldControl, { ...rootProps, children: [
-      /* @__PURE__ */ jsx(FieldLabel, { ...labelProps, children: label }),
-      /* @__PURE__ */ jsx(FieldContentGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInput, { ...inputProps }) }),
-      /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
-      /* @__PURE__ */ jsx(FieldError, { ...errorProps })
+    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(FieldError, { ...errorProps })
+      ] })
     ] });
   }
 );

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

@@ -1,10 +1,16 @@
 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, FieldErrorProps, FieldInputProps, FieldLabelProps, FieldContentGroupProps, FieldContentGroupPropVariant, FieldControlProps } 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';
 import type { IconButtonProps } from '../IconButton';
 export declare const searchInputPropVariant: readonly ["filled", "transparent"];
 export type SearchInputPropVariant = FieldContentGroupPropVariant;
+export declare const searchInputPropLabelPlacement: readonly ["top", "side"];
+export type SearchInputPropLabelPlacement = FormControlPropLabelPlacement;
+export declare const searchInputPropLabelAlign: readonly ["start", "end"];
+export type SearchInputPropLabelAlign = FormControlPropLabelAlign;
 export type SearchInputProps = ExtendableProps<{
     /** Additional CSS-classes. */
     className?: string;
@@ -15,14 +21,24 @@ export type SearchInputProps = ExtendableProps<{
      * @default false
      */
     isLabelHidden?: boolean;
+    /**
+     * The label's overall position relative to the element it is labeling.
+     * @default 'top'
+     */
+    labelPlacement?: SearchInputPropLabelPlacement;
+    /**
+     * The label's horizontal alignment relative to the element it is labeling.
+     * @default 'start'
+     */
+    labelAlign?: SearchInputPropLabelAlign;
     /** Addon placed before the children. */
     startAddon?: ReactNode;
     /** Addon placed after the children. */
     endAddon?: ReactNode;
     /** The props used for each slot inside. */
     slotProps?: {
-        root?: FieldControlProps;
-        label?: FieldLabelProps;
+        root?: FormControlProps;
+        label?: FormControlLabelProps;
         group?: FieldContentGroupProps;
         input?: FieldInputProps;
         caption?: FieldCaptionProps;

package/dist/components/SearchInput/types.js

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

package/dist/components/Select/Select.js

@@ -11,8 +11,9 @@ import { SelectList } from "./components/SelectList/SelectList.js";
 import { TagGroup } from "./components/TagGroup/TagGroup.js";
 import { List } from "../List/List.js";
 import { IconButton } from "../IconButton/IconButton.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";
@@ -26,6 +27,8 @@ function SelectRender(props, ref) {
     "data-testid": testId,
     selectionMode = "single",
     selectedTagsOverflow = "responsive",
+    labelPlacement,
+    labelAlign,
     isRequired,
     isDisabled,
     caption,
@@ -71,11 +74,13 @@ function SelectRender(props, ref) {
   const { ref: containerRef, width } = useElementSize();
   const rootProps = mergeProps({
     "data-testid": testId,
-    "data-fullwidth": fullWidth,
     "data-invalid": isInvalid,
     "data-disabled": props.isDisabled,
     "data-required": props.isRequired,
-    className: clsx(s.base, fullWidth && s.fullWidth, className),
+    className,
+    fullWidth,
+    labelPlacement,
+    labelAlign,
     style
   });
   const listProps = mergeProps(
@@ -162,15 +167,17 @@ function SelectRender(props, ref) {
   };
   const renderValue = renderValueProp || renderDefaultValue;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(FieldControl, { ...rootProps, children: [
-      /* @__PURE__ */ jsx(FieldLabel, { ...labelProps }),
-      /* @__PURE__ */ jsx(FieldContentGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldSelect, { ...controlProps, children: renderValue(state, {
-        isInvalid,
-        isDisabled: props.isDisabled,
-        isRequired: props.isRequired
-      }) }) }),
-      /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
-      /* @__PURE__ */ jsx(FieldError, { ...errorProps })
+    /* @__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, {
+          isInvalid,
+          isDisabled: props.isDisabled,
+          isRequired: props.isRequired
+        }) }) }),
+        /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
+        /* @__PURE__ */ jsx(FieldError, { ...errorProps })
+      ] })
     ] }),
     /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(SelectList, { ...listProps }) })
   ] });

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

@@ -1,5 +1,3 @@
-const base = "kbq-select-6d31ad";
-const fullWidth = "kbq-select-fullWidth-1dfc13";
 const addon = "kbq-select-addon-cbc524";
 const chevron = "kbq-select-chevron-0b4fa3";
 const list = "kbq-select-list-8ffac0";
@@ -7,8 +5,6 @@ const popover = "kbq-select-popover-79fc05";
 const clearButton = "kbq-select-clearButton-8031a1";
 const clearable = "kbq-select-clearable-2f5092";
 const s = {
-  base,
-  fullWidth,
   addon,
   chevron,
   list,
@@ -18,12 +14,10 @@ const s = {
 };
 export {
   addon,
-  base,
   chevron,
   clearButton,
   clearable,
   s as default,
-  fullWidth,
   list,
   popover
 };

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

@@ -1,12 +1,18 @@
 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, FieldLabelProps, FieldSelectProps, FieldCaptionProps, FieldContentGroupProps } from '../FieldComponents';
+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 { IconButtonProps } from '../IconButton';
 import type { ListProps } from '../List';
 import type { PopoverProps } from '../Popover';
 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 declare const selectPropLabelAlign: readonly ["start", "end"];
+export type SelectPropLabelAlign = FormControlPropLabelAlign;
 export type SelectProps<T> = ExtendableProps<{
     /**
      * Defines how selected tags are displayed when they exceed the available space.
@@ -46,6 +52,16 @@ export type SelectProps<T> = ExtendableProps<{
      * @default false
      */
     isLabelHidden?: boolean;
+    /**
+     * The label's overall position relative to the element it is labeling.
+     * @default 'top'
+     */
+    labelPlacement?: SelectPropLabelPlacement;
+    /**
+     * The label's horizontal alignment relative to the element it is labeling.
+     * @default 'start'
+     */
+    labelAlign?: SelectPropLabelAlign;
     /** The helper text content. */
     caption?: ReactNode;
     /**
@@ -66,7 +82,7 @@ export type SelectProps<T> = ExtendableProps<{
     /** The props used for each slot inside. */
     slotProps?: {
         popover?: PopoverProps;
-        label?: FieldLabelProps;
+        label?: FormControlLabelProps;
         list?: ListProps<T>;
         control?: FieldSelectProps;
         caption?: FieldCaptionProps;