@cube-dev/ui-kit 0.9.5 → 0.9.8

package/es/components/forms/Form/validation.js

@@ -0,0 +1,141 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * Released under the MIT license.
+ */
+
+import validUrl from 'valid-url';
+import { validate as validateEmail } from 'email-validator';
+const TYPE_CHECKERS = {
+    string(v) {
+        return typeof v === 'string';
+    },
+    number(v) {
+        return typeof v === 'number';
+    },
+    boolean(v) {
+        return typeof v === 'boolean';
+    },
+    method(v) {
+        return typeof v === 'function';
+    },
+    regexp(v) {
+        return v instanceof RegExp;
+    },
+    integer(v) {
+        return typeof v === 'number' && v === parseInt(String(v), 10);
+    },
+    array(v) {
+        return Array.isArray(v);
+    },
+    object(v) {
+        return typeof v === 'object' && !Array.isArray(v);
+    },
+    date(v) {
+        return v instanceof Date;
+    },
+    url(v) {
+        return typeof v === 'string' && validUrl.isUri(v);
+    },
+    hex(v) {
+        return typeof v === 'string' && v.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/);
+    },
+    email(v) {
+        return validateEmail(v);
+    },
+    any(v) {
+        return true;
+    },
+};
+const TYPE_LIST = Object.keys(TYPE_CHECKERS);
+const VALIDATORS = {
+    async required(value) {
+        if (Array.isArray(value)) {
+            return !!value.length ? Promise.resolve() : Promise.reject();
+        }
+        return !!value || value === 0 ? Promise.resolve() : Promise.reject();
+    },
+    async whitespace(value) {
+        if (typeof value !== 'string' || value.trim())
+            return Promise.resolve();
+        return Promise.reject();
+    },
+    async pattern(value, rule) {
+        const pattern = rule.pattern;
+        if (typeof value !== 'string')
+            return Promise.resolve();
+        return value.match(pattern) ? Promise.resolve() : Promise.reject();
+    },
+    async enum(value, rule) {
+        const options = rule.enum || [];
+        if (!value && value !== 0)
+            return Promise.resolve();
+        return options.includes(value) ? Promise.resolve() : Promise.reject();
+    },
+    async len(value, rule) {
+        const len = rule.len;
+        if (typeof value === 'number') {
+            return value === len ? Promise.resolve() : Promise.reject();
+        }
+        if (!value || !('length' in value))
+            return Promise.resolve();
+        return value.length === len ? Promise.resolve() : Promise.reject();
+    },
+    async max(value, rule) {
+        const max = rule.max;
+        if (typeof value === 'number') {
+            return value <= max ? Promise.resolve() : Promise.reject();
+        }
+        if (!value || (typeof value !== 'string' && !Array.isArray(value)))
+            return Promise.resolve();
+        return value.length <= max ? Promise.resolve() : Promise.reject();
+    },
+    async min(value, rule) {
+        const min = rule.min;
+        if (typeof value === 'number') {
+            return value >= min ? Promise.resolve() : Promise.reject();
+        }
+        if (!value || (typeof value !== 'string' && !Array.isArray(value)))
+            return Promise.resolve();
+        return value.length >= min ? Promise.resolve() : Promise.reject();
+    },
+    async validator(value, rule) {
+        return rule.validator(rule, value);
+    },
+    async type(value, rule) {
+        const type = rule.type;
+        if (!TYPE_LIST.includes(type))
+            return Promise.resolve();
+        return TYPE_CHECKERS[type](value) ? Promise.resolve() : Promise.reject();
+    },
+};
+const VALIDATOR_NAMES = Object.keys(VALIDATORS);
+export async function applyRule(value, rule, form) {
+    if (typeof rule === 'function') {
+        rule = rule(form);
+    }
+    if (typeof rule.transform === 'function') {
+        value = rule.transform(value);
+    }
+    for (let validatorName of VALIDATOR_NAMES) {
+        if (!(validatorName in rule))
+            continue;
+        const checker = VALIDATORS[validatorName];
+        await checker(value, rule);
+    }
+}
+export async function applyRules(value, rules, form) {
+    if (!rules || !rules.length)
+        return;
+    for (let rule of rules) {
+        await applyRule(value, rule, form).catch((err) => {
+            if (typeof err !== 'string') {
+                err = (err === null || err === void 0 ? void 0 : err.message) || rule.message;
+            }
+            throw err;
+        });
+    }
+}
+
+        

package/es/components/forms/Label.js

@@ -0,0 +1,87 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDOMRef } from '@react-spectrum/utils';
+import { forwardRef } from 'react';
+import { useProviderProps } from '../../provider';
+import { extractStyles } from '../../utils/styles';
+import { CONTAINER_STYLES } from '../../styles/list';
+import { Base } from '../Base';
+import { useContextStyles } from '../../providers/StylesProvider';
+import { filterBaseProps } from '../../utils/filterBaseProps';
+const REQUIRED_ICON = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", x: "0px", y: "0px", viewBox: "0 0 100 125", style: {
+        // @ts-ignore
+        enableBackground: 'new 0 0 100 100',
+        width: '.8em',
+        height: '.8em',
+        transform: 'rotate(-5deg)',
+    }, children: _jsx("switch", { children: _jsx("g", { children: _jsx("polygon", { fill: "currentColor", points: "97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57" }, void 0) }, void 0) }, void 0) }, void 0));
+const INTL_MESSAGES = {
+    '(required)': '(required)',
+    '(optional)': '(optional)',
+};
+export const INLINE_LABEL_STYLES = {
+    fontWeight: 400,
+    preset: 'default',
+    color: {
+        '': '#dark.85',
+        invalid: '#danger-text',
+        disabled: '#dark.30',
+    },
+    whiteSpace: 'nowrap',
+};
+export const LABEL_STYLES = {
+    display: 'block',
+    fontWeight: 600,
+    preset: 'default',
+    padding: {
+        '': '0',
+        side: '(1x - 1bw) top',
+    },
+    color: {
+        '': '#dark',
+        invalid: '#danger-text',
+        disabled: '#dark.30',
+    },
+    whiteSpace: 'nowrap',
+    width: {
+        '': 'initial',
+        side: '@(label-width, initial)',
+    },
+};
+function Label(props, ref) {
+    props = useProviderProps(props);
+    let { as, qa, children, labelPosition = 'top', isRequired, necessityIndicator = isRequired != null ? 'icon' : null, includeNecessityIndicatorInAccessibilityName = false, htmlFor, isDisabled, validationState, for: labelFor, onClick, ...otherProps } = props;
+    let domRef = useDOMRef(ref);
+    const contextStyles = useContextStyles('Label', otherProps);
+    const styles = extractStyles(otherProps, CONTAINER_STYLES, {
+        ...LABEL_STYLES,
+        ...contextStyles,
+    });
+    let formatMessage = (message) => INTL_MESSAGES[message];
+    let necessityLabel = isRequired
+        ? formatMessage('(required)')
+        : formatMessage('(optional)');
+    let icon = (_jsx("span", { "aria-label": includeNecessityIndicatorInAccessibilityName
+            ? formatMessage('(required)')
+            : undefined, children: REQUIRED_ICON }, void 0));
+    return (_jsx(Base, { as: as || 'label', qa: qa || 'Label', ...filterBaseProps(otherProps), onClick: onClick, ref: domRef, styles: styles, htmlFor: labelFor || htmlFor, mods: {
+            side: labelPosition === 'side',
+            disabled: isDisabled,
+            invalid: validationState === 'invalid',
+            valid: validationState === 'valid',
+        }, children: typeof children !== 'string' ? (children) : (_jsxs(_Fragment, { children: [children, (necessityIndicator === 'label'
+                    || (necessityIndicator === 'icon' && isRequired))
+                    && ' \u200b', necessityIndicator === 'label' && (_jsx("span", { "aria-hidden": !includeNecessityIndicatorInAccessibilityName
+                        ? isRequired
+                        : undefined, children: necessityLabel }, void 0)), necessityIndicator === 'icon' && isRequired && icon] }, void 0)) }, void 0));
+}
+let _Label = forwardRef(Label);
+export { _Label as Label };
+
+        

package/es/components/forms/NumberInput/NumberInput.js

@@ -0,0 +1,47 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef } from 'react';
+import { useFormProps } from '../Form/Form';
+import { useProviderProps } from '../../../provider';
+import { useLocale } from '@react-aria/i18n';
+import { TextInputBase, } from '../TextInput/TextInputBase';
+import { useNumberFieldState } from '@react-stately/numberfield';
+import { useNumberField } from '@react-aria/numberfield';
+import { StepButton } from './StepButton';
+import { styled } from '../../../styled';
+import { castNullableNumberValue, } from '../../../utils/react/nullableValue';
+const StepperContainer = styled({
+    styles: {
+        display: 'grid',
+        gridColumns: '1fr',
+        gridRows: 'minmax(1px, 1fr) minmax(1px, 1fr)',
+        flow: 'column',
+        placeSelf: 'stretch',
+    },
+});
+function NumberInput(props, ref) {
+    props = castNullableNumberValue(props);
+    props = useProviderProps(props);
+    props = useFormProps(props);
+    let { hideStepper, value, defaultValue, onChange, ...otherProps } = props;
+    let showStepper = !hideStepper;
+    let { locale } = useLocale();
+    let state = useNumberFieldState({ ...props, locale });
+    let inputRef = useRef(null);
+    let { groupProps, labelProps, inputProps, incrementButtonProps, decrementButtonProps, } = useNumberField(props, state, inputRef);
+    return (_jsx(TextInputBase, { ...otherProps, labelProps: labelProps, inputProps: inputProps, ref: ref, inputRef: inputRef, wrapperProps: groupProps, suffixPosition: "after", suffix: showStepper ? (_jsxs(StepperContainer, { children: [_jsx(StepButton, { direction: "up", ...incrementButtonProps }, void 0), _jsx(StepButton, { direction: "down", ...decrementButtonProps }, void 0)] }, void 0)) : null }, void 0));
+}
+/**
+ * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.
+ */
+const _NumberInput = forwardRef(NumberInput);
+_NumberInput.cubeInputType = 'Number';
+export { _NumberInput as NumberInput };
+
+        

package/es/components/forms/NumberInput/StepButton.js

@@ -0,0 +1,31 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '../../actions';
+import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
+const STEP_BUTTON_STYLES = {
+    padding: '0 .5x',
+    radius: {
+        '': '0 (1r - 1bw) 0 0',
+        down: '0 0 (1r - 1bw) 0',
+    },
+    preset: 't4',
+    lineHeight: '1em',
+    height: 'auto',
+};
+/**
+ * Buttons for NumberField.
+ */
+export function StepButton(props) {
+    return (_jsx(Button, { type: "neutral", styles: STEP_BUTTON_STYLES, preventDefault: true, icon: props.direction === 'up' ? _jsx(CaretUpOutlined, {}, void 0) : _jsx(CaretDownOutlined, {}, void 0), mods: {
+            up: props.direction === 'up',
+            down: props.direction === 'down',
+        }, label: `Step ${props.direction}`, ...props }, void 0));
+}
+
+        

package/es/components/forms/PasswordInput/PasswordInput.js

@@ -0,0 +1,40 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useRef, useState } from 'react';
+import { TextInputBase, } from '../TextInput/TextInputBase';
+import { useProviderProps } from '../../../provider';
+import { useTextField } from '@react-aria/textfield';
+import { Button } from '../../actions';
+import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
+import { castNullableStringValue, } from '../../../utils/react/nullableValue';
+function PasswordInput(props, ref) {
+    props = castNullableStringValue(props);
+    let { suffix, multiLine, ...otherProps } = useProviderProps({ ...props });
+    let [type, setType] = useState('password');
+    let inputRef = useRef(null);
+    let { labelProps, inputProps } = useTextField({
+        ...otherProps,
+        type,
+    }, inputRef);
+    const toggleType = useCallback((e) => {
+        setType((type) => (type === 'password' ? 'text' : 'password'));
+    }, []);
+    const wrappedSuffix = (_jsxs(_Fragment, { children: [suffix, _jsx(Button, { type: "neutral", htmlType: "button", onPress: toggleType, placeSelf: "stretch", height: "auto", radius: "right (1r - 1bw)", padding: ".5x 1x", width: "auto", label: "Toggle masking", excludeFromTabOrder: true, icon: type === 'password' ? _jsx(EyeInvisibleOutlined, {}, void 0) : _jsx(EyeOutlined, {}, void 0) }, void 0)] }, void 0));
+    return (_jsx(TextInputBase, { labelProps: labelProps, inputProps: inputProps, ref: ref, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...otherProps }, void 0));
+}
+/**
+ * PasswordInputs are password inputs that allow users to input passwords or code entries
+ * with a keyboard. Various decorations can be displayed around the field to
+ * communicate the entry requirements.
+ */
+const _PasswordInput = forwardRef(PasswordInput);
+_PasswordInput.cubeInputType = 'Text';
+export { _PasswordInput as PasswordInput };
+
+        

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

@@ -0,0 +1,178 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFocusableRef } from '@react-spectrum/utils';
+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 { 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',
+    },
+    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',
+    },
+    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, {
+        ...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();
+    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 });
+    let inputRef = useRef(null);
+    let domRef = useFocusableRef(ref, inputRef);
+    let { inputProps } = useRadio({
+        ...props,
+        isDisabled,
+    }, state, inputRef);
+    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(Base, { 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: {
+                    invalid: validationState === 'invalid',
+                    valid: validationState === 'valid',
+                    disabled: isDisabled,
+                }, ...filterBaseProps(labelProps), children: label }, void 0))] }, void 0));
+}
+function RadioButton(props, ref) {
+    const Radio = _Radio;
+    return _jsx(Radio, { ...props, type: "button", ref: ref }, void 0);
+}
+/**
+ * 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 __Radio = Object.assign(_Radio, {
+    Group: RadioGroup,
+    Button: _RadioButton,
+});
+export { __Radio as Radio };
+export { _RadioButton as RadioButton };
+
+        

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

@@ -0,0 +1,97 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * 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 { FieldWrapper } from '../FieldWrapper';
+import { castNullableStringValue, } from '../../../utils/react/nullableValue';
+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, 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,
+    };
+    let state = useRadioGroupState(props);
+    let { radioGroupProps: fieldProps, labelProps } = useRadioGroup(props, state);
+    let radioGroup = (_jsx(Base, { qa: "RadioGroup", styles: groupStyles, mods: {
+            horizontal: orientation === 'horizontal',
+        }, children: _jsx(FormContext.Provider, { value: {
+                isRequired,
+                validationState,
+                isDisabled,
+            }, children: _jsx(RadioContext.Provider, { value: state, children: children }, void 0) }, void 0) }, void 0));
+    return (_jsx(FieldWrapper, { ...{
+            labelPosition,
+            label,
+            styles,
+            isRequired,
+            labelStyles,
+            necessityIndicator,
+            labelProps,
+            fieldProps,
+            isDisabled,
+            validationState,
+            message,
+            description,
+            requiredMark,
+            tooltip,
+            isHidden,
+            Component: radioGroup,
+            ref: domRef,
+        } }, void 0));
+}
+/**
+ * Radio groups 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 _RadioGroup = forwardRef(RadioGroup);
+_RadioGroup.cubeInputType = 'RadioGroup';
+export { _RadioGroup as RadioGroup };
+
+        

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

@@ -0,0 +1,14 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * Released under the MIT license.
+ */
+
+import { createContext, useContext } from 'react';
+export const RadioContext = createContext(null);
+export function useRadioProvider() {
+    return useContext(RadioContext);
+}
+
+        

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

@@ -0,0 +1,42 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef } from 'react';
+import { CloseOutlined, SearchOutlined } from '@ant-design/icons';
+import { useSearchFieldState } from '@react-stately/searchfield';
+import { useSearchField } from '@react-aria/searchfield';
+import { useCombinedRefs } from '../../../utils/react';
+import { TextInputBase, } from '../TextInput/TextInputBase';
+import { useProviderProps } from '../../../provider';
+import { Button } from '../../actions';
+import { ariaToCubeButtonProps } from '../../../utils/react/mapProps';
+import { castNullableStringValue, } from '../../../utils/react/nullableValue';
+export const SearchInput = forwardRef((props, ref) => {
+    props = castNullableStringValue(props);
+    props = useProviderProps(props);
+    let { isClearable, value } = props;
+    const localRef = useRef(null);
+    const combinedRef = useCombinedRefs(ref, localRef);
+    let inputRef = useRef(null);
+    useEffect(() => {
+        const el = combinedRef && combinedRef.current;
+        if (el && value != null && el.value !== value) {
+            el.value = value;
+        }
+    }, [combinedRef, value]);
+    let state = useSearchFieldState(props);
+    let { inputProps, clearButtonProps } = useSearchField(props, state, inputRef);
+    return (_jsx(TextInputBase, { inputProps: inputProps, ref: ref, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: "search", prefix: _jsx(SearchOutlined, {}, void 0), suffixPosition: "after", suffix: isClearable &&
+            state.value !== '' &&
+            !props.isReadOnly && (_jsx(Button, { type: "clear", ...ariaToCubeButtonProps(clearButtonProps), color: {
+                '': '#dark.50',
+                'hovered | pressed': '#purple-text',
+            }, radius: "right (1r - 1bw)", padding: ".5x 1x", placeSelf: "stretch", icon: _jsx(CloseOutlined, {}, void 0) }, void 0)), ...props }, void 0));
+});
+
+