@cube-dev/ui-kit 0.0.0-canary-b916e8d → 0.0.0-canary-5cc6499

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -11,7 +11,8 @@ import { forwardRef, useRef } from 'react';
 import { useHover } from '@react-aria/interactions';
 import { useRadio } from '@react-aria/radio';
 import { useRadioProvider } from './context';
-import { extractStyles, filterBaseProps, OUTER_STYLES, tasty, } from '../../../tasty';
+import { BLOCK_STYLES, extractStyles, filterBaseProps, OUTER_STYLES, } from '../../../tasty';
+import { Base } from '../../Base';
 import { useFocus } from '../../../utils/react/interactions';
 import { mergeProps } from '../../../utils/react';
 import { useProviderProps } from '../../../provider';
@@ -19,110 +20,102 @@ import { INLINE_LABEL_STYLES } from '../Label';
 import { HiddenInput } from '../../HiddenInput';
 import { RadioGroup } from './RadioGroup';
 import { useFormProps } from '../Form/Form';
-const RadioWrapperElement = tasty({
-    as: 'label',
-    qa: 'RadioWrapper',
-    styles: {
-        position: 'relative',
-        display: 'grid',
-        placeItems: 'center start',
-        gap: '1x',
-        flow: 'column',
-        preset: 'default',
-        width: 'min-content',
+import { useContextStyles } from '../../../providers/StyleProvider';
+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 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',
-        },
+    color: {
+        '': '#dark.85',
+        invalid: '#danger-text',
+        disabled: '#dark.40',
     },
-});
-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',
-        },
+    fontWeight: 500,
+    preset: 'default',
+    border: {
+        '': true,
+        checked: '#purple-text',
+        'invalid & checked': '#danger-text',
+        'disabled & checked': '#dark.40',
+        disabled: '#border',
     },
-});
-const RadioCircleElement = _jsx("div", { "data-element": "RadioCircle" }, void 0);
-const RadioLabelElement = tasty({
-    qa: 'RadioLabel',
-    styles: {
-        ...INLINE_LABEL_STYLES,
-        fontWeight: 400,
+    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',
+    },
+    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',
+};
+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);
-    const RadioElement = isButton ? RadioButtonElement : RadioNormalElement;
+    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,
+    });
     labelStyles = {
         ...INLINE_LABEL_STYLES,
         fontWeight: 400,
+        ...useContextStyles('Radio_Label', props),
         ...labelStyles,
     };
     let state = useRadioProvider();
@@ -137,19 +130,23 @@ function Radio(props, ref) {
         ...props,
         isDisabled,
     }, state, inputRef);
-    return (_jsxs(RadioWrapperElement, { styles: styles, ...hoverProps, ref: domRef, mods: {
+    return (_jsxs(Base, { as: "label", 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(RadioElement, { mods: {
+        }, children: [_jsx(HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...mergeProps(inputProps, focusProps), isButton: isButton, ref: inputRef }, void 0), _jsx(Base, { mods: {
                     checked: inputProps.checked,
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
                     disabled: isDisabled,
                     hovered: isHovered,
                     focused: isFocused,
-                }, styles: inputStyles, children: !isButton ? RadioCircleElement : children }, void 0), label && !isButton && (_jsx(RadioLabelElement, { mods: {
+                }, 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: {
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
                     disabled: isDisabled,

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

@@ -1,49 +1,64 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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 { BLOCK_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
+import { BLOCK_STYLES, extractStyles, OUTER_STYLES, } from '../../../tasty';
+import { Base } from '../../Base';
 import { FieldWrapper } from '../FieldWrapper';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
-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',
+import { useContextStyles } from '../../../providers/StyleProvider';
+const GROUP_STYLES = {
+    display: 'flex',
+    placeItems: 'start',
+    placeContent: 'start',
+    flow: {
+        '': 'column',
+        horizontal: 'row wrap',
     },
-});
+    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);
-    styles = extractStyles(otherProps, OUTER_STYLES, styles);
-    groupStyles = extractStyles(otherProps, BLOCK_STYLES, groupStyles);
+    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,
+    };
     let state = useRadioGroupState(props);
     let { radioGroupProps: fieldProps, labelProps } = useRadioGroup(props, state);
-    let radioGroup = (_jsx(RadioGroupElement, { styles: groupStyles, mods: {
+    let radioGroup = (_jsx(Base, { qa: "RadioGroup", 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.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 

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

@@ -1,18 +1,19 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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, useMemo, useRef } from 'react';
+import { forwardRef, 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, Element, extractStyles, filterBaseProps, OUTER_STYLES, tasty, } from '../../../tasty';
+import { BLOCK_STYLES, extractStyles, filterBaseProps, OUTER_STYLES, } from '../../../tasty';
+import { Base } from '../../Base';
 import { useFocus } from '../../../utils/react/interactions';
 import { mergeProps } from '../../../utils/react';
 import { HiddenInput } from '../../HiddenInput';
@@ -21,97 +22,100 @@ import { LoadingOutlined } from '@ant-design/icons';
 import { useFormProps } from '../Form/Form';
 import { FieldWrapper } from '../FieldWrapper';
 import { castNullableIsSelected, } from '../../../utils/react/nullableValue';
-const BaseSwitchWrapperElement = tasty({
-    qa: 'SwitchWrapper',
-});
-const SwitchWrapperElement = tasty({
-    qa: 'SwitchWrapper',
-    styles: {
-        position: 'relative',
-        display: 'flex',
-        placeItems: 'center start',
-        gap: '1x',
-        flow: 'row',
-        preset: 'input',
-        width: 'min-content',
-        cursor: 'pointer',
+import { useContextStyles } from '../../../providers/StyleProvider';
+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 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',
-        },
+    color: '#white',
+    border: false,
+    width: '5.25x 5.25x',
+    height: '3x 3x',
+    outline: {
+        '': '#purple-03.0',
+        focused: '#purple-03',
     },
-});
-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',
+    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',
     },
-});
+    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 styles = extractStyles(props, OUTER_STYLES);
-    inputStyles = extractStyles(props, BLOCK_STYLES, inputStyles);
-    labelStyles = useMemo(() => ({
+    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 = {
         ...(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(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',
+    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: {
                     checked: inputProps.checked,
                     disabled: isDisabled,
                     hovered: isHovered,
                     focused: isFocused,
-                }, styles: inputStyles, children: _jsx(SwitchThumbElement, { styles: thumbStyles, mods: {
+                }, styles: inputStyles, children: _jsx(Base, { qa: "SwitchThumb", styles: thumbStyles, "aria-hidden": "true", mods: {
                         checked: inputProps.checked,
                     } }, void 0) }, void 0)] }, void 0));
     if (insideForm) {
@@ -133,7 +137,7 @@ function Switch(props, ref) {
                 ref: domRef,
             } }, void 0));
     }
-    return (_jsxs(SwitchWrapperElement, { as: "label", styles: styles, ...hoverProps, ...filterBaseProps(otherProps), ref: domRef, children: [switchField, label && (_jsxs(Element, { styles: labelStyles, mods: {
+    return (_jsxs(Base, { as: "label", styles: styles, ...hoverProps, ...filterBaseProps(otherProps), ref: domRef, children: [switchField, label && (_jsxs(Base, { 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.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */