@cube-dev/ui-kit 0.96.0 → 0.97.1

package/es/components/content/Layout/LayoutPanel.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.96.0
+ * @cube-dev/ui-kit v0.97.1
  * Released under the MIT license.
  */
 
@@ -33,6 +33,8 @@ const PanelElement = tasty({
         overflow: 'hidden',
         boxSizing: 'border-box',
         '$content-padding': '1x',
+        // Auto-border size for sub-components (panels are always vertical)
+        '$layout-border-size': '1bw',
         // Position based on side prop
         top: {
             '': 0,
@@ -213,6 +215,27 @@ const ResizeHandlerElement = tasty({
         },
     },
 });
+// Overlay backdrop for overlay mode - covers the content area behind the panel
+const OverlayBackdrop = tasty({
+    qa: 'PanelOverlay',
+    styles: {
+        position: 'absolute',
+        inset: 0,
+        zIndex: 9, // Below panel (10) but above content
+        // fill: '#white.2',
+        backdropFilter: 'invert(.15)',
+        cursor: 'pointer',
+        opacity: {
+            '': 0,
+            visible: 1,
+        },
+        pointerEvents: {
+            '': 'none',
+            visible: 'auto',
+        },
+        transition: 'opacity .15s ease-out',
+    },
+});
 function ResizeHandler(props) {
     const { side, isDisabled, mods, moveProps, style, onDoubleClick } = props;
     const { hoverProps, isHovered } = useHover({});
@@ -241,7 +264,14 @@ function LayoutPanel(props, ref) {
     if (!layoutContext) {
         throw new Error('Layout.Panel must be a direct child of Layout component.');
     }
-    const { side = 'left', size: providedSize, defaultSize = 280, minSize = 200, maxSize, isResizable = false, onSizeChange, isOpen: providedIsOpen, defaultIsOpen = true, onOpenChange, hasTransition: hasTransitionProp, isDialog = false, isDialogOpen: providedIsDialogOpen, defaultIsDialogOpen = false, onDialogOpenChange, dialogProps, contentPadding, sizeStorageKey, children, styles, mods, ...otherProps } = props;
+    const { side = 'left', mode: modeProp, size: providedSize, defaultSize = 280, minSize = 200, maxSize, isResizable = false, onSizeChange, isOpen: providedIsOpen, defaultIsOpen = true, onOpenChange, hasTransition: hasTransitionProp, isDismissable = true, overlayStyles, 
+    // Deprecated prop - use mode="dialog" instead
+    isDialog = false, isDialogOpen: providedIsDialogOpen, defaultIsDialogOpen = false, onDialogOpenChange, dialogProps, contentPadding, sizeStorageKey, children, styles, mods, ...otherProps } = props;
+    // Resolve mode from prop or deprecated isDialog
+    const mode = modeProp ?? (isDialog ? 'dialog' : 'default');
+    const isDialogMode = mode === 'dialog';
+    const isOverlayMode = mode === 'overlay';
+    const isStickyMode = mode === 'sticky';
     // Use prop value if provided, otherwise fall back to context value
     const hasTransition = hasTransitionProp ?? layoutContext.hasTransition;
     const combinedRef = useCombinedRefs(ref);
@@ -326,7 +356,8 @@ function LayoutPanel(props, ref) {
     }, [providedSize, isDragging, clampValue]);
     // Register panel with layout context
     // Include handler outside portion (minus border overlap) for proper content inset
-    const effectivePanelSize = isOpen && !isDialog ? size : 0;
+    // In sticky and dialog modes, panel doesn't push content, so size is 0
+    const effectivePanelSize = isOpen && mode === 'default' ? size : isOpen && isOverlayMode ? size : 0;
     const effectiveInsetSize = Math.round(effectivePanelSize +
         (isResizable && effectivePanelSize > 0 ? RESIZABLE_INSET_OFFSET : 0));
     const { registerPanel, unregisterPanel, updatePanelSize, isReady } = layoutContext;
@@ -352,6 +383,27 @@ function LayoutPanel(props, ref) {
         setInternalIsOpen(newIsOpen);
         onOpenChange?.(newIsOpen);
     }, [onOpenChange]);
+    // Dismiss handler for overlay mode (click on overlay)
+    const handleDismiss = useCallback(() => {
+        if (isDismissable) {
+            handleOpenChange(false);
+        }
+    }, [isDismissable, handleOpenChange]);
+    // Register overlay panel with Layout context for coordinated dismissal
+    const { registerOverlayPanel } = layoutContext;
+    useEffect(() => {
+        // Only register if in overlay mode, open, and dismissable
+        if (isOverlayMode && isOpen && isDismissable) {
+            const unregister = registerOverlayPanel(() => handleOpenChange(false));
+            return unregister;
+        }
+    }, [
+        isOverlayMode,
+        isOpen,
+        isDismissable,
+        registerOverlayPanel,
+        handleOpenChange,
+    ]);
     const handleDialogOpenChange = useCallback((newIsOpen) => {
         setInternalIsDialogOpen(newIsOpen);
         onDialogOpenChange?.(newIsOpen);
@@ -394,14 +446,17 @@ function LayoutPanel(props, ref) {
         onSizeChange?.(clampedSize);
         setStoredSize(clampedSize);
     }, [defaultSize, clampValue, onSizeChange, setStoredSize]);
-    const renderPanelContent = (offscreen = false, transitionRef) => (_jsxs(_Fragment, { children: [_jsx(PanelElement, { ref: (node) => panelRefCallback(node, transitionRef), ...filterBaseProps(otherProps, { eventProps: true }), mods: { ...panelMods, offscreen }, styles: finalStyles, style: panelStyle, "data-side": side, children: _jsx(LayoutPanelContext.Provider, { value: panelContextValue, children: _jsx(LayoutContextReset, { children: children }) }) }), isResizable && (_jsx(ResizeHandler, { side: side, isDisabled: !isResizable, mods: {
-                    drag: isDragging,
-                    offscreen,
-                    'has-transition': hasTransition && isReady,
-                }, moveProps: moveProps, style: panelStyle, onDoubleClick: handleResetSize }))] }));
+    const renderPanelContent = (offscreen = false, transitionRef) => {
+        const showOverlay = isOverlayMode && !offscreen;
+        return (_jsxs(_Fragment, { children: [isOverlayMode && (_jsx(OverlayBackdrop, { mods: { visible: showOverlay }, styles: overlayStyles, "aria-hidden": "true", onClick: handleDismiss })), _jsx(PanelElement, { ref: (node) => panelRefCallback(node, transitionRef), ...filterBaseProps(otherProps, { eventProps: true }), mods: { ...panelMods, offscreen }, styles: finalStyles, style: panelStyle, "data-side": side, children: _jsx(LayoutPanelContext.Provider, { value: panelContextValue, children: _jsx(LayoutContextReset, { children: children }) }) }), isResizable && (_jsx(ResizeHandler, { side: side, isDisabled: !isResizable, mods: {
+                        drag: isDragging,
+                        offscreen,
+                        'has-transition': hasTransition && isReady,
+                    }, moveProps: moveProps, style: panelStyle, onDoubleClick: handleResetSize }))] }));
+    };
     // Dialog mode
-    if (isDialog) {
-        return (_jsx(DialogContainer, { isOpen: dialogOpen, onDismiss: () => handleDialogOpenChange(false), ...dialogProps, children: _jsx(Dialog, { isDismissable: false, children: _jsx(LayoutPanelContext.Provider, { value: dialogPanelContextValue, children: _jsx(LayoutContextReset, { children: children }) }) }) }));
+    if (isDialogMode) {
+        return (_jsx(DialogContainer, { isOpen: dialogOpen, isDismissable: isDismissable, onDismiss: () => handleDialogOpenChange(false), ...dialogProps, children: _jsx(Dialog, { isDismissable: false, children: _jsx(LayoutPanelContext.Provider, { value: dialogPanelContextValue, children: _jsx(LayoutContextReset, { children: children }) }) }) }));
     }
     // Panel with transition
     if (hasTransition) {

package/es/components/content/Layout/LayoutPanelHeader.js

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

package/es/components/content/Layout/LayoutToolbar.js

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

package/es/components/content/Layout/hooks/useTinyScrollbar.js

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

package/es/components/content/Layout/index.js

@@ -1,12 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.96.0
+ * @cube-dev/ui-kit v0.97.1
  * Released under the MIT license.
  */
 
 import { Layout as LayoutBase } from './Layout';
 import { LayoutBlock } from './LayoutBlock';
+import { LayoutCenter } from './LayoutCenter';
+import { LayoutContainer } from './LayoutContainer';
 import { LayoutContent } from './LayoutContent';
 import { LayoutFlex } from './LayoutFlex';
 import { LayoutFooter } from './LayoutFooter';
@@ -23,6 +25,8 @@ const Layout = Object.assign(LayoutBase, {
     Header: LayoutHeader,
     Footer: LayoutFooter,
     Content: LayoutContent,
+    Container: LayoutContainer,
+    Center: LayoutCenter,
     Block: LayoutBlock,
     Flex: LayoutFlex,
     Grid: LayoutGrid,

package/es/components/content/Layout/utils.js

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

package/es/components/content/List/SectionHeading.js

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

package/es/components/content/List/index.js

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

package/es/components/content/Paragraph.js

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

package/es/components/content/Placeholder/Placeholder.js

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

package/es/components/content/PrismCode/PrismCode.js

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

package/es/components/content/PrismCode/prismSetup.js

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

package/es/components/content/PrismDiffCode/PrismDiffCode.js

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

package/es/components/content/Result/Result.js

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

package/es/components/content/Skeleton/Skeleton.js

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

package/es/components/content/Tag/Tag.js

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

package/es/components/content/Text.js

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

package/es/components/content/TextItem/TextItem.js

@@ -1,13 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.96.0
+ * @cube-dev/ui-kit v0.97.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo, } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { BASE_STYLES, COLOR_STYLES, extractStyles, filterBaseProps, tasty, TEXT_STYLES, } from '../../../tasty';
+import { highlightText } from '../highlightText';
 import { Text, TEXT_PROP_MAP } from '../Text';
 import { useAutoTooltip } from '../use-auto-tooltip';
 const STYLE_LIST = [...BASE_STYLES, ...TEXT_STYLES, ...COLOR_STYLES];
@@ -22,28 +23,6 @@ const TextItemElement = tasty(Text, {
         textOverflow: 'ellipsis',
     },
 });
-/**
- * Highlights occurrences of a search string within text.
- * Returns an array of ReactNodes with highlighted portions wrapped in Text.Highlight.
- */
-function highlightText(text, highlight, caseSensitive, highlightStyles) {
-    if (!highlight) {
-        return [text];
-    }
-    const flags = caseSensitive ? 'g' : 'gi';
-    const escapedHighlight = highlight.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    const regex = new RegExp(`(${escapedHighlight})`, flags);
-    const parts = text.split(regex);
-    return parts.map((part, index) => {
-        const isMatch = caseSensitive
-            ? part === highlight
-            : part.toLowerCase() === highlight.toLowerCase();
-        if (isMatch) {
-            return (_jsx(Text.Highlight, { styles: highlightStyles, children: part }, index));
-        }
-        return part;
-    });
-}
 export const TextItem = forwardRef(function TextItem(props, ref) {
     const { children, highlight, highlightCaseSensitive = false, highlightStyles, tooltip = true, tooltipPlacement = 'top', ...restProps } = props;
     // Extract style props (preset, color, etc.) to pass via styles prop

package/es/components/content/TextItem/index.js

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

package/es/components/content/Title.js

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

package/es/components/content/highlightText.js

@@ -0,0 +1,33 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.97.1
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from './Text';
+/**
+ * Highlights occurrences of a search string within text.
+ * Returns an array of ReactNodes with highlighted portions wrapped in Text.Highlight.
+ */
+export function highlightText(text, highlight, caseSensitive, highlightStyles) {
+    if (!highlight) {
+        return [text];
+    }
+    const flags = caseSensitive ? 'g' : 'gi';
+    const escapedHighlight = highlight.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const regex = new RegExp(`(${escapedHighlight})`, flags);
+    const parts = text.split(regex);
+    return parts.map((part, index) => {
+        const isMatch = caseSensitive
+            ? part === highlight
+            : part.toLowerCase() === highlight.toLowerCase();
+        if (isMatch) {
+            return (_jsx(Text.Highlight, { styles: highlightStyles, children: part }, index));
+        }
+        return part;
+    });
+}
+
+        

package/es/components/content/use-auto-tooltip.js

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

package/es/components/fields/Checkbox/Checkbox.js

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

package/es/components/fields/Checkbox/CheckboxGroup.js

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

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

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

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

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

package/es/components/fields/ComboBox/ComboBox.js

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

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

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

package/es/components/fields/DatePicker/DateInput.js

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

package/es/components/fields/DatePicker/DateInputBase.js

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

package/es/components/fields/DatePicker/DatePicker.js

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

package/es/components/fields/DatePicker/DatePickerButton.js

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

package/es/components/fields/DatePicker/DatePickerElement.js

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

package/es/components/fields/DatePicker/DatePickerInput.js

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

package/es/components/fields/DatePicker/DatePickerSegment.js

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

package/es/components/fields/DatePicker/DateRangePicker.js

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

package/es/components/fields/DatePicker/DateRangeSeparatedPicker.js

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

package/es/components/fields/DatePicker/TimeInput.js

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

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

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

package/es/components/fields/DatePicker/intl.js

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

package/es/components/fields/DatePicker/parseDate.js

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

package/es/components/fields/DatePicker/props.js

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

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

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

package/es/components/fields/DatePicker/utils.js

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

package/es/components/fields/FileInput/FileInput.js

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

package/es/components/fields/FilterListBox/FilterListBox.js

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