@cube-dev/ui-kit 0.82.1 → 0.83.0

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.82.1
+ * @cube-dev/ui-kit v0.83.0
  * Released under the MIT license.
  */
 
@@ -13,11 +13,34 @@ import { useProviderProps } from '../../../provider';
 import { extractStyles, filterBaseProps, OUTER_STYLES, tasty, } from '../../../tasty';
 import { mergeProps } from '../../../utils/react';
 import { useFocus } from '../../../utils/react/interactions';
+import { ItemBase } from '../../content/ItemBase/ItemBase';
 import { INLINE_LABEL_STYLES, useFieldProps, useFormProps } from '../../form';
 import { HiddenInput } from '../../HiddenInput';
 import { useRadioProvider } from './context';
 import { RadioGroup } from './RadioGroup';
 export { useRadio };
+const RadioButtonElement = tasty(ItemBase, {
+    qa: 'Radio',
+    as: 'label',
+    styles: {
+        preset: 't3m',
+        lineHeight: '1fs',
+        flexGrow: 1,
+        Label: {
+            placeSelf: {
+                '': 'center start',
+                '!with-prefix & !with-suffix & !with-icon & !with-right-icon': 'center',
+            },
+        },
+    },
+});
+const TabRadioButtonSelectedElement = tasty(RadioButtonElement, {
+    qa: 'RadioSelected',
+    styles: {
+        fill: '#white',
+        shadow: '$item-shadow',
+    },
+});
 const RadioWrapperElement = tasty({
     as: 'label',
     qa: 'RadioWrapper',
@@ -41,62 +64,6 @@ const RadioWrapperElement = tasty({
             checked: 1,
         },
         flexGrow: 1,
-        Input: {
-            radius: {
-                '': 'round',
-                button: true,
-                'button & solid': 0,
-                'button & solid & :first-child': '1r 0 0 1r',
-                'button & solid & :last-child': '0 1r 1r 0',
-            },
-            margin: {
-                '': 'initial',
-                'button & solid': '-1bw right',
-                'button & solid & :last-child': 0,
-            },
-        },
-    },
-});
-const RadioButtonElement = tasty({
-    styles: {
-        display: 'grid',
-        flow: 'column',
-        placeItems: 'center',
-        gap: '.75x',
-        fill: {
-            '': '#white',
-            hovered: '#purple-text.04',
-            checked: '#white',
-            disabled: '#light',
-        },
-        color: {
-            '': '#dark.85',
-            invalid: '#danger-text',
-            checked: '#purple-text',
-            disabled: '#dark-04',
-            'disabled & checked': '#dark-02',
-        },
-        preset: 't3m',
-        border: {
-            '': '#dark-05',
-            checked: '#purple',
-            'invalid & checked': '#danger-text',
-            disabled: '#dark-05',
-            'disabled & checked': '#dark-03',
-        },
-        padding: '(.75x - 1bw) (1.25x - 1bw)',
-        cursor: 'pointer',
-        opacity: {
-            '': 1,
-            disabled: 0.5,
-        },
-        outline: {
-            '': '#purple-text.0',
-            focused: '1bw #purple-text',
-        },
-        outlineOffset: 1,
-        transition: 'theme',
-        whiteSpace: 'nowrap',
     },
 });
 const RadioNormalElement = tasty({
@@ -147,11 +114,9 @@ function Radio(props, ref) {
     props = useProviderProps(props);
     props = useFormProps(props);
     props = useFieldProps(props, { defaultValidationTrigger: 'onChange' });
-    let { qa, isDisabled, validationState, children, label, autoFocus, labelStyles, labelProps, inputStyles, type = 'radio', 'aria-label': ariaLabel, form, ...otherProps } = props;
-    let isButton = type === 'button';
+    let { qa, isDisabled, isInvalid, children, label, autoFocus, labelStyles, labelProps, type, buttonType, size, icon, rightIcon, prefix, suffix, description, tooltip, hotkeys, 'aria-label': ariaLabel, form, ...otherProps } = props;
     label = label || children;
     let styles = extractStyles(otherProps, OUTER_STYLES);
-    const RadioElement = isButton ? RadioButtonElement : RadioNormalElement;
     labelStyles = {
         ...INLINE_LABEL_STYLES,
         ...labelStyles,
@@ -159,64 +124,108 @@ function Radio(props, ref) {
     let radioGroupProps = useRadioProvider();
     let state = radioGroupProps && radioGroupProps.state;
     let name = radioGroupProps && radioGroupProps.name;
-    let isSolid = (radioGroupProps && radioGroupProps.isSolid) || false;
+    let contextSize = radioGroupProps?.size;
+    let contextButtonType = radioGroupProps?.buttonType;
+    let contextType = radioGroupProps?.type;
+    let contextIsDisabled = radioGroupProps?.isDisabled;
     if (!state) {
         throw new Error('CubeUI: The Radio button is used outside the RadioGroup.');
     }
-    let { isFocused, focusProps } = useFocus({ isDisabled }, true);
-    let { hoverProps, isHovered } = useHover({ isDisabled });
+    // Determine effective type from props or context
+    let effectiveType = type ?? contextType ?? 'radio';
+    let isButton = effectiveType === 'button' || effectiveType === 'tabs';
+    // Determine effective size with priority: prop > context > default
+    let effectiveSize = (size ??
+        contextSize ??
+        (effectiveType === 'tabs'
+            ? 'small'
+            : 'medium'));
+    // Apply size mapping for tabs mode button radios
+    if (effectiveType === 'tabs' && isButton) {
+        if (effectiveSize === 'small' || effectiveSize === 'medium') {
+            effectiveSize = 'xsmall';
+        }
+        else if (effectiveSize === 'large') {
+            effectiveSize = 'medium';
+        }
+        else if (effectiveSize === 'xlarge') {
+            effectiveSize = 'large';
+        }
+        // 'xsmall' stays 'xsmall'
+    }
+    // Determine effective button type
+    // In tabs mode, always use 'neutral' and ignore buttonType prop
+    let effectiveButtonType;
+    if (effectiveType === 'tabs') {
+        effectiveButtonType = 'neutral'; // Force neutral for tabs, ignore buttonType
+    }
+    else {
+        const baseButtonType = buttonType ?? contextButtonType ?? 'outline';
+        // When buttonType is 'primary', use 'secondary' for non-selected and 'primary' for selected
+        if (baseButtonType === 'primary') {
+            effectiveButtonType =
+                state.selectedValue === props.value ? 'primary' : 'secondary';
+        }
+        else {
+            effectiveButtonType = baseButtonType;
+        }
+    }
+    // Use context isDisabled if prop isDisabled is not explicitly set
+    let effectiveIsDisabled = isDisabled ?? contextIsDisabled ?? false;
+    let { isFocused, focusProps } = useFocus({ isDisabled: effectiveIsDisabled }, true);
+    let { hoverProps, isHovered } = useHover({ isDisabled: effectiveIsDisabled });
     let inputRef = useRef(null);
     let domRef = useFocusableRef(ref, inputRef);
     let { inputProps, isDisabled: isRadioDisabled, isSelected: isRadioSelected, } = useRadio({
         name,
         ...props,
-        isDisabled,
+        isDisabled: effectiveIsDisabled,
     }, state, inputRef);
     const mods = useMemo(() => ({
         checked: isRadioSelected,
-        invalid: validationState === 'invalid',
-        valid: validationState === 'valid',
+        invalid: !!isInvalid,
         disabled: isRadioDisabled,
         hovered: isHovered,
         button: isButton,
         focused: isFocused,
-        solid: isSolid,
+        tabs: effectiveType === 'tabs',
     }), [
         isRadioSelected,
-        validationState,
+        isInvalid,
         isRadioDisabled,
         isHovered,
         isButton,
         isFocused,
-        isSolid,
+        effectiveType,
     ]);
-    return (_jsxs(RadioWrapperElement, { styles: styles, ...hoverProps, ref: domRef, mods: mods, "data-type": type, children: [_jsx(HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...mergeProps(inputProps, focusProps), ref: inputRef, mods: { button: isButton } }), _jsx(RadioElement, { "data-element": "Input", mods: mods, "data-type": type, styles: inputStyles, children: !isButton ? RadioCircleElement : children }), label && !isButton && (_jsx(RadioLabelElement, { mods: mods, styles: labelStyles, ...filterBaseProps(labelProps), children: label }))] }));
-}
-function RadioButton(props, ref) {
-    const Radio = _Radio;
-    return _jsx(Radio, { ...props, ref: ref, type: "button" });
+    // Render button type using ItemBase
+    if (isButton) {
+        const ButtonElement = isRadioSelected && contextType === 'tabs'
+            ? TabRadioButtonSelectedElement
+            : RadioButtonElement;
+        return (_jsxs(ButtonElement, { ref: domRef, qa: qa || 'Radio', type: effectiveButtonType, theme: isInvalid ? 'danger' : 'default', size: effectiveSize, icon: icon, rightIcon: rightIcon, prefix: prefix, suffix: suffix, description: description, tooltip: tooltip, hotkeys: hotkeys, isSelected: isRadioSelected, isDisabled: isRadioDisabled, mods: mods, styles: styles, ...mergeProps(hoverProps, focusProps), children: [_jsx(HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...inputProps, ref: inputRef, form: null, mods: { button: isButton, disabled: isRadioDisabled } }), label] }));
+    }
+    // Render classic radio type
+    return (_jsxs(RadioWrapperElement, { styles: styles, ...hoverProps, ref: domRef, mods: mods, "data-type": type, children: [_jsx(HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...mergeProps(inputProps, focusProps), ref: inputRef, mods: { button: isButton } }), _jsx(RadioNormalElement, { "data-element": "Input", mods: mods, "data-type": type, children: RadioCircleElement }), label && (_jsx(RadioLabelElement, { mods: mods, styles: labelStyles, ...filterBaseProps(labelProps), children: label }))] }));
 }
 /**
  * Radio buttons allow users to select a single option from a list of mutually exclusive options.
  * All possible options are exposed up front for users to compare.
  */
 const _Radio = forwardRef(Radio);
-/**
- * Radio buttons allow users to select a single option from a list of mutually exclusive options.
- * All possible options are exposed up front for users to compare.
- */
-const _RadioButton = forwardRef(RadioButton);
+const Tabs = tasty(RadioGroup, {
+    type: 'tabs',
+});
 const ButtonGroup = tasty(RadioGroup, {
-    isSolid: true,
+    type: 'button',
 });
 const __Radio = Object.assign(_Radio, {
     Group: RadioGroup,
-    Button: _RadioButton,
+    Tabs,
     ButtonGroup,
+    Button: _Radio,
 });
 __Radio.displayName = 'Radio';
 export { __Radio as Radio };
-_RadioButton.displayName = 'RadioButton';
-export { _RadioButton as RadioButton };
 
         

package/es/components/fields/RadioGroup/RadioGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.82.1
+ * @cube-dev/ui-kit v0.83.0
  * Released under the MIT license.
  */
 
@@ -11,7 +11,7 @@ import { forwardRef } from 'react';
 import { useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
 import { useProviderProps } from '../../../provider';
-import { BLOCK_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
+import { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty';
 import { mergeProps } from '../../../utils/react';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
 import { FormContext, useFieldProps, useFormProps, wrapWithField, } from '../../form';
@@ -20,54 +20,72 @@ const RadioGroupElement = tasty({
     qa: 'RadioGroup',
     styles: {
         display: 'flex',
-        placeItems: 'start',
-        placeContent: 'start',
+        placeItems: 'stretch',
+        placeContent: 'stretch',
         flow: {
             '': 'column',
             horizontal: 'row wrap',
-            'horizontal & solid': 'row',
+            'horizontal & tabs': 'row',
         },
+        padding: {
+            '': '0',
+            tabs: '.5x',
+        },
+        radius: '1cr',
+        fill: {
+            '': '#clear',
+            'tabs | disabled': '#dark.06',
+        },
+        width: 'max-content max-content initial',
+        flexShrink: 0,
         gap: {
             '': '1x',
-            solid: 0,
+            tabs: '.5x',
         },
         whiteSpace: 'nowrap',
-        flexGrow: {
-            '': 'initial',
-            solid: 1,
-        },
     },
 });
 function RadioGroup(props, ref) {
+    let orientation = props.orientation;
     props = castNullableStringValue(props);
     props = useProviderProps(props);
     props = useFormProps(props);
     props = useFieldProps(props, { defaultValidationTrigger: 'onChange' });
-    let { isDisabled, isRequired, labelPosition = 'top', validationState, children, orientation, styles, groupStyles, insideForm, labelProps: baseLabelProps, isSolid, form, ...otherProps } = props;
+    let { isDisabled, isRequired, labelPosition = 'top', isInvalid, children, styles, groupStyles, insideForm, 
+    // orientation, // ignore orientation since it came from the form context
+    labelProps: baseLabelProps, size, buttonType, type, form, ...otherProps } = props;
     let domRef = useDOMRef(ref);
-    styles = extractStyles(otherProps, OUTER_STYLES, styles);
-    groupStyles = extractStyles(otherProps, BLOCK_STYLES, groupStyles);
+    styles = extractStyles(otherProps, CONTAINER_STYLES, styles);
     let state = useRadioGroupState(props);
+    // Set default orientation based on type
     if (orientation == null) {
-        orientation = isSolid ? 'horizontal' : 'vertical';
+        orientation =
+            type === 'button' || type === 'tabs' ? 'horizontal' : 'vertical';
     }
-    let { radioGroupProps: fieldProps, labelProps } = useRadioGroup(props, state);
-    let radioGroup = (_jsx(RadioGroupElement, { styles: groupStyles, mods: {
+    let { radioGroupProps: fieldProps, labelProps } = useRadioGroup({ ...props, orientation }, state);
+    let radioGroup = (_jsx(RadioGroupElement, { styles: styles, mods: {
             horizontal: orientation === 'horizontal',
             'inside-form': insideForm,
             'side-label': labelPosition === 'side',
-            solid: !!isSolid,
+            tabs: type === 'tabs',
         }, children: _jsx(FormContext.Provider, { value: {
                 isRequired,
-                validationState,
+                isInvalid,
                 isDisabled,
-            }, children: _jsx(RadioContext.Provider, { value: { state, name: props.name, isSolid }, children: children }) }) }));
+            }, children: _jsx(RadioContext.Provider, { value: {
+                    state,
+                    name: props.name,
+                    size,
+                    buttonType,
+                    type,
+                    isDisabled,
+                }, children: children }) }) }));
     return wrapWithField(radioGroup, domRef, {
         ...props,
         children: null,
         fieldProps,
         labelProps: mergeProps(baseLabelProps, labelProps),
-        styles,
+        styles: props.fieldStyles,
     });
 }
 /**

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

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

package/es/components/fields/RadioGroup/index.js

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

package/es/components/fields/SearchInput/SearchInput.js

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

package/es/components/fields/SearchInput/index.js

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

package/es/components/fields/Select/Select.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.82.1
+ * @cube-dev/ui-kit v0.83.0
  * Released under the MIT license.
  */
 
@@ -87,7 +87,7 @@ const OverlayElement = tasty({
         overflow: 'auto',
         background: '#white',
         radius: '1cr',
-        shadow: '0px 4px 16px #shadow',
+        shadow: true,
         padding: '.5x',
         border: true,
         boxSizing: 'border-box',

package/es/components/fields/Select/index.js

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

package/es/components/fields/Slider/Gradation.js

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

package/es/components/fields/Slider/Header.js

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

package/es/components/fields/Slider/RangeSlider.js

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

package/es/components/fields/Slider/Slider.js

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

package/es/components/fields/Slider/SliderBase.js

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

package/es/components/fields/Slider/SliderInput.js

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

package/es/components/fields/Slider/SliderThumb.js

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

package/es/components/fields/Slider/SliderTrack.js

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

package/es/components/fields/Slider/elements.js

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

package/es/components/fields/Slider/index.js

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

package/es/components/fields/Slider/types.js

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

package/es/components/fields/Switch/Switch.js

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

package/es/components/fields/Switch/index.js

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

package/es/components/fields/TextArea/TextArea.js

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

package/es/components/fields/TextArea/index.js

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

package/es/components/fields/TextInput/TextInput.js

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

package/es/components/fields/TextInput/TextInputBase.js

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

package/es/components/fields/TextInput/index.js

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

package/es/components/fields/TextInputMapper/TextInputMapper.js

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

package/es/components/fields/TextInputMapper/index.js

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

package/es/components/fields/index.js

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

package/es/components/form/FieldWrapper/FieldWrapper.js

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

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

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