@cube-dev/ui-kit 0.9.11 → 0.10.2

package/es/components/forms/RadioGroup/Radio.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -11,113 +11,118 @@ import { forwardRef, useRef } from 'react';
 import { useHover } from '@react-aria/interactions';
 import { useRadio } from '@react-aria/radio';
 import { useRadioProvider } from './context';
-import { extractStyles } from '../../../utils/styles';
-import { useContextStyles } from '../../../providers/StylesProvider';
-import { BLOCK_STYLES, OUTER_STYLES } from '../../../styles/list';
-import { Base } from '../../Base';
-import { filterBaseProps } from '../../../utils/filterBaseProps';
-import { useFocus } from '../../../utils/interactions';
+import { extractStyles, filterBaseProps, OUTER_STYLES, tasty, } from '../../../tasty';
+import { useFocus } from '../../../utils/react/interactions';
 import { mergeProps } from '../../../utils/react';
 import { useProviderProps } from '../../../provider';
 import { INLINE_LABEL_STYLES } from '../Label';
 import { HiddenInput } from '../../HiddenInput';
 import { RadioGroup } from './RadioGroup';
 import { useFormProps } from '../Form/Form';
-const STYLES = {
-    position: 'relative',
-    display: 'grid',
-    placeItems: 'center start',
-    gap: '1x',
-    flow: 'column',
-    preset: 'default',
-    width: 'min-content',
-};
-const BUTTON_STYLES = {
-    radius: true,
-    fill: {
-        '': '#white',
-        hovered: '#purple-text.04',
-        disabled: '#dark.04',
+const RadioWrapperElement = tasty({
+    as: 'label',
+    qa: 'RadioWrapper',
+    styles: {
+        position: 'relative',
+        display: 'grid',
+        placeItems: 'center start',
+        gap: '1x',
+        flow: 'column',
+        preset: 'default',
+        width: 'min-content',
     },
-    color: {
-        '': '#dark.85',
-        invalid: '#danger-text',
-        disabled: '#dark.40',
-    },
-    fontWeight: 500,
-    preset: 'default',
-    border: {
-        '': true,
-        checked: '#purple-text',
-        'invalid & checked': '#danger-text',
-        'disabled & checked': '#dark.40',
-        disabled: '#border',
-    },
-    padding: '(1x - 1bw) (1.5x - 1bw)',
-    cursor: 'pointer',
-    opacity: {
-        '': 1,
-        disabled: 0.5,
-    },
-    outline: {
-        '': '#purple-03.0',
-        focused: '#purple-03',
-    },
-};
-const INPUT_STYLES = {
-    display: 'grid',
-    placeItems: 'center',
-    radius: 'round',
-    fill: {
-        '': '#white',
-        disabled: '#dark.04',
-    },
-    color: {
-        checked: '#purple-text',
-        'invalid & checked': '#danger-text',
-        'disabled | !checked': '#clear',
-        'disabled & checked': '#dark.12',
+});
+const RadioButtonElement = tasty({
+    styles: {
+        radius: true,
+        fill: {
+            '': '#white',
+            hovered: '#purple-text.04',
+            disabled: '#dark.04',
+        },
+        color: {
+            '': '#dark.85',
+            invalid: '#danger-text',
+            disabled: '#dark.40',
+        },
+        fontWeight: 500,
+        preset: 'default',
+        border: {
+            '': true,
+            checked: '#purple-text',
+            'invalid & checked': '#danger-text',
+            'disabled & checked': '#dark.40',
+            disabled: '#border',
+        },
+        padding: '(1x - 1bw) (1.5x - 1bw)',
+        cursor: 'pointer',
+        opacity: {
+            '': 1,
+            disabled: 0.5,
+        },
+        outline: {
+            '': '#purple-03.0',
+            focused: '#purple-03',
+        },
     },
-    border: {
-        '': '#dark.30',
-        checked: '#purple-text',
-        invalid: '#danger-text.50',
-        disabled: '#dark.12',
+});
+const RadioNormalElement = tasty({
+    styles: {
+        display: 'grid',
+        placeItems: 'center',
+        radius: 'round',
+        fill: {
+            '': '#white',
+            disabled: '#dark.04',
+        },
+        color: {
+            checked: '#purple-text',
+            'invalid & checked': '#danger-text',
+            'disabled | !checked': '#clear',
+            'disabled & checked': '#dark.12',
+        },
+        border: {
+            '': '#dark.30',
+            checked: '#purple-text',
+            invalid: '#danger-text.50',
+            disabled: '#dark.12',
+        },
+        width: '2x',
+        height: '2x',
+        outline: {
+            '': '#purple-03.0',
+            focused: '#purple-03',
+        },
+        transition: 'theme',
+        RadioCircle: {
+            display: 'block',
+            radius: 'round',
+            width: '1x',
+            height: '1x',
+            fill: 'currentColor',
+            transition: 'theme',
+        },
     },
-    width: '2x',
-    height: '2x',
-    outline: {
-        '': '#purple-03.0',
-        focused: '#purple-03',
+});
+const RadioCircleElement = _jsx("div", { "data-element": "RadioCircle" }, void 0);
+const RadioLabelElement = tasty({
+    qa: 'RadioLabel',
+    styles: {
+        ...INLINE_LABEL_STYLES,
+        fontWeight: 400,
     },
-    transition: 'theme',
-};
-const CIRCLE_STYLES = {
-    radius: 'round',
-    width: '1x',
-    height: '1x',
-    fill: 'currentColor',
-    transition: 'theme',
-};
+});
 function Radio(props, ref) {
     props = useProviderProps(props);
     props = useFormProps(props);
     let { qa, isDisabled, validationState, children, label, autoFocus, labelStyles, labelProps, inputStyles, type, 'aria-label': ariaLabel, ...otherProps } = props;
     let isButton = type === 'button';
     label = label || children;
-    let styles = extractStyles(otherProps, OUTER_STYLES, {
-        ...STYLES,
-        ...useContextStyles('Radio_Wrapper', props),
-    });
-    inputStyles = extractStyles(otherProps, BLOCK_STYLES, {
-        ...(isButton ? BUTTON_STYLES : INPUT_STYLES),
-        ...useContextStyles(isButton ? 'RadioButton' : 'Radio', props),
-        ...inputStyles,
-    });
+    let styles = extractStyles(otherProps, OUTER_STYLES);
+    const RadioElement = isButton ? RadioButtonElement : RadioNormalElement;
     labelStyles = {
         ...INLINE_LABEL_STYLES,
         fontWeight: 400,
-        ...useContextStyles('Radio_Label', props),
         ...labelStyles,
     };
     let state = useRadioProvider();
@@ -132,23 +137,19 @@ function Radio(props, ref) {
         ...props,
         isDisabled,
     }, state, inputRef);
-    return (_jsxs(Base, { as: "label", styles: styles, ...hoverProps, ref: domRef, mods: {
+    return (_jsxs(RadioWrapperElement, { styles: styles, ...hoverProps, ref: domRef, mods: {
             disabled: isDisabled,
             invalid: validationState === 'invalid',
             hovered: isHovered,
             button: isButton,
-        }, children: [_jsx(HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...mergeProps(inputProps, focusProps), isButton: isButton, ref: inputRef }, void 0), _jsx(Base, { mods: {
+        }, children: [_jsx(HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...mergeProps(inputProps, focusProps), isButton: isButton, ref: inputRef }, void 0), _jsx(RadioElement, { mods: {
                     checked: inputProps.checked,
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
                     disabled: isDisabled,
                     hovered: isHovered,
                     focused: isFocused,
-                }, styles: inputStyles, children: !isButton ? (_jsx(Base, { styles: CIRCLE_STYLES, mods: {
-                        checked: inputProps.checked,
-                        invalid: validationState === 'invalid',
-                        valid: validationState === 'valid',
-                    } }, void 0)) : (children) }, void 0), label && !isButton && (_jsx(Base, { qa: "RadioLabel", styles: labelStyles, mods: {
+                }, styles: inputStyles, children: !isButton ? RadioCircleElement : children }, void 0), label && !isButton && (_jsx(RadioLabelElement, { mods: {
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
                     disabled: isDisabled,

package/es/components/forms/RadioGroup/RadioGroup.js

@@ -1,65 +1,49 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useDOMRef } from '@react-spectrum/utils';
-import { LABEL_STYLES } from '../Label';
 import { useProviderProps } from '../../../provider';
 import { useRadioGroup } from '@react-aria/radio';
 import { useRadioGroupState } from '@react-stately/radio';
 import { FormContext, useFormProps } from '../Form/Form';
 import { RadioContext } from './context';
-import { extractStyles } from '../../../utils/styles';
-import { BLOCK_STYLES, OUTER_STYLES } from '../../../styles/list';
-import { Base } from '../../Base';
-import { useContextStyles } from '../../../providers/StylesProvider';
+import { BLOCK_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
 import { FieldWrapper } from '../FieldWrapper';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
-const GROUP_STYLES = {
-    display: 'flex',
-    placeItems: 'start',
-    placeContent: 'start',
-    flow: {
-        '': 'column',
-        horizontal: 'row wrap',
+const RadioGroupElement = tasty({
+    qa: 'RadioGroup',
+    styles: {
+        display: 'flex',
+        placeItems: 'start',
+        placeContent: 'start',
+        flow: {
+            '': 'column',
+            horizontal: 'row wrap',
+        },
+        gap: {
+            '': '1x',
+            horizontal: '1x 2x',
+        },
+        padding: '(1x - 1bw) 0',
     },
-    gap: {
-        '': '1x',
-        horizontal: '1x 2x',
-    },
-    padding: '(1x - 1bw) 0',
-};
+});
 function RadioGroup(props, ref) {
     props = castNullableStringValue(props);
     props = useProviderProps(props);
     props = useFormProps(props);
     let { isDisabled, isRequired, necessityIndicator, label, extra, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, isHidden, styles, groupStyles, ...otherProps } = props;
     let domRef = useDOMRef(ref);
-    let wrapperContextStyles = useContextStyles('RadioGroup_Wrapper', props);
-    let groupContextStyles = useContextStyles('RadioGroup', props);
-    let labelContextStyles = useContextStyles('RadioGroup_Label', props);
-    styles = extractStyles(otherProps, OUTER_STYLES, {
-        ...wrapperContextStyles,
-        ...styles,
-    });
-    groupStyles = extractStyles(otherProps, BLOCK_STYLES, {
-        ...GROUP_STYLES,
-        ...groupContextStyles,
-        ...groupStyles,
-    });
-    labelStyles = {
-        ...LABEL_STYLES,
-        ...labelContextStyles,
-        ...labelStyles,
-    };
+    styles = extractStyles(otherProps, OUTER_STYLES, styles);
+    groupStyles = extractStyles(otherProps, BLOCK_STYLES, groupStyles);
     let state = useRadioGroupState(props);
     let { radioGroupProps: fieldProps, labelProps } = useRadioGroup(props, state);
-    let radioGroup = (_jsx(Base, { qa: "RadioGroup", styles: groupStyles, mods: {
+    let radioGroup = (_jsx(RadioGroupElement, { styles: groupStyles, mods: {
             horizontal: orientation === 'horizontal',
         }, children: _jsx(FormContext.Provider, { value: {
                 isRequired,

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

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

package/es/components/forms/SearchInput/SearchInput.js

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

package/es/components/forms/Switch/Switch.js

@@ -1,123 +1,120 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useFocusableRef } from '@react-spectrum/utils';
-import { forwardRef, useRef } from 'react';
+import { forwardRef, useMemo, useRef } from 'react';
 import { useSwitch } from '@react-aria/switch';
 import { useHover } from '@react-aria/interactions';
 import { useToggleState } from '@react-stately/toggle';
 import { useProviderProps } from '../../../provider';
-import { BLOCK_STYLES, OUTER_STYLES } from '../../../styles/list';
-import { extractStyles } from '../../../utils/styles';
-import { Base } from '../../Base';
-import { useFocus } from '../../../utils/interactions';
+import { BLOCK_STYLES, Element, extractStyles, filterBaseProps, OUTER_STYLES, tasty, } from '../../../tasty';
+import { useFocus } from '../../../utils/react/interactions';
 import { mergeProps } from '../../../utils/react';
-import { filterBaseProps } from '../../../utils/filterBaseProps';
-import { useContextStyles } from '../../../providers/StylesProvider';
 import { HiddenInput } from '../../HiddenInput';
 import { INLINE_LABEL_STYLES, LABEL_STYLES } from '../Label';
 import { LoadingOutlined } from '@ant-design/icons';
 import { useFormProps } from '../Form/Form';
 import { FieldWrapper } from '../FieldWrapper';
 import { castNullableIsSelected, } from '../../../utils/react/nullableValue';
-const STYLES = {
-    position: 'relative',
-    display: 'flex',
-    placeItems: 'center start',
-    gap: '1x',
-    flow: 'row',
-    preset: 'input',
-    width: 'min-content',
-    cursor: 'pointer',
-};
-const INPUT_STYLES = {
-    position: 'relative',
-    display: 'grid',
-    placeItems: 'center',
-    radius: 'round',
-    fill: {
-        '': '#dark.50',
-        checked: '#purple',
-        disabled: '#dark.12',
+const BaseSwitchWrapperElement = tasty({
+    qa: 'SwitchWrapper',
+    styles: {
+        position: 'relative',
     },
-    color: '#white',
-    border: false,
-    width: '5.25x 5.25x',
-    height: '3x 3x',
-    outline: {
-        '': '#purple-03.0',
-        focused: '#purple-03',
+});
+const SwitchWrapperElement = tasty({
+    qa: 'SwitchWrapper',
+    styles: {
+        position: 'relative',
+        display: 'flex',
+        placeItems: 'center start',
+        gap: '1x',
+        flow: 'row',
+        preset: 'input',
+        width: 'min-content',
+        cursor: 'pointer',
     },
-    transition: 'theme',
-    cursor: 'pointer',
-};
-const THUMB_STYLES = {
-    position: 'absolute',
-    width: '2.5x',
-    height: '2.5x',
-    radius: 'round',
-    fill: 'currentColor',
-    shadow: '0px 2px 4px #dark.20;',
-    top: '.25x',
-    left: {
-        '': '.25x',
-        checked: '2.5x',
+});
+const SwitchElement = tasty({
+    styles: {
+        position: 'relative',
+        display: 'grid',
+        placeItems: 'center',
+        radius: 'round',
+        fill: {
+            '': '#dark.50',
+            checked: '#purple',
+            disabled: '#dark.12',
+        },
+        color: '#white',
+        border: false,
+        width: '5.25x 5.25x',
+        height: '3x 3x',
+        outline: {
+            '': '#purple-03.0',
+            focused: '#purple-03',
+        },
+        transition: 'theme',
+        cursor: 'pointer',
+        marginTop: {
+            '': null,
+            'inside-form & side-label': '-3px',
+        },
+        placeSelf: {
+            '': null,
+            'inside-form & side-label': 'start',
+        },
     },
-    transition: 'left',
-    cursor: 'pointer',
-};
+});
+const SwitchThumbElement = tasty({
+    'aria-hidden': 'true',
+    styles: {
+        position: 'absolute',
+        width: '2.5x',
+        height: '2.5x',
+        radius: 'round',
+        fill: 'currentColor',
+        shadow: '0px 2px 4px #dark.20;',
+        top: '.25x',
+        left: {
+            '': '.25x',
+            checked: '2.5x',
+        },
+        transition: 'left',
+        cursor: 'pointer',
+    },
+});
 function Switch(props, ref) {
     props = castNullableIsSelected(props);
     props = useProviderProps(props);
     props = useFormProps(props);
     let { qa, isDisabled = false, autoFocus, children, label, extra, labelProps, labelStyles, thumbStyles, isLoading, insideForm, validationState, message, description, labelPosition, inputStyles, requiredMark = true, tooltip, ...otherProps } = props;
     label = label || children;
-    let wrapperContextStyles = useContextStyles('Switch_Wrapper', props);
-    let inputContextStyles = useContextStyles('Switch', props);
-    let labelContextStyles = useContextStyles('Switch_Label', props);
-    let thumbContextStyles = useContextStyles('Switch_Thumb', props);
-    let styles = extractStyles(props, OUTER_STYLES, {
-        ...(insideForm ? {} : STYLES),
-        ...wrapperContextStyles,
-    });
-    inputStyles = extractStyles(props, BLOCK_STYLES, {
-        ...INPUT_STYLES,
-        ...inputContextStyles,
-        ...(insideForm && labelPosition === 'side'
-            ? {
-                marginTop: '-3px',
-                placeSelf: 'start',
-            }
-            : null),
-        ...inputStyles,
-    });
-    thumbStyles = {
-        ...THUMB_STYLES,
-        ...thumbContextStyles,
-        ...thumbStyles,
-    };
-    labelStyles = {
+    let styles = extractStyles(props, OUTER_STYLES);
+    inputStyles = extractStyles(props, BLOCK_STYLES, inputStyles);
+    labelStyles = useMemo(() => ({
         ...(insideForm ? LABEL_STYLES : INLINE_LABEL_STYLES),
-        ...labelContextStyles,
         ...labelStyles,
-    };
+    }), [insideForm, labelStyles]);
     let { isFocused, focusProps } = useFocus({ isDisabled }, true);
     let { hoverProps, isHovered } = useHover({ isDisabled });
     let inputRef = useRef(null);
     let domRef = useFocusableRef(ref, inputRef);
     // eslint-disable-next-line react-hooks/rules-of-hooks
     let { inputProps } = useSwitch(props, useToggleState(props), inputRef);
-    const switchField = (_jsxs(Base, { qa: `${qa || 'Switch'}Wrapper`, styles: { position: 'relative' }, children: [_jsx(HiddenInput, { "data-qa": qa || 'Switch', ...mergeProps(inputProps, focusProps), ref: inputRef }, void 0), _jsx(Base, { mods: {
+    const switchField = (_jsxs(BaseSwitchWrapperElement, { qa: qa || 'Switch', children: [_jsx(HiddenInput, { "data-qa": "HiddenInput", ...mergeProps(inputProps, focusProps), ref: inputRef }, void 0), _jsx(SwitchElement, { mods: {
+                    'inside-form': insideForm,
+                    'side-label': labelPosition === 'side',
                     checked: inputProps.checked,
                     disabled: isDisabled,
                     hovered: isHovered,
                     focused: isFocused,
-                }, styles: inputStyles, children: _jsx(Base, { qa: "SwitchThumb", styles: thumbStyles, "aria-hidden": "true", mods: {
+                }, styles: inputStyles, children: _jsx(SwitchThumbElement, { styles: thumbStyles, mods: {
                         checked: inputProps.checked,
                     } }, void 0) }, void 0)] }, void 0));
     if (insideForm) {
@@ -139,7 +136,7 @@ function Switch(props, ref) {
                 ref: domRef,
             } }, void 0));
     }
-    return (_jsxs(Base, { as: "label", styles: styles, ...hoverProps, ...filterBaseProps(otherProps), ref: domRef, children: [switchField, label && (_jsxs(Base, { styles: labelStyles, mods: {
+    return (_jsxs(SwitchWrapperElement, { as: "label", styles: styles, ...hoverProps, ...filterBaseProps(otherProps), ref: domRef, children: [switchField, label && (_jsxs(Element, { styles: labelStyles, mods: {
                     disabled: isDisabled,
                 }, ...filterBaseProps(labelProps), children: [label, isLoading ? (_jsxs(_Fragment, { children: [label ? _jsx(_Fragment, { children: "\u00A0" }, void 0) : null, _jsx(LoadingOutlined, {}, void 0)] }, void 0)) : null] }, void 0))] }, void 0));
 }

package/es/components/forms/TextArea/TextArea.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -29,10 +29,10 @@ function TextArea(props, ref) {
             input.style.height = 'auto';
             input.style.height = input.scrollHeight
                 ? `calc(${input.scrollHeight}px + (2 * var(--border-width)))`
-                : `${parseFloat(computedStyle.paddingTop)
-                    + parseFloat(computedStyle.paddingBottom)
-                    + parseFloat(computedStyle.lineHeight) * (rows || 3)
-                    + 2}px`;
+                : `${parseFloat(computedStyle.paddingTop) +
+                    parseFloat(computedStyle.paddingBottom) +
+                    parseFloat(computedStyle.lineHeight) * (rows || 3) +
+                    2}px`;
             input.style.alignSelf = prevAlignment;
         }
     }, [inputRef]);

package/es/components/forms/TextInput/TextInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -11,20 +11,18 @@ import { TextInputBase } from './TextInputBase';
 import { useProviderProps } from '../../../provider';
 import { useTextField } from '@react-aria/textfield';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
-function TextInput(props, ref) {
+export const TextInput = forwardRef(function TextInput(props, ref) {
     castNullableStringValue(props);
     props = useProviderProps(props);
     let inputRef = useRef(null);
     let { labelProps, inputProps } = useTextField(props, inputRef);
     return (_jsx(TextInputBase, { ...props, labelProps: labelProps, inputProps: inputProps, ref: ref, inputRef: inputRef }, void 0));
-}
+});
 /**
  * TextInputs are text inputs that allow users to input custom text entries
  * with a keyboard. Various decorations can be displayed around the field to
  * communicate the entry requirements.
  */
-const _TextInput = forwardRef(TextInput);
-_TextInput.cubeInputType = 'Text';
-export { _TextInput as TextInput };
+TextInput.cubeInputType = 'Text';