@cube-dev/ui-kit 0.64.0 → 0.64.1

package/es/utils/react/useId.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.64.0
+ * @cube-dev/ui-kit v0.64.1
  * Released under the MIT license.
  */
 

package/es/utils/react/useLayoutEffect.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.64.0
+ * @cube-dev/ui-kit v0.64.1
  * Released under the MIT license.
  */
 

package/es/utils/react/useQaProps.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.64.0
+ * @cube-dev/ui-kit v0.64.1
  * Released under the MIT license.
  */
 

package/es/utils/react/useViewportSize.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.64.0
+ * @cube-dev/ui-kit v0.64.1
  * Released under the MIT license.
  */
 

package/es/utils/react/wrapNodeIfPlain.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.64.0
+ * @cube-dev/ui-kit v0.64.1
  * Released under the MIT license.
  */
 

package/es/utils/transitions.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.64.0
+ * @cube-dev/ui-kit v0.64.1
  * Released under the MIT license.
  */
 

package/es/utils/tree.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.64.0
+ * @cube-dev/ui-kit v0.64.1
  * Released under the MIT license.
  */
 

package/es/utils/warnings.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.64.0
+ * @cube-dev/ui-kit v0.64.1
  * Released under the MIT license.
  */
 

package/es/version.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.64.0
+ * @cube-dev/ui-kit v0.64.1
  * Released under the MIT license.
  */
 
 "use strict";
 if (typeof window !== 'undefined') {
-    const version = '0.64.0';
+    const version = '0.64.1';
     // Ensure CubeUIKit is defined on window in a way bundlers recognize
     window.CubeUIKit = window.CubeUIKit || { version };
     // Check for multiple versions

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.64.0",
+  "version": "0.64.1",
   "description": "UIKit for Cube Projects",
   "keywords": [
     "uikit"

package/types/components/fields/Checkbox/Checkbox.d.ts

@@ -13,10 +13,7 @@ declare let __Checkbox: import("react").ForwardRefExoticComponent<Omit<CubeCheck
 } & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>> & {
     Group: typeof CheckboxGroup;
 } & {
-    Group: import("react").ForwardRefExoticComponent<Omit<import("./CheckboxGroup").CubeCheckboxGroupProps, "value" | "defaultValue"> & {
-        value?: T_1["value"] | any;
-        defaultValue?: T_1["defaultValue"] | any;
-    } & import("react").RefAttributes<unknown>>;
+    Group: import("react").ForwardRefExoticComponent<Omit<import("../../../utils/react/nullableValue").WithNullableValue<import("./CheckboxGroup").CubeCheckboxGroupProps>, "ref"> & import("react").RefAttributes<unknown>>;
 };
 export { __Checkbox as Checkbox };
 export type { AriaCheckboxProps };

package/types/components/fields/Checkbox/CheckboxGroup.d.ts

@@ -1,7 +1,8 @@
 import { AriaCheckboxGroupProps } from 'react-aria';
 import { FieldBaseProps } from '../../../shared';
 import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
-export interface CubeCheckboxGroupProps extends BaseProps, AriaCheckboxGroupProps, FieldBaseProps, ContainerStyleProps {
+import { WithNullableValue } from '../../../utils/react/nullableValue';
+export interface CubeCheckboxGroupProps extends BaseProps, Omit<AriaCheckboxGroupProps, 'errorMessage'>, FieldBaseProps, ContainerStyleProps {
     orientation?: 'vertical' | 'horizontal';
     inputStyles?: Styles;
 }
@@ -9,8 +10,5 @@ export interface CubeCheckboxGroupProps extends BaseProps, AriaCheckboxGroupProp
  * Checkbox groups allow users to select a single option from a list of mutually exclusive options.
  * All possible options are exposed up front for users to compare.
  */
-declare const _CheckboxGroup: import("react").ForwardRefExoticComponent<Omit<CubeCheckboxGroupProps, "value" | "defaultValue"> & {
-    value?: T["value"] | any;
-    defaultValue?: T["defaultValue"] | any;
-} & import("react").RefAttributes<unknown>>;
+declare const _CheckboxGroup: import("react").ForwardRefExoticComponent<Omit<WithNullableValue<CubeCheckboxGroupProps>, "ref"> & import("react").RefAttributes<unknown>>;
 export { _CheckboxGroup as CheckboxGroup };

package/types/components/fields/ComboBox/ComboBox.d.ts

@@ -1,11 +1,12 @@
 import { ForwardedRef, ReactElement, RefObject } from 'react';
 import { AriaComboBoxProps, AriaTextFieldProps } from 'react-aria';
 import { Section as BaseSection, Item } from 'react-stately';
+import { FieldBaseProps } from '../../../shared';
 import type { KeyboardDelegate, LoadingState } from '@react-types/shared';
 import type { CubeSelectBaseProps } from '../Select';
 type FilterFn = (textValue: string, inputValue: string) => boolean;
 export type MenuTriggerAction = 'focus' | 'input' | 'manual';
-export interface CubeComboBoxProps<T> extends Omit<CubeSelectBaseProps<T>, 'onOpenChange' | 'onBlur' | 'onFocus' | 'validate' | 'onSelectionChange'>, AriaComboBoxProps<T>, AriaTextFieldProps {
+export interface CubeComboBoxProps<T> extends Omit<CubeSelectBaseProps<T>, 'onOpenChange' | 'onBlur' | 'onFocus' | 'validate' | 'onSelectionChange'>, Omit<AriaComboBoxProps<T>, 'errorMessage'>, Omit<AriaTextFieldProps, 'errorMessage'>, FieldBaseProps {
     defaultSelectedKey?: string | null;
     selectedKey?: string | null;
     onSelectionChange?: (selectedKey: string | null) => void;

package/types/components/fields/DatePicker/DateInput.d.ts

@@ -2,7 +2,7 @@ import { FocusableRef } from '@react-types/shared';
 import { AriaDateFieldProps, DateValue } from 'react-aria';
 import { FieldBaseProps, ValidationState } from '../../../shared';
 import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
-export interface CubeDateInputProps<T extends DateValue = DateValue> extends AriaDateFieldProps<T>, BaseProps, ContainerStyleProps, FieldBaseProps {
+export interface CubeDateInputProps<T extends DateValue = DateValue> extends Omit<AriaDateFieldProps<T>, 'errorMessage'>, BaseProps, ContainerStyleProps, FieldBaseProps {
     wrapperStyles?: Styles;
     inputStyles?: Styles;
     styles?: Styles;

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

@@ -2,7 +2,7 @@ import { AriaDatePickerProps, DateValue } from 'react-aria';
 import { FieldBaseProps, ValidationState } from '../../../shared';
 import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
 import { DateFieldBase } from './types';
-export interface CubeDatePickerProps<T extends DateValue = DateValue> extends AriaDatePickerProps<T>, DateFieldBase<T>, BaseProps, ContainerStyleProps, FieldBaseProps {
+export interface CubeDatePickerProps<T extends DateValue = DateValue> extends Omit<AriaDatePickerProps<T>, 'errorMessage'>, DateFieldBase<T>, BaseProps, ContainerStyleProps, FieldBaseProps {
     wrapperStyles?: Styles;
     inputStyles?: Styles;
     triggerStyles?: Styles;
@@ -13,5 +13,5 @@ export interface CubeDatePickerProps<T extends DateValue = DateValue> extends Ar
     shouldFlip?: boolean;
     useLocale?: boolean;
 }
-declare const _DatePicker: import("react").ForwardRefExoticComponent<CubeDatePickerProps<DateValue> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;
+declare const _DatePicker: import("react").ForwardRefExoticComponent<Omit<CubeDatePickerProps<DateValue>, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;
 export { _DatePicker as DatePicker };

package/types/components/fields/DatePicker/DatePickerInput.d.ts

@@ -1,6 +1,6 @@
 import { AriaDatePickerProps, DateValue } from 'react-aria';
 import { DateFieldBase, Granularity } from './types';
-interface CubeDatePickerInputProps<T extends DateValue> extends AriaDatePickerProps<T>, DateFieldBase<T> {
+interface CubeDatePickerInputProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, 'errorMessage'>, DateFieldBase<T> {
     hideValidationIcon?: boolean;
     maxGranularity?: Granularity;
     useLocale?: boolean;

package/types/components/fields/DatePicker/DateRangePicker.d.ts

@@ -3,7 +3,7 @@ import { AriaDateRangePickerProps, DateValue } from 'react-aria';
 import { FieldBaseProps, ValidationState } from '../../../shared';
 import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
 import { DateFieldBase } from './types';
-export interface CubeDateRangePickerProps<T extends DateValue = DateValue> extends AriaDateRangePickerProps<T>, BaseProps, DateFieldBase<T>, ContainerStyleProps, FieldBaseProps {
+export interface CubeDateRangePickerProps<T extends DateValue = DateValue> extends Omit<AriaDateRangePickerProps<T>, 'errorMessage'>, BaseProps, DateFieldBase<T>, ContainerStyleProps, FieldBaseProps {
     wrapperStyles?: Styles;
     inputStyles?: Styles;
     styles?: Styles;

package/types/components/fields/DatePicker/DateRangeSeparatedPicker.d.ts

@@ -4,7 +4,7 @@ import { AriaDateRangePickerProps, DateValue } from 'react-aria';
 import { FieldBaseProps, ValidationState } from '../../../shared';
 import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
 import { DateFieldBase } from './types';
-export interface CubeDateRangeSeparatedPickerProps<T extends DateValue = DateValue> extends AriaDateRangePickerProps<T>, BaseProps, ContainerStyleProps, DateFieldBase<T>, FieldBaseProps {
+export interface CubeDateRangeSeparatedPickerProps<T extends DateValue = DateValue> extends Omit<AriaDateRangePickerProps<T>, 'errorMessage'>, BaseProps, ContainerStyleProps, DateFieldBase<T>, FieldBaseProps {
     wrapperStyles?: Styles;
     inputStyles?: Styles;
     styles?: Styles;

package/types/components/fields/DatePicker/TimeInput.d.ts

@@ -2,7 +2,7 @@ import { AriaTimeFieldProps, DateValue, TimeValue } from 'react-aria';
 import { FieldBaseProps, ValidationState } from '../../../shared';
 import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
 import { Granularity } from './types';
-export interface CubeTimeInputProps<T extends TimeValue = TimeValue> extends AriaTimeFieldProps<T>, BaseProps, ContainerStyleProps, FieldBaseProps {
+export interface CubeTimeInputProps<T extends TimeValue = TimeValue> extends Omit<AriaTimeFieldProps<T>, 'errorMessage'>, BaseProps, ContainerStyleProps, FieldBaseProps {
     wrapperStyles?: Styles;
     inputStyles?: Styles;
     styles?: Styles;
@@ -32,5 +32,5 @@ export interface CubeTimeInputProps<T extends TimeValue = TimeValue> extends Ari
  * TimeFields allow users to enter and edit time values using a keyboard.
  * Each part of the time is displayed in an individually editable segment.
  */
-declare const _TimeInput: import("react").ForwardRefExoticComponent<CubeTimeInputProps<TimeValue> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;
+declare const _TimeInput: import("react").ForwardRefExoticComponent<Omit<CubeTimeInputProps<TimeValue>, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;
 export { _TimeInput as TimeInput };

package/types/components/fields/ListBox/ListBox.d.ts

@@ -0,0 +1,50 @@
+import { ForwardedRef, ReactElement, RefObject } from 'react';
+import { AriaListBoxProps } from 'react-aria';
+import { Section as BaseSection, Item } from 'react-stately';
+import { Styles } from '../../../tasty';
+import type { CollectionBase, Key } from '@react-types/shared';
+import type { FieldBaseProps } from '../../../shared';
+type FilterFn = (textValue: string, inputValue: string) => boolean;
+export interface CubeListBoxProps<T> extends Omit<AriaListBoxProps<T>, 'onSelectionChange'>, CollectionBase<T>, FieldBaseProps {
+    /** Whether the ListBox is searchable */
+    isSearchable?: boolean;
+    /** Placeholder text for the search input */
+    searchPlaceholder?: string;
+    /** Whether the search input should have autofocus */
+    autoFocus?: boolean;
+    /** The filter function used to determine if an option should be included in the filtered list */
+    filter?: FilterFn;
+    /** Custom styles for the search input */
+    searchInputStyles?: Styles;
+    /** Custom styles for the list container */
+    listStyles?: Styles;
+    /** Custom styles for options */
+    optionStyles?: Styles;
+    /** Custom styles for sections */
+    sectionStyles?: Styles;
+    /** Custom styles for section headings */
+    headingStyles?: Styles;
+    /** Whether the ListBox is disabled */
+    isDisabled?: boolean;
+    /** Whether the ListBox as a whole is loading (generic loading indicator) */
+    isLoading?: boolean;
+    /** The selected key(s) */
+    selectedKey?: Key | null;
+    selectedKeys?: Key[] | 'all';
+    /** Default selected key(s) */
+    defaultSelectedKey?: Key | null;
+    defaultSelectedKeys?: Key[] | 'all';
+    /** Selection change handler */
+    onSelectionChange?: (key: Key | null | Key[]) => void;
+    /** Ref for the search input */
+    searchInputRef?: RefObject<HTMLInputElement>;
+    /** Ref for the list */
+    listRef?: RefObject<HTMLElement>;
+}
+export declare const ListBox: (<T>(props: CubeListBoxProps<T> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => ReactElement) & {
+    Item: typeof Item;
+    Section: typeof BaseSection;
+};
+export {};

package/types/components/fields/ListBox/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ListBox';
+export type { CubeListBoxProps } from './ListBox';

package/types/components/fields/RadioGroup/Radio.d.ts

@@ -16,204 +16,21 @@ export interface CubeRadioProps extends BaseProps, AriaRadioProps, FieldBaseProp
  */
 declare const _RadioButton: import("react").ForwardRefExoticComponent<CubeRadioProps & import("react").RefAttributes<unknown>>;
 declare const ButtonGroup: import("react").ComponentType<{
-    value?: any;
-    children?: import("react").ReactNode;
-    ref?: import("react").LegacyRef<unknown> | undefined;
-    hide?: import("../../../tasty").ResponsiveStyleValue<boolean | undefined>;
-    opacity?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.Opacity | undefined>;
-    gridArea?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.GridArea | undefined>;
-    order?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.Order | undefined>;
-    gridColumn?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.GridColumn | undefined>;
-    gridRow?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.GridRow | undefined>;
-    placeSelf?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.PlaceSelf | undefined>;
-    alignSelf?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.AlignSelf | undefined>;
-    justifySelf?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.JustifySelf | undefined>;
-    zIndex?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.ZIndex | undefined>;
-    margin?: import("../../../tasty").ResponsiveStyleValue<boolean | import("csstype").Property.Margin<string | number> | undefined>;
-    inset?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.Inset<string | number> | undefined>;
-    position?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.Position | undefined>;
-    reset?: import("../../../tasty").ResponsiveStyleValue<"input" | "button" | undefined>;
-    padding?: import("../../../tasty").ResponsiveStyleValue<boolean | import("csstype").Property.Padding<string | number> | undefined>;
-    paddingInline?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.PaddingInline<string | number> | undefined>;
-    paddingBlock?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.PaddingBlock<string | number> | undefined>;
-    shadow?: import("../../../tasty").ResponsiveStyleValue<string | boolean | undefined>;
-    border?: import("../../../tasty").ResponsiveStyleValue<boolean | import("csstype").Property.Border<string | number> | undefined>;
-    radius?: import("../../../tasty").ResponsiveStyleValue<string | true | undefined>;
-    overflow?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.Overflow | undefined>;
-    scrollbar?: import("../../../tasty").ResponsiveStyleValue<string | number | boolean | undefined>;
-    outline?: import("../../../tasty").ResponsiveStyleValue<string | boolean | undefined>;
-    textAlign?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.TextAlign | undefined>;
-    width?: import("../../../tasty").ResponsiveStyleValue<boolean | import("csstype").Property.Width<string | number> | undefined>;
-    height?: import("../../../tasty").ResponsiveStyleValue<boolean | import("csstype").Property.Height<string | number> | undefined>;
-    flexBasis?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.FlexBasis<string | number> | undefined>;
-    flexGrow?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.FlexGrow | undefined>;
-    flexShrink?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.FlexShrink | undefined>;
-    flex?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.Flex<string | number> | undefined>;
-    mods?: {
-        [key: string]: boolean | null | undefined;
-    } | undefined;
-    block?: boolean | undefined;
-    inline?: boolean | undefined;
-    style?: import("react").CSSProperties | (import("react").CSSProperties & {
-        [key: string]: string | number | null;
-    }) | undefined;
-    element?: `A${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `I${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
-    tooltip?: import("react").ReactNode;
-    styles?: Styles | undefined;
-    css?: string | undefined;
-    label?: import("react").ReactNode;
-    className?: string | undefined;
-    role?: import("react").AriaRole | undefined;
-    id?: string | undefined;
-    as?: keyof HTMLElementTagNameMap | undefined;
-    qa?: string | undefined;
-    qaVal?: string | number | undefined;
-    breakpoints?: number[] | undefined;
-    isHidden?: boolean | undefined;
-    isDisabled?: boolean | undefined;
-    styleName?: string | undefined;
-    theme?: (string & {}) | "danger" | "success" | "default" | "special" | undefined;
-    name?: string | undefined;
-    defaultValue?: any;
-    autoFocus?: boolean | undefined;
-    "aria-describedby"?: string | undefined;
-    "aria-details"?: string | undefined;
-    "aria-label"?: string | undefined;
-    "aria-labelledby"?: string | undefined;
-    onChange?: ((value: string) => void) | undefined;
-    description?: import("react").ReactNode;
-    rules?: import("../../../shared").ValidationRule[] | undefined;
-    message?: import("react").ReactNode;
-    key?: import("react").Key | null | undefined;
-    orientation?: "horizontal" | "vertical" | undefined;
-    isLoading?: boolean | undefined;
-    insideForm?: boolean | undefined;
-    isReadOnly?: boolean | undefined;
-    isRequired?: boolean | undefined;
-    validationState?: import("../../../shared").ValidationState | undefined;
-    extra?: import("react").ReactNode;
-    labelPosition?: import("../../../shared").LabelPosition | undefined;
-    necessityIndicator?: import("../../../shared").NecessityIndicator | undefined;
-    fieldProps?: import("../../../tasty").Props | undefined;
-    labelSuffix?: import("react").ReactNode;
-    labelStyles?: Styles | undefined;
-    labelProps?: import("../../../tasty").Props | undefined;
-    requiredMark?: boolean | undefined;
-    necessityLabel?: import("react").ReactNode;
-    messageStyles?: Styles | undefined;
-    errorMessage?: import("react").ReactNode;
-    validateTrigger?: import("../../../shared").ValidateTrigger | undefined;
-    showValid?: boolean | undefined;
-    idPrefix?: string | undefined;
-    validationDelay?: number | undefined;
-    shouldUpdate?: boolean | ((prevValues: any, nextValues: any) => boolean) | undefined;
-    groupStyles?: Styles | undefined;
-    isSolid?: boolean | undefined;
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
 } & {}>;
 declare const __Radio: import("react").ForwardRefExoticComponent<CubeRadioProps & import("react").RefAttributes<unknown>> & {
     Group: typeof RadioGroup;
     Button: typeof _RadioButton;
     ButtonGroup: typeof ButtonGroup;
 } & {
-    Group: import("react").ForwardRefExoticComponent<Omit<import("./RadioGroup").CubeRadioGroupProps, "value" | "defaultValue"> & {
-        value?: T["value"] | any;
-        defaultValue?: T["defaultValue"] | any;
-    } & import("react").RefAttributes<unknown>>;
+    Group: import("react").ForwardRefExoticComponent<Omit<import("../../../utils/react/nullableValue").WithNullableValue<import("./RadioGroup").CubeRadioGroupProps>, "ref"> & import("react").RefAttributes<unknown>>;
     Button: import("react").ForwardRefExoticComponent<CubeRadioProps & import("react").RefAttributes<unknown>>;
     ButtonGroup: import("react").ComponentType<{
-        value?: any;
-        children?: import("react").ReactNode;
-        ref?: import("react").LegacyRef<unknown> | undefined;
-        hide?: import("../../../tasty").ResponsiveStyleValue<boolean | undefined>;
-        opacity?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.Opacity | undefined>;
-        gridArea?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.GridArea | undefined>;
-        order?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.Order | undefined>;
-        gridColumn?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.GridColumn | undefined>;
-        gridRow?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.GridRow | undefined>;
-        placeSelf?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.PlaceSelf | undefined>;
-        alignSelf?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.AlignSelf | undefined>;
-        justifySelf?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.JustifySelf | undefined>;
-        zIndex?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.ZIndex | undefined>;
-        margin?: import("../../../tasty").ResponsiveStyleValue<boolean | import("csstype").Property.Margin<string | number> | undefined>;
-        inset?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.Inset<string | number> | undefined>;
-        position?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.Position | undefined>;
-        reset?: import("../../../tasty").ResponsiveStyleValue<"input" | "button" | undefined>;
-        padding?: import("../../../tasty").ResponsiveStyleValue<boolean | import("csstype").Property.Padding<string | number> | undefined>;
-        paddingInline?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.PaddingInline<string | number> | undefined>;
-        paddingBlock?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.PaddingBlock<string | number> | undefined>;
-        shadow?: import("../../../tasty").ResponsiveStyleValue<string | boolean | undefined>;
-        border?: import("../../../tasty").ResponsiveStyleValue<boolean | import("csstype").Property.Border<string | number> | undefined>;
-        radius?: import("../../../tasty").ResponsiveStyleValue<string | true | undefined>;
-        overflow?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.Overflow | undefined>;
-        scrollbar?: import("../../../tasty").ResponsiveStyleValue<string | number | boolean | undefined>;
-        outline?: import("../../../tasty").ResponsiveStyleValue<string | boolean | undefined>;
-        textAlign?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.TextAlign | undefined>;
-        width?: import("../../../tasty").ResponsiveStyleValue<boolean | import("csstype").Property.Width<string | number> | undefined>;
-        height?: import("../../../tasty").ResponsiveStyleValue<boolean | import("csstype").Property.Height<string | number> | undefined>;
-        flexBasis?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.FlexBasis<string | number> | undefined>;
-        flexGrow?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.FlexGrow | undefined>;
-        flexShrink?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.FlexShrink | undefined>;
-        flex?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.Flex<string | number> | undefined>;
-        mods?: {
-            [key: string]: boolean | null | undefined;
-        } | undefined;
-        block?: boolean | undefined;
-        inline?: boolean | undefined;
-        style?: import("react").CSSProperties | (import("react").CSSProperties & {
-            [key: string]: string | number | null;
-        }) | undefined;
-        element?: `A${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `I${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
-        tooltip?: import("react").ReactNode;
-        styles?: Styles | undefined;
-        css?: string | undefined;
-        label?: import("react").ReactNode;
-        className?: string | undefined;
-        role?: import("react").AriaRole | undefined;
-        id?: string | undefined;
-        as?: keyof HTMLElementTagNameMap | undefined;
-        qa?: string | undefined;
-        qaVal?: string | number | undefined;
-        breakpoints?: number[] | undefined;
-        isHidden?: boolean | undefined;
-        isDisabled?: boolean | undefined;
-        styleName?: string | undefined;
-        theme?: (string & {}) | "danger" | "success" | "default" | "special" | undefined;
-        name?: string | undefined;
-        defaultValue?: any;
-        autoFocus?: boolean | undefined;
-        "aria-describedby"?: string | undefined;
-        "aria-details"?: string | undefined;
-        "aria-label"?: string | undefined;
-        "aria-labelledby"?: string | undefined;
-        onChange?: ((value: string) => void) | undefined;
-        description?: import("react").ReactNode;
-        rules?: import("../../../shared").ValidationRule[] | undefined;
-        message?: import("react").ReactNode;
-        key?: import("react").Key | null | undefined;
-        orientation?: "horizontal" | "vertical" | undefined;
-        isLoading?: boolean | undefined;
-        insideForm?: boolean | undefined;
-        isReadOnly?: boolean | undefined;
-        isRequired?: boolean | undefined;
-        validationState?: import("../../../shared").ValidationState | undefined;
-        extra?: import("react").ReactNode;
-        labelPosition?: import("../../../shared").LabelPosition | undefined;
-        necessityIndicator?: import("../../../shared").NecessityIndicator | undefined;
-        fieldProps?: import("../../../tasty").Props | undefined;
-        labelSuffix?: import("react").ReactNode;
-        labelStyles?: Styles | undefined;
-        labelProps?: import("../../../tasty").Props | undefined;
-        requiredMark?: boolean | undefined;
-        necessityLabel?: import("react").ReactNode;
-        messageStyles?: Styles | undefined;
-        errorMessage?: import("react").ReactNode;
-        validateTrigger?: import("../../../shared").ValidateTrigger | undefined;
-        showValid?: boolean | undefined;
-        idPrefix?: string | undefined;
-        validationDelay?: number | undefined;
-        shouldUpdate?: boolean | ((prevValues: any, nextValues: any) => boolean) | undefined;
-        groupStyles?: Styles | undefined;
-        isSolid?: boolean | undefined;
+        [x: string]: any;
+        [x: number]: any;
+        [x: symbol]: any;
     } & {}>;
 };
 export { __Radio as Radio };

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

@@ -1,7 +1,8 @@
 import { AriaRadioGroupProps } from 'react-aria';
 import { FieldBaseProps } from '../../../shared';
 import { BaseProps, BlockStyleProps, OuterStyleProps, Styles } from '../../../tasty';
-export interface CubeRadioGroupProps extends BaseProps, AriaRadioGroupProps, BlockStyleProps, OuterStyleProps, FieldBaseProps {
+import { WithNullableValue } from '../../../utils/react/nullableValue';
+export interface CubeRadioGroupProps extends BaseProps, Omit<AriaRadioGroupProps, 'errorMessage'>, BlockStyleProps, OuterStyleProps, FieldBaseProps {
     groupStyles?: Styles;
     isSolid?: boolean;
     orientation?: 'horizontal' | 'vertical';
@@ -13,8 +14,5 @@ export interface CubeRadioGroupProps extends BaseProps, AriaRadioGroupProps, Blo
  * Radio groups allow users to select a single option from a list of mutually exclusive options.
  * All possible options are exposed up front for users to compare.
  */
-declare const _RadioGroup: import("react").ForwardRefExoticComponent<Omit<CubeRadioGroupProps, "value" | "defaultValue"> & {
-    value?: T["value"] | any;
-    defaultValue?: T["defaultValue"] | any;
-} & import("react").RefAttributes<unknown>>;
+declare const _RadioGroup: import("react").ForwardRefExoticComponent<Omit<WithNullableValue<CubeRadioGroupProps>, "ref"> & import("react").RefAttributes<unknown>>;
 export { _RadioGroup as RadioGroup };

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

@@ -5,7 +5,7 @@ import { Section as BaseSection, Item, useSelectState } from 'react-stately';
 import { FieldBaseProps } from '../../../shared/index';
 import { BasePropsWithoutChildren, BaseStyleProps, ColorStyleProps, OuterStyleProps, Props, Styles } from '../../../tasty/index';
 export declare const ListBoxElement: React.ComponentType<Omit<Props, "variant"> & import("../../../tasty/tasty").WithVariant<import("../../../tasty/tasty").VariantMap>>;
-export interface CubeSelectBaseProps<T> extends BasePropsWithoutChildren, AriaLabelingProps, BaseStyleProps, OuterStyleProps, ColorStyleProps, FieldBaseProps, CollectionBase<T>, AriaSelectProps<T> {
+export interface CubeSelectBaseProps<T> extends BasePropsWithoutChildren, AriaLabelingProps, BaseStyleProps, OuterStyleProps, ColorStyleProps, FieldBaseProps, CollectionBase<T>, Omit<AriaSelectProps<T>, 'errorMessage'> {
     icon?: ReactElement;
     prefix?: ReactNode;
     suffix?: ReactNode;
@@ -49,7 +49,7 @@ export declare function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxSty
 }): import("react/jsx-runtime").JSX.Element;
 type SectionComponent = typeof BaseSection;
 declare const SelectSectionComponent: SectionComponent;
-declare const __Select: React.ForwardRefExoticComponent<CubeSelectProps<object> & React.RefAttributes<import("@react-types/shared").DOMRefValue<HTMLDivElement>>> & {
+declare const __Select: React.ForwardRefExoticComponent<Omit<CubeSelectProps<object>, "ref"> & React.RefAttributes<import("@react-types/shared").DOMRefValue<HTMLDivElement>>> & {
     Item: typeof Item;
     Section: typeof SelectSectionComponent;
 } & {

package/types/components/fields/index.d.ts

@@ -12,4 +12,5 @@ export * from './Slider';
 export * from './Switch/Switch';
 export * from './Select';
 export * from './ComboBox';
+export * from './ListBox';
 export * from './TextInputMapper';

package/types/components/form/Form/types.d.ts

@@ -11,6 +11,7 @@ export type CubeFieldData<Name extends string, Value> = {
     validating?: boolean;
     validationId?: number;
     status?: 'valid' | 'invalid';
+    validationDetails?: ValidityState;
 };
 export type Fields = Record<keyof FieldTypes, CubeFieldData<string, any>>;
 export type SetFieldsArrType<T extends FieldTypes, Name extends keyof T & string> = CubeFieldData<Name, T[Name]>;

package/types/components/pickers/Menu/Menu.d.ts

@@ -2,7 +2,7 @@ import { DOMRef, ItemProps, Key } from '@react-types/shared';
 import { ReactElement, ReactNode } from 'react';
 import { AriaMenuProps } from 'react-aria';
 import { Section as BaseSection } from 'react-stately';
-import { BaseProps, BasePropsWithoutChildren, ContainerStyleProps, Styles } from '../../../tasty';
+import { BasePropsWithoutChildren, ContainerStyleProps, Styles } from '../../../tasty';
 import { MenuButtonProps, MenuSelectionType } from './MenuButton';
 export interface CubeMenuProps<T> extends BasePropsWithoutChildren, ContainerStyleProps, AriaMenuProps<T> {
     selectionIcon?: MenuSelectionType;
@@ -12,7 +12,6 @@ export interface CubeMenuProps<T> extends BasePropsWithoutChildren, ContainerSty
     itemStyles?: Styles;
     sectionStyles?: Styles;
     sectionHeadingStyles?: Styles;
-    qa?: BaseProps['qa'];
     /** Keys that should appear disabled */
     disabledKeys?: Iterable<Key>;
     /** Selection mode for the menu: 'single' | 'multiple' */

package/types/index.d.ts

@@ -61,6 +61,8 @@ export type { CubeBadgeProps } from './components/content/Badge/Badge';
 export { Tag } from './components/content/Tag/Tag';
 export type { CubeTagProps } from './components/content/Tag/Tag';
 export type { CubeSearchInputProps } from './components/fields/SearchInput/SearchInput';
+export type { CubeListBoxProps } from './components/fields/ListBox';
+export { ListBox } from './components/fields/ListBox';
 export { Menu } from './components/pickers/Menu/Menu';
 export type { CubeMenuProps } from './components/pickers/Menu/Menu';
 export { MenuTrigger } from './components/pickers/Menu/MenuTrigger';

package/types/shared/form.d.ts

@@ -1,5 +1,14 @@
 import { ReactNode } from 'react';
 import { Props, Styles } from '../tasty';
+/** ValidationResult type for error message functions */
+export interface ValidationResult {
+    /** Whether the value is invalid */
+    isInvalid: boolean;
+    /** List of validation error messages */
+    validationErrors: string[];
+    /** Native browser validation details */
+    validationDetails: ValidityState;
+}
 /** Where to place label relative to input */
 export type LabelPosition = 'side' | 'top';
 /** The type of necessity indicator */