@cube-dev/ui-kit 0.7.6 → 0.7.10

package/dist/cjs/shared/form.d.ts

@@ -50,11 +50,13 @@ export interface FormFieldProps extends FormBaseProps {
     label?: ReactNode;
     /** Custom label props */
     labelProps?: Props;
-    /** Message for the field. Some additional information or error notice. */
+    /** Message for the field. Some additional information or error notice */
     message?: ReactNode;
+    /** Description for the field. Will be placed below the label */
+    description?: ReactNode;
     /** A tooltip that is shown inside the label */
     tooltip?: ReactNode;
-    /** Whether the element should receive focus on render. */
+    /** Whether the element should receive focus on render */
     autoFocus?: boolean;
 }
 export declare type ValidationRuleBase = {

package/dist/cjs/stories/FormFieldArgs.d.ts

@@ -20,6 +20,12 @@ export declare const LABEL_ARG: {
         description: string;
     };
 };
+export declare const DESCRIPTION_ARG: {
+    description: {
+        control: string;
+        description: string;
+    };
+};
 export declare const NECESSITY_INDICATOR_ARG: {
     necessityIndicator: {
         description: string;

package/dist/cjs/styles/styledScrollbar.d.ts

@@ -9,25 +9,9 @@ export declare function styledScrollbarStyle({ styledScrollbar: val }: {
     $?: undefined;
     display?: undefined;
 })[] | ({
-    '--local-scrollbar-thumb-color': string;
-    '--local-scrollbar-border-color': string;
-    '--local-scrollbar-bg-color': string;
-    $?: undefined;
-    width?: undefined;
-    height?: undefined;
-    'background-color'?: undefined;
-    'border-radius'?: undefined;
-    border?: undefined;
-    'background-clip'?: undefined;
-    'scrollbar-width'?: undefined;
-    'scrollbar-color'?: undefined;
-} | {
     $: string;
     width: string;
     height: string;
-    '--local-scrollbar-thumb-color'?: undefined;
-    '--local-scrollbar-border-color'?: undefined;
-    '--local-scrollbar-bg-color'?: undefined;
     'background-color'?: undefined;
     'border-radius'?: undefined;
     border?: undefined;
@@ -37,9 +21,6 @@ export declare function styledScrollbarStyle({ styledScrollbar: val }: {
 } | {
     $: string;
     'background-color': string;
-    '--local-scrollbar-thumb-color'?: undefined;
-    '--local-scrollbar-border-color'?: undefined;
-    '--local-scrollbar-bg-color'?: undefined;
     width?: undefined;
     height?: undefined;
     'border-radius'?: undefined;
@@ -53,9 +34,6 @@ export declare function styledScrollbarStyle({ styledScrollbar: val }: {
     'border-radius': string;
     border: string;
     'background-clip': string;
-    '--local-scrollbar-thumb-color'?: undefined;
-    '--local-scrollbar-border-color'?: undefined;
-    '--local-scrollbar-bg-color'?: undefined;
     width?: undefined;
     height?: undefined;
     'scrollbar-width'?: undefined;
@@ -63,9 +41,6 @@ export declare function styledScrollbarStyle({ styledScrollbar: val }: {
 } | {
     'scrollbar-width': string;
     'scrollbar-color': string;
-    '--local-scrollbar-thumb-color'?: undefined;
-    '--local-scrollbar-border-color'?: undefined;
-    '--local-scrollbar-bg-color'?: undefined;
     $?: undefined;
     width?: undefined;
     height?: undefined;

package/dist/cjs/tokens.d.ts

@@ -148,5 +148,12 @@ declare const TOKENS: {
     'default-line-height': string;
     'default-letter-spacing': string;
     'default-font-weight': string;
+    'scrollbar-width': string;
+    'scrollbar-outline-width': string;
+    'scrollbar-radius': string;
+    'scrollbar-thumb-color': string;
+    'scrollbar-outline-color': string;
+    'scrollbar-bg-color': string;
+    'scrollbar-corner-color': string;
 };
 export { TOKENS };

package/dist/cjs/utils/react/nullableValue.d.ts

@@ -0,0 +1,18 @@
+import { Props } from '../../components/types';
+export declare function castNullableStringValue<T>(props: T): T;
+export declare function castNullableNumberValue<T>(props: T): T;
+export declare function castNullableIsSelected<T>(props: T): T;
+export declare function castNullableSelectedKey<T>(props: T): T;
+export declare function castNullableField<T>(props: T, keys: string[], type?: string, cast?: (k: any) => any): T;
+export declare type WithNullableValue<T extends Props> = Omit<T, 'value' | 'defaultValue'> & {
+    value?: T['value'] | any;
+    defaultValue?: T['defaultValue'] | any;
+};
+export declare type WithNullableSelected<T extends Props> = Omit<T, 'isSelected' | 'defaultSelected'> & {
+    isSelected?: T['isSelected'] | any;
+    defaultSelected?: T['defaultSelected'] | any;
+};
+export declare type WithNullableSelectedKey<T extends Props> = Omit<T, 'selectedKey' | 'defaultSelectedKey'> & {
+    selectedKey?: T['selectedKey'] | any;
+    defaultSelectedKey?: T['defaultSelectedKey'] | any;
+};

package/dist/cjs/utils/warnings.d.ts

@@ -1 +1,3 @@
 export declare function propDeprecationWarning(name: any, props: any, propList: any): void;
+export declare function accessibilityWarning(...args: any[]): void;
+export declare function warn(...args: any[]): void;

package/dist/mjs/components/Root.d.ts

@@ -4,10 +4,14 @@ export interface CubeRootProps extends BaseProps {
     tokens?: {
         [key: string]: string;
     };
+    bodyStyles?: {
+        [key: string]: string;
+    };
     fonts?: boolean;
     publicUrl?: string;
     router?: any;
     font?: string;
     monospaceFont?: string;
+    applyLegacyTokens?: boolean;
 }
 export declare const Root: (allProps: CubeRootProps) => JSX.Element;

package/dist/mjs/components/forms/Checkbox/Checkbox.d.ts

@@ -8,9 +8,15 @@ export interface CubeCheckboxProps extends BaseProps, AriaCheckboxProps, FormFie
  * Checkboxes allow users to select multiple items from a list of individual items,
  * or to mark one individual item as selected.
  */
-declare let _Checkbox: import("react").ForwardRefExoticComponent<CubeCheckboxProps & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>> & {
+declare let _Checkbox: import("react").ForwardRefExoticComponent<Omit<CubeCheckboxProps, "isSelected" | "defaultSelected"> & {
+    isSelected?: any;
+    defaultSelected?: any;
+} & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>> & {
     cubeInputType: string;
-    Group: import("react").ForwardRefExoticComponent<import("./CheckboxGroup").CubeCheckboxGroupProps & import("react").RefAttributes<unknown>> & {
+    Group: import("react").ForwardRefExoticComponent<Omit<import("./CheckboxGroup").CubeCheckboxGroupProps, "value" | "defaultValue"> & {
+        value?: any;
+        defaultValue?: any;
+    } & import("react").RefAttributes<unknown>> & {
         cubeInputType: string;
     };
 };

package/dist/mjs/components/forms/Checkbox/CheckboxGroup.d.ts

@@ -9,7 +9,10 @@ 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<CubeCheckboxGroupProps & import("react").RefAttributes<unknown>> & {
+declare const _CheckboxGroup: import("react").ForwardRefExoticComponent<Omit<CubeCheckboxGroupProps, "value" | "defaultValue"> & {
+    value?: any;
+    defaultValue?: any;
+} & import("react").RefAttributes<unknown>> & {
     cubeInputType: string;
 };
 export { _CheckboxGroup as CheckboxGroup };

package/dist/mjs/components/forms/FieldWrapper.d.ts

@@ -5,15 +5,21 @@ export declare type CubeFieldWrapperProps = {
     as: string;
     labelPosition: LabelPosition;
     label?: string;
+    labelStyles?: Styles;
     styles?: Styles;
+    /** Whether the input is required */
     isRequired?: boolean;
+    /** Whether the input is disabled */
     isDisabled?: boolean;
-    labelStyles?: Styles;
     necessityIndicator?: NecessityIndicator;
     labelProps?: any;
     fieldProps?: any;
+    /** Custom message for the field. It will be placed below the label and the input */
     message?: string | ReactNode;
+    /** Styles for the message */
     messageStyles?: Styles;
+    /** The description for the field. It will be placed below the label */
+    description?: string;
     Component?: JSX.Element;
     validationState?: ValidationState;
     requiredMark?: boolean;

package/dist/mjs/components/forms/Form/Field.d.ts

@@ -19,6 +19,8 @@ export interface CubeFieldProps extends OptionalFieldBaseProps {
     form?: CubeFormInstance;
     /** The message for the field or text for the error */
     message?: string;
+    /** The description for the field */
+    description?: ReactNode;
     /** Tooltip for the label that explains something. */
     tooltip?: ReactNode;
     /** Field name. It's used as a key the form data. */

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

@@ -2,6 +2,7 @@ import { FormHTMLAttributes } from 'react';
 import { CubeFormInstance, CubeFormData } from './useForm';
 import { BaseProps, ContainerStyleProps } from '../../types';
 import { FormBaseProps } from '../../../shared';
+import { Styles } from '../../../styles/types';
 export declare const FormContext: import("react").Context<{}>;
 export declare function useFormProps(props: any): any;
 export interface CubeFormProps extends FormBaseProps, BaseProps, ContainerStyleProps, Pick<FormHTMLAttributes<HTMLFormElement>, 'action' | 'autoComplete' | 'encType' | 'method' | 'target'> {
@@ -19,6 +20,8 @@ export interface CubeFormProps extends FormBaseProps, BaseProps, ContainerStyleP
     onSubmitFailed?: (any?: any) => void | Promise<any>;
     /** Set form instance created by useForm */
     form?: CubeFormInstance;
+    /** The size of the side area with labels. Only for `labelPosition="side"` */
+    labelWidth?: Styles['width'];
 }
 /**
  * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.

package/dist/mjs/components/forms/NumberInput/NumberInput.d.ts

@@ -2,11 +2,16 @@
 import { CubeTextInputBaseProps } from '../TextInput/TextInputBase';
 import { AriaNumberFieldProps } from '@react-types/numberfield';
 export interface CubeNumberInputProps extends Omit<CubeTextInputBaseProps, 'defaultValue' | 'value' | 'onChange'>, AriaNumberFieldProps {
+    /** Whether or to hide stepper */
+    hideStepper?: boolean;
 }
 /**
  * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.
  */
-declare const _NumberInput: import("react").ForwardRefExoticComponent<Pick<any, string | number | symbol> & import("react").RefAttributes<unknown>> & {
+declare const _NumberInput: import("react").ForwardRefExoticComponent<Omit<CubeNumberInputProps, "value" | "defaultValue"> & {
+    value?: any;
+    defaultValue?: any;
+} & import("react").RefAttributes<unknown>> & {
     cubeInputType: string;
 };
 export { _NumberInput as NumberInput };

package/dist/mjs/components/forms/PasswordInput/PasswordInput.d.ts

@@ -5,7 +5,10 @@ import { CubeTextInputBaseProps } from '../TextInput/TextInputBase';
  * with a keyboard. Various decorations can be displayed around the field to
  * communicate the entry requirements.
  */
-declare const _PasswordInput: import("react").ForwardRefExoticComponent<CubeTextInputBaseProps & import("react").RefAttributes<unknown>> & {
+declare const _PasswordInput: import("react").ForwardRefExoticComponent<Omit<CubeTextInputBaseProps, "value" | "defaultValue"> & {
+    value?: any;
+    defaultValue?: any;
+} & import("react").RefAttributes<unknown>> & {
     cubeInputType: string;
 };
 export { _PasswordInput as PasswordInput };

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

@@ -13,7 +13,10 @@ declare function RadioButton(props: CubeRadioProps, ref: any): JSX.Element;
  * All possible options are exposed up front for users to compare.
  */
 declare const _Radio: import("react").ForwardRefExoticComponent<CubeRadioProps & import("react").RefAttributes<unknown>> & {
-    Group: import("react").ForwardRefExoticComponent<Pick<any, string | number | symbol> & import("react").RefAttributes<unknown>> & {
+    Group: import("react").ForwardRefExoticComponent<Omit<import("./RadioGroup").CubeRadioGroupProps, "value" | "defaultValue"> & {
+        value?: any;
+        defaultValue?: any;
+    } & import("react").RefAttributes<unknown>> & {
         cubeInputType: string;
     };
     Button: import("react").ForwardRefExoticComponent<CubeRadioProps & import("react").RefAttributes<unknown>>;

package/dist/mjs/components/forms/RadioGroup/RadioGroup.d.ts

@@ -1,9 +1,19 @@
 /// <reference types="react" />
+import { Styles } from '../../../styles/types';
+import { BaseProps } from '../../types';
+import { AriaRadioGroupProps } from '@react-types/radio';
+import { FormFieldProps } from '../../../shared';
+export interface CubeRadioGroupProps extends BaseProps, AriaRadioGroupProps, FormFieldProps {
+    groupStyles?: Styles;
+}
 /**
  * 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<Pick<any, string | number | symbol> & import("react").RefAttributes<unknown>> & {
+declare const _RadioGroup: import("react").ForwardRefExoticComponent<Omit<CubeRadioGroupProps, "value" | "defaultValue"> & {
+    value?: any;
+    defaultValue?: any;
+} & import("react").RefAttributes<unknown>> & {
     cubeInputType: string;
 };
 export { _RadioGroup as RadioGroup };

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

@@ -4,4 +4,7 @@ export interface CubeSearchInputProps extends CubeTextInputBaseProps {
     /** Whether the search input is clearable using ESC keyboard button or clear button inside the input */
     isClearable?: boolean;
 }
-export declare const SearchInput: import("react").ForwardRefExoticComponent<CubeSearchInputProps & import("react").RefAttributes<unknown>>;
+export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<CubeSearchInputProps, "value" | "defaultValue"> & {
+    value?: any;
+    defaultValue?: any;
+} & import("react").RefAttributes<unknown>>;

package/dist/mjs/components/forms/Switch/Switch.d.ts

@@ -12,7 +12,10 @@ export interface CubeSwitchProps extends BaseProps, OuterStyleProps, BlockStyleP
  * Switches allow users to turn an individual option on or off.
  * They are usually used to activate or deactivate a specific setting.
  */
-declare let _Switch: import("react").ForwardRefExoticComponent<CubeSwitchProps & import("react").RefAttributes<unknown>> & {
+declare let _Switch: import("react").ForwardRefExoticComponent<Omit<CubeSwitchProps, "isSelected" | "defaultSelected"> & {
+    isSelected?: any;
+    defaultSelected?: any;
+} & import("react").RefAttributes<unknown>> & {
     cubeInputType: string;
 };
 export { _Switch as Switch };

package/dist/mjs/components/forms/TextArea/TextArea.d.ts

@@ -12,7 +12,10 @@ export interface CubeTextAreaProps extends CubeTextInputBaseProps {
  * with a keyboard. Various decorations can be displayed around the field to
  * communicate the entry requirements.
  */
-declare const _TextArea: import("react").ForwardRefExoticComponent<CubeTextAreaProps & import("react").RefAttributes<unknown>> & {
+declare const _TextArea: import("react").ForwardRefExoticComponent<Omit<CubeTextAreaProps, "value" | "defaultValue"> & {
+    value?: any;
+    defaultValue?: any;
+} & import("react").RefAttributes<unknown>> & {
     cubeInputType: string;
 };
 export { _TextArea as TextArea };

package/dist/mjs/components/forms/TextInput/TextInput.d.ts

@@ -5,7 +5,10 @@ import { CubeTextInputBaseProps } from './TextInputBase';
  * with a keyboard. Various decorations can be displayed around the field to
  * communicate the entry requirements.
  */
-declare const _TextInput: import("react").ForwardRefExoticComponent<CubeTextInputBaseProps & import("react").RefAttributes<unknown>> & {
+declare const _TextInput: import("react").ForwardRefExoticComponent<Omit<CubeTextInputBaseProps, "value" | "defaultValue"> & {
+    value?: any;
+    defaultValue?: any;
+} & import("react").RefAttributes<unknown>> & {
     cubeInputType: string;
 };
 export { _TextInput as TextInput };

package/dist/mjs/components/forms/TextInput/TextInputBase.d.ts

@@ -35,6 +35,7 @@ export interface CubeTextInputBaseProps extends BaseProps, PositionStyleProps, D
     rows?: number;
     /** The resize CSS property sets whether an element is resizable, and if so, in which directions. */
     resize?: Styles['resize'];
+    /** The size of the input */
     size?: 'small' | 'default' | 'large' | string;
 }
 declare const _TextInputBase: import("react").ForwardRefExoticComponent<CubeTextInputBaseProps & import("react").RefAttributes<unknown>>;

package/dist/mjs/index.d.ts

@@ -150,19 +150,34 @@ export type { CubeTextProps, CubeTitleProps, CubeParagraphProps };
 export { useContextStyles, StyleProvider } from './providers/StylesProvider';
 export { Provider } from './provider';
 export type { useProviderProps } from './provider';
-declare const Input: import("react").ForwardRefExoticComponent<import("./components/forms/TextInput/TextInputBase").CubeTextInputBaseProps & import("react").RefAttributes<unknown>> & {
+declare const Input: import("react").ForwardRefExoticComponent<Omit<import("./components/forms/TextInput/TextInputBase").CubeTextInputBaseProps, "value" | "defaultValue"> & {
+    value?: any;
+    defaultValue?: any;
+} & import("react").RefAttributes<unknown>> & {
     cubeInputType: string;
 } & {
-    Text: import("react").ForwardRefExoticComponent<import("./components/forms/TextInput/TextInputBase").CubeTextInputBaseProps & import("react").RefAttributes<unknown>> & {
+    Text: import("react").ForwardRefExoticComponent<Omit<import("./components/forms/TextInput/TextInputBase").CubeTextInputBaseProps, "value" | "defaultValue"> & {
+        value?: any;
+        defaultValue?: any;
+    } & import("react").RefAttributes<unknown>> & {
         cubeInputType: string;
     };
-    Password: import("react").ForwardRefExoticComponent<import("./components/forms/TextInput/TextInputBase").CubeTextInputBaseProps & import("react").RefAttributes<unknown>> & {
+    Password: import("react").ForwardRefExoticComponent<Omit<import("./components/forms/TextInput/TextInputBase").CubeTextInputBaseProps, "value" | "defaultValue"> & {
+        value?: any;
+        defaultValue?: any;
+    } & import("react").RefAttributes<unknown>> & {
         cubeInputType: string;
     };
-    Number: import("react").ForwardRefExoticComponent<Pick<any, string | number | symbol> & import("react").RefAttributes<unknown>> & {
+    Number: import("react").ForwardRefExoticComponent<Omit<import("./components/forms/NumberInput/NumberInput").CubeNumberInputProps, "value" | "defaultValue"> & {
+        value?: any;
+        defaultValue?: any;
+    } & import("react").RefAttributes<unknown>> & {
         cubeInputType: string;
     };
-    TextArea: import("react").ForwardRefExoticComponent<import("./components/forms/TextArea/TextArea").CubeTextAreaProps & import("react").RefAttributes<unknown>> & {
+    TextArea: import("react").ForwardRefExoticComponent<Omit<import("./components/forms/TextArea/TextArea").CubeTextAreaProps, "value" | "defaultValue"> & {
+        value?: any;
+        defaultValue?: any;
+    } & import("react").RefAttributes<unknown>> & {
         cubeInputType: string;
     };
     File: import("react").ForwardRefExoticComponent<import("./components/forms/FileInput/FileInput").CubeFileInputProps & import("react").RefAttributes<unknown>>;