@cube-dev/ui-kit 0.8.5 → 0.9.0

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

@@ -0,0 +1,42 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * 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/Button/Button';
+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));
+});
+
+        

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

@@ -0,0 +1,153 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * 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 { 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 { 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',
+    },
+    color: '#white',
+    border: false,
+    width: '5.25x 5.25x',
+    height: '3x 3x',
+    outline: {
+        '': '#purple-03.0',
+        focused: '#purple-03',
+    },
+    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, 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 = {
+        ...(insideForm ? LABEL_STYLES : INLINE_LABEL_STYLES),
+        ...labelContextStyles,
+        ...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: {
+                    checked: inputProps.checked,
+                    disabled: isDisabled,
+                    hovered: isHovered,
+                    focused: isFocused,
+                }, styles: inputStyles, children: _jsx(Base, { qa: "SwitchThumb", styles: thumbStyles, "aria-hidden": "true", mods: {
+                        checked: inputProps.checked,
+                    } }, void 0) }, void 0)] }, void 0));
+    if (insideForm) {
+        return (_jsx(FieldWrapper, { ...{
+                as: 'label',
+                labelPosition,
+                label,
+                styles,
+                labelStyles,
+                labelProps,
+                isDisabled,
+                validationState,
+                message,
+                description,
+                requiredMark,
+                tooltip,
+                Component: switchField,
+                ref: domRef,
+            } }, void 0));
+    }
+    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));
+}
+/**
+ * Switches allow users to turn an individual option on or off.
+ * They are usually used to activate or deactivate a specific setting.
+ */
+let _Switch = forwardRef(Switch);
+_Switch.cubeInputType = 'Checkbox';
+export { _Switch as Switch };
+
+        

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

@@ -0,0 +1,60 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useLayoutEffect, useRef } from 'react';
+import { TextInputBase, } from '../TextInput/TextInputBase';
+import { useControlledState } from '@react-stately/utils';
+import { useProviderProps } from '../../../provider';
+import { useTextField } from '@react-aria/textfield';
+import { chain } from '@react-aria/utils';
+import { castNullableStringValue, } from '../../../utils/react/nullableValue';
+function TextArea(props, ref) {
+    props = castNullableStringValue(props);
+    props = useProviderProps(props);
+    let { autoSize = false, isDisabled = false, isReadOnly = false, isRequired = false, onChange, rows, ...otherProps } = props;
+    rows = rows || 3;
+    let [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue, () => { });
+    let inputRef = useRef(null);
+    let onHeightChange = useCallback(() => {
+        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;
+        }
+    }, [inputRef]);
+    useLayoutEffect(() => {
+        if (inputRef.current) {
+            onHeightChange();
+        }
+    }, [onHeightChange, inputValue, inputRef]);
+    let { labelProps, inputProps } = useTextField({
+        ...props,
+        onChange: chain(onChange, setInputValue),
+        inputElementType: 'textarea',
+    }, inputRef);
+    return (_jsx(TextInputBase, { ...otherProps, ref: ref, inputRef: inputRef, labelProps: labelProps, inputProps: inputProps, multiLine: true, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, rows: rows }, 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 _TextArea = forwardRef(TextArea);
+_TextArea.cubeInputType = 'Text';
+export { _TextArea as TextArea };
+
+        

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

@@ -0,0 +1,30 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useRef } from 'react';
+import { TextInputBase } from './TextInputBase';
+import { useProviderProps } from '../../../provider';
+import { useTextField } from '@react-aria/textfield';
+import { castNullableStringValue, } from '../../../utils/react/nullableValue';
+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 };
+
+        

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

@@ -0,0 +1,164 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { WarningOutlined, CheckOutlined, LoadingOutlined, } from '@ant-design/icons';
+import { createFocusableRef } from '@react-spectrum/utils';
+import { cloneElement, forwardRef, useImperativeHandle, useRef, useState, } from 'react';
+import { useFormProps } from '../Form/Form';
+import { useHover } from '@react-aria/interactions';
+import { useProviderProps } from '../../../provider';
+import { Base } from '../../Base';
+import { extractStyles } from '../../../utils/styles';
+import { BLOCK_STYLES, POSITION_STYLES, DIMENSION_STYLES, } from '../../../styles/list';
+import { useFocus } from '../../../utils/interactions';
+import { Prefix } from '../../layout/Prefix';
+import { Suffix } from '../../layout/Suffix';
+import { useContextStyles } from '../../../providers/StylesProvider';
+import { FieldWrapper } from '../FieldWrapper';
+import { Space } from '../../layout/Space';
+import { Block } from '../../Block';
+import { mergeProps } from '../../../utils/react';
+const WRAPPER_STYLES = {
+    display: 'grid',
+    position: 'relative',
+};
+const STYLE_LIST = [...POSITION_STYLES, ...DIMENSION_STYLES];
+const INPUT_STYLE_PROPS_LIST = [...BLOCK_STYLES, 'resize'];
+export const DEFAULT_INPUT_STYLES = {
+    display: 'block',
+    width: 'initial 100% initial',
+    height: 'initial initial initial',
+    color: {
+        '': '#dark.85',
+        invalid: '#danger-text',
+        focused: '#dark.85',
+        disabled: '#dark.30',
+    },
+    fill: {
+        '': '#white',
+        disabled: '#dark.04',
+    },
+    border: {
+        '': true,
+        focused: true,
+        valid: '#success-text.50',
+        invalid: '#danger-text.50',
+        disabled: true,
+    },
+    outline: {
+        '': '#purple-03.0',
+        focused: '#purple-03',
+        'invalid & focused': '#danger.50',
+        'valid & focused': '#success.50',
+    },
+    transition: 'theme',
+    radius: true,
+    padding: {
+        '': '(1.25x - 1bw) 1x (1.25x - 1bw) (1.5x - 1bw)',
+        '[data-size="small"]': '(.75x - 1px) (1.5x - 1px)',
+    },
+    fontWeight: 400,
+    textAlign: 'left',
+    reset: 'input',
+    preset: 'default',
+    flexGrow: 1,
+    margin: 0,
+    resize: 'none',
+};
+function TextInputBase(props, ref) {
+    props = useProviderProps(props);
+    props = useFormProps(props);
+    let { qa, label, labelPosition = 'top', labelStyles, isRequired, necessityIndicator, necessityLabel, validationState, message, description, prefix, isDisabled, multiLine, autoFocus, labelProps, inputProps, wrapperProps, inputRef, isLoading, loadingIndicator, value, inputStyles = {}, wrapperStyles = {}, suffix, suffixPosition = 'before', wrapperRef, requiredMark = true, tooltip, isHidden, rows = 1, size, ...otherProps } = props;
+    let [suffixWidth, setSuffixWidth] = useState(0);
+    let [prefixWidth, setPrefixWidth] = useState(0);
+    let styles = extractStyles(otherProps, STYLE_LIST);
+    let type = otherProps.type;
+    let contextStyles = useContextStyles('Input', otherProps);
+    inputStyles = extractStyles(otherProps, INPUT_STYLE_PROPS_LIST, {
+        ...DEFAULT_INPUT_STYLES,
+        ...contextStyles,
+        ...inputStyles,
+    });
+    wrapperStyles = {
+        ...WRAPPER_STYLES,
+        ...wrapperStyles,
+    };
+    if (prefix) {
+        inputStyles.paddingLeft = `${prefixWidth}px`;
+    }
+    if (validationState || isLoading || suffix) {
+        inputStyles.paddingRight = `${suffixWidth}px`;
+    }
+    let ElementType = multiLine ? 'textarea' : 'input';
+    let { isFocused, focusProps } = useFocus({ isDisabled });
+    let { hoverProps, isHovered } = useHover({ isDisabled });
+    let domRef = useRef(null);
+    let defaultInputRef = useRef(null);
+    inputRef = inputRef || defaultInputRef;
+    // Expose imperative interface for ref
+    useImperativeHandle(ref, () => ({
+        ...createFocusableRef(domRef, inputRef),
+        select() {
+            if (inputRef?.current) {
+                inputRef.current.select();
+            }
+        },
+        getInputElement() {
+            return inputRef?.current;
+        },
+    }));
+    let isInvalid = validationState === 'invalid';
+    let validationIcon = isInvalid ? (_jsx(WarningOutlined, { style: { color: 'var(--danger-color)' } }, void 0)) : (_jsx(CheckOutlined, { style: { color: 'var(--success-color)' } }, void 0));
+    let validation = cloneElement(validationIcon);
+    suffix =
+        typeof suffix === 'string' ? (_jsx(Block, { padding: "1x right", children: suffix }, void 0)) : (suffix);
+    // Fix safari bug: https://github.com/philipwalton/flexbugs/issues/270
+    if (!inputProps?.placeholder) {
+        if (!inputProps) {
+            inputProps = {};
+        }
+        inputProps.placeholder = ' ';
+    }
+    let textField = (_jsxs(Base, { ref: wrapperRef, qa: `${qa || 'TextInput'}Wrapper`, mods: {
+            invalid: isInvalid,
+            valid: validationState === 'valid',
+            loadable: !!loadingIndicator,
+            multiline: multiLine,
+        }, "data-size": size, styles: wrapperStyles, ...wrapperProps, children: [_jsx(Base, { qa: qa || 'TextInput', as: ElementType, ...mergeProps(inputProps, focusProps, hoverProps), ref: inputRef, rows: multiLine ? rows : undefined, mods: {
+                    invalid: isInvalid,
+                    valid: validationState === 'valid',
+                    disabled: isDisabled,
+                    hovered: isHovered,
+                    focused: isFocused,
+                }, style: {
+                    WebkitTextSecurity: multiLine && type === 'password' ? 'disc' : 'initial',
+                }, autoFocus: autoFocus, "data-size": size, styles: inputStyles }, void 0), _jsx(Prefix, { padding: "0 1x 0 1.5x", onWidthChange: setPrefixWidth, opacity: isDisabled ? '@disabled-opacity' : false, placeItems: "center", children: typeof prefix === 'string' ? (_jsx(Block, { padding: "1x left", children: prefix }, void 0)) : (prefix) }, void 0), _jsxs(Suffix, { padding: ".5x left", onWidthChange: setSuffixWidth, opacity: isDisabled ? '@disabled-opacity' : false, children: [suffixPosition === 'before' ? suffix : null, (validationState && !isLoading) || isLoading ? (_jsxs(Space, { gap: false, padding: `0 ${suffix ? '1x' : '1.5x'} 0 0`, children: [validationState && !isLoading ? validation : null, isLoading && _jsx(LoadingOutlined, {}, void 0)] }, void 0)) : null, suffixPosition === 'after' ? suffix : null] }, void 0)] }, void 0));
+    return (_jsx(FieldWrapper, { ...{
+            labelPosition,
+            label,
+            styles,
+            isRequired,
+            labelStyles,
+            necessityIndicator,
+            necessityLabel,
+            labelProps,
+            isDisabled,
+            validationState,
+            message,
+            description,
+            requiredMark,
+            tooltip,
+            isHidden,
+            Component: textField,
+            ref: domRef,
+        } }, void 0));
+}
+const _TextInputBase = forwardRef(TextInputBase);
+export { _TextInputBase as TextInputBase };
+
+        

package/dist/es/components/forms/index.js

@@ -0,0 +1,22 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { TextInput } from './TextInput/TextInput';
+import { PasswordInput } from './PasswordInput/PasswordInput';
+import { NumberInput } from './NumberInput/NumberInput';
+import { FileInput } from './FileInput/FileInput';
+import { TextArea } from './TextArea/TextArea';
+const Input = Object.assign(TextInput, {
+    Text: TextInput,
+    Password: PasswordInput,
+    Number: NumberInput,
+    TextArea: TextArea,
+    File: FileInput,
+});
+export { Input, TextInput, NumberInput, TextArea, PasswordInput, FileInput };
+
+        

package/dist/es/components/layout/Flex.js

@@ -0,0 +1,23 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Base } from '../Base';
+import { CONTAINER_STYLES } from '../../styles/list';
+import { extractStyles } from '../../utils/styles';
+import { filterBaseProps } from '../../utils/filterBaseProps';
+const DEFAULT_STYLES = {
+    display: 'flex',
+    flow: 'row',
+};
+export const Flex = forwardRef((props, ref) => {
+    const styles = extractStyles(props, CONTAINER_STYLES, DEFAULT_STYLES);
+    return (_jsx(Base, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+});
+
+        

package/dist/es/components/layout/Flow.js

@@ -0,0 +1,24 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Base } from '../Base';
+import { CONTAINER_STYLES } from '../../styles/list';
+import { extractStyles } from '../../utils/styles';
+import { filterBaseProps } from '../../utils/filterBaseProps';
+const DEFAULT_STYLES = {
+    display: 'block',
+    flow: 'column',
+};
+const STYLE_PROPS = CONTAINER_STYLES;
+export const Flow = forwardRef((props, ref) => {
+    const styles = extractStyles(props, STYLE_PROPS, DEFAULT_STYLES);
+    return (_jsx(Base, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+});
+
+        

package/dist/es/components/layout/Grid.js

@@ -0,0 +1,30 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Base } from '../Base';
+import { CONTAINER_STYLES } from '../../styles/list';
+import { extractStyles } from '../../utils/styles';
+import { filterBaseProps } from '../../utils/filterBaseProps';
+const DEFAULT_STYLES = {
+    display: 'grid',
+    flow: 'row',
+    gap: '@(column-gap, 0)',
+};
+const PROP_MAP = {
+    template: 'gridTemplate',
+    columns: 'gridColumns',
+    rows: 'gridRows',
+    areas: 'gridAreas',
+};
+export const Grid = forwardRef((props, ref) => {
+    const styles = extractStyles(props, CONTAINER_STYLES, DEFAULT_STYLES, PROP_MAP);
+    return (_jsx(Base, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+});
+
+        

package/dist/es/components/layout/Prefix.js

@@ -0,0 +1,43 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect } from 'react';
+import { Base } from '../Base';
+import { CONTAINER_STYLES } from '../../styles/list';
+import { extractStyles, parseStyle } from '../../utils/styles';
+import { filterBaseProps } from '../../utils/filterBaseProps';
+import { useCombinedRefs } from '../../utils/react';
+const DEFAULT_STYLES = {
+    position: 'absolute',
+    display: 'grid',
+    placeContent: 'stretch',
+    placeItems: 'center',
+    flow: 'column',
+    gap: 0,
+    left: '@prefix-gap',
+    top: '@prefix-gap',
+    bottom: '@prefix-gap',
+    color: '#dark.75',
+    height: '(100% - (2 * @prefix-gap))',
+};
+export const Prefix = forwardRef((allProps, outerRef) => {
+    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;
+    const styles = extractStyles(props, CONTAINER_STYLES, DEFAULT_STYLES);
+    const ref = useCombinedRefs(outerRef);
+    useEffect(() => {
+        if (ref?.current && onWidthChange) {
+            onWidthChange(ref.current.offsetWidth);
+        }
+    }, [children, ref, onWidthChange]);
+    return (_jsx(Base, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref, style: {
+            // @ts-ignore
+            '--prefix-gap': parseStyle(outerGap).value,
+        }, children: children }, void 0));
+});
+
+        

package/dist/es/components/layout/Space.js

@@ -0,0 +1,32 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Base } from '../Base';
+import { CONTAINER_STYLES } from '../../styles/list';
+import { extractStyles } from '../../utils/styles';
+import { filterBaseProps } from '../../utils/filterBaseProps';
+const DEFAULT_STYLES = {
+    display: 'flex',
+    gap: true,
+};
+export const Space = forwardRef(function Space(props, ref) {
+    const flow = props.direction
+        ? props.direction === 'vertical'
+            ? 'column'
+            : 'row'
+        : props.flow || 'row';
+    const styles = extractStyles(props, CONTAINER_STYLES, {
+        ...DEFAULT_STYLES,
+        flow,
+        alignItems: flow === 'row' ? 'center' : 'stretch',
+    });
+    return (_jsx(Base, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+});
+
+        

package/dist/es/components/layout/Suffix.js

@@ -0,0 +1,42 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect } from 'react';
+import { Base } from '../Base';
+import { CONTAINER_STYLES } from '../../styles/list';
+import { extractStyles, parseStyle } from '../../utils/styles';
+import { filterBaseProps } from '../../utils/filterBaseProps';
+import { useCombinedRefs } from '../../utils/react';
+const DEFAULT_STYLES = {
+    position: 'absolute',
+    display: 'grid',
+    placeContent: 'stretch',
+    placeItems: 'center',
+    flow: 'column',
+    gap: 0,
+    right: '@suffix-gap',
+    top: '@suffix-gap',
+    bottom: '@suffix-gap',
+    color: '#dark.75',
+    height: '(100% - (2 * @suffix-gap))',
+};
+export const Suffix = forwardRef((allProps, outerRef) => {
+    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;
+    const styles = extractStyles(props, CONTAINER_STYLES, DEFAULT_STYLES);
+    const ref = useCombinedRefs(outerRef);
+    useEffect(() => {
+        if (ref && ref.current && onWidthChange) {
+            onWidthChange(ref.current.offsetWidth);
+        }
+    }, [children, ref, onWidthChange]);
+    return (_jsx(Base, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref, style: {
+            '--suffix-gap': parseStyle(outerGap).value,
+        }, children: children }, void 0));
+});
+
+