@cube-dev/ui-kit 0.68.0 → 0.69.0

package/es/utils/react/useId.js

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

package/es/utils/react/useIsDarwin.js

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

package/es/utils/react/useKeySymbols.js

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

package/es/version.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.68.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 
 "use strict";
 if (typeof window !== 'undefined') {
-    const version = '0.68.0';
+    const version = '0.69.0';
     // 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.68.0",
+  "version": "0.69.0",
   "description": "UIKit for Cube Projects",
   "keywords": [
     "uikit"

package/types/components/actions/Button/Button.d.ts

@@ -7,7 +7,7 @@ export interface CubeButtonProps extends CubeActionProps {
     isLoading?: boolean;
     isSelected?: boolean;
     type?: 'primary' | 'secondary' | 'danger' | 'link' | 'clear' | 'outline' | 'neutral' | (string & {});
-    size?: 'tiny' | 'small' | 'medium' | 'large' | (string & {});
+    size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | (string & {});
 }
 export type ButtonVariant = 'default.primary' | 'default.secondary' | 'default.outline' | 'default.neutral' | 'default.clear' | 'default.link' | 'danger.primary' | 'danger.secondary' | 'danger.outline' | 'danger.neutral' | 'danger.clear' | 'danger.link' | 'success.primary' | 'success.secondary' | 'success.outline' | 'success.neutral' | 'success.clear' | 'success.link' | 'special.primary' | 'special.secondary' | 'special.outline' | 'special.neutral' | 'special.clear' | 'special.link';
 export declare const DEFAULT_BUTTON_STYLES: {
@@ -28,34 +28,38 @@ export declare const DEFAULT_BUTTON_STYLES: {
     readonly flow: "column";
     readonly preset: {
         readonly '': "t3m";
-        readonly '[data-size="large"]': "t2m";
+        readonly '[data-size="xsmall"]': "t4";
+        readonly '[data-size="xlarge"]': "t2m";
     };
     readonly textDecoration: "none";
     readonly transition: "theme";
     readonly reset: "button";
     readonly outlineOffset: 1;
     readonly padding: {
-        readonly '': ".5x (2x - 1bw)";
-        readonly '[data-size="tiny"]': ".5x (1x - 1bw)";
-        readonly '[data-size="small"]': ".5x (1x - 1bw)";
+        readonly '': ".5x (1.5x - 1bw)";
+        readonly '[data-size="small"] | [data-size="xsmall"]': ".5x (1x - 1bw)";
         readonly '[data-size="medium"]': ".5x (1.5x - 1bw)";
-        readonly '[data-size="large"]': ".5x (2.25x - 1bw)";
+        readonly '[data-size="large"]': ".5x (2x - 1bw)";
+        readonly '[data-size="xlarge"]': ".5x (2.25x - 1bw)";
         readonly 'single-icon-only | [data-type="link"]': 0;
     };
     readonly width: {
         readonly '': "initial";
-        readonly '[data-size="tiny"] & single-icon-only': "3.5x 3.5x";
-        readonly '[data-size="small"] & single-icon-only': "4x 4x";
-        readonly '[data-size="medium"] & single-icon-only': "5x 5x";
-        readonly '[data-size="large"] & single-icon-only': "6x 6x";
+        readonly '[data-size="xsmall"] & single-icon-only': "@size-xs @size-xs";
+        readonly '[data-size="small"] & single-icon-only': "@size-sm @size-sm";
+        readonly '[data-size="medium"] & single-icon-only': "@size-md @size-md";
+        readonly '[data-size="large"] & single-icon-only': "@size-lg @size-lg";
+        readonly '[data-size="xlarge"] & single-icon-only': "@size-xl @size-xl";
+        readonly '[data-type="link"]': "initial";
     };
     readonly height: {
         readonly '': "initial";
-        readonly '[data-size="tiny"]': "3.5x 3.5x";
-        readonly '[data-size="small"]': "4x 4x";
-        readonly '[data-size="medium"]': "5x 5x";
-        readonly '[data-size="large"]': "6x 6x";
-        readonly '[data-type="link"]': "auto";
+        readonly '[data-size="xsmall"]': "@size-xs @size-xs";
+        readonly '[data-size="small"]': "@size-sm @size-sm";
+        readonly '[data-size="medium"]': "@size-md @size-md";
+        readonly '[data-size="large"]': "@size-lg @size-lg";
+        readonly '[data-size="xlarge"]': "@size-xl @size-xl";
+        readonly '[data-type="link"]': "initial";
     };
     readonly whiteSpace: "nowrap";
     readonly radius: {

package/types/components/actions/CommandMenu/CommandMenu.d.ts

@@ -21,7 +21,7 @@ export interface CubeCommandMenuProps<T> extends BaseProps, ContainerStyleProps,
     isLoading?: boolean;
     shouldFilter?: boolean;
     autoFocus?: boolean | FocusStrategy;
-    size?: 'small' | 'medium' | (string & {});
+    size?: 'medium' | 'large' | (string & {});
     /** Currently selected keys (controlled) */
     selectedKeys?: string[];
     /** Initially selected keys (uncontrolled) */

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

@@ -29,7 +29,7 @@ export interface CubeMenuProps<T> extends BasePropsWithoutChildren, ContainerSty
     autoFocus?: boolean | FocusStrategy;
     shouldUseVirtualFocus?: boolean;
     /** Size of the menu items */
-    size?: 'small' | 'medium' | (string & {});
+    size?: 'medium' | 'large' | (string & {});
     /** Currently selected keys (controlled) */
     selectedKeys?: string[];
     /** Initially selected keys (uncontrolled) */

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

@@ -30,7 +30,7 @@ export interface CubeComboBoxProps<T> extends Omit<CubeSelectBaseProps<T>, 'onOp
      * Has no effect when `items` is provided.
      */
     filter?: FilterFn;
-    size?: 'small' | 'medium' | 'default' | 'large' | string;
+    size?: 'small' | 'medium' | 'large' | (string & {});
     suffixPosition?: 'before' | 'after';
     menuTrigger?: MenuTriggerAction;
     allowsCustomValue?: boolean;

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

@@ -46,7 +46,7 @@ export interface CubeListBoxProps<T> extends Omit<AriaListBoxProps<T>, 'onSelect
     /** Mods for the ListBox */
     mods?: Record<string, boolean>;
     /** Size of the ListBox */
-    size?: 'small' | 'medium';
+    size?: 'medium' | 'large';
     /**
      * When true, ListBox will use virtual focus. This keeps actual DOM focus
      * outside of the individual option elements (e.g. for searchable lists

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

@@ -37,7 +37,7 @@ export interface CubeSelectProps<T> extends CubeSelectBaseProps<T> {
     popoverRef?: RefObject<HTMLInputElement>;
     /** The ref for the list box. */
     listBoxRef?: RefObject<HTMLElement>;
-    size?: 'small' | 'medium' | 'default' | 'large' | string;
+    size?: 'small' | 'medium' | 'large' | (string & {});
     placeholder?: string;
 }
 export declare function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlayStyles, optionStyles, overlayProps: parentOverlayProps, shouldUseVirtualFocus, placement, minWidth, size, triggerRef, ...otherProps }: {

package/types/components/fields/TextInput/TextInputBase.d.ts

@@ -39,7 +39,7 @@ export interface CubeTextInputBaseProps extends BaseProps, PositionStyleProps, D
     /** 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 & {});
+    size?: 'small' | 'medium' | 'large' | (string & {});
     autocomplete?: string;
 }
 declare const TextInputBase: import("react").ForwardRefExoticComponent<Omit<CubeTextInputBaseProps, "ref"> & import("react").RefAttributes<unknown>>;

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

@@ -10,11 +10,13 @@ export interface CubeTextInputMapperProps extends FieldBaseProps {
     keyProps?: Partial<CubeTextInputMapperInputProps>;
     valueProps?: Partial<CubeTextInputMapperInputProps>;
     allowsCustomValue?: boolean;
+    size?: 'small' | 'medium' | 'large' | (string & {});
 }
 export interface CubeTextInputMapperInputProps {
     id: number;
     fieldType: 'key' | 'value';
     inputType?: 'input' | 'combobox' | 'password' | 'textarea';
+    size?: 'small' | 'medium' | 'large' | (string & {});
     value?: string;
     options?: string[];
     placeholder?: string;

package/types/tokens.d.ts

@@ -1,3 +1,10 @@
+export declare const SIZES: {
+    XS: number;
+    SM: number;
+    MD: number;
+    LG: number;
+    XL: number;
+};
 declare const TOKENS: {
     'font-size': string;
     'line-height': string;
@@ -45,6 +52,16 @@ declare const TOKENS: {
     'devmodebar-height': string;
     'sidebar-width': string;
     'border-radius-base': string;
+    'size-xs': string;
+    'size-sm': string;
+    'size-md': string;
+    'size-lg': string;
+    'size-xl': string;
+    'space-xs': string;
+    'space-sm': string;
+    'space-md': string;
+    'space-lg': string;
+    'space-xl': string;
     'text-font-size': string;
     'text-line-height': string;
     'text-letter-spacing': string;