@koobiq/react-components 0.7.1 → 0.9.0

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

@@ -1,44 +1,56 @@
 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.
-     * @default false
      * @deprecated
      * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
      */
     disabled?: boolean;
     /**
      * If `true`, the component will indicate an error.
-     * @default false
      * @deprecated
      * The "error" prop is deprecated. Use "isInvalid" prop to replace it.
      */
     error?: boolean;
     /**
      * It prevents the user from changing the value of the checkbox.
-     * @default false
      * @deprecated
      * The "readonly" prop is deprecated. Use "isReadonly" prop to replace it.
      */
     readonly?: boolean;
     /**
      * If `true`, the input element is required.
-     * @default false
      * @deprecated
      * 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,12 +65,28 @@ export type RadioGroupBaseProps = ExtendableProps<{
      * @default 'vertical'
      */
     orientation?: RadioGroupPropOrientation;
+    /**
+     * If `true`, the label is hidden. Be sure to add aria-label to the input element.
+     */
+    isLabelHidden?: boolean;
+    /**
+     * 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'>>;
+} & RadioGroupDeprecatedProps, Omit<RadioGroupPrimitiveProps, 'validationState'>>;
 export type RadioGroupProps = ExtendableComponentPropsWithRef<RadioGroupBaseProps, 'div'>;
 export {};

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,20 +1,23 @@
-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 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" | `data-${string}` | "labelPlacement" | "labelAlign" | "fullWidth" | "variant" | "slotProps" | "startAddon" | "endAddon" | "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;
         errorMessage?: FieldErrorProps;
         clearButton?: import("..").IconButtonProps;
     };
-    errorMessage?: import("react").ReactNode;
     caption?: import("react").ReactNode;
     variant?: import("./types").SearchInputPropVariant;
     fullWidth?: boolean;

package/dist/components/SearchInput/SearchInput.js

@@ -3,11 +3,12 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
 import { IconMagnifyingGlass16, IconXmarkCircle16 } from "@koobiq/react-icons";
-import { useSearchFieldState, removeDataAttributes, useSearchField } from "@koobiq/react-primitives";
+import { useSearchFieldState, removeDataAttributes, useSearchField, FieldErrorContext } 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";
@@ -17,18 +18,19 @@ const SearchInput = forwardRef(
     const {
       startAddon = /* @__PURE__ */ jsx(IconMagnifyingGlass16, { className: s.searchIcon }),
       variant = "filled",
-      fullWidth = false,
-      isLabelHidden = false,
+      fullWidth,
+      isLabelHidden,
+      labelPlacement,
+      errorMessage,
+      labelAlign,
       "data-testid": testId,
       style,
       className,
       caption,
-      errorMessage,
       isRequired,
       isReadOnly,
       label,
       endAddon,
-      isInvalid,
       isDisabled,
       slotProps
     } = props;
@@ -40,19 +42,22 @@ const SearchInput = forwardRef(
       inputProps: inputPropsAria,
       descriptionProps: descriptionPropsAria,
       errorMessageProps: errorMessagePropsAria,
-      clearButtonProps: clearButtonPropsAria
+      clearButtonProps: clearButtonPropsAria,
+      ...validation
     } = useSearchField(removeDataAttributes(props), state, domRef);
+    const { isInvalid } = validation;
     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,
+        "data-invalid": isInvalid || void 0,
+        "data-readonly": isReadOnly || void 0,
+        "data-disabled": isDisabled || void 0,
+        "data-required": isRequired || void 0,
         className: clsx(s.base, className)
       },
       slotProps?.root
@@ -101,15 +106,17 @@ const SearchInput = forwardRef(
     );
     const captionProps = mergeProps({ children: caption }, slotProps?.caption, descriptionPropsAria);
     const errorProps = mergeProps(
-      { isInvalid, children: errorMessage },
+      { children: errorMessage },
       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(FieldErrorContext.Provider, { value: validation, children: /* @__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;
@@ -12,25 +18,32 @@ export type SearchInputProps = ExtendableProps<{
     style?: CSSProperties;
     /**
      * If `true`, the label is hidden. Be sure to add aria-label to the input element.
-     * @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;
         errorMessage?: FieldErrorProps;
         clearButton?: IconButtonProps;
     };
-    /** An error message for the field. */
-    errorMessage?: ReactNode;
     /** The helper text content. */
     caption?: ReactNode;
     /**
@@ -40,8 +53,7 @@ export type SearchInputProps = ExtendableProps<{
     variant?: SearchInputPropVariant;
     /**
      * If `true`, the input will take up the full width of its container.
-     * @default false
      */
     fullWidth?: boolean;
-} & DataAttributeProps, Omit<AriaSearchFieldProps, 'description' | 'errorMessage' | 'validationState'>>;
+} & DataAttributeProps, Omit<AriaSearchFieldProps, 'description' | 'validationState'>>;
 export type SearchInputRef = ComponentRef<'input'>;

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

@@ -2,7 +2,7 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback } from "react";
 import { useLocalizedStringFormatter, useDOMRef, useElementSize, mergeProps, clsx } from "@koobiq/react-core";
 import { IconXmarkCircle16, IconChevronDownS16 } from "@koobiq/react-icons";
-import { useMultiSelectState, removeDataAttributes, useMultiSelect } from "@koobiq/react-primitives";
+import { 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";
@@ -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";
@@ -21,11 +22,13 @@ import { Section } from "../Collections/Section.js";
 import { Divider } from "../Collections/Divider.js";
 function SelectRender(props, ref) {
   const {
-    fullWidth = false,
-    isClearable = false,
+    fullWidth,
+    isClearable,
     "data-testid": testId,
     selectionMode = "single",
     selectedTagsOverflow = "responsive",
+    labelPlacement,
+    labelAlign,
     isRequired,
     isDisabled,
     caption,
@@ -52,13 +55,13 @@ function SelectRender(props, ref) {
     onClear?.();
   }, [onClear, state]);
   const {
-    isInvalid,
     menuProps,
     valueProps,
     triggerProps,
     labelProps: labelPropsAria,
     descriptionProps,
-    errorMessageProps
+    errorMessageProps,
+    ...validation
   } = useMultiSelect(
     removeDataAttributes({
       ...props,
@@ -68,14 +71,17 @@ function SelectRender(props, ref) {
     state,
     domRef
   );
+  const { isInvalid } = validation;
   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),
+    "data-invalid": isInvalid || void 0,
+    "data-disabled": props.isDisabled || void 0,
+    "data-required": props.isRequired || void 0,
+    className,
+    fullWidth,
+    labelPlacement,
+    labelAlign,
     style
   });
   const listProps = mergeProps(
@@ -142,11 +148,7 @@ function SelectRender(props, ref) {
     slotProps?.popover
   );
   const captionProps = mergeProps({ children: caption }, slotProps?.caption, descriptionProps);
-  const errorProps = mergeProps(
-    { isInvalid, children: errorMessage },
-    slotProps?.errorMessage,
-    errorMessageProps
-  );
+  const errorProps = mergeProps({ children: errorMessage }, slotProps?.errorMessage, errorMessageProps);
   const renderDefaultValue = (state2, states) => {
     if (!state2.selectedItems) return null;
     if (selectionMode === "multiple")
@@ -162,15 +164,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(FieldErrorContext.Provider, { value: validation, children: /* @__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/components/SelectOption/SelectOption.js

@@ -25,11 +25,11 @@ function SelectOption({ item, state }) {
       className: clsx(listItem, textVariant["text-normal"], className),
       style,
       ref,
-      "data-hovered": isHovered,
-      "data-pressed": isPressed,
-      "data-disabled": isDisabled,
-      "data-selected": isSelected,
-      "data-focus-visible": isFocusVisible,
+      "data-hovered": isHovered || void 0,
+      "data-pressed": isPressed || void 0,
+      "data-disabled": isDisabled || void 0,
+      "data-selected": isSelected || void 0,
+      "data-focus-visible": isFocusVisible || void 0,
       children: [
         state.selectionMode === "multiple" && /* @__PURE__ */ jsx(Checkbox, { isDisabled, isSelected, isReadOnly: true }),
         item.rendered

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

@@ -1,19 +1,25 @@
 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.
      *
      *- `"multiline"` — tags wrap to multiple lines.
      *- `"responsive"` — tags collapse into a summary (e.g., "3 more").
-     * @default "responsive"
+     * @default 'responsive'
      */
     selectedTagsOverflow?: SelectPropSelectedTagsOverflow;
     /** Handler that is called when the clear button is clicked. */
@@ -28,6 +34,8 @@ export type SelectProps<T> = ExtendableProps<{
     onSelectionChange?: Parameters<typeof useMultiSelectState>['0']['onSelectionChange'];
     /** The currently selected keys in the collection (controlled). */
     selectedKeys?: Parameters<typeof useMultiSelectState>['0']['selectedKeys'];
+    validate?: Parameters<typeof useMultiSelectState>['0']['validate'];
+    validationBehavior?: Parameters<typeof useMultiSelectState>['0']['validationBehavior'];
     /**
      * The type of selection that is allowed in the collection.
      * @default 'single'
@@ -39,18 +47,24 @@ export type SelectProps<T> = ExtendableProps<{
     endAddon?: ReactNode;
     /** Inline styles. */
     style?: CSSProperties;
-    /** An error message for the field. */
-    errorMessage?: ReactNode;
     /**
      * If `true`, the label is hidden. Be sure to add aria-label to the input element.
-     * @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;
     /**
      * If true, the input will take up the full width of its container.
-     * @default false
      */
     fullWidth?: boolean;
     /** Unique identifier for testing purposes. */
@@ -66,7 +80,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;
@@ -74,6 +88,6 @@ export type SelectProps<T> = ExtendableProps<{
         errorMessage?: FieldErrorProps;
         clearButton?: IconButtonProps;
     };
-}, Omit<AriaSelectProps<T>, 'description' | 'validate' | 'validationBehavior' | 'validationState' | 'selectedKey' | 'onSelectionChange' | 'defaultSelectedKey'>>;
+}, Omit<AriaSelectProps<T>, 'description' | 'validationBehavior' | 'validate' | 'validationState' | 'selectedKey' | 'onSelectionChange' | 'defaultSelectedKey'>>;
 export type SelectComponent = <T>(props: SelectProps<T>) => ReactElement | null;
 export type SelectRef = ComponentRef<'div'>;

package/dist/components/Select/types.js

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

package/dist/components/SidePanel/SidePanel.js

@@ -14,7 +14,7 @@ const SidePanelComponent = forwardRef(
       size = "medium",
       position = "left",
       placement = "start",
-      hideCloseButton = false,
+      hideCloseButton,
       control,
       children,
       slotProps,

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

@@ -48,7 +48,6 @@ export type SidePanelProps = {
     control?: SidePanelPropControl;
     /**
      * If `true`, the close button isn't shown.
-     * @default false
      */
     hideCloseButton?: boolean;
     /** Handler that is called when the modal's open state changes. */
@@ -60,17 +59,14 @@ export type SidePanelProps = {
     portalContainer?: Element;
     /**
      * If `true`, the modal window won't close when clicked outside of it.
-     * @default false
      */
     disableExitOnClickOutside?: boolean;
     /**
      * If `true`, the modal window won't close when the ESC key is pressed.
-     * @default false
      */
     disableExitOnEscapeKeyDown?: boolean;
     /**
      * If `true`, the underlay (backdrop) under the modal window isn't shown.
-     * @default false
      */
     hideBackdrop?: boolean;
     /** Additional CSS-classes. */
@@ -79,7 +75,6 @@ export type SidePanelProps = {
     'data-testid'?: string | number;
     /**
      * If `true`, the focus trap in modal window is disabled.
-     * @default false
      */
     disableFocusManagement?: boolean;
     /**

package/dist/components/Table/Table.js

@@ -21,9 +21,9 @@ import { Cell } from "../Collections/Cell.js";
 const textNormal = utilClasses.typography["text-normal"];
 function TableRender(props, ref) {
   const {
-    stickyHeader = false,
-    fullWidth = false,
     divider = "none",
+    stickyHeader,
+    fullWidth,
     slotProps,
     selectionMode,
     selectionBehavior,
@@ -41,9 +41,9 @@ function TableRender(props, ref) {
   const tableProps = mergeProps(
     {
       className: clsx(s.base, fullWidth && s.fullWidth, textNormal, className),
-      "data-sticky-header": stickyHeader,
+      "data-sticky-header": stickyHeader || void 0,
       "data-divider": divider,
-      "data-fullwidth": fullWidth,
+      "data-fullwidth": fullWidth || void 0,
       ref: domRef,
       style
     },

package/dist/components/Table/components/TableRow/TableRow.js

@@ -29,11 +29,11 @@ function TableRow({ item, children, state }) {
         isFocusVisible && s.focusVisible,
         className
       ),
-      "data-hovered": isHovered,
-      "data-disabled": isDisabled,
-      "data-selected": isSelected,
-      "data-pressed": isPressed,
-      "data-focus-visible": isFocusVisible,
+      "data-hovered": isHovered || void 0,
+      "data-disabled": isDisabled || void 0,
+      "data-selected": isSelected || void 0,
+      "data-pressed": isPressed || void 0,
+      "data-focus-visible": isFocusVisible || void 0,
       ...mergeProps(rowProps, hoverProps, focusProps),
       style,
       ref,