@cube-dev/ui-kit 0.56.3 → 0.58.0

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

@@ -1,41 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.56.3
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SliderThumb = SliderThumb;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_aria_1 = require("react-aria");
-const react_2 = require("../../../utils/react");
-const elements_1 = require("./elements");
-function SliderThumb(props) {
-    let { state, index, inputRef, isDisabled } = props;
-    const backupRef = (0, react_1.useRef)(null);
-    inputRef = inputRef || backupRef;
-    const { thumbProps, inputProps, isDragging, isFocused } = (0, react_aria_1.useSliderThumb)({
-        ...props,
-        inputRef,
-    }, state);
-    const { hoverProps, isHovered } = (0, react_aria_1.useHover)({ isDisabled });
-    const isCollapsed = state.values[0] === state.values[1];
-    const isStuck = state.values[index] === state.getThumbMaxValue(index) &&
-        state.values[index] === state.getThumbMinValue(index);
-    const mods = (0, react_1.useMemo)(() => {
-        return {
-            hovered: isHovered,
-            dragged: isDragging,
-            focused: !isDragging && isFocused,
-            disabled: isDisabled,
-            collapsed: isCollapsed,
-            stuck: isStuck,
-        };
-    }, [isHovered, isCollapsed, isStuck, isDragging, isFocused, isDisabled]);
-    return ((0, jsx_runtime_1.jsx)(elements_1.SliderThumbElement, { mods: mods, ...(0, react_2.mergeProps)(thumbProps, hoverProps), role: "presentation", children: (0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ref: inputRef, ...inputProps }) }) }));
-}
-
-        

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

@@ -1,31 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.56.3
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SliderTrack = SliderTrack;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const elements_1 = require("./elements");
-function SliderTrack(props) {
-    const { isDisabled, state, orientation = 'horizontal' } = props;
-    const selectedTrack = [state.getThumbPercent(0), state.getThumbPercent(1)];
-    const showRangeTrack = !Number.isNaN(selectedTrack[1]);
-    const mods = (0, react_1.useMemo)(() => ({
-        disabled: isDisabled,
-        horizontal: orientation === 'horizontal',
-        range: showRangeTrack,
-    }), [isDisabled, showRangeTrack]);
-    return ((0, jsx_runtime_1.jsx)(elements_1.SliderTrackContainerElement, { mods: mods, style: showRangeTrack
-            ? {
-                '--slider-range-start': `${selectedTrack[0] * 100}%`,
-                '--slider-range-end': `${selectedTrack[1] * 100}%`,
-            }
-            : {} }));
-}
-
-        

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

@@ -1,145 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.56.3
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SliderElement = exports.SliderControlsElement = exports.SliderGradeElement = exports.SliderGradationElement = exports.SliderTrackContainerElement = exports.SliderThumbElement = void 0;
-const tasty_1 = require("../../../tasty");
-exports.SliderThumbElement = (0, tasty_1.tasty)({
-    styles: {
-        top: '@slider-thumb-offset-top',
-        left: '@slider-thumb-offset-left',
-        width: '2x',
-        height: '2x',
-        fill: {
-            '': '#purple',
-            hovered: '#purple-text',
-            dragged: '#purple',
-            disabled: '#dark-04',
-        },
-        cursor: 'pointer',
-        boxShadow: '@focus-shadow, @dragged-shadow, @drop-shadow',
-        radius: '50%',
-        transition: 'theme',
-        zIndex: {
-            '': 0,
-            'collapsed & !stuck': 1,
-        },
-        '@drop-shadow': '0px 2px 4px #dark.2',
-        '@focus-shadow': {
-            '': '0 0 0 0 #purple-03.80',
-            focused: '0 0 0 3px #purple-03.80',
-        },
-        '@dragged-shadow': {
-            '': 'inset 0 0 0 0 #purple-text',
-            dragged: 'inset 0 0 0 2px #purple-text',
-        },
-    },
-});
-exports.SliderTrackContainerElement = (0, tasty_1.tasty)({
-    styles: {
-        top: {
-            '': '0',
-            horizontal: '0.875x',
-        },
-        left: {
-            '': '0.875x',
-            horizontal: '0',
-        },
-        position: 'absolute',
-        fill: '#dark-05',
-        height: {
-            '': 'initial 10x 100%',
-            horizontal: '2px',
-        },
-        width: {
-            '': '2px',
-            horizontal: '100%',
-        },
-        radius: true,
-        '&::before': {
-            content: '""',
-            display: {
-                '': 'none',
-                range: 'block',
-            },
-            position: 'absolute',
-            top: 0,
-            bottom: 0,
-            fill: '#purple',
-            left: '@slider-range-start',
-            width: '(@slider-range-end - @slider-range-start)',
-        },
-    },
-});
-exports.SliderGradationElement = (0, tasty_1.tasty)({
-    styles: {
-        position: 'absolute',
-        top: '2x',
-        left: 0,
-        right: 0,
-        display: 'flex',
-        placeContent: 'space-between',
-    },
-});
-exports.SliderGradeElement = (0, tasty_1.tasty)({
-    styles: {
-        display: 'grid',
-        width: 'max 0',
-        placeContent: 'center',
-        preset: 'c2',
-        color: '#dark-03',
-    },
-});
-exports.SliderControlsElement = (0, tasty_1.tasty)({
-    styles: {
-        position: 'relative',
-        height: {
-            '': 'initial 8x 100%',
-            horizontal: '2x',
-        },
-        width: {
-            '': '2x',
-            horizontal: '100% - 2x',
-        },
-        '@slider-thumb-offset-top': {
-            '': '0',
-            horizontal: '1x',
-        },
-        '@slider-thumb-offset-left': {
-            '': '1x',
-            horizontal: '0',
-        },
-    },
-});
-exports.SliderElement = (0, tasty_1.tasty)({
-    qa: 'RangeSlider',
-    as: 'section',
-    styles: {
-        display: 'inline-flex',
-        verticalAlign: {
-            '': 'middle',
-            'side-label & !horizontal': 'top',
-        },
-        position: 'relative',
-        height: {
-            '': 'initial 10x 100%',
-            horizontal: '2x',
-        },
-        width: {
-            '': '2x',
-            horizontal: '100%',
-        },
-        alignItems: 'center',
-        flexDirection: {
-            '': 'column',
-            inputs: 'row',
-        },
-    },
-});
-
-        

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

@@ -1,31 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.56.3
- * Released under the MIT license.
- */
-
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSliderState = void 0;
-__exportStar(require("./RangeSlider"), exports);
-__exportStar(require("./Slider"), exports);
-__exportStar(require("./types"), exports);
-var react_stately_1 = require("react-stately");
-Object.defineProperty(exports, "useSliderState", { enumerable: true, get: function () { return react_stately_1.useSliderState; } });
-
-        

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

@@ -1,11 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.56.3
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-
-        

package/cjs/components/fields/Switch/Switch.js

@@ -1,152 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.56.3
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSwitch = exports.Switch = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const utils_1 = require("@react-spectrum/utils");
-const react_aria_1 = require("react-aria");
-Object.defineProperty(exports, "useSwitch", { enumerable: true, get: function () { return react_aria_1.useSwitch; } });
-const react_stately_1 = require("react-stately");
-const provider_1 = require("../../../provider");
-const tasty_1 = require("../../../tasty");
-const interactions_1 = require("../../../utils/react/interactions");
-const react_2 = require("../../../utils/react");
-const HiddenInput_1 = require("../../HiddenInput");
-const Text_1 = require("../../content/Text");
-const nullableValue_1 = require("../../../utils/react/nullableValue");
-const form_1 = require("../../form");
-const icons_1 = require("../../../icons");
-const SwitchWrapperElement = (0, tasty_1.tasty)({
-    qa: 'SwitchWrapper',
-    styles: {
-        display: 'flex',
-        position: 'relative',
-        placeItems: {
-            '': 'center stretch',
-            'side-label': 'baseline stretch',
-        },
-        gap: '1x',
-        width: 'max max-content',
-        color: '#dark-02',
-    },
-});
-const SwitchElement = (0, tasty_1.tasty)({
-    qa: 'Switch',
-    styles: {
-        position: 'relative',
-        verticalAlign: 'baseline',
-        placeSelf: 'center',
-        radius: 'round',
-        fill: {
-            '': '#dark.50',
-            checked: '#purple',
-            disabled: '#dark.12',
-        },
-        color: '#white',
-        border: false,
-        width: {
-            '': '5.25x 5.25x',
-            '[data-size="small"]': '3.5x 3.5x',
-        },
-        height: {
-            '': '3x 3x',
-            '[data-size="small"]': '2x 2x',
-        },
-        outline: {
-            '': '#purple-03.0',
-            focused: '#purple-03',
-        },
-        transition: 'theme',
-        cursor: 'pointer',
-        shadow: {
-            '': '0 0 0 0 #clear',
-            invalid: '0 0 0 1bw #white, 0 0 0 1ow #danger',
-        },
-        Thumb: {
-            position: 'absolute',
-            width: {
-                '': '2.5x 2.5x',
-                '[data-size="small"]': '1.5x 1.5x',
-            },
-            height: {
-                '': '2.5x 2.5x',
-                '[data-size="small"]': '1.5x 1.5x',
-            },
-            radius: 'round',
-            fill: {
-                '': 'currentColor',
-                disabled: '#white.5',
-            },
-            shadow: '0px 2px 4px #dark.20;',
-            top: '.25x',
-            left: {
-                '': '.25x',
-                checked: '2.5x',
-                'checked & [data-size="small"]': '1.75x',
-            },
-            transition: 'left, theme',
-            cursor: 'pointer',
-        },
-    },
-});
-function Switch(props, ref) {
-    props = (0, nullableValue_1.castNullableIsSelected)(props);
-    props = (0, provider_1.useProviderProps)(props);
-    props = (0, form_1.useFormProps)(props);
-    props = (0, form_1.useFieldProps)(props, {
-        defaultValidationTrigger: 'onChange',
-        valuePropsMapper: ({ value, onChange }) => ({
-            isSelected: value != null ? value : false,
-            isIndeterminate: false,
-            onChange: onChange,
-        }),
-    });
-    let { qa, isDisabled = false, children, label, labelStyles, insideForm, isLoading, labelPosition, inputStyles, validationState, size = 'large', } = props;
-    let styles = (0, tasty_1.extractStyles)(props, tasty_1.OUTER_STYLES);
-    inputStyles = (0, tasty_1.extractStyles)(props, tasty_1.BLOCK_STYLES, inputStyles);
-    let { isFocused, focusProps } = (0, interactions_1.useFocus)({ isDisabled }, true);
-    let { hoverProps, isHovered } = (0, react_aria_1.useHover)({ isDisabled });
-    let inputRef = (0, react_1.useRef)(null);
-    let domRef = (0, utils_1.useFocusableRef)(ref, inputRef);
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    let { inputProps } = (0, react_aria_1.useSwitch)({
-        ...props,
-        ...(typeof label === 'string' && label.trim()
-            ? { 'aria-label': label }
-            : {}),
-    }, (0, react_stately_1.useToggleState)(props), inputRef);
-    const mods = {
-        checked: inputProps.checked,
-        disabled: isDisabled,
-        hovered: isHovered,
-        focused: isFocused,
-        invalid: validationState === 'invalid',
-        valid: validationState === 'valid',
-        'inside-form': insideForm,
-        'side-label': labelPosition === 'side',
-    };
-    const switchField = ((0, jsx_runtime_1.jsxs)(SwitchWrapperElement, { mods: mods, "data-size": size, ...hoverProps, children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": "HiddenInput", ...(0, react_2.mergeProps)(inputProps, focusProps), ref: inputRef }), (0, jsx_runtime_1.jsx)(SwitchElement, { qa: qa || 'Switch', mods: mods, "data-size": size, styles: inputStyles, children: (0, jsx_runtime_1.jsx)("div", { "data-element": "Thumb", "aria-hidden": "true" }) }), children ? (0, jsx_runtime_1.jsx)(Text_1.Text, { nowrap: true, children: children }) : null, isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "\u00A0" }) : null, (0, jsx_runtime_1.jsx)(icons_1.LoadingIcon, {})] })) : null] }));
-    return (0, form_1.wrapWithField)(switchField, domRef, {
-        ...props,
-        children: null,
-        labelStyles,
-        inputStyles,
-        styles,
-    });
-}
-/**
- * Switches allow users to turn an individual option on or off.
- * They are usually used to activate or deactivate a specific setting.
- */
-let _Switch = (0, react_1.forwardRef)(Switch);
-exports.Switch = _Switch;
-_Switch.cubeInputType = 'Checkbox';
-
-        

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

@@ -1,26 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.56.3
- * Released under the MIT license.
- */
-
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Switch"), exports);
-
-        

package/cjs/components/fields/TextArea/TextArea.js

@@ -1,71 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.56.3
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextArea = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const utils_1 = require("@react-stately/utils");
-const react_aria_1 = require("react-aria");
-const TextInput_1 = require("../TextInput");
-const provider_1 = require("../../../provider");
-const nullableValue_1 = require("../../../utils/react/nullableValue");
-const react_2 = require("../../../utils/react");
-const form_1 = require("../../form");
-const _internal_1 = require("../../../_internal");
-function TextArea(props, ref) {
-    props = (0, nullableValue_1.castNullableStringValue)(props);
-    props = (0, provider_1.useProviderProps)(props);
-    props = (0, form_1.useFieldProps)(props, {
-        defaultValidationTrigger: 'onBlur',
-        valuePropsMapper: ({ value, onChange }) => ({
-            onChange,
-            value: value?.toString() ?? '',
-        }),
-    });
-    let { autoSize = false, isDisabled = false, isReadOnly = false, isRequired = false, onChange, rows = 3, ...otherProps } = props;
-    let [inputValue, setInputValue] = (0, utils_1.useControlledState)(props.value, props.defaultValue, () => { });
-    let inputRef = (0, react_1.useRef)(null);
-    let onHeightChange = (0, _internal_1.useEvent)(() => {
-        if (autoSize && inputRef.current) {
-            let input = inputRef.current;
-            let prevAlignment = input.style.alignSelf;
-            let computedStyle = getComputedStyle(input);
-            input.style.alignSelf = 'start';
-            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`;
-            input.style.alignSelf = prevAlignment;
-        }
-    });
-    (0, react_2.useLayoutEffect)(() => {
-        if (inputRef.current) {
-            onHeightChange();
-        }
-    }, [inputValue, inputRef.current]);
-    let { labelProps, inputProps } = (0, react_aria_1.useTextField)({
-        ...props,
-        onChange: (0, react_2.chain)(onChange, setInputValue),
-        inputElementType: 'textarea',
-    }, inputRef);
-    return ((0, jsx_runtime_1.jsx)(TextInput_1.TextInputBase, { ref: ref, ...otherProps, multiLine: true, inputRef: inputRef, labelProps: labelProps, inputProps: inputProps, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, rows: rows }));
-}
-/**
- * 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 _TextArea = (0, react_1.forwardRef)(TextArea);
-exports.TextArea = _TextArea;
-_TextArea.cubeInputType = 'Text';
-
-        

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

@@ -1,26 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.56.3
- * Released under the MIT license.
- */
-
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./TextArea"), exports);
-
-        

package/cjs/components/fields/TextInput/TextInput.js

@@ -1,40 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.56.3
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextInput = exports.useTextField = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_aria_1 = require("react-aria");
-Object.defineProperty(exports, "useTextField", { enumerable: true, get: function () { return react_aria_1.useTextField; } });
-const provider_1 = require("../../../provider");
-const nullableValue_1 = require("../../../utils/react/nullableValue");
-const form_1 = require("../../form");
-const TextInputBase_1 = require("./TextInputBase");
-exports.TextInput = (0, react_1.forwardRef)(function TextInput(props, ref) {
-    props = (0, nullableValue_1.castNullableStringValue)(props);
-    props = (0, provider_1.useProviderProps)(props);
-    props = (0, form_1.useFieldProps)(props, {
-        defaultValidationTrigger: 'onBlur',
-        valuePropsMapper: ({ value, onChange }) => ({
-            onChange,
-            value: value?.toString() ?? '',
-        }),
-    });
-    let inputRef = (0, react_1.useRef)(null);
-    let { labelProps, inputProps } = (0, react_aria_1.useTextField)(props, inputRef);
-    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ...props, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef }));
-});
-/**
- * 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.
- */
-exports.TextInput.cubeInputType = 'Text';
-
-