@cube-dev/ui-kit 0.18.2 → 0.20.0

package/es/components/actions/Button/Button.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.18.2
+ * @cube-dev/ui-kit v0.20.0
  * Released under the MIT license.
  */
 
@@ -36,7 +36,7 @@ export const DEFAULT_BUTTON_STYLES = {
         '': '(1.25x - 1bw) (2x - 1bw)',
         '[data-size="small"]': '(.75x - 1bw) (1.5x - 1bw)',
         '[data-size="medium"]': '(1.25x - 1bw) (2x - 1bw)',
-        '[data-size="large"]': '(1.5x - 1bw) (2.5x - 1bw)',
+        '[data-size="large"]': '1.5x (2.5x - 1bw)',
         'single-icon-only | [data-type="link"]': 0,
     },
     width: {
@@ -139,7 +139,7 @@ const ButtonElement = tasty({
             },
             fill: {
                 '': '#clear',
-                '[data-type="primary"]': '#danger-text',
+                '[data-type="primary"]': '#danger',
                 '[data-type="primary"] & hovered': '#danger-text',
                 '[data-type="primary"] & pressed': '#danger',
                 '[data-type="secondary"]': '#danger.05',

package/es/components/actions/Button/Submit.js

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

package/es/components/actions/Button/index.js

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

package/es/components/actions/ButtonGroup/ButtonGroup.js

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

package/es/components/actions/index.js

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

package/es/components/actions/use-action.js

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

package/es/components/content/ActiveZone/ActiveZone.js

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

package/es/components/content/Alert/Alert.js

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

package/es/components/content/Alert/index.js

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

package/es/components/content/Alert/types.js

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

package/es/components/content/Alert/use-alert.js

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

package/es/components/content/Avatar/Avatar.js

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

package/es/components/content/Badge/Badge.js

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

package/es/components/content/Card/Card.js

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

package/es/components/content/Content.js

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

package/es/components/content/CopySnippet/CopySnippet.js

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

package/es/components/content/CopySnippet/index.js

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

package/es/components/content/Divider.js

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

package/es/components/content/Footer.js

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

package/es/components/content/Header.js

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

package/es/components/content/Paragraph.js

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

package/es/components/content/Placeholder/Placeholder.js

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

package/es/components/content/PrismCode/PrismCode.js

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

package/es/components/content/Result/Result.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.18.2
+ * @cube-dev/ui-kit v0.20.0
  * Released under the MIT license.
  */
 
@@ -92,7 +92,7 @@ function Result(props, ref) {
         return (_jsx(IconWrapper, { "data-element": "IconWrapper", styles: { color }, children: _jsx(Component, { "data-element": "Icon" }) }));
     }, [icon, status]);
     const styles = extractStyles(otherProps, CONTAINER_STYLES);
-    return (_jsxs(Container, { ...filterBaseProps(otherProps, { eventProps: true }), ref: ref, styles: styles, children: [iconNode, (title || subtitle) && (_jsxs("div", { "data-element": "Title", children: [wrapNodeIfPlain(title, () => (_jsx(Title, { level: 2, preset: "h4", children: title }))), wrapNodeIfPlain(subtitle, () => (_jsx(Title, { level: 3, preset: "h5m", children: subtitle })))] })), children && _jsx("div", { "data-element": "Content", children: children })] }));
+    return (_jsxs(Container, { ...filterBaseProps(otherProps, { eventProps: true }), ref: ref, styles: styles, children: [iconNode, (title || subtitle) && (_jsxs("div", { "data-element": "Title", children: [wrapNodeIfPlain(title, () => (_jsx(Title, { level: 2, preset: "h4", children: title }))), wrapNodeIfPlain(subtitle, () => (_jsx(Title, { level: 3, preset: "t2m", children: subtitle })))] })), children && _jsx("div", { "data-element": "Content", children: children })] }));
 }
 const _Result = forwardRef(Result);
 export { _Result as Result };

package/es/components/content/Skeleton/Skeleton.js

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

package/es/components/content/Tag/Tag.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.18.2
+ * @cube-dev/ui-kit v0.20.0
  * Released under the MIT license.
  */
 
@@ -22,7 +22,7 @@ const TagElement = tasty({
         placeContent: 'center start',
         placeItems: 'center start',
         radius: '1r',
-        preset: 't4m',
+        preset: 'tag',
         width: '16px max-content max-content',
         height: 'min-content',
         textAlign: 'left',

package/es/components/content/Text.js

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

package/es/components/content/Title.js

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

package/es/components/forms/Checkbox/Checkbox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.18.2
+ * @cube-dev/ui-kit v0.20.0
  * Released under the MIT license.
  */
 
@@ -17,7 +17,7 @@ import { useFocus } from '../../../utils/react/interactions';
 import { mergeProps } from '../../../utils/react';
 import { INLINE_LABEL_STYLES, LABEL_STYLES } from '../Label';
 import { HiddenInput } from '../../HiddenInput';
-import { useFormProps } from '../Form';
+import { useFieldProps, useFormProps } from '../Form';
 import { FieldWrapper } from '../FieldWrapper';
 import { castNullableIsSelected, } from '../../../utils/react/nullableValue';
 import { Text } from '../../content/Text';
@@ -75,15 +75,24 @@ const CheckboxElement = tasty({
     },
 });
 function Checkbox(props, ref) {
+    // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.
+    // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,
+    // but since the checkbox won't move in and out of a group, it should be safe.
+    let groupState = useContext(CheckboxGroupContext);
     props = castNullableIsSelected(props);
     let originalProps = props;
     props = useProviderProps(props);
     props = useFormProps(props);
+    props = useFieldProps(props, {
+        defaultValidationTrigger: 'onChange',
+        valuePropsMapper: ({ value, onChange }) => ({
+            isSelected: value ?? false,
+            isIndeterminate: false,
+            onChange: onChange,
+        }),
+        unsafe__isDisabled: !!groupState,
+    });
     let { qa, isIndeterminate = false, isDisabled = false, insideForm, isRequired, autoFocus, children, label, extra, validationState, labelProps, labelStyles, labelPosition, necessityLabel, necessityIndicator, message, description, requiredMark = true, tooltip, isHidden, labelSuffix, ...otherProps } = props;
-    // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.
-    // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,
-    // but since the checkbox won't move in and out of a group, it should be safe.
-    let groupState = useContext(CheckboxGroupContext);
     let styles = extractStyles(props, OUTER_STYLES);
     let inputStyles = extractStyles(props, BLOCK_STYLES);
     labelStyles = {

package/es/components/forms/Checkbox/CheckboxGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.18.2
+ * @cube-dev/ui-kit v0.20.0
  * Released under the MIT license.
  */
 
@@ -11,10 +11,10 @@ import { useDOMRef } from '@react-spectrum/utils';
 import { useCheckboxGroup } from '@react-aria/checkbox';
 import { useCheckboxGroupState } from '@react-stately/checkbox';
 import { useProviderProps } from '../../../provider';
-import { FormContext, useFormProps } from '../Form/Form';
 import { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty';
-import { FieldWrapper } from '../FieldWrapper';
+import { extractFieldWrapperProps, FieldWrapper } from '../FieldWrapper';
 import { castNullableArrayValue, } from '../../../utils/react/nullableValue';
+import { useFieldProps, FormContext, useFormProps } from '../Form';
 import { CheckboxGroupContext } from './context';
 const CheckGroupElement = tasty({
     qa: 'CheckboxGroup',
@@ -36,9 +36,17 @@ function CheckboxGroup(props, ref) {
     props = castNullableArrayValue(props);
     props = useProviderProps(props);
     props = useFormProps(props);
-    let { isDisabled, isRequired, necessityIndicator, necessityLabel, label, extra, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, labelSuffix, inputStyles, ...otherProps } = props;
+    props = useFieldProps(props, {
+        defaultValidationTrigger: 'onChange',
+        valuePropsMapper: ({ value, onChange }) => ({
+            value: value != null ? value : [],
+            onChange: onChange,
+        }),
+    });
+    let { isDisabled, isRequired, necessityIndicator, necessityLabel, label, extra, validationState, children, orientation = 'vertical', message, description, labelStyles, tooltip, labelSuffix, inputStyles, ...otherProps } = props;
     let domRef = useDOMRef(ref);
     let styles = extractStyles(otherProps, CONTAINER_STYLES);
+    let { fieldWrapperProps } = extractFieldWrapperProps(props);
     let state = useCheckboxGroupState(props);
     let { groupProps, labelProps } = useCheckboxGroup(props, state);
     let radioGroup = (_jsx(CheckGroupElement, { styles: inputStyles, mods: {
@@ -47,27 +55,7 @@ function CheckboxGroup(props, ref) {
                 isDisabled,
                 validationState,
             }, children: _jsx(CheckboxGroupContext.Provider, { value: state, children: children }) }) }));
-    return (_jsx(FieldWrapper, { ...{
-            labelPosition,
-            label,
-            extra,
-            styles,
-            isRequired,
-            labelStyles,
-            necessityIndicator,
-            necessityLabel,
-            labelProps,
-            fieldProps: groupProps,
-            isDisabled,
-            validationState,
-            message,
-            description,
-            requiredMark,
-            tooltip,
-            labelSuffix,
-            Component: radioGroup,
-            ref: domRef,
-        } }));
+    return (_jsx(FieldWrapper, { ...fieldWrapperProps, ref: domRef, Component: radioGroup, fieldProps: groupProps, labelProps: labelProps, styles: styles }));
 }
 /**
  * Checkbox groups allow users to select a single option from a list of mutually exclusive options.

package/es/components/forms/Checkbox/context.js

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

package/es/components/forms/{FieldWrapper.js → FieldWrapper/FieldWrapper.js}

@@ -1,21 +1,21 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.18.2
+ * @cube-dev/ui-kit v0.20.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { InfoCircleOutlined } from '@ant-design/icons';
-import { Paragraph } from '../content/Paragraph';
-import { tasty } from '../../tasty';
-import { TooltipProvider } from '../overlays/Tooltip/TooltipProvider';
-import { Text } from '../content/Text';
-import { wrapNodeIfPlain } from '../../utils/react';
-import { Space } from '../layout/Space';
-import { Flex } from '../layout/Flex';
-import { Label } from './Label';
+import { Paragraph } from '../../content/Paragraph';
+import { tasty } from '../../../tasty';
+import { TooltipProvider } from '../../overlays/Tooltip/TooltipProvider';
+import { Text } from '../../content/Text';
+import { wrapNodeIfPlain } from '../../../utils/react';
+import { Space } from '../../layout/Space';
+import { Flex } from '../../layout/Flex';
+import { Label } from '../Label';
 const FieldElement = tasty({
     qa: 'Field',
     styles: {
@@ -49,6 +49,9 @@ const FieldElement = tasty({
         },
     },
 });
+if (process.env.NODE_ENV === 'development') {
+    FieldElement.displayName = 'FieldWrapperElement';
+}
 const MessageElement = tasty({
     qa: 'Field_Message',
     styles: {
@@ -63,7 +66,11 @@ const MessageElement = tasty({
         userSelect: 'none',
     },
 });
-function FieldWrapper(props, ref) {
+/**
+ * A wrapper for form fields to provide additional decoration for inputs.
+ * @internal Do not use this component directly.
+ */
+export const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
     const { as, labelPosition = 'top', label, extra, styles, isRequired, isDisabled, labelStyles, necessityIndicator, labelProps, fieldProps, message, messageStyles, description, Component, validationState, requiredMark = true, tooltip, isHidden, labelSuffix, } = props;
     const labelComponent = label ? (_jsx(Label, { as: as === 'label' ? 'div' : 'label', styles: labelStyles, labelPosition: labelPosition, isRequired: requiredMark ? isRequired : false, isDisabled: isDisabled, necessityIndicator: necessityIndicator, validationState: validationState, "aria-label": label, ...labelProps, children: _jsxs(Flex, { placeContent: "baseline space-between", width: "100%", children: [_jsxs(Space, { placeItems: "center", gap: "0.25x", children: [_jsx("div", { children: label }), tooltip ? (_jsx(TooltipProvider, { activeWrap: true, title: tooltip, width: "initial max-content 40x", children: _jsx(InfoCircleOutlined, { style: {
                                     color: 'var(--primary-color)',
@@ -76,12 +83,7 @@ function FieldWrapper(props, ref) {
         invalid: validationState === 'invalid',
         valid: validationState === 'valid',
     };
-    return (_jsxs(FieldElement, { ref: ref, as: as || 'div', mods: mods, isHidden: isHidden, styles: styles, ...fieldProps, children: [labelComponent || descriptionComponent ? (_jsxs("div", { "data-element": "LabelArea", children: [labelComponent, descriptionComponent] })) : null, _jsxs("div", { "data-element": "InputArea", children: [Component, message && !isDisabled && (_jsx(MessageElement, { mods: mods, styles: messageStyles, role: validationState === 'invalid' ? 'alert' : undefined, children: message }))] })] }));
-}
-/**
- * A wrapper for form fields to provide additional decoration for inputs.
- */
-const _FieldWrapper = forwardRef(FieldWrapper);
-export { _FieldWrapper as FieldWrapper };
+    return (_jsxs(FieldElement, { ref: ref, as: as ?? 'div', mods: mods, isHidden: isHidden, styles: styles, ...fieldProps, children: [labelComponent || descriptionComponent ? (_jsxs("div", { "data-element": "LabelArea", children: [labelComponent, descriptionComponent] })) : null, _jsxs("div", { "data-element": "InputArea", children: [Component, message && !isDisabled && (_jsx(MessageElement, { mods: mods, styles: messageStyles, role: validationState === 'invalid' ? 'alert' : undefined, children: message }))] })] }));
+});
 
         

package/es/components/forms/FieldWrapper/extract-field-wrapper-props.js

@@ -0,0 +1,46 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.20.0
+ * Released under the MIT license.
+ */
+
+const createFieldWrapperPropsKeys = (arr) => new Set(arr);
+const fieldWrapperPropsKeys = createFieldWrapperPropsKeys([
+    'as',
+    'validationState',
+    'styles',
+    'isRequired',
+    'isDisabled',
+    'fieldProps',
+    'isHidden',
+    'label',
+    'labelPosition',
+    'labelSuffix',
+    'labelStyles',
+    'labelProps',
+    'description',
+    'requiredMark',
+    'tooltip',
+    'extra',
+    'necessityLabel',
+    'necessityIndicator',
+    'message',
+    'messageStyles',
+    'Component',
+]);
+export function extractFieldWrapperProps(props) {
+    const fieldWrapperProps = {};
+    const rest = {};
+    for (const [key, prop] of Object.entries(props)) {
+        if (fieldWrapperPropsKeys.has(key)) {
+            fieldWrapperProps[key] = prop;
+        }
+        else {
+            rest[key] = prop;
+        }
+    }
+    return { fieldWrapperProps, rest };
+}
+
+        

package/es/components/forms/FieldWrapper/index.js

@@ -0,0 +1,12 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.20.0
+ * Released under the MIT license.
+ */
+
+export * from './FieldWrapper';
+export * from './extract-field-wrapper-props';
+export * from './types';
+
+        

package/es/components/forms/FieldWrapper/types.js

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.20.0
+ * Released under the MIT license.
+ */
+
+export {};
+
+        

package/es/components/forms/FileInput/FileInput.js

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