@cube-dev/ui-kit 0.97.1 → 0.98.0

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

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

package/es/components/fields/TextArea/TextArea.js

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

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

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

package/es/components/fields/TextInput/TextInput.js

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

package/es/components/fields/TextInput/TextInputBase.js

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

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

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

package/es/components/fields/TextInputMapper/TextInputMapper.js

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

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

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

package/es/components/fields/index.js

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

package/es/components/form/FieldWrapper/FieldWrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.97.1
+ * @cube-dev/ui-kit v0.98.0
  * Released under the MIT license.
  */
 
@@ -10,10 +10,10 @@ import { forwardRef } from 'react';
 import { InfoCircleIcon } from '../../../icons/index';
 import { tasty } from '../../../tasty/index';
 import { mergeProps, wrapNodeIfPlain } from '../../../utils/react/index';
+import { Item } from '../../content/Item';
 import { Text } from '../../content/Text';
 import { Flex } from '../../layout/Flex';
 import { Space } from '../../layout/Space';
-import { TooltipProvider } from '../../overlays/Tooltip/TooltipProvider';
 import { Label } from '../Label';
 const FieldElement = tasty({
     qa: 'Field',
@@ -92,7 +92,7 @@ const DescriptionElement = tasty({
  */
 export const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
     const { as, labelPosition = 'top', label, extra, styles, isRequired, isDisabled, labelStyles, necessityIndicator, labelProps, fieldProps, message, messageStyles, description, errorMessage, Component, validationState, requiredMark = true, tooltip, isHidden, labelSuffix, children, } = props;
-    const labelComponent = label ? (_jsx(Label, { as: as === 'label' ? 'div' : 'label', styles: labelStyles, labelPosition: labelPosition, isRequired: requiredMark ? isRequired : false, isDisabled: isDisabled, necessityIndicator: necessityIndicator, validationState: validationState, "aria-label": typeof label === 'string' ? label : undefined, ...labelProps, children: _jsxs(Flex, { placeContent: "baseline space-between", width: "100%", children: [_jsxs(Space, { placeItems: "center", gap: "0.75x", children: [_jsx("div", { children: label }), tooltip ? (_jsx(TooltipProvider, { activeWrap: true, title: tooltip, width: "initial max-content 40x", children: _jsx(InfoCircleIcon, { color: "#purple-text" }) })) : null, labelSuffix ? _jsx("div", { children: labelSuffix }) : null] }), extra && _jsx(Text, { preset: "t3", children: extra })] }) })) : null;
+    const labelComponent = label ? (_jsx(Label, { as: as === 'label' ? 'div' : 'label', styles: labelStyles, labelPosition: labelPosition, isRequired: requiredMark ? isRequired : false, isDisabled: isDisabled, necessityIndicator: necessityIndicator, validationState: validationState, "aria-label": typeof label === 'string' ? label : undefined, ...labelProps, children: _jsxs(Flex, { placeContent: "baseline space-between", width: "100%", children: [_jsxs(Space, { placeItems: "center", gap: "0.75x", children: [_jsx("div", { children: label }), tooltip ? (_jsx(Item, { icon: _jsx(InfoCircleIcon, { color: "#purple-text" }), size: "inline", tooltip: tooltip })) : null, labelSuffix ? _jsx("div", { children: labelSuffix }) : null] }), extra && _jsx(Text, { preset: "t3", children: extra })] }) })) : null;
     // Create description component with proper styling
     const createDescriptionComponent = () => {
         if (!description)

package/es/components/form/FieldWrapper/extract-field-wrapper-props.js

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

package/es/components/form/FieldWrapper/index.js

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

package/es/components/form/FieldWrapper/types.js

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

package/es/components/form/Form/Field.js

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

package/es/components/form/Form/Form.js

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

package/es/components/form/Form/ResetButton/ResetButton.js

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

package/es/components/form/Form/ResetButton/index.js

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

package/es/components/form/Form/SubmitButton/SubmitButton.js

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

package/es/components/form/Form/SubmitButton/index.js

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

package/es/components/form/Form/SubmitError.js

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

package/es/components/form/Form/index.js

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

package/es/components/form/Form/types.js

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

package/es/components/form/Form/use-field/index.js

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

package/es/components/form/Form/use-field/types.js

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

package/es/components/form/Form/use-field/use-field-props.js

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

package/es/components/form/Form/use-field/use-field.js

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

package/es/components/form/Form/use-form.js

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

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

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

package/es/components/form/Label.js

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

package/es/components/form/index.js

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

package/es/components/form/wrapper.js

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

package/es/components/helpers/DisplayTransition/DisplayTransition.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.97.1
+ * @cube-dev/ui-kit v0.98.0
  * Released under the MIT license.
  */
 
@@ -17,12 +17,14 @@ function useEvent(fn) {
         return ref.current?.(...args);
     }, []);
 }
-export function DisplayTransition({ isShown: targetShown, duration, onRest, onPhaseChange, onToggle, exposeUnmounted = false, animateOnMount = true, respectReducedMotion = true, children, }) {
+export function DisplayTransition({ isShown: targetShown, duration, onRest, onPhaseChange, onToggle, exposeUnmounted = false, animateOnMount = true, respectReducedMotion = true, preserveContent = true, children, }) {
     // Reduced motion → collapse timing
     const prefersReduced = respectReducedMotion &&
         typeof window !== 'undefined' &&
         window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches;
     const dur = prefersReduced ? 0 : duration;
+    // Store children to preserve content during exit transitions
+    const storedChildrenRef = useRef(children);
     // For native transition event detection
     const elementRef = useRef(null);
     const transitionStartedRef = useRef(false);
@@ -102,18 +104,27 @@ export function DisplayTransition({ isShown: targetShown, duration, onRest, onPh
                 }, AUTO_FALLBACK_DURATION);
                 return;
             }
-            const onTransitionStart = () => {
+            const onTransitionStart = (e) => {
+                // Ignore bubbled events from children - only react to our own element's transitions
+                if (e.target !== element)
+                    return;
                 if (flowRef.current !== flow)
                     return;
                 transitionStartedRef.current = true;
                 clearTimer(); // Cancel fallback timer once transition starts
             };
-            const onTransitionEnd = () => {
+            const onTransitionEnd = (e) => {
+                // Ignore bubbled events from children - only react to our own element's transitions
+                if (e.target !== element)
+                    return;
                 if (flowRef.current !== flow)
                     return;
                 complete();
             };
-            const onTransitionCancel = () => {
+            const onTransitionCancel = (e) => {
+                // Ignore bubbled events from children - only react to our own element's transitions
+                if (e.target !== element)
+                    return;
                 if (flowRef.current !== flow)
                     return;
                 complete();
@@ -251,7 +262,9 @@ export function DisplayTransition({ isShown: targetShown, duration, onRest, onPh
         }
     }, [isShownNow, onToggleEvent]);
     // Ref callback to attach to transitioned element
-    const refCallback = (node) => {
+    // MUST be memoized so React doesn't re-call it on re-renders,
+    // which would cleanup event listeners mid-transition
+    const refCallback = useCallback((node) => {
         if (node) {
             elementRef.current = node;
             // Don't call ensureEnterFlow() here - useLayoutEffect handles RAF scheduling
@@ -261,10 +274,22 @@ export function DisplayTransition({ isShown: targetShown, duration, onRest, onPh
             cleanupEventListeners();
             elementRef.current = null;
         }
-    };
+    }, []);
+    // Update stored children only when showing (enter/entered phase and targetShown is true)
+    // This prevents overwriting during exit transitions, preserving content for the animation
+    const isShowingContent = (phase === 'enter' || phase === 'entered') && targetShown;
+    if (isShowingContent) {
+        storedChildrenRef.current = children;
+    }
+    // When preserveContent is enabled, always use stored children:
+    // - During show: stored is updated above, so it equals current children
+    // - During hide: stored keeps the last shown content for the exit animation
+    const effectiveChildren = preserveContent
+        ? storedChildrenRef.current
+        : children;
     if (phase === 'unmounted' && !exposeUnmounted)
         return null;
-    return children({
+    return effectiveChildren({
         phase: reportedPhase === 'enter' && duration !== undefined && !duration
             ? 'entered'
             : reportedPhase,

package/es/components/helpers/DisplayTransition/index.js

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.98.0
+ * Released under the MIT license.
+ */
+
+export * from './DisplayTransition';
+
+        

package/es/components/helpers/IconSwitch/IconSwitch.js

@@ -0,0 +1,143 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.98.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { isValidElement, useCallback, useLayoutEffect, useRef, useState, } from 'react';
+import { tasty } from '../../../tasty';
+import { DisplayTransition } from '../DisplayTransition/DisplayTransition';
+function isNullishContent(node) {
+    // React treats `null`, `undefined`, and `false` as "render nothing"
+    return node == null || node === false;
+}
+const typeIds = new WeakMap();
+let lastTypeId = 0;
+function getTypeId(type) {
+    const existing = typeIds.get(type);
+    if (existing != null)
+        return existing;
+    const next = (lastTypeId += 1);
+    typeIds.set(type, next);
+    return next;
+}
+/**
+ * Best-effort key derivation for icon switching when `contentKey` is not provided.
+ * The goal is to:
+ * - Transition when icon component type changes
+ * - Not transition when only props change for the same icon type (self-animating icons)
+ * - Transition when toggling to/from nullish content
+ */
+function deriveContentKey(children) {
+    if (isNullishContent(children))
+        return 'nullish';
+    if (!isValidElement(children))
+        return `non-element:${typeof children}`;
+    const { type, key } = children;
+    const keyPart = key == null ? '' : `:${String(key)}`;
+    if (typeof type === 'string')
+        return `host:${type}${keyPart}`;
+    if (typeof type === 'function')
+        return `fn:${getTypeId(type)}${keyPart}`;
+    if (typeof type === 'object' && type != null)
+        return `obj:${getTypeId(type)}${keyPart}`;
+    if (typeof type === 'symbol')
+        return `sym:${String(type)}${keyPart}`;
+    return `unknown${keyPart}`;
+}
+const IconSwitchElement = tasty({
+    styles: {
+        display: 'grid',
+        placeItems: 'center',
+    },
+});
+const IconSlotElement = tasty({
+    styles: {
+        gridArea: '1 / 1',
+        display: 'grid',
+        placeItems: 'center',
+        opacity: {
+            '': 0,
+            entered: 1,
+        },
+        transition: {
+            '': 'theme $transition ease-out',
+            'exit | entered': 'theme $transition ease-in',
+        },
+    },
+});
+/**
+ * A component that cross-fades between icons when children change.
+ * Useful for animated icon transitions in buttons, items, etc.
+ *
+ * When `contentKey` changes, a transition is triggered.
+ * When only `children` changes (same `contentKey`), content is updated in-place
+ * without transition, allowing self-animating icons (like DirectionIcon) to work.
+ */
+export function IconSwitch(props) {
+    const { children, contentKey, noWrapper, ...rest } = props;
+    const keyCounterRef = useRef(0);
+    const effectiveKey = contentKey ?? deriveContentKey(children);
+    const prevEffectiveKeyRef = useRef(effectiveKey);
+    const prevChildrenRef = useRef(children);
+    const [icons, setIcons] = useState(() => [
+        { key: keyCounterRef.current, content: children },
+    ]);
+    useLayoutEffect(() => {
+        const prevKey = prevEffectiveKeyRef.current;
+        const prevChildren = prevChildrenRef.current;
+        const hasKeyChanged = effectiveKey !== prevKey;
+        const hasChildrenChanged = children !== prevChildren;
+        const hasNullishToggled = isNullishContent(children) !== isNullishContent(prevChildren);
+        // Transition rules:
+        // - If key changed -> transition
+        // - If we toggled nullish <-> non-nullish -> transition (even if key did not change)
+        // - Otherwise, if only children changed -> update in place (no transition)
+        if (hasKeyChanged || hasNullishToggled) {
+            keyCounterRef.current += 1;
+            const newEntry = {
+                key: keyCounterRef.current,
+                content: children,
+            };
+            setIcons((prev) => [...prev, newEntry]);
+        }
+        else if (hasChildrenChanged) {
+            // Same key, different children -> update in-place -> no transition
+            // This allows self-animating icons to receive updated props
+            setIcons((prev) => {
+                if (!prev.length) {
+                    return [{ key: 0, content: children }];
+                }
+                const lastIndex = prev.length - 1;
+                const next = [...prev];
+                next[lastIndex] = { ...next[lastIndex], content: children };
+                return next;
+            });
+        }
+        prevEffectiveKeyRef.current = effectiveKey;
+        prevChildrenRef.current = children;
+    }, [children, effectiveKey]);
+    const handleExitComplete = useCallback((exitedKey) => {
+        setIcons((prev) => prev.filter((icon) => icon.key !== exitedKey));
+    }, []);
+    const latestKey = icons[icons.length - 1]?.key;
+    const content = icons.map((icon) => {
+        const isActive = icon.key === latestKey;
+        return (_jsx(DisplayTransition, { isShown: isActive, animateOnMount: icon.key !== 0, onRest: (transition) => {
+                if (transition === 'exit') {
+                    handleExitComplete(icon.key);
+                }
+            }, children: ({ isShown, phase, ref }) => (_jsx(IconSlotElement, { ref: ref, mods: {
+                    entered: isShown,
+                    phase,
+                }, children: icon.content })) }, icon.key));
+    });
+    if (noWrapper) {
+        return _jsx(_Fragment, { children: content });
+    }
+    return _jsx(IconSwitchElement, { ...rest, children: content });
+}
+
+        

package/es/components/helpers/index.js

@@ -1,10 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.97.1
+ * @cube-dev/ui-kit v0.98.0
  * Released under the MIT license.
  */
 
 export * from './DisplayTransition/DisplayTransition';
+export * from './IconSwitch/IconSwitch';
 
         

package/es/components/layout/Flex.js

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

package/es/components/layout/Flow.js

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

package/es/components/layout/Grid.js

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

package/es/components/layout/Panel.js

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

package/es/components/layout/Prefix.js

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