@cube-dev/ui-kit 0.21.0 → 0.22.1

package/es/utils/react/isTextOnly.js

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

package/es/utils/react/mapProps.js

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

package/es/utils/react/mergeProps.js

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

package/es/utils/react/nullableValue.js

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

package/es/utils/react/useCombinedRefs.js

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

package/es/utils/react/useId.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.21.0
+ * @cube-dev/ui-kit v0.22.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.21.0
+ * @cube-dev/ui-kit v0.22.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.21.0
+ * @cube-dev/ui-kit v0.22.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.21.0
+ * @cube-dev/ui-kit v0.22.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.21.0
+ * @cube-dev/ui-kit v0.22.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.21.0
+ * @cube-dev/ui-kit v0.22.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.21.0
+ * @cube-dev/ui-kit v0.22.1
  * Released under the MIT license.
  */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.21.0",
+  "version": "0.22.1",
   "description": "UIKit for Cube Projects",
   "keywords": [
     "uikit"
@@ -19,7 +19,7 @@
     "@react-aria/combobox": "3.4.4",
     "@react-aria/dialog": "3.4.2",
     "@react-aria/focus": "3.10.1",
-    "@react-aria/i18n": "3.6.3",
+    "@react-aria/i18n": "3.7.2",
     "@react-aria/interactions": "3.13.1",
     "@react-aria/listbox": "3.7.2",
     "@react-aria/menu": "3.7.1",
@@ -68,19 +68,20 @@
     "@react-types/switch": "3.2.5",
     "@react-types/textfield": "3.6.2",
     "@react-types/tooltip": "3.2.5",
-    "@storybook/addon-docs": "^7.0.10",
-    "@storybook/react-vite": "^7.0.10",
+    "@storybook/addon-docs": "^7.0.17",
+    "@storybook/react-vite": "^7.0.17",
     "clipboard-copy": "^4.0.1",
     "clsx": "^1.1.1",
     "email-validator": "^2.0.4",
-    "prismjs": "^1.25.0",
+    "prismjs": "^1.27.0",
     "react-focus-lock": "^2.9.4",
     "react-is": "^17.0.0",
     "react-keyed-flatten-children": "^1.3.0",
-    "react-transition-group": "^4.4.2",
-    "storybook": "^7.0.10",
+    "react-transition-group": "^4.4.5",
+    "storybook": "^7.0.17",
     "tiny-invariant": "^1.3.1",
-    "valid-url": "^1.0.9"
+    "valid-url": "^1.0.9",
+    "vite": "^4.3.5"
   },
   "module": "./es/index.js",
   "types": "./types/index.d.ts",

package/types/_internal/hooks/use-timer/use-timer.d.ts

@@ -1,5 +1,5 @@
 import { Timer } from './timer';
-export type UseTimerProps = {
+export declare type UseTimerProps = {
     callback?: () => void;
     delay?: number | null;
     isDisabled?: boolean;

package/types/_internal/hooks/use-warn.d.ts

@@ -1,7 +1,7 @@
 import { warn } from '../../utils/warnings';
-export type WarnKey = string | unknown[];
-export type WarnArgs = Parameters<typeof warn>;
-export type WarnParameters<T extends WarnKey = WarnKey> = {
+export declare type WarnKey = string | unknown[];
+export declare type WarnArgs = Parameters<typeof warn>;
+export declare type WarnParameters<T extends WarnKey = WarnKey> = {
     /**
      * If true, the warning will only be shown once per session.
      * If false, the warning will be shown once for a component instance.

package/types/components/actions/use-action.d.ts

@@ -32,7 +32,7 @@ export declare const useAction: ({ to, as, htmlType, label, mods, onPress, ...pr
         ref: import("react").RefObject<HTMLElement>;
         type: "button" | "reset" | "submit";
         rel: string | undefined;
-        as: "object" | "link" | "small" | "sub" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr";
+        as: "object" | "link" | "small" | "sub" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "font" | "dir" | "frame" | "frameset" | "marquee";
         isDisabled: boolean | undefined;
         target: string | undefined;
         href: string | undefined;

package/types/components/content/CopySnippet/CopySnippet.d.ts

@@ -59,13 +59,13 @@ declare const ActionButton: import("react").ComponentType<{
     hide?: import("../../../tasty").ResponsiveStyleValue<boolean | undefined>;
     shadow?: import("../../../tasty").ResponsiveStyleValue<string | undefined>;
     radius?: import("../../../tasty").ResponsiveStyleValue<string | true | undefined>;
-    flow?: import("../../../tasty").ResponsiveStyleValue<"initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "column" | "column-reverse" | "nowrap" | "row" | "row-reverse" | "wrap" | "wrap-reverse" | "dense" | undefined>;
+    flow?: import("../../../tasty").ResponsiveStyleValue<"initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "unset" | "column" | "column-reverse" | "nowrap" | "row" | "row-reverse" | "wrap" | "wrap-reverse" | "dense" | undefined>;
     gridAreas?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.GridTemplateAreas | undefined>;
     gridColumns?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.GridTemplateColumns<string | number> | undefined>;
     gridRows?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.GridTemplateRows<string | number> | undefined>;
     preset?: import("../../../tasty").ResponsiveStyleValue<string | undefined>;
-    align?: import("../../../tasty").ResponsiveStyleValue<"initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | undefined>;
-    justify?: import("../../../tasty").ResponsiveStyleValue<"right" | "left" | "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | "legacy" | undefined>;
+    align?: import("../../../tasty").ResponsiveStyleValue<"initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | undefined>;
+    justify?: import("../../../tasty").ResponsiveStyleValue<"right" | "left" | "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | "legacy" | undefined>;
     size?: "small" | (string & {}) | "medium" | "large" | undefined;
     block?: boolean | undefined;
     inline?: boolean | undefined;
@@ -202,13 +202,13 @@ declare const _CopySnippet: typeof CopySnippet & {
         hide?: import("../../../tasty").ResponsiveStyleValue<boolean | undefined>;
         shadow?: import("../../../tasty").ResponsiveStyleValue<string | undefined>;
         radius?: import("../../../tasty").ResponsiveStyleValue<string | true | undefined>;
-        flow?: import("../../../tasty").ResponsiveStyleValue<"initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "column" | "column-reverse" | "nowrap" | "row" | "row-reverse" | "wrap" | "wrap-reverse" | "dense" | undefined>;
+        flow?: import("../../../tasty").ResponsiveStyleValue<"initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "unset" | "column" | "column-reverse" | "nowrap" | "row" | "row-reverse" | "wrap" | "wrap-reverse" | "dense" | undefined>;
         gridAreas?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.GridTemplateAreas | undefined>;
         gridColumns?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.GridTemplateColumns<string | number> | undefined>;
         gridRows?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.GridTemplateRows<string | number> | undefined>;
         preset?: import("../../../tasty").ResponsiveStyleValue<string | undefined>;
-        align?: import("../../../tasty").ResponsiveStyleValue<"initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | undefined>;
-        justify?: import("../../../tasty").ResponsiveStyleValue<"right" | "left" | "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | "legacy" | undefined>;
+        align?: import("../../../tasty").ResponsiveStyleValue<"initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | undefined>;
+        justify?: import("../../../tasty").ResponsiveStyleValue<"right" | "left" | "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | "legacy" | undefined>;
         size?: "small" | (string & {}) | "medium" | "large" | undefined;
         block?: boolean | undefined;
         inline?: boolean | undefined;

package/types/components/content/Result/Result.d.ts

@@ -22,6 +22,6 @@ export interface CubeResultProps extends BaseProps, ContainerStyleProps {
     /** The title */
     title?: ReactNode;
 }
-export type CubeResultStatus = 'success' | 'error' | 'info' | 'warning' | 404 | 403 | 500;
+export declare type CubeResultStatus = 'success' | 'error' | 'info' | 'warning' | 404 | 403 | 500;
 declare const _Result: import("react").ForwardRefExoticComponent<CubeResultProps & import("react").RefAttributes<unknown>>;
 export { _Result as Result };

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { BaseProps } from '../../../tasty';
-import { FormFieldProps } from '../../../shared';
+import { FieldBaseProps } from '../../../shared';
 import { CheckboxGroup } from './CheckboxGroup';
 import type { AriaCheckboxProps } from '@react-types/checkbox';
-export interface CubeCheckboxProps extends BaseProps, AriaCheckboxProps, FormFieldProps {
+export interface CubeCheckboxProps extends BaseProps, AriaCheckboxProps, FieldBaseProps {
 }
 declare let __Checkbox: import("react").ForwardRefExoticComponent<Omit<CubeCheckboxProps, "isSelected" | "defaultSelected"> & {
     isSelected?: any;

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
-import { FormFieldProps } from '../../../shared';
+import { FieldBaseProps } from '../../../shared';
 import type { AriaCheckboxGroupProps } from '@react-types/checkbox';
-export interface CubeCheckboxGroupProps extends BaseProps, AriaCheckboxGroupProps, FormFieldProps, ContainerStyleProps {
+export interface CubeCheckboxGroupProps extends BaseProps, AriaCheckboxGroupProps, FieldBaseProps, ContainerStyleProps {
     orientation?: 'vertical' | 'horizontal';
     inputStyles?: Styles;
 }

package/types/components/forms/FieldWrapper/extract-field-wrapper-props.d.ts

@@ -1,5 +1,5 @@
 import { CubeFieldWrapperProps } from './types';
-type WrapperProps<Props extends CubeFieldWrapperProps> = {
+declare type WrapperProps<Props extends CubeFieldWrapperProps> = {
     [K in keyof Pick<Props, keyof CubeFieldWrapperProps>]: CubeFieldWrapperProps[K];
 };
 export declare function extractFieldWrapperProps<Props extends CubeFieldWrapperProps, FieldWrapperKeys extends keyof CubeFieldWrapperProps = keyof CubeFieldWrapperProps, ActualWrapperProps extends WrapperProps<Props> = WrapperProps<Props>, RestProps extends Omit<Props, FieldWrapperKeys> = Omit<Props, FieldWrapperKeys>>(props: Props): Readonly<{

package/types/components/forms/FieldWrapper/types.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { LabelPosition, NecessityIndicator, ValidationState } from '../../../shared';
 import { Props, Styles } from '../../../tasty';
-export type CubeFieldWrapperProps = {
+export declare type CubeFieldWrapperProps = {
     as?: string;
     validationState?: ValidationState;
     styles?: Styles;

package/types/components/forms/FileInput/FileInput.d.ts

@@ -1,8 +1,8 @@
 import { RefObject } from 'react';
 import { BaseProps, BlockStyleProps, ContainerStyleProps, PositionStyleProps, Props, Styles } from '../../../tasty';
-import { FormFieldProps } from '../../../shared';
+import { FieldBaseProps } from '../../../shared';
 import type { AriaTextFieldProps } from '@react-types/textfield';
-export interface CubeFileInputProps extends BaseProps, PositionStyleProps, ContainerStyleProps, BlockStyleProps, AriaTextFieldProps, FormFieldProps {
+export interface CubeFileInputProps extends BaseProps, PositionStyleProps, ContainerStyleProps, BlockStyleProps, AriaTextFieldProps, FieldBaseProps {
     /**
      * The size of the input
      * @default default

package/types/components/forms/Form/Field.d.ts

@@ -1,42 +1,15 @@
-import { ReactElement, ReactNode } from 'react';
-import { LabelPosition, OptionalFieldBaseProps, ValidationRule } from '../../../shared';
+import { ReactElement } from 'react';
+import { FieldBaseProps } from '../../../shared';
 import { Styles } from '../../../tasty';
-import { CubeFormInstance } from './useForm';
+import { CubeFormInstance } from './use-form';
 import { FieldTypes } from './types';
-export interface CubeFieldProps<T extends FieldTypes> extends OptionalFieldBaseProps {
+export interface CubeFieldProps<T extends FieldTypes> extends FieldBaseProps {
     /** The initial value of the input. */
     defaultValue?: any;
-    /** The type of the input. `Input`, `Checkbox`, RadioGroup`, `Select`, `ComboBox` etc... */
-    type?: string;
-    /** The unique ID of the field */
-    id?: string;
-    /** The id prefix for the field to avoid collisions between forms */
-    idPrefix?: string;
+    styles?: Styles;
     children?: ReactElement | ((CubeFormInstance: any) => ReactElement);
-    /** Function that checks whether to perform update of the form state. */
-    shouldUpdate?: boolean | ((prevValues: any, nextValues: any) => boolean);
-    /** Validation rules */
-    rules?: ValidationRule[];
     /** The form instance */
     form?: CubeFormInstance<T>;
-    /** The message for the field or text for the error */
-    message?: ReactNode;
-    /** 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. */
-    name?: string | string[];
-    /** Whether the field is hidden. */
-    isHidden?: boolean;
-    /** Whether the field is disabled. */
-    isDisabled?: boolean;
-    /** Whether the field is loading. */
-    isLoading?: boolean;
-    styles?: Styles;
-    labelPosition?: LabelPosition;
-    labelStyles?: Styles;
-    labelSuffix?: ReactNode;
 }
 export declare function Field<T extends FieldTypes>(props: CubeFieldProps<T>): JSX.Element | null;
 export declare function useInsideLegacyField(): boolean;

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

@@ -2,7 +2,7 @@ import { FormHTMLAttributes } from 'react';
 import { DOMRef } from '@react-types/shared';
 import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
 import { FormBaseProps } from '../../../shared';
-import { CubeFormData, CubeFormInstance } from './useForm';
+import { CubeFormData, CubeFormInstance } from './use-form';
 import { FieldTypes } from './types';
 export declare const FormContext: import("react").Context<{}>;
 export declare function useFormProps(props: any): any;

package/types/components/forms/Form/Submit/Submit.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { CubeButtonProps } from '../../../actions';
 import { FieldTypes } from '../types';
-import { CubeFormInstance } from '../useForm';
+import { CubeFormInstance } from '../use-form';
 export interface CubeSubmitProps<T extends FieldTypes = FieldTypes> extends CubeButtonProps {
     form?: CubeFormInstance<T>;
 }

package/types/components/forms/Form/index.d.ts

@@ -2,7 +2,7 @@
 import { CubeAlertProps } from '../../content/Alert';
 import { Field } from './Field';
 import { SubmitError } from './SubmitError';
-import { useForm } from './useForm';
+import { useForm } from './use-form';
 import { useFormProps, FormContext } from './Form';
 declare const Form: (<T extends import("./types").FieldTypes>(props: import("./Form").CubeFormProps<T> & {
     ref?: import("@react-types/shared").DOMRef<HTMLFormElement> | undefined;
@@ -18,7 +18,7 @@ declare const Form: (<T extends import("./types").FieldTypes>(props: import("./F
 export { useFormProps, Form, Field, useForm, FormContext, SubmitError };
 export { useFieldProps } from './use-field';
 export type { CubeFormProps } from './Form';
-export type { CubeFormInstance } from './useForm';
+export type { CubeFormInstance } from './use-form';
 export type { FieldTypes, Fields } from './types';
 export type { UseFieldParams, UseFieldPropsParams } from './use-field';
 export type { CubeAlertProps as CubeSubmitErrorProps };

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

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
-export type FieldTypes = {
+export declare type FieldTypes = {
     [key: string]: any;
 };
-export type CubeFieldData<Name extends string | number | symbol, Value> = {
+export declare type CubeFieldData<Name extends string, Value> = {
     readonly name: Name;
     errors: ReactNode[];
     value?: Value;
@@ -10,6 +10,8 @@ export type CubeFieldData<Name extends string | number | symbol, Value> = {
     touched?: boolean;
     rules?: any[];
     validating?: boolean;
+    validationId?: number;
+    status?: 'valid' | 'invalid';
 };
-export type Fields = Record<keyof FieldTypes, CubeFieldData<string, any>>;
-export type SetFieldsArrType<T extends FieldTypes, Name extends keyof T> = CubeFieldData<Name, T[Name]>;
+export declare type Fields = Record<keyof FieldTypes, CubeFieldData<string, any>>;
+export declare type SetFieldsArrType<T extends FieldTypes, Name extends keyof T & string> = CubeFieldData<Name, T[Name]>;

package/types/components/forms/Form/use-field/types.d.ts

@@ -1,43 +1,7 @@
-import { ReactElement, ReactNode } from 'react';
-import { Styles } from '../../../../tasty';
+import { ReactNode } from 'react';
 import { CubeFieldData, FieldTypes } from '../types';
-import { LabelPosition, OptionalFieldBaseProps, ValidateTrigger, ValidationRule, ValidationState } from '../../../../shared';
-import { CubeFormInstance } from '../useForm';
-export interface LegacyCubeFieldProps<T extends FieldTypes> extends OptionalFieldBaseProps {
-    /** The initial value of the input. */
-    defaultValue?: any;
-    /** The type of the input. `Input`, `Checkbox`, RadioGroup`, `Select`, `ComboBox` etc... */
-    type?: string;
-    /** The unique ID of the field */
-    id?: string;
-    /** The id prefix for the field to avoid collisions between forms */
-    idPrefix?: string;
-    children?: ReactElement | ((CubeFormInstance: any) => ReactElement);
-    /** Function that checks whether to perform update of the form state. */
-    shouldUpdate?: boolean | ((prevValues: any, nextValues: any) => boolean);
-    /** Validation rules */
-    rules?: ValidationRule[];
-    /** The form instance */
-    form?: CubeFormInstance<T>;
-    /** The message for the field or text for the error */
-    message?: ReactNode;
-    /** 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. */
-    name?: string[] | string;
-    /** Whether the field is hidden. */
-    isHidden?: boolean;
-    /** Whether the field is disabled. */
-    isDisabled?: boolean;
-    /** Whether the field is loading. */
-    isLoading?: boolean;
-    styles?: Styles;
-    labelPosition?: LabelPosition;
-    labelStyles?: Styles;
-    labelSuffix?: ReactNode;
-}
+import { ValidateTrigger, ValidationRule, ValidationState } from '../../../../shared';
+import { CubeFormInstance } from '../use-form';
 export interface CubeFieldProps<T extends FieldTypes> {
     /** The initial value of the input. */
     defaultValue?: any;
@@ -52,13 +16,19 @@ export interface CubeFieldProps<T extends FieldTypes> {
     /** The form instance */
     form?: CubeFormInstance<T>;
     /** Field name. It's used as a key the form data. */
-    name?: string | string[];
+    name?: string;
     /** The validation state of the field */
     validationState?: ValidationState;
+    /** Debounce in milliseconds for validation */
+    validationDelay?: number;
+    /** Whether to show valid state */
+    showValid?: boolean;
     /** On which event perform the validation for the field */
     validateTrigger?: ValidateTrigger;
+    /** Message for the field. Some additional information or error notice */
+    message?: ReactNode;
 }
-export type FieldReturnValue<T extends FieldTypes> = {
+export declare type FieldReturnValue<T extends FieldTypes> = {
     id: string;
     name: string;
     value: any;
@@ -70,5 +40,5 @@ export type FieldReturnValue<T extends FieldTypes> = {
     isRequired?: boolean;
     onBlur: () => void;
     nonInput: boolean;
-    field?: CubeFieldData<keyof FieldTypes, T[keyof FieldTypes]>;
+    field?: CubeFieldData<keyof FieldTypes & string, T[keyof FieldTypes]>;
 };

package/types/components/forms/Form/use-field/use-field-props.d.ts

@@ -1,7 +1,7 @@
 import type { ValidateTrigger } from '../../../../shared';
 import type { CubeFieldProps } from './types';
 import type { FieldTypes } from '../types';
-export type UseFieldPropsParams = {
+export declare type UseFieldPropsParams = {
     valuePropsMapper?: ({ value, onChange }: {
         value: any;
         onChange: any;

package/types/components/forms/Form/use-field/use-field.d.ts

@@ -1,7 +1,7 @@
 import { ValidateTrigger } from '../../../../shared';
 import { FieldTypes } from '../types';
 import { CubeFieldProps, FieldReturnValue } from './types';
-export type UseFieldParams = {
+export declare type UseFieldParams = {
     defaultValidationTrigger?: ValidateTrigger;
 };
 export declare function useField<T extends FieldTypes, Props extends CubeFieldProps<T>>(props: Props, params: UseFieldParams): FieldReturnValue<T>;

package/types/components/forms/Form/use-form.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+import { CubeFieldData, FieldTypes, SetFieldsArrType } from './types';
+declare type PartialString<T> = {
+    [P in keyof T & string]?: T[P];
+};
+export declare type CubeFormData<T extends FieldTypes> = {
+    [K in keyof T & string]?: CubeFieldData<K, T[K]>;
+};
+export declare class CubeFormInstance<T extends FieldTypes, TFormData extends CubeFormData<T> = CubeFormData<T>> {
+    forceReRender: () => void;
+    private initialFields;
+    private fields;
+    ref: {};
+    isSubmitting: boolean;
+    submitError: unknown;
+    onValuesChange: (data: T) => void | Promise<void>;
+    onSubmit: (data: T) => void | Promise<void>;
+    constructor(forceReRender?: () => void);
+    submit(): Promise<void>;
+    setFieldsValue: (newData: PartialString<T>, touched?: boolean | undefined, skipRender?: boolean | undefined, createFields?: boolean, inputOnly?: boolean) => void;
+    getFieldValue<Name extends keyof T & string>(name: Name): T[Name] | undefined;
+    getFieldsValue(): PartialString<T>;
+    /**
+     * Similar to getFieldsValue() but respects '.' notation and creates nested objects.
+     */
+    getFormData(): T;
+    setFieldValue<Name extends keyof T & string>(name: Name, value: T[Name], touched?: boolean, skipRender?: boolean, inputOnly?: boolean): void;
+    getFieldInstance<Name extends keyof T & string>(name: Name): TFormData[Name];
+    setInitialFieldsValue(values: PartialString<T>): void;
+    resetFields(names?: (keyof T & string)[], skipRender?: boolean): void;
+    validateField<Name extends keyof T & string>(name: Name): Promise<any>;
+    validateFields<Names extends (keyof T)[]>(names?: Names): Promise<any>;
+    isFieldValid<Name extends keyof T & string>(name: Name): boolean;
+    isFieldInvalid<Name extends keyof T & string>(name: Name): boolean;
+    isFieldTouched<Name extends keyof T & string>(name: Name): boolean;
+    getFieldError<Name extends keyof T & string>(name: Name): ReactNode[];
+    createField<Name extends keyof T & string>(name: Name, skipRender?: boolean): TFormData[Name];
+    removeField<Name extends keyof T & string>(name: Name, skipRender?: boolean): void;
+    setFields<Names extends keyof T & string>(newFields: SetFieldsArrType<T, Names>[]): void;
+    setSubmitting(isSubmitting: boolean): void;
+    _createField<Name extends keyof T & string, Data extends TFormData[Name]>(name: Name, data?: Data): Data;
+}
+export declare function useForm<TSourceType extends FieldTypes>(form?: CubeFormInstance<TSourceType, CubeFormData<TSourceType>>, ref?: any, options?: {
+    onSubmit?: CubeFormInstance<TSourceType>['onSubmit'];
+    onValuesChange?: CubeFormInstance<TSourceType>['onValuesChange'];
+}): [CubeFormInstance<TSourceType>];
+export {};

package/types/components/forms/Form/validation.d.ts

@@ -1,2 +1,5 @@
 export declare function applyRule(value: any, rule: any, form: any): Promise<void>;
-export declare function applyRules(value: any, rules: any, form: any): Promise<void>;
+export declare function applyRules(field: any, form: any, validationId?: number): Promise<void>;
+export declare const delayValidationRule: (timeout?: number) => {
+    validator(): Promise<void>;
+};

package/types/components/forms/Input/Input.d.ts

@@ -3,7 +3,7 @@ import { PasswordInput } from '../PasswordInput/PasswordInput';
 import { NumberInput } from '../NumberInput/NumberInput';
 import { FileInput } from '../FileInput/FileInput';
 import { TextArea } from '../TextArea/TextArea';
-type CubeInput = typeof TextInput & {
+declare type CubeInput = typeof TextInput & {
     Text: typeof TextInput;
     Password: typeof PasswordInput;
     Number: typeof NumberInput;

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { BaseProps, Styles } from '../../../tasty';
-import { FormFieldProps } from '../../../shared';
+import { FieldBaseProps } from '../../../shared';
 import { RadioGroup } from './RadioGroup';
 import type { AriaRadioProps } from '@react-types/radio';
-export interface CubeRadioProps extends BaseProps, AriaRadioProps, FormFieldProps {
+export interface CubeRadioProps extends BaseProps, AriaRadioProps, FieldBaseProps {
     inputStyles?: Styles;
     type?: 'button' | 'radio';
 }

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { BaseProps, Styles } from '../../../tasty';
-import { FormFieldProps } from '../../../shared';
+import { FieldBaseProps } from '../../../shared';
 import type { AriaRadioGroupProps } from '@react-types/radio';
-export interface CubeRadioGroupProps extends BaseProps, AriaRadioGroupProps, FormFieldProps {
+export interface CubeRadioGroupProps extends BaseProps, AriaRadioGroupProps, FieldBaseProps {
     groupStyles?: Styles;
 }
 /**

package/types/components/forms/Slider/Gradation.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { SliderState } from '@react-stately/slider';
-export type GradationProps = {
+export declare type GradationProps = {
     state: SliderState;
     ranges: number[];
     values?: string[];