@cube-dev/ui-kit 0.45.0 → 0.46.1

package/cjs/components/form/wrapper.js

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

package/cjs/components/layout/Flex.js

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

package/cjs/components/layout/Flow.js

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

package/cjs/components/layout/Grid.js

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

package/cjs/components/layout/Panel.js

@@ -0,0 +1,109 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.46.1
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Panel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const tasty_1 = require("../../tasty");
+const PanelElement = (0, tasty_1.tasty)({
+    as: 'section',
+    qa: 'Panel',
+    styles: {
+        position: {
+            '': 'relative',
+            'stretched | floating': 'absolute',
+        },
+        inset: {
+            '': 'initial',
+            stretched: true,
+        },
+        display: 'block',
+        radius: {
+            '': '0',
+            card: '1r',
+        },
+        border: {
+            '': '0',
+            card: '1bw',
+        },
+        flexGrow: 1,
+    },
+});
+const PanelInnerElement = (0, tasty_1.tasty)({
+    styles: {
+        position: 'absolute',
+        display: {
+            '': 'grid',
+            flex: 'flex',
+        },
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        overflow: 'auto',
+        styledScrollbar: true,
+        gridColumns: 'minmax(100%, 100%)',
+        gridRows: {
+            '': 'initial',
+            stretched: 'minmax(0, 1fr)',
+        },
+        radius: {
+            '': '0',
+            card: '(1r - 1bw)',
+        },
+        flow: 'row',
+        placeContent: 'start stretch',
+    },
+    styleProps: [...tasty_1.OUTER_STYLES, ...tasty_1.BASE_STYLES, ...tasty_1.COLOR_STYLES],
+});
+const STYLES = [
+    'placeContent',
+    'placeItems',
+    'gridColumns',
+    'gridRows',
+    'flow',
+    'gap',
+    'padding',
+    'overflow',
+    'fill',
+    'color',
+    'preset',
+];
+function Panel(props, ref) {
+    let { qa, mods, isStretched, isFloating, isCard, isFlex, styles, innerStyles, children, extra, style, ...otherProps } = props;
+    STYLES.forEach((style) => {
+        if (props[style]) {
+            innerStyles = { ...innerStyles, [style]: props[style] };
+        }
+    });
+    [
+        ...tasty_1.OUTER_STYLES,
+        ...tasty_1.BASE_STYLES,
+        ...tasty_1.BLOCK_STYLES,
+        ...tasty_1.COLOR_STYLES,
+        ...tasty_1.DIMENSION_STYLES,
+    ].forEach((style) => {
+        if (style in props) {
+            styles = { ...styles, [style]: props[style] };
+        }
+    });
+    const appliedMods = (0, react_1.useMemo)(() => ({
+        floating: isFloating,
+        stretched: isStretched,
+        card: isCard,
+        flex: isFlex,
+        ...mods,
+    }), [isStretched, isCard, mods]);
+    return ((0, jsx_runtime_1.jsxs)(PanelElement, { ref: ref, qa: qa, mods: appliedMods, styles: styles, style: style, ...otherProps, children: [(0, jsx_runtime_1.jsx)(PanelInnerElement, { mods: appliedMods, styles: innerStyles, children: children }), extra] }));
+}
+const _Panel = (0, react_1.forwardRef)(Panel);
+exports.Panel = _Panel;
+_Panel.displayName = 'Panel';
+
+        

package/cjs/components/layout/Prefix.js

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

package/cjs/components/layout/ResizablePanel.js

@@ -0,0 +1,208 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.46.1
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResizablePanel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_aria_1 = require("react-aria");
+const index_1 = require("../../tasty/index");
+const index_2 = require("../../utils/react/index");
+const Panel_1 = require("./Panel");
+const HandlerElement = (0, index_1.tasty)({
+    styles: {
+        // The real size is slightly bigger than the visual one.
+        width: {
+            '': 'auto',
+            horizontal: '9px',
+        },
+        height: {
+            '': '9px',
+            horizontal: 'auto',
+        },
+        top: {
+            '': 'initial',
+            horizontal: 0,
+            '[data-direction="top"]': -2,
+        },
+        bottom: {
+            '': 'initial',
+            horizontal: 0,
+            '[data-direction="bottom"]': -2,
+        },
+        right: {
+            '': 0,
+            horizontal: 'initial',
+            '[data-direction="right"]': -2,
+        },
+        left: {
+            '': 0,
+            horizontal: 'initial',
+            '[data-direction="left"]': -2,
+        },
+        position: 'absolute',
+        zIndex: 1,
+        cursor: {
+            '': 'col-resize',
+            disabled: 'not-allowed',
+        },
+        fill: {
+            '': '#clear',
+            drag: '#purple-02',
+        },
+        padding: 0,
+        boxSizing: 'border-box',
+        transition: 'theme',
+        Track: {
+            width: {
+                '': 'initial',
+                horizontal: '5px',
+            },
+            height: {
+                '': '5px',
+                horizontal: 'initial',
+            },
+            position: 'absolute',
+            inset: {
+                '': '2px 0',
+                horizontal: '0 2px',
+            },
+            fill: {
+                '': '#border-opaque',
+                '(hovered | drag) & !disabled': '#purple-03',
+            },
+            transition: 'theme',
+        },
+        Drag: {
+            width: {
+                '': '3x',
+                horizontal: '3px',
+            },
+            height: {
+                '': '3px',
+                horizontal: '3x',
+            },
+            radius: true,
+            fill: {
+                '': '#dark-03',
+                'hovered | drag': '#dark-02',
+                disabled: '#dark-04',
+            },
+            inset: {
+                '': '3px 50% auto auto',
+                horizontal: '50% 3px auto auto',
+            },
+            position: 'absolute',
+            transition: 'theme',
+        },
+    },
+});
+const Handler = (props) => {
+    const { direction = 'right', isDisabled } = props;
+    const { hoverProps, isHovered } = (0, react_aria_1.useHover)({});
+    const isHorizontal = direction === 'left' || direction === 'right';
+    return ((0, jsx_runtime_1.jsxs)(HandlerElement, { ...(0, index_2.mergeProps)(hoverProps, {
+            mods: {
+                hovered: isHovered,
+                horizontal: isHorizontal,
+                disabled: isDisabled,
+            },
+            'data-direction': direction,
+        }, props), children: [(0, jsx_runtime_1.jsx)("div", { "data-element": "Track" }), (0, jsx_runtime_1.jsx)("div", { "data-element": "Drag" })] }));
+};
+const PanelElement = (0, index_1.tasty)(Panel_1.Panel, {
+    styles: {
+        flexGrow: 0,
+        width: {
+            '': '@min-size @size @max-size',
+            '[data-direction="top"] | [data-direction="bottom"]': 'initial',
+        },
+        height: {
+            '': '@min-size @size @max-size',
+            '[data-direction="left"] | [data-direction="right"]': 'initial',
+        },
+        placeSelf: 'stretch',
+        touchAction: 'none',
+    },
+});
+function ResizablePanel(props, ref) {
+    const isControllable = typeof props.size === 'number';
+    const { isDisabled, direction = 'right', size: providedSize, onSizeChange, minSize = 200, maxSize = isControllable ? undefined : 400, } = props;
+    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
+    const isHorizontal = direction === 'left' || direction === 'right';
+    ref = (0, index_2.useCombinedRefs)(ref);
+    function clamp(size) {
+        if (typeof maxSize === 'number') {
+            size = Math.min(maxSize, size);
+        }
+        if (typeof minSize === 'number' || !minSize) {
+            size = Math.max(minSize || 0, size);
+        }
+        return Math.max(size, 0);
+    }
+    let [size, setSize] = (0, react_1.useState)(providedSize != null ? clamp(providedSize) : 200);
+    let { moveProps } = (0, react_aria_1.useMove)({
+        onMoveStart(e) {
+            if (isDisabled) {
+                return;
+            }
+            setIsDragging(true);
+            const offsetProp = isHorizontal ? 'offsetWidth' : 'offsetHeight';
+            if (ref.current && Math.abs(ref.current[offsetProp] - size) > 1) {
+                setSize(ref.current[offsetProp]);
+            }
+        },
+        onMove(e) {
+            setSize((size) => {
+                if (isDisabled) {
+                    return size;
+                }
+                if (e.pointerType === 'keyboard') {
+                    return size;
+                }
+                size += isHorizontal
+                    ? e.deltaX * (direction === 'right' ? 1 : -1)
+                    : e.deltaY * (direction === 'bottom' ? 1 : -1);
+                return clamp(size);
+            });
+        },
+        onMoveEnd(e) {
+            setIsDragging(false);
+            setSize((size) => clamp(Math.round(size)));
+        },
+    });
+    (0, react_1.useEffect)(() => {
+        if (providedSize == null || Math.abs(providedSize - size) > 0.5) {
+            onSizeChange?.(size);
+        }
+    }, [size]);
+    (0, react_1.useEffect)(() => {
+        if (providedSize && Math.abs(providedSize - size) > 0.5) {
+            setSize(clamp(providedSize));
+        }
+    }, [providedSize]);
+    return ((0, jsx_runtime_1.jsx)(PanelElement, { ref: ref, "data-direction": direction, extra: (0, jsx_runtime_1.jsx)(Handler, { isDisabled: isDisabled, direction: direction, ...moveProps, mods: {
+                drag: isDragging,
+                horizontal: isHorizontal,
+                disabled: isDisabled,
+            } }), ...(0, index_2.mergeProps)(props, {
+            style: {
+                '--size': `${size}px`,
+                '--min-size': typeof minSize === 'number' ? `${minSize}px` : minSize,
+                '--max-size': typeof maxSize === 'number' ? `${maxSize}px` : maxSize,
+            },
+            innerStyles: {
+                margin: `5px ${direction}`,
+            },
+        }) }));
+}
+const _ResizablePanel = (0, react_1.forwardRef)(ResizablePanel);
+exports.ResizablePanel = _ResizablePanel;
+_ResizablePanel.displayName = 'ResizablePanel';
+
+        

package/cjs/components/layout/Space.js

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

package/cjs/components/layout/Suffix.js

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

package/cjs/components/navigation/LegacyTabs/LegacyTabs.js

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

package/cjs/components/navigation/Link/Link.js

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

package/cjs/components/organisms/FileTabs/FileTabs.js

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

package/cjs/components/organisms/Modal/Modal.js

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

package/cjs/components/organisms/StatsCard/StatsCard.js

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

package/cjs/components/other/Base64Upload/Base64Upload.js

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

package/cjs/components/other/Calendar/Calendar.js

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

package/cjs/components/other/Calendar/CalendarCell.js

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

package/cjs/components/other/Calendar/CalendarGrid.js

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

package/cjs/components/other/Calendar/RangeCalendar.js

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

package/cjs/components/other/CloudLogo/CloudLogo.js

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

package/cjs/components/overlays/AlertDialog/AlertDialog.js

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

package/cjs/components/overlays/AlertDialog/AlertDialogApiProvider.js

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

package/cjs/components/overlays/AlertDialog/AlertDialogZone.js

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

package/cjs/components/overlays/AlertDialog/index.js

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

package/cjs/components/overlays/AlertDialog/types.js

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

package/cjs/components/overlays/Dialog/Dialog.js

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

package/cjs/components/overlays/Dialog/DialogContainer.js

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

package/cjs/components/overlays/Dialog/DialogForm.js

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

package/cjs/components/overlays/Dialog/DialogTrigger.js

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

package/cjs/components/overlays/Dialog/context.js

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

package/cjs/components/overlays/Dialog/index.js

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

package/cjs/components/overlays/Modal/Modal.js

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

package/cjs/components/overlays/Modal/OpenTransition.js

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

package/cjs/components/overlays/Modal/Overlay.js

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

package/cjs/components/overlays/Modal/Popover.js

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

package/cjs/components/overlays/Modal/Tray.js

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

package/cjs/components/overlays/Modal/Underlay.js

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