@cube-dev/ui-kit 0.196.0 → 0.198.0

package/dist/components/form/wrapper.js

@@ -1,18 +1,27 @@
-/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
 import { mergeProps } from "../../utils/react/mergeProps.js";
+import { hasFieldContent, warnAboutForceField } from "./field-chrome.js";
 import { warnAboutLegacyTooltip } from "./legacy-tooltip.js";
 import { FieldWrapper } from "./FieldWrapper/FieldWrapper.js";
-import { warnAboutForceField } from "./field-chrome.js";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/form/wrapper.tsx
-/** Field chrome is the default; only an explicit bare mode opts out. */
+/**
+* Whether `wrapWithField` renders the field chrome for these props. An
+* explicit `isBare` decides; `useFieldProps` sets `isBare={false}` on a bound
+* field, one passed a chrome prop, or one with a `validate` whose errors the
+* control shows (`withFieldChrome`).
+* Otherwise a non-empty `label` renders it, as does the deprecated
+* `forceField`.
+*/
 function rendersFieldChrome(props) {
-	return !props.isBare;
+	const { isBare, label, forceField } = props;
+	if (isBare != null) return !isBare;
+	return hasFieldContent(label) || !!forceField;
 }
-/** Wraps a control in its stable field presentation and forwards its chrome props. */
-function wrapWithField(component, ref, props) {
-	let { label, isBare = false, extra, labelPosition = "top", labelStyles, isRequired, isOptional, isDisabled, necessityIndicator, message, messageStyles, description, errorMessage, isInvalid, isValid, labelProps, fieldProps, fieldStyles, requiredMark = true, labelTooltip, isHidden, labelSuffix } = props;
+function wrapWithField(component, ...args) {
+	const props = args[args.length - 1];
+	const isBare = !rendersFieldChrome(props);
+	let { label, extra, labelPosition = "top", labelStyles, isRequired, isOptional, isDisabled, necessityIndicator, message, messageStyles, description, errorMessage, isInvalid, isValid, labelProps, labelRef, fieldProps, fieldStyles, requiredMark = true, labelTooltip, isHidden, labelSuffix } = props;
 	warnAboutForceField(props);
 	warnAboutLegacyTooltip(props);
 	const mergedFieldProps = fieldStyles ? mergeProps(fieldProps, { styles: fieldStyles }) : fieldProps;
@@ -28,6 +37,7 @@ function wrapWithField(component, ref, props) {
 		isDisabled,
 		necessityIndicator,
 		labelProps: mergedLabelProps,
+		labelRef,
 		fieldProps: fieldPropsWithoutId,
 		message,
 		messageStyles,
@@ -40,11 +50,10 @@ function wrapWithField(component, ref, props) {
 		isHidden,
 		labelSuffix,
 		Component: component,
-		controlId: props.id,
-		ref
+		controlId: props.id
 	});
 }
-
 //#endregion
 export { rendersFieldChrome, wrapWithField };
+
 //# sourceMappingURL=wrapper.js.map

package/dist/components/form/wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"wrapper.js","names":["DOMRef","FocusableRef","BaseProps","ReactElement","RefObject","FieldBaseProps","FormBaseProps","mergeProps","warnAboutForceField","FieldWrapper","warnAboutLegacyTooltip","WrapWithFieldProps","Omit","rendersFieldChrome","props","isBare","wrapWithField","component","ref","HTMLElement","T","label","extra","labelPosition","labelStyles","isRequired","isOptional","isDisabled","necessityIndicator","message","messageStyles","description","errorMessage","isInvalid","isValid","labelProps","fieldProps","fieldStyles","requiredMark","labelTooltip","isHidden","labelSuffix","mergedFieldProps","styles","mergedLabelProps","id","_id","fieldPropsWithoutId","Component","controlId"],"sources":["../../../src/components/form/wrapper.tsx"],"sourcesContent":["import { DOMRef, FocusableRef } from '@react-types/shared';\nimport { BaseProps } from '@tenphi/tasty';\nimport { ReactElement, RefObject } from 'react';\n\nimport { FieldBaseProps, FormBaseProps } from '../../shared/index';\nimport { mergeProps } from '../../utils/react/index';\n\nimport { warnAboutForceField } from './field-chrome';\nimport { FieldWrapper } from './FieldWrapper/index';\nimport { warnAboutLegacyTooltip } from './legacy-tooltip';\n\n// The input is passed as `component`, never through props.children.\ninterface WrapWithFieldProps\n  extends FieldBaseProps,\n    Omit<BaseProps, 'children'>,\n    FormBaseProps {}\n\n/** Field chrome is the default; only an explicit bare mode opts out. */\nexport function rendersFieldChrome(props: { isBare?: boolean }) {\n  return !props.isBare;\n}\n\n/** Wraps a control in its stable field presentation and forwards its chrome props. */\nexport function wrapWithField<T extends WrapWithFieldProps>(\n  component: ReactElement,\n  ref: RefObject<unknown> | FocusableRef<HTMLElement> | DOMRef<HTMLElement>,\n  props: T,\n) {\n  let {\n    label,\n    isBare = false,\n    extra,\n    labelPosition = 'top',\n    labelStyles,\n    isRequired,\n    isOptional,\n    isDisabled,\n    necessityIndicator,\n    message,\n    messageStyles,\n    description,\n    errorMessage,\n    isInvalid,\n    isValid,\n    labelProps,\n    fieldProps,\n    fieldStyles,\n    requiredMark = true,\n    labelTooltip,\n    isHidden,\n    labelSuffix,\n  } = props;\n\n  warnAboutForceField(props);\n\n  warnAboutLegacyTooltip(props);\n\n  // Merge fieldStyles as shorthand for fieldProps.styles (fieldStyles takes priority)\n  const mergedFieldProps = fieldStyles\n    ? mergeProps(fieldProps, { styles: fieldStyles })\n    : fieldProps;\n\n  // Merge labelStyles as shorthand for labelProps.styles (labelStyles takes priority)\n  const mergedLabelProps = labelStyles\n    ? mergeProps(labelProps, { styles: labelStyles })\n    : labelProps;\n\n  // Remove id from fieldProps to avoid duplication (id should be on the input element, not the field wrapper)\n  const { id: _id, ...fieldPropsWithoutId } = (mergedFieldProps as any) || {};\n\n  return (\n    <FieldWrapper\n      {...{\n        label,\n        isBare,\n        extra,\n        labelPosition,\n        isRequired,\n        isOptional,\n        isDisabled,\n        necessityIndicator,\n        labelProps: mergedLabelProps,\n        fieldProps: fieldPropsWithoutId,\n        message,\n        messageStyles,\n        description,\n        errorMessage,\n        isInvalid,\n        isValid,\n        requiredMark,\n        labelTooltip,\n        isHidden,\n        labelSuffix,\n        Component: component,\n        // Where the description and message ids come from; see\n        // `useFieldDescribedBy`, which points the control at them.\n        controlId: props.id,\n        ref,\n      }}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;AAkBA,SAAgBa,mBAAmBC,OAA6B;AAC9D,QAAO,CAACA,MAAMC;;;AAIhB,SAAgBC,cACdC,WACAC,KACAJ,OACA;CACA,IAAI,EACFO,OACAN,SAAS,OACTO,OACAC,gBAAgB,OAChBC,aACAC,YACAC,YACAC,YACAC,oBACAC,SACAC,eACAC,aACAC,cACAC,WACAC,SACAC,YACAC,YACAC,aACAC,eAAe,MACfC,cACAC,UACAC,gBACE3B;AAEJN,qBAAoBM,MAAM;AAE1BJ,wBAAuBI,MAAM;CAG7B,MAAM4B,mBAAmBL,cACrB9B,WAAW6B,YAAY,EAAEO,QAAQN,aAAa,CAAC,GAC/CD;CAGJ,MAAMQ,mBAAmBpB,cACrBjB,WAAW4B,YAAY,EAAEQ,QAAQnB,aAAa,CAAC,GAC/CW;CAGJ,MAAM,EAAEU,IAAIC,KAAK,GAAGC,wBAAyBL,oBAA4B,EAAE;AAE3E,QACE,oBAAC;EAEGrB;EACAN;EACAO;EACAC;EACAE;EACAC;EACAC;EACAC;EACAO,YAAYS;EACZR,YAAYW;EACZlB;EACAC;EACAC;EACAC;EACAC;EACAC;EACAI;EACAC;EACAC;EACAC;EACAO,WAAW/B;EAGXgC,WAAWnC,MAAM+B;EACjB3B;GAEF"}
+{"version":3,"file":"wrapper.js","names":["DOMRef","FocusableRef","BaseProps","ReactElement","RefObject","FieldBaseProps","FormBaseProps","mergeProps","hasFieldContent","warnAboutForceField","FieldWrapper","warnAboutLegacyTooltip","WrapWithFieldProps","Omit","rendersFieldChrome","props","isBare","label","forceField","LegacyFieldRef","HTMLElement","wrapWithField","component","T","ref","args","length","extra","labelPosition","labelStyles","isRequired","isOptional","isDisabled","necessityIndicator","message","messageStyles","description","errorMessage","isInvalid","isValid","labelProps","labelRef","fieldProps","fieldStyles","requiredMark","labelTooltip","isHidden","labelSuffix","mergedFieldProps","styles","mergedLabelProps","id","_id","fieldPropsWithoutId","Component","controlId"],"sources":["../../../src/components/form/wrapper.tsx"],"sourcesContent":["import { DOMRef, FocusableRef } from '@react-types/shared';\nimport { BaseProps } from '@tenphi/tasty';\nimport { ReactElement, RefObject } from 'react';\n\nimport { FieldBaseProps, FormBaseProps } from '../../shared/index';\nimport { mergeProps } from '../../utils/react/index';\n\nimport { hasFieldContent, warnAboutForceField } from './field-chrome';\nimport { FieldWrapper } from './FieldWrapper/index';\nimport { warnAboutLegacyTooltip } from './legacy-tooltip';\n\n// The input is passed as `component`, never through props.children.\ninterface WrapWithFieldProps\n  extends FieldBaseProps, Omit<BaseProps, 'children'>, FormBaseProps {}\n\n/**\n * Whether `wrapWithField` renders the field chrome for these props. An\n * explicit `isBare` decides; `useFieldProps` sets `isBare={false}` on a bound\n * field, one passed a chrome prop, or one with a `validate` whose errors the\n * control shows (`withFieldChrome`).\n * Otherwise a non-empty `label` renders it, as does the deprecated\n * `forceField`.\n */\nexport function rendersFieldChrome(props: object) {\n  const { isBare, label, forceField } = props as WrapWithFieldProps;\n\n  if (isBare != null) return !isBare;\n\n  return hasFieldContent(label) || !!forceField;\n}\n\ntype LegacyFieldRef =\n  | RefObject<unknown>\n  | FocusableRef<HTMLElement>\n  | DOMRef<HTMLElement>\n  | null\n  | undefined;\n\n/**\n * Wraps a control in its field chrome when it has one, and forwards its chrome\n * props. The chrome takes no ref: the control attaches the field's `ref` to\n * its own root, so the ref is the same element with or without the chrome, and\n * `labelRef` reaches the label.\n */\nexport function wrapWithField<T extends WrapWithFieldProps>(\n  component: ReactElement,\n  props: T,\n): ReactElement;\n/**\n * @deprecated Attach the field's ref to the control's root and call\n * `wrapWithField(component, props)`. The `ref` passed here is ignored.\n */\nexport function wrapWithField<T extends WrapWithFieldProps>(\n  component: ReactElement,\n  ref: LegacyFieldRef,\n  props: T,\n): ReactElement;\nexport function wrapWithField<T extends WrapWithFieldProps>(\n  component: ReactElement,\n  ...args: [props: T] | [ref: LegacyFieldRef, props: T]\n) {\n  const props = args[args.length - 1] as T;\n  const isBare = !rendersFieldChrome(props);\n  let {\n    label,\n    extra,\n    labelPosition = 'top',\n    labelStyles,\n    isRequired,\n    isOptional,\n    isDisabled,\n    necessityIndicator,\n    message,\n    messageStyles,\n    description,\n    errorMessage,\n    isInvalid,\n    isValid,\n    labelProps,\n    labelRef,\n    fieldProps,\n    fieldStyles,\n    requiredMark = true,\n    labelTooltip,\n    isHidden,\n    labelSuffix,\n  } = props;\n\n  warnAboutForceField(props);\n\n  warnAboutLegacyTooltip(props);\n\n  // Merge fieldStyles as shorthand for fieldProps.styles (fieldStyles takes priority)\n  const mergedFieldProps = fieldStyles\n    ? mergeProps(fieldProps, { styles: fieldStyles })\n    : fieldProps;\n\n  // Merge labelStyles as shorthand for labelProps.styles (labelStyles takes priority)\n  const mergedLabelProps = labelStyles\n    ? mergeProps(labelProps, { styles: labelStyles })\n    : labelProps;\n\n  // Remove id from fieldProps to avoid duplication (id should be on the input element, not the field wrapper)\n  const { id: _id, ...fieldPropsWithoutId } = (mergedFieldProps as any) || {};\n\n  return (\n    <FieldWrapper\n      {...{\n        label,\n        isBare,\n        extra,\n        labelPosition,\n        isRequired,\n        isOptional,\n        isDisabled,\n        necessityIndicator,\n        labelProps: mergedLabelProps,\n        labelRef,\n        fieldProps: fieldPropsWithoutId,\n        message,\n        messageStyles,\n        description,\n        errorMessage,\n        isInvalid,\n        isValid,\n        requiredMark,\n        labelTooltip,\n        isHidden,\n        labelSuffix,\n        Component: component,\n        // Where the description and message ids come from; see\n        // `useFieldDescribedBy`, which points the control at them.\n        controlId: props.id,\n      }}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,SAAgBc,mBAAmBC,OAAe;CAChD,MAAM,EAAEC,QAAQC,OAAOC,eAAeH;CAEtC,IAAIC,UAAU,MAAM,OAAO,CAACA;CAE5B,OAAOR,gBAAgBS,KAAK,KAAK,CAAC,CAACC;AACrC;AA4BA,SAAgBG,cACdC,WACA,GAAGG,MACH;CACA,MAAMV,QAAQU,KAAKA,KAAKC,SAAS;CACjC,MAAMV,SAAS,CAACF,mBAAmBC,KAAK;CACxC,IAAI,EACFE,OACAU,OACAC,gBAAgB,OAChBC,aACAC,YACAC,YACAC,YACAC,oBACAC,SACAC,eACAC,aACAC,cACAC,WACAC,SACAC,YACAC,UACAC,YACAC,aACAC,eAAe,MACfC,cACAC,UACAC,gBACEhC;CAEJN,oBAAoBM,KAAK;CAEzBJ,uBAAuBI,KAAK;CAG5B,MAAMiC,mBAAmBL,cACrBpC,WAAWmC,YAAY,EAAEO,QAAQN,YAAY,CAAC,IAC9CD;CAGJ,MAAMQ,mBAAmBrB,cACrBtB,WAAWiC,YAAY,EAAES,QAAQpB,YAAY,CAAC,IAC9CW;CAGJ,MAAM,EAAEW,IAAIC,KAAK,GAAGC,wBAAyBL,oBAA4B,CAAC;CAE1E,OACE,oBAAC,cAAD;EAEI/B;EACAD;EACAW;EACAC;EACAE;EACAC;EACAC;EACAC;EACAO,YAAYU;EACZT;EACAC,YAAYW;EACZnB;EACAC;EACAC;EACAC;EACAC;EACAC;EACAK;EACAC;EACAC;EACAC;EACAO,WAAWhC;EAGXiC,WAAWxC,MAAMoC;CACjB,CAAA;AAGR"}

package/dist/components/helpers/DisplayTransition/DisplayTransition.d.ts

@@ -1,18 +1,27 @@
 
 import { ReactNode, RefCallback } from "react";
-
 //#region src/components/helpers/DisplayTransition/DisplayTransition.d.ts
-type ReportedPhase = 'enter' | 'entered' | 'exit' | 'unmounted';
-type DisplayTransitionProps = {
-  /** Desired visibility (driver). */isShown: boolean; /** Times enter->entered and exit->unmounted. 0 => immediate. If undefined, uses native transition events. */
-  duration?: number; /** Fires after enter settles or after exit completes (unmount). */
-  onRest?: (transition: 'enter' | 'exit') => void; /** Fires when phase changes. */
-  onPhaseChange?: (phase: ReportedPhase) => void; /** Fires when isShown (derived from phase) changes. */
-  onToggle?: (isShown: boolean) => void; /** Keep calling children during "unmounted" (you decide what to render). */
-  exposeUnmounted?: boolean; /** If false and initially shown, start at "entered" (no first-mount animation/SSR pop). */
-  animateOnMount?: boolean; /** Respect prefers-reduced-motion by collapsing duration to 0. */
-  respectReducedMotion?: boolean; /** Preserve children content during exit transition. When true, uses stored children from when content was visible. @default true */
-  preserveContent?: boolean; /** Render-prop gets { phase, isShown, isExiting, ref }. Bind ref to the transitioned element for native event detection. */
+export type ReportedPhase = 'enter' | 'entered' | 'exit' | 'unmounted';
+export type DisplayTransitionProps = {
+  /** Desired visibility (driver). */
+  isShown: boolean;
+  /** Times enter->entered and exit->unmounted. 0 => immediate. If undefined, uses native transition events. */
+  duration?: number;
+  /** Fires after enter settles or after exit completes (unmount). */
+  onRest?: (transition: 'enter' | 'exit') => void;
+  /** Fires when phase changes. */
+  onPhaseChange?: (phase: ReportedPhase) => void;
+  /** Fires when isShown (derived from phase) changes. */
+  onToggle?: (isShown: boolean) => void;
+  /** Keep calling children during "unmounted" (you decide what to render). */
+  exposeUnmounted?: boolean;
+  /** If false and initially shown, start at "entered" (no first-mount animation/SSR pop). */
+  animateOnMount?: boolean;
+  /** Respect prefers-reduced-motion by collapsing duration to 0. */
+  respectReducedMotion?: boolean;
+  /** Preserve children content during exit transition. When true, uses stored children from when content was visible. @default true */
+  preserveContent?: boolean;
+  /** Render-prop gets { phase, isShown, isExiting, ref }. Bind ref to the transitioned element for native event detection. */
   children: (props: {
     phase: ReportedPhase;
     isShown: boolean;
@@ -27,18 +36,6 @@ type DisplayTransitionProps = {
     ref: RefCallback<HTMLElement>;
   }) => ReactNode;
 };
-declare function DisplayTransition({
-  isShown: targetShown,
-  duration,
-  onRest,
-  onPhaseChange,
-  onToggle,
-  exposeUnmounted,
-  animateOnMount,
-  respectReducedMotion,
-  preserveContent,
-  children
-}: DisplayTransitionProps): ReactNode;
+export declare function DisplayTransition({ isShown: targetShown, duration, onRest, onPhaseChange, onToggle, exposeUnmounted, animateOnMount, respectReducedMotion, preserveContent, children }: DisplayTransitionProps): ReactNode;
 //#endregion
-export { DisplayTransition, DisplayTransitionProps };
 //# sourceMappingURL=DisplayTransition.d.ts.map

package/dist/components/helpers/DisplayTransition/DisplayTransition.js

@@ -1,7 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
-
 //#region src/components/helpers/DisplayTransition/DisplayTransition.tsx
 const AUTO_FALLBACK_DURATION = 500;
 function useEvent(fn) {
@@ -173,19 +172,20 @@ function DisplayTransition({ isShown: targetShown, duration, onRest, onPhaseChan
 	useLayoutEffect(() => {
 		++flowRef.current;
 		const current = phaseRef.current;
-		if (targetShown) if (current === "unmounted" || current === "exit") {
-			setPhase("enter");
-			ensureEnterFlow();
-		} else if (current === "enter") ensureEnterFlow();
-		else if (current === "exit-pending") {
-			cancelRAF();
-			clearTimer();
-			setPhase("entered");
-		} else {
-			cancelRAF();
-			clearTimer();
-		}
-		else if (current === "unmounted") {
+		if (targetShown) {
+			if (current === "unmounted" || current === "exit") {
+				setPhase("enter");
+				ensureEnterFlow();
+			} else if (current === "enter") ensureEnterFlow();
+			else if (current === "exit-pending") {
+				cancelRAF();
+				clearTimer();
+				setPhase("entered");
+			} else {
+				cancelRAF();
+				clearTimer();
+			}
+		} else if (current === "unmounted") {
 			cancelRAF();
 			clearTimer();
 		} else if (current !== "exit" && current !== "exit-pending") setPhase("exit-pending");
@@ -241,7 +241,7 @@ function DisplayTransition({ isShown: targetShown, duration, onRest, onPhaseChan
 		ref: refCallback
 	});
 }
-
 //#endregion
 export { DisplayTransition };
+
 //# sourceMappingURL=DisplayTransition.js.map

package/dist/components/helpers/DisplayTransition/DisplayTransition.js.map

@@ -1 +1 @@
-{"version":3,"file":"DisplayTransition.js","names":["ReactNode","RefCallback","useCallback","useLayoutEffect","useRef","useState","AUTO_FALLBACK_DURATION","Phase","ReportedPhase","DisplayTransitionProps","isShown","duration","onRest","transition","onPhaseChange","phase","onToggle","exposeUnmounted","animateOnMount","respectReducedMotion","preserveContent","children","props","isExiting","ref","HTMLElement","useEvent","fn","$","_c","t0","t1","current","t2","Symbol","for","t3","args","DisplayTransition","targetShown","prefersReduced","window","matchMedia","matches","dur","storedChildrenRef","elementRef","transitionStartedRef","eventListenersRef","element","complete","onTransitionStart","e","TransitionEvent","onTransitionEnd","onTransitionCancel","setPhase","phaseRef","onRestEvent","onPhaseChangeEvent","onToggleEvent","flowRef","rafRef","timerRef","ReturnType","setTimeout","cancelRAF","cancelAnimationFrame","clearTimer","clearTimeout","nextPaint","cb","flow","requestAnimationFrame","cleanupEventListeners","listeners","removeEventListener","afterDuration","undefined","completed","target","addEventListener","ensureEnterFlow","ensureExitFlow","ensureExitPendingFlow","reportedPhase","prevReportedPhaseRef","isShownNow","prevIsShownRef","refCallback","node","isShowingContent","effectiveChildren"],"sources":["../../../../src/components/helpers/DisplayTransition/DisplayTransition.tsx"],"sourcesContent":["import {\n  ReactNode,\n  RefCallback,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nconst AUTO_FALLBACK_DURATION = 500;\n\ntype Phase = 'enter' | 'entered' | 'exit-pending' | 'exit' | 'unmounted';\nexport type ReportedPhase = 'enter' | 'entered' | 'exit' | 'unmounted';\n\nexport type DisplayTransitionProps = {\n  /** Desired visibility (driver). */\n  isShown: boolean;\n  /** Times enter->entered and exit->unmounted. 0 => immediate. If undefined, uses native transition events. */\n  duration?: number;\n  /** Fires after enter settles or after exit completes (unmount). */\n  onRest?: (transition: 'enter' | 'exit') => void;\n  /** Fires when phase changes. */\n  onPhaseChange?: (phase: ReportedPhase) => void;\n  /** Fires when isShown (derived from phase) changes. */\n  onToggle?: (isShown: boolean) => void;\n  /** Keep calling children during \"unmounted\" (you decide what to render). */\n  exposeUnmounted?: boolean;\n  /** If false and initially shown, start at \"entered\" (no first-mount animation/SSR pop). */\n  animateOnMount?: boolean;\n  /** Respect prefers-reduced-motion by collapsing duration to 0. */\n  respectReducedMotion?: boolean;\n  /** Preserve children content during exit transition. When true, uses stored children from when content was visible. @default true */\n  preserveContent?: boolean;\n  /** Render-prop gets { phase, isShown, isExiting, ref }. Bind ref to the transitioned element for native event detection. */\n  children: (props: {\n    phase: ReportedPhase;\n    isShown: boolean;\n    /**\n     * True from the render where the `isShown` prop turns false until the\n     * phase reaches `'unmounted'`. Unlike `phase` and this `isShown`, which\n     * still report the shown state for the two frames before the exit starts,\n     * it never lags the prop, and unlike the values the render prop closes\n     * over, `preserveContent` never freezes it.\n     */\n    isExiting: boolean;\n    ref: RefCallback<HTMLElement>;\n  }) => ReactNode;\n};\n\n// Stable callback to avoid stale closures\nfunction useEvent<T extends (...a: any[]) => any>(fn?: T) {\n  const ref = useRef(fn);\n  useLayoutEffect(() => {\n    ref.current = fn;\n  }, [fn]);\n  return useCallback((...args: Parameters<NonNullable<T>>) => {\n    return ref.current?.(...args);\n  }, []);\n}\n\nexport function DisplayTransition({\n  isShown: targetShown,\n  duration,\n  onRest,\n  onPhaseChange,\n  onToggle,\n  exposeUnmounted = false,\n  animateOnMount = true,\n  respectReducedMotion = true,\n  preserveContent = true,\n  children,\n}: DisplayTransitionProps) {\n  // Reduced motion → collapse timing\n  const prefersReduced =\n    respectReducedMotion &&\n    typeof window !== 'undefined' &&\n    window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches;\n  const dur = prefersReduced ? 0 : duration;\n\n  // Store children to preserve content during exit transitions\n  const storedChildrenRef = useRef<typeof children>(children);\n\n  // For native transition event detection\n  const elementRef = useRef<HTMLElement | null>(null);\n  const transitionStartedRef = useRef(false);\n  const eventListenersRef = useRef<{\n    element: HTMLElement;\n    complete: () => void;\n    onTransitionStart: (e: TransitionEvent) => void;\n    onTransitionEnd: (e: TransitionEvent) => void;\n    onTransitionCancel: (e: TransitionEvent) => void;\n  } | null>(null);\n\n  // Initial phase (optionally skip first-mount animation)\n  const [phase, setPhase] = useState<Phase>(\n    targetShown ? (animateOnMount ? 'enter' : 'entered') : 'unmounted',\n  );\n  const phaseRef = useRef(phase);\n  phaseRef.current = phase;\n\n  // Advance phase synchronously during render so the overlay element\n  // exists in the same commit. This lets useOverlayPosition (and similar\n  // hooks) find the element on their first layout-effect run.\n  if (targetShown && phase === 'unmounted') {\n    setPhase('enter');\n  }\n\n  const onRestEvent = useEvent(onRest);\n  const onPhaseChangeEvent = useEvent(onPhaseChange);\n  const onToggleEvent = useEvent(onToggle);\n\n  // Versioned scheduling (Strict Mode & rapid toggles safe)\n  const flowRef = useRef(0);\n  const rafRef = useRef<number | null>(null);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const cancelRAF = () => {\n    if (rafRef.current != null) {\n      cancelAnimationFrame(rafRef.current);\n      rafRef.current = null;\n    }\n  };\n  const clearTimer = () => {\n    if (timerRef.current != null) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n  };\n\n  // Double-rAF ensures at least one paint with \"enter\" before flipping to \"entered\".\n  const nextPaint = (cb: () => void) => {\n    cancelRAF();\n    const flow = flowRef.current;\n    rafRef.current = requestAnimationFrame(() => {\n      if (flowRef.current !== flow) return;\n      rafRef.current = requestAnimationFrame(() => {\n        if (flowRef.current !== flow) return;\n        rafRef.current = null;\n        cb();\n      });\n    });\n  };\n\n  const cleanupEventListeners = () => {\n    const listeners = eventListenersRef.current;\n    if (listeners) {\n      const { element } = listeners;\n      element.removeEventListener(\n        'transitionstart',\n        listeners.onTransitionStart,\n      );\n      element.removeEventListener('transitionend', listeners.onTransitionEnd);\n      element.removeEventListener(\n        'transitioncancel',\n        listeners.onTransitionCancel,\n      );\n      eventListenersRef.current = null;\n    }\n  };\n\n  const afterDuration = (cb: () => void) => {\n    const flow = flowRef.current;\n\n    // If using native event detection\n    if (dur === undefined) {\n      const element = elementRef.current;\n\n      cleanupEventListeners();\n      transitionStartedRef.current = false;\n\n      let completed = false;\n      const complete = () => {\n        if (completed || flowRef.current !== flow) return;\n        completed = true;\n        clearTimer();\n        cleanupEventListeners();\n        cb();\n      };\n\n      if (!element) {\n        // No element to listen on - use fallback timer to avoid immediate completion\n        clearTimer();\n        timerRef.current = setTimeout(() => {\n          if (flowRef.current !== flow) return;\n          timerRef.current = null;\n          complete();\n        }, AUTO_FALLBACK_DURATION);\n\n        return;\n      }\n\n      const onTransitionStart = (e: TransitionEvent) => {\n        // Ignore bubbled events from children - only react to our own element's transitions\n        if (e.target !== element) return;\n        if (flowRef.current !== flow) return;\n        transitionStartedRef.current = true;\n        clearTimer(); // Cancel fallback timer once transition starts\n      };\n\n      const onTransitionEnd = (e: TransitionEvent) => {\n        // Ignore bubbled events from children - only react to our own element's transitions\n        if (e.target !== element) return;\n        if (flowRef.current !== flow) return;\n        complete();\n      };\n\n      const onTransitionCancel = (e: TransitionEvent) => {\n        // Ignore bubbled events from children - only react to our own element's transitions\n        if (e.target !== element) return;\n        if (flowRef.current !== flow) return;\n        complete();\n      };\n\n      eventListenersRef.current = {\n        element,\n        complete,\n        onTransitionStart,\n        onTransitionEnd,\n        onTransitionCancel,\n      };\n\n      element.addEventListener('transitionstart', onTransitionStart);\n      element.addEventListener('transitionend', onTransitionEnd);\n      element.addEventListener('transitioncancel', onTransitionCancel);\n\n      // Fallback: if no transitionstart fires within 150ms, assume no transition\n      timerRef.current = setTimeout(() => {\n        if (flowRef.current !== flow) return;\n        if (!transitionStartedRef.current) {\n          complete();\n        }\n      }, 150);\n\n      return;\n    }\n\n    // If using explicit duration\n    if (dur <= 0) {\n      cb();\n      return;\n    }\n    clearTimer();\n    timerRef.current = setTimeout(() => {\n      if (flowRef.current !== flow) return;\n      timerRef.current = null;\n      cb();\n    }, dur);\n  };\n\n  const ensureEnterFlow = () => {\n    if (phaseRef.current !== 'enter') {\n      return;\n    }\n\n    // Element ref is only required for native transition event detection (duration === undefined).\n    // When using explicit duration, setTimeout handles timing so no element is needed.\n    if (dur === undefined && !elementRef.current) {\n      return;\n    }\n\n    // frame N: \"enter\" (hidden) → frame N+1: \"entered\" (shown) → after dur: onRest(\"enter\")\n    nextPaint(() => {\n      if (phaseRef.current !== 'enter') return;\n      setPhase('entered');\n      afterDuration(() => onRestEvent?.('enter'));\n    });\n  };\n\n  const ensureExitFlow = () => {\n    // \"exit\" (hidden) → after dur → \"unmounted\" → onRest(\"exit\")\n    afterDuration(() => {\n      setPhase('unmounted');\n      onRestEvent?.('exit');\n    });\n  };\n\n  // frame N: \"exit-pending\" (still shown) → frame N+1: \"exit\" (hidden) → ensureExitFlow.\n  // Idempotent and re-callable, mirroring ensureEnterFlow: whoever cancels the\n  // pending rAF is responsible for re-arming it.\n  const ensureExitPendingFlow = () => {\n    nextPaint(() => {\n      if (phaseRef.current !== 'exit-pending') return;\n      setPhase('exit');\n      ensureExitFlow();\n    });\n  };\n\n  useLayoutEffect(() => {\n    ++flowRef.current; // invalidate any pending work\n    const current = phaseRef.current;\n\n    if (targetShown) {\n      if (current === 'unmounted' || current === 'exit') {\n        setPhase('enter');\n        ensureEnterFlow();\n      } else if (current === 'enter') {\n        ensureEnterFlow();\n      } else if (current === 'exit-pending') {\n        // User toggled back before exit started, cancel and stay entered\n        cancelRAF();\n        clearTimer();\n        setPhase('entered');\n      } else {\n        // already \"entered\"\n        cancelRAF();\n        clearTimer();\n      }\n    } else {\n      if (current === 'unmounted') {\n        cancelRAF();\n        clearTimer();\n      } else if (current !== 'exit' && current !== 'exit-pending') {\n        // Set intermediate phase to trigger re-render, RAF will be scheduled from layout effect\n        setPhase('exit-pending');\n      } else if (current === 'exit') {\n        ensureExitFlow();\n      } else {\n        // Still \"exit-pending\": our own cleanup just cancelled the rAF the\n        // [phase] effect scheduled, and that effect will not re-run because\n        // `phase` did not change. Re-arm it here or the content stays visible\n        // forever while the driver reports hidden.\n        ensureExitPendingFlow();\n      }\n    }\n\n    return () => {\n      cancelRAF();\n      clearTimer();\n      cleanupEventListeners();\n    };\n  }, [targetShown, dur, onRestEvent]);\n\n  // Schedule RAF from layout effect for both enter and exit-pending to ensure symmetric timing\n  useLayoutEffect(() => {\n    if (phaseRef.current === 'enter') {\n      ensureEnterFlow();\n    } else if (phaseRef.current === 'exit-pending') {\n      // Schedule RAF for exit, mirroring the enter flow timing\n      ensureExitPendingFlow();\n    }\n    return cancelRAF;\n  }, [phase]);\n\n  // Map internal phase to reported phase (exit-pending is reported as 'entered')\n  const reportedPhase: ReportedPhase =\n    phase === 'exit-pending' ? 'entered' : phase;\n\n  // Call onPhaseChange when reported phase changes\n  const prevReportedPhaseRef = useRef(reportedPhase);\n  useLayoutEffect(() => {\n    if (prevReportedPhaseRef.current !== reportedPhase) {\n      prevReportedPhaseRef.current = reportedPhase;\n      onPhaseChangeEvent?.(reportedPhase);\n    }\n  }, [reportedPhase, onPhaseChangeEvent]);\n\n  // Render-time boolean (true only when visually shown)\n  const isShownNow = phase === 'entered' || phase === 'exit-pending';\n  const prevIsShownRef = useRef(isShownNow);\n\n  // Call onToggle when isShown changes\n  useLayoutEffect(() => {\n    if (prevIsShownRef.current !== isShownNow) {\n      prevIsShownRef.current = isShownNow;\n      onToggleEvent?.(isShownNow);\n    }\n  }, [isShownNow, onToggleEvent]);\n\n  // Ref callback to attach to the transitioned element. A consumer that wraps\n  // it inline or with `mergeRefs`, as `Tooltip` does, hands React a new ref\n  // every render, so React detaches it and re-attaches the same node. Keep the\n  // listeners on that node: once `transitionstart` has cancelled the fallback\n  // timer, only they can end the transition, and without them the element\n  // would stay mounted. A different node ends that wait through the fallback.\n  const refCallback: RefCallback<HTMLElement> = useCallback((node) => {\n    elementRef.current = node;\n    // Don't call ensureEnterFlow() here - useLayoutEffect handles RAF scheduling\n    // to ensure symmetric timing with exit flow\n    const listeners = eventListenersRef.current;\n    if (node && listeners && listeners.element !== node) {\n      cleanupEventListeners();\n      clearTimer();\n      // Defer completion so a driver change in this commit can cancel it in\n      // the layout effect. The replacement may have no transition to await.\n      timerRef.current = setTimeout(listeners.complete, 150);\n    }\n  }, []);\n\n  // Update stored children only when showing (enter/entered phase and targetShown is true)\n  // This prevents overwriting during exit transitions, preserving content for the animation\n  const isShowingContent =\n    (phase === 'enter' || phase === 'entered') && targetShown;\n\n  if (isShowingContent) {\n    storedChildrenRef.current = children;\n  }\n\n  // Preserve the last shown content through exit, but let exposed unmounted\n  // content update so newly added controls remain reachable by keyboard.\n  const effectiveChildren =\n    preserveContent && phase !== 'unmounted'\n      ? storedChildrenRef.current\n      : children;\n\n  if (phase === 'unmounted' && !exposeUnmounted) return null;\n  return effectiveChildren({\n    phase:\n      reportedPhase === 'enter' && duration !== undefined && !duration\n        ? 'entered'\n        : reportedPhase,\n    isShown: isShownNow,\n    isExiting: !targetShown && phase !== 'unmounted',\n    ref: refCallback,\n  });\n}\n"],"mappings":"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"}
+{"version":3,"file":"DisplayTransition.js","names":["ReactNode","RefCallback","useCallback","useLayoutEffect","useRef","useState","AUTO_FALLBACK_DURATION","Phase","ReportedPhase","DisplayTransitionProps","isShown","duration","onRest","transition","onPhaseChange","phase","onToggle","exposeUnmounted","animateOnMount","respectReducedMotion","preserveContent","children","props","isExiting","ref","HTMLElement","useEvent","fn","$","_c","t0","t1","current","t2","Symbol","for","t3","args","DisplayTransition","targetShown","prefersReduced","window","matchMedia","matches","dur","storedChildrenRef","elementRef","transitionStartedRef","eventListenersRef","element","complete","onTransitionStart","e","TransitionEvent","onTransitionEnd","onTransitionCancel","setPhase","phaseRef","onRestEvent","onPhaseChangeEvent","onToggleEvent","flowRef","rafRef","timerRef","ReturnType","setTimeout","cancelRAF","cancelAnimationFrame","clearTimer","clearTimeout","nextPaint","cb","flow","requestAnimationFrame","cleanupEventListeners","listeners","removeEventListener","afterDuration","undefined","completed","target","addEventListener","ensureEnterFlow","ensureExitFlow","ensureExitPendingFlow","reportedPhase","prevReportedPhaseRef","isShownNow","prevIsShownRef","refCallback","node","isShowingContent","effectiveChildren","_c"],"sources":["../../../../src/components/helpers/DisplayTransition/DisplayTransition.tsx"],"sourcesContent":["import {\n  ReactNode,\n  RefCallback,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nconst AUTO_FALLBACK_DURATION = 500;\n\ntype Phase = 'enter' | 'entered' | 'exit-pending' | 'exit' | 'unmounted';\nexport type ReportedPhase = 'enter' | 'entered' | 'exit' | 'unmounted';\n\nexport type DisplayTransitionProps = {\n  /** Desired visibility (driver). */\n  isShown: boolean;\n  /** Times enter->entered and exit->unmounted. 0 => immediate. If undefined, uses native transition events. */\n  duration?: number;\n  /** Fires after enter settles or after exit completes (unmount). */\n  onRest?: (transition: 'enter' | 'exit') => void;\n  /** Fires when phase changes. */\n  onPhaseChange?: (phase: ReportedPhase) => void;\n  /** Fires when isShown (derived from phase) changes. */\n  onToggle?: (isShown: boolean) => void;\n  /** Keep calling children during \"unmounted\" (you decide what to render). */\n  exposeUnmounted?: boolean;\n  /** If false and initially shown, start at \"entered\" (no first-mount animation/SSR pop). */\n  animateOnMount?: boolean;\n  /** Respect prefers-reduced-motion by collapsing duration to 0. */\n  respectReducedMotion?: boolean;\n  /** Preserve children content during exit transition. When true, uses stored children from when content was visible. @default true */\n  preserveContent?: boolean;\n  /** Render-prop gets { phase, isShown, isExiting, ref }. Bind ref to the transitioned element for native event detection. */\n  children: (props: {\n    phase: ReportedPhase;\n    isShown: boolean;\n    /**\n     * True from the render where the `isShown` prop turns false until the\n     * phase reaches `'unmounted'`. Unlike `phase` and this `isShown`, which\n     * still report the shown state for the two frames before the exit starts,\n     * it never lags the prop, and unlike the values the render prop closes\n     * over, `preserveContent` never freezes it.\n     */\n    isExiting: boolean;\n    ref: RefCallback<HTMLElement>;\n  }) => ReactNode;\n};\n\n// Stable callback to avoid stale closures\nfunction useEvent<T extends (...a: any[]) => any>(fn?: T) {\n  const ref = useRef(fn);\n  useLayoutEffect(() => {\n    ref.current = fn;\n  }, [fn]);\n  return useCallback((...args: Parameters<NonNullable<T>>) => {\n    return ref.current?.(...args);\n  }, []);\n}\n\nexport function DisplayTransition({\n  isShown: targetShown,\n  duration,\n  onRest,\n  onPhaseChange,\n  onToggle,\n  exposeUnmounted = false,\n  animateOnMount = true,\n  respectReducedMotion = true,\n  preserveContent = true,\n  children,\n}: DisplayTransitionProps) {\n  // Reduced motion → collapse timing\n  const prefersReduced =\n    respectReducedMotion &&\n    typeof window !== 'undefined' &&\n    window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches;\n  const dur = prefersReduced ? 0 : duration;\n\n  // Store children to preserve content during exit transitions\n  const storedChildrenRef = useRef<typeof children>(children);\n\n  // For native transition event detection\n  const elementRef = useRef<HTMLElement | null>(null);\n  const transitionStartedRef = useRef(false);\n  const eventListenersRef = useRef<{\n    element: HTMLElement;\n    complete: () => void;\n    onTransitionStart: (e: TransitionEvent) => void;\n    onTransitionEnd: (e: TransitionEvent) => void;\n    onTransitionCancel: (e: TransitionEvent) => void;\n  } | null>(null);\n\n  // Initial phase (optionally skip first-mount animation)\n  const [phase, setPhase] = useState<Phase>(\n    targetShown ? (animateOnMount ? 'enter' : 'entered') : 'unmounted',\n  );\n  const phaseRef = useRef(phase);\n  phaseRef.current = phase;\n\n  // Advance phase synchronously during render so the overlay element\n  // exists in the same commit. This lets useOverlayPosition (and similar\n  // hooks) find the element on their first layout-effect run.\n  if (targetShown && phase === 'unmounted') {\n    setPhase('enter');\n  }\n\n  const onRestEvent = useEvent(onRest);\n  const onPhaseChangeEvent = useEvent(onPhaseChange);\n  const onToggleEvent = useEvent(onToggle);\n\n  // Versioned scheduling (Strict Mode & rapid toggles safe)\n  const flowRef = useRef(0);\n  const rafRef = useRef<number | null>(null);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const cancelRAF = () => {\n    if (rafRef.current != null) {\n      cancelAnimationFrame(rafRef.current);\n      rafRef.current = null;\n    }\n  };\n  const clearTimer = () => {\n    if (timerRef.current != null) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n  };\n\n  // Double-rAF ensures at least one paint with \"enter\" before flipping to \"entered\".\n  const nextPaint = (cb: () => void) => {\n    cancelRAF();\n    const flow = flowRef.current;\n    rafRef.current = requestAnimationFrame(() => {\n      if (flowRef.current !== flow) return;\n      rafRef.current = requestAnimationFrame(() => {\n        if (flowRef.current !== flow) return;\n        rafRef.current = null;\n        cb();\n      });\n    });\n  };\n\n  const cleanupEventListeners = () => {\n    const listeners = eventListenersRef.current;\n    if (listeners) {\n      const { element } = listeners;\n      element.removeEventListener(\n        'transitionstart',\n        listeners.onTransitionStart,\n      );\n      element.removeEventListener('transitionend', listeners.onTransitionEnd);\n      element.removeEventListener(\n        'transitioncancel',\n        listeners.onTransitionCancel,\n      );\n      eventListenersRef.current = null;\n    }\n  };\n\n  const afterDuration = (cb: () => void) => {\n    const flow = flowRef.current;\n\n    // If using native event detection\n    if (dur === undefined) {\n      const element = elementRef.current;\n\n      cleanupEventListeners();\n      transitionStartedRef.current = false;\n\n      let completed = false;\n      const complete = () => {\n        if (completed || flowRef.current !== flow) return;\n        completed = true;\n        clearTimer();\n        cleanupEventListeners();\n        cb();\n      };\n\n      if (!element) {\n        // No element to listen on - use fallback timer to avoid immediate completion\n        clearTimer();\n        timerRef.current = setTimeout(() => {\n          if (flowRef.current !== flow) return;\n          timerRef.current = null;\n          complete();\n        }, AUTO_FALLBACK_DURATION);\n\n        return;\n      }\n\n      const onTransitionStart = (e: TransitionEvent) => {\n        // Ignore bubbled events from children - only react to our own element's transitions\n        if (e.target !== element) return;\n        if (flowRef.current !== flow) return;\n        transitionStartedRef.current = true;\n        clearTimer(); // Cancel fallback timer once transition starts\n      };\n\n      const onTransitionEnd = (e: TransitionEvent) => {\n        // Ignore bubbled events from children - only react to our own element's transitions\n        if (e.target !== element) return;\n        if (flowRef.current !== flow) return;\n        complete();\n      };\n\n      const onTransitionCancel = (e: TransitionEvent) => {\n        // Ignore bubbled events from children - only react to our own element's transitions\n        if (e.target !== element) return;\n        if (flowRef.current !== flow) return;\n        complete();\n      };\n\n      eventListenersRef.current = {\n        element,\n        complete,\n        onTransitionStart,\n        onTransitionEnd,\n        onTransitionCancel,\n      };\n\n      element.addEventListener('transitionstart', onTransitionStart);\n      element.addEventListener('transitionend', onTransitionEnd);\n      element.addEventListener('transitioncancel', onTransitionCancel);\n\n      // Fallback: if no transitionstart fires within 150ms, assume no transition\n      timerRef.current = setTimeout(() => {\n        if (flowRef.current !== flow) return;\n        if (!transitionStartedRef.current) {\n          complete();\n        }\n      }, 150);\n\n      return;\n    }\n\n    // If using explicit duration\n    if (dur <= 0) {\n      cb();\n      return;\n    }\n    clearTimer();\n    timerRef.current = setTimeout(() => {\n      if (flowRef.current !== flow) return;\n      timerRef.current = null;\n      cb();\n    }, dur);\n  };\n\n  const ensureEnterFlow = () => {\n    if (phaseRef.current !== 'enter') {\n      return;\n    }\n\n    // Element ref is only required for native transition event detection (duration === undefined).\n    // When using explicit duration, setTimeout handles timing so no element is needed.\n    if (dur === undefined && !elementRef.current) {\n      return;\n    }\n\n    // frame N: \"enter\" (hidden) → frame N+1: \"entered\" (shown) → after dur: onRest(\"enter\")\n    nextPaint(() => {\n      if (phaseRef.current !== 'enter') return;\n      setPhase('entered');\n      afterDuration(() => onRestEvent?.('enter'));\n    });\n  };\n\n  const ensureExitFlow = () => {\n    // \"exit\" (hidden) → after dur → \"unmounted\" → onRest(\"exit\")\n    afterDuration(() => {\n      setPhase('unmounted');\n      onRestEvent?.('exit');\n    });\n  };\n\n  // frame N: \"exit-pending\" (still shown) → frame N+1: \"exit\" (hidden) → ensureExitFlow.\n  // Idempotent and re-callable, mirroring ensureEnterFlow: whoever cancels the\n  // pending rAF is responsible for re-arming it.\n  const ensureExitPendingFlow = () => {\n    nextPaint(() => {\n      if (phaseRef.current !== 'exit-pending') return;\n      setPhase('exit');\n      ensureExitFlow();\n    });\n  };\n\n  useLayoutEffect(() => {\n    ++flowRef.current; // invalidate any pending work\n    const current = phaseRef.current;\n\n    if (targetShown) {\n      if (current === 'unmounted' || current === 'exit') {\n        setPhase('enter');\n        ensureEnterFlow();\n      } else if (current === 'enter') {\n        ensureEnterFlow();\n      } else if (current === 'exit-pending') {\n        // User toggled back before exit started, cancel and stay entered\n        cancelRAF();\n        clearTimer();\n        setPhase('entered');\n      } else {\n        // already \"entered\"\n        cancelRAF();\n        clearTimer();\n      }\n    } else {\n      if (current === 'unmounted') {\n        cancelRAF();\n        clearTimer();\n      } else if (current !== 'exit' && current !== 'exit-pending') {\n        // Set intermediate phase to trigger re-render, RAF will be scheduled from layout effect\n        setPhase('exit-pending');\n      } else if (current === 'exit') {\n        ensureExitFlow();\n      } else {\n        // Still \"exit-pending\": our own cleanup just cancelled the rAF the\n        // [phase] effect scheduled, and that effect will not re-run because\n        // `phase` did not change. Re-arm it here or the content stays visible\n        // forever while the driver reports hidden.\n        ensureExitPendingFlow();\n      }\n    }\n\n    return () => {\n      cancelRAF();\n      clearTimer();\n      cleanupEventListeners();\n    };\n  }, [targetShown, dur, onRestEvent]);\n\n  // Schedule RAF from layout effect for both enter and exit-pending to ensure symmetric timing\n  useLayoutEffect(() => {\n    if (phaseRef.current === 'enter') {\n      ensureEnterFlow();\n    } else if (phaseRef.current === 'exit-pending') {\n      // Schedule RAF for exit, mirroring the enter flow timing\n      ensureExitPendingFlow();\n    }\n    return cancelRAF;\n  }, [phase]);\n\n  // Map internal phase to reported phase (exit-pending is reported as 'entered')\n  const reportedPhase: ReportedPhase =\n    phase === 'exit-pending' ? 'entered' : phase;\n\n  // Call onPhaseChange when reported phase changes\n  const prevReportedPhaseRef = useRef(reportedPhase);\n  useLayoutEffect(() => {\n    if (prevReportedPhaseRef.current !== reportedPhase) {\n      prevReportedPhaseRef.current = reportedPhase;\n      onPhaseChangeEvent?.(reportedPhase);\n    }\n  }, [reportedPhase, onPhaseChangeEvent]);\n\n  // Render-time boolean (true only when visually shown)\n  const isShownNow = phase === 'entered' || phase === 'exit-pending';\n  const prevIsShownRef = useRef(isShownNow);\n\n  // Call onToggle when isShown changes\n  useLayoutEffect(() => {\n    if (prevIsShownRef.current !== isShownNow) {\n      prevIsShownRef.current = isShownNow;\n      onToggleEvent?.(isShownNow);\n    }\n  }, [isShownNow, onToggleEvent]);\n\n  // Ref callback to attach to the transitioned element. A consumer that wraps\n  // it inline or with `mergeRefs`, as `Tooltip` does, hands React a new ref\n  // every render, so React detaches it and re-attaches the same node. Keep the\n  // listeners on that node: once `transitionstart` has cancelled the fallback\n  // timer, only they can end the transition, and without them the element\n  // would stay mounted. A different node ends that wait through the fallback.\n  const refCallback: RefCallback<HTMLElement> = useCallback((node) => {\n    elementRef.current = node;\n    // Don't call ensureEnterFlow() here - useLayoutEffect handles RAF scheduling\n    // to ensure symmetric timing with exit flow\n    const listeners = eventListenersRef.current;\n    if (node && listeners && listeners.element !== node) {\n      cleanupEventListeners();\n      clearTimer();\n      // Defer completion so a driver change in this commit can cancel it in\n      // the layout effect. The replacement may have no transition to await.\n      timerRef.current = setTimeout(listeners.complete, 150);\n    }\n  }, []);\n\n  // Update stored children only when showing (enter/entered phase and targetShown is true)\n  // This prevents overwriting during exit transitions, preserving content for the animation\n  const isShowingContent =\n    (phase === 'enter' || phase === 'entered') && targetShown;\n\n  if (isShowingContent) {\n    storedChildrenRef.current = children;\n  }\n\n  // Preserve the last shown content through exit, but let exposed unmounted\n  // content update so newly added controls remain reachable by keyboard.\n  const effectiveChildren =\n    preserveContent && phase !== 'unmounted'\n      ? storedChildrenRef.current\n      : children;\n\n  if (phase === 'unmounted' && !exposeUnmounted) return null;\n  return effectiveChildren({\n    phase:\n      reportedPhase === 'enter' && duration !== undefined && !duration\n        ? 'entered'\n        : reportedPhase,\n    isShown: isShownNow,\n    isExiting: !targetShown && phase !== 'unmounted',\n    ref: refCallback,\n  });\n}\n"],"mappings":"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"}

package/dist/components/helpers/IconSwitch/IconSwitch.d.ts

@@ -1,10 +1,8 @@
 
 import { BaseProps } from "@tenphi/tasty";
-import * as react from "react";
 import { ReactNode } from "react";
-
 //#region src/components/helpers/IconSwitch/IconSwitch.d.ts
-interface CubeIconSwitchProps extends BaseProps {
+export interface CubeIconSwitchProps extends BaseProps {
   /** The icon to display */
   children: ReactNode;
   /** Override the default key derivation for detecting icon changes */
@@ -20,7 +18,7 @@ interface CubeIconSwitchProps extends BaseProps {
  * When only `children` changes (same `contentKey`), content is updated in-place
  * without transition, allowing self-animating icons (like DirectionIcon) to work.
  */
-declare function IconSwitch(props: CubeIconSwitchProps): react.JSX.Element;
+export declare function IconSwitch(props: CubeIconSwitchProps): import("react").JSX.Element;
 //#endregion
-export { CubeIconSwitchProps, IconSwitch };
+export type { CubeIconSwitchProps as IconSwitchProps };
 //# sourceMappingURL=IconSwitch.d.ts.map

package/dist/components/helpers/IconSwitch/IconSwitch.js

@@ -1,9 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
 import { DisplayTransition } from "../DisplayTransition/DisplayTransition.js";
 import { tasty } from "@tenphi/tasty";
 import { isValidElement, useCallback, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
-
 //#region src/components/helpers/IconSwitch/IconSwitch.tsx
 function isNullishContent(node) {
 	return node == null || node === false;
@@ -119,7 +118,7 @@ function IconSwitch(props) {
 		children: content
 	});
 }
-
 //#endregion
 export { IconSwitch };
+
 //# sourceMappingURL=IconSwitch.js.map

package/dist/components/helpers/IconSwitch/IconSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconSwitch.js","names":["BaseProps","tasty","isValidElement","ReactNode","useCallback","useLayoutEffect","useRef","useState","DisplayTransition","CubeIconSwitchProps","children","contentKey","noWrapper","IconEntry","key","content","isNullishContent","node","typeIds","WeakMap","lastTypeId","getTypeId","type","existing","get","next","set","deriveContentKey","keyPart","String","IconSwitchElement","styles","display","placeItems","IconSlotElement","gridArea","placeSelf","opacity","entered","transition","IconSwitch","props","rest","keyCounterRef","effectiveKey","prevEffectiveKeyRef","prevChildrenRef","icons","setIcons","current","prevKey","prevChildren","hasKeyChanged","hasNullishToggled","newEntry","prev","handleExitComplete","exitedKey","filter","icon","latestKey","length","isKeyChangePending","isNullishChangePending","isTransitionPending","map","isActive","displayContent","isShown","phase","ref","IconSwitchProps"],"sources":["../../../../src/components/helpers/IconSwitch/IconSwitch.tsx"],"sourcesContent":["import { BaseProps, tasty } from '@tenphi/tasty';\nimport {\n  isValidElement,\n  ReactNode,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { DisplayTransition } from '../DisplayTransition/DisplayTransition';\n\nexport interface CubeIconSwitchProps extends BaseProps {\n  /** The icon to display */\n  children: ReactNode;\n  /** Override the default key derivation for detecting icon changes */\n  contentKey?: string | number;\n  /** When true, renders without wrapper element, expecting parent to provide grid context */\n  noWrapper?: boolean;\n}\n\ninterface IconEntry {\n  key: number;\n  content: ReactNode;\n}\n\nfunction isNullishContent(node: ReactNode) {\n  // React treats `null`, `undefined`, and `false` as \"render nothing\"\n  return node == null || node === false;\n}\n\nconst typeIds = new WeakMap<object, number>();\nlet lastTypeId = 0;\n\nfunction getTypeId(type: object) {\n  const existing = typeIds.get(type);\n  if (existing != null) return existing;\n  const next = (lastTypeId += 1);\n  typeIds.set(type, next);\n  return next;\n}\n\n/**\n * Best-effort key derivation for icon switching when `contentKey` is not provided.\n * The goal is to:\n * - Transition when icon component type changes\n * - Not transition when only props change for the same icon type (self-animating icons)\n * - Transition when toggling to/from nullish content\n */\nfunction deriveContentKey(children: ReactNode): string {\n  if (isNullishContent(children)) return 'nullish';\n  if (!isValidElement(children)) return `non-element:${typeof children}`;\n\n  const { type, key } = children;\n  const keyPart = key == null ? '' : `:${String(key)}`;\n\n  if (typeof type === 'string') return `host:${type}${keyPart}`;\n  if (typeof type === 'function') return `fn:${getTypeId(type)}${keyPart}`;\n  if (typeof type === 'object' && type != null)\n    return `obj:${getTypeId(type)}${keyPart}`;\n  if (typeof type === 'symbol') return `sym:${String(type)}${keyPart}`;\n\n  return `unknown${keyPart}`;\n}\n\nconst IconSwitchElement = tasty({\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n  },\n});\n\nconst IconSlotElement = tasty({\n  styles: {\n    gridArea: '1 / 1',\n    display: 'grid',\n    placeItems: 'center',\n    placeSelf: 'stretch',\n    opacity: {\n      '': 0,\n      entered: 1,\n    },\n    transition: {\n      '': 'theme $transition ease-out',\n      'exit | entered': 'theme $transition ease-in',\n    },\n  },\n});\n\n/**\n * A component that cross-fades between icons when children change.\n * Useful for animated icon transitions in buttons, items, etc.\n *\n * When `contentKey` changes, a transition is triggered.\n * When only `children` changes (same `contentKey`), content is updated in-place\n * without transition, allowing self-animating icons (like DirectionIcon) to work.\n */\nexport function IconSwitch(props: CubeIconSwitchProps) {\n  const { children, contentKey, noWrapper, ...rest } = props;\n\n  const keyCounterRef = useRef(0);\n  const effectiveKey = contentKey ?? deriveContentKey(children);\n  const prevEffectiveKeyRef = useRef<string | number>(effectiveKey);\n  const prevChildrenRef = useRef<ReactNode>(children);\n\n  const [icons, setIcons] = useState<IconEntry[]>(() => [\n    { key: keyCounterRef.current, content: children },\n  ]);\n\n  useLayoutEffect(() => {\n    const prevKey = prevEffectiveKeyRef.current;\n    const prevChildren = prevChildrenRef.current;\n\n    const hasKeyChanged = effectiveKey !== prevKey;\n    const hasNullishToggled =\n      isNullishContent(children) !== isNullishContent(prevChildren);\n\n    // Transition rules:\n    // - If key changed -> transition (add new icon entry)\n    // - If we toggled nullish <-> non-nullish -> transition (even if key did not change)\n    // - Otherwise -> no state update (children reference changes are handled at render time)\n    if (hasKeyChanged || hasNullishToggled) {\n      keyCounterRef.current += 1;\n      const newEntry: IconEntry = {\n        key: keyCounterRef.current,\n        content: children,\n      };\n      setIcons((prev) => [...prev, newEntry]);\n    }\n\n    prevEffectiveKeyRef.current = effectiveKey;\n    prevChildrenRef.current = children;\n  }, [children, effectiveKey]);\n\n  const handleExitComplete = useCallback((exitedKey: number) => {\n    setIcons((prev) => prev.filter((icon) => icon.key !== exitedKey));\n  }, []);\n\n  const latestKey = icons[icons.length - 1]?.key;\n\n  // Detect if we're in an intermediate render (transition pending but effect hasn't added new entry yet).\n  // In this state, we must use stored content to avoid flashing the new icon before the transition.\n  const isKeyChangePending = effectiveKey !== prevEffectiveKeyRef.current;\n  const isNullishChangePending =\n    isNullishContent(children) !== isNullishContent(prevChildrenRef.current);\n  const isTransitionPending = isKeyChangePending || isNullishChangePending;\n\n  const content = icons.map((icon) => {\n    const isActive = icon.key === latestKey;\n    // Use current children for active icon ONLY when no transition is pending.\n    // During intermediate renders (before effect adds new entry), use stored content.\n    // For exiting icons, always use stored content to preserve appearance during fade-out.\n    const displayContent =\n      isActive && !isTransitionPending ? children : icon.content;\n\n    return (\n      <DisplayTransition\n        key={icon.key}\n        isShown={isActive}\n        animateOnMount={icon.key !== 0}\n        onRest={(transition) => {\n          if (transition === 'exit') {\n            handleExitComplete(icon.key);\n          }\n        }}\n      >\n        {({ isShown, phase, ref }) => (\n          <IconSlotElement\n            ref={ref}\n            mods={{\n              entered: isShown,\n              phase,\n            }}\n          >\n            {displayContent}\n          </IconSlotElement>\n        )}\n      </DisplayTransition>\n    );\n  });\n\n  if (noWrapper) {\n    return <>{content}</>;\n  }\n\n  return <IconSwitchElement {...rest}>{content}</IconSwitchElement>;\n}\n\nexport type { CubeIconSwitchProps as IconSwitchProps };\n"],"mappings":"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"}
+{"version":3,"file":"IconSwitch.js","names":["BaseProps","tasty","isValidElement","ReactNode","useCallback","useLayoutEffect","useRef","useState","DisplayTransition","CubeIconSwitchProps","children","contentKey","noWrapper","IconEntry","key","content","isNullishContent","node","typeIds","WeakMap","lastTypeId","getTypeId","type","existing","get","next","set","deriveContentKey","keyPart","String","IconSwitchElement","styles","display","placeItems","IconSlotElement","gridArea","placeSelf","opacity","entered","transition","IconSwitch","props","rest","keyCounterRef","effectiveKey","prevEffectiveKeyRef","prevChildrenRef","icons","setIcons","current","prevKey","prevChildren","hasKeyChanged","hasNullishToggled","newEntry","prev","handleExitComplete","exitedKey","filter","icon","latestKey","length","isKeyChangePending","isNullishChangePending","isTransitionPending","map","isActive","displayContent","isShown","phase","ref","IconSwitchProps"],"sources":["../../../../src/components/helpers/IconSwitch/IconSwitch.tsx"],"sourcesContent":["import { BaseProps, tasty } from '@tenphi/tasty';\nimport {\n  isValidElement,\n  ReactNode,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { DisplayTransition } from '../DisplayTransition/DisplayTransition';\n\nexport interface CubeIconSwitchProps extends BaseProps {\n  /** The icon to display */\n  children: ReactNode;\n  /** Override the default key derivation for detecting icon changes */\n  contentKey?: string | number;\n  /** When true, renders without wrapper element, expecting parent to provide grid context */\n  noWrapper?: boolean;\n}\n\ninterface IconEntry {\n  key: number;\n  content: ReactNode;\n}\n\nfunction isNullishContent(node: ReactNode) {\n  // React treats `null`, `undefined`, and `false` as \"render nothing\"\n  return node == null || node === false;\n}\n\nconst typeIds = new WeakMap<object, number>();\nlet lastTypeId = 0;\n\nfunction getTypeId(type: object) {\n  const existing = typeIds.get(type);\n  if (existing != null) return existing;\n  const next = (lastTypeId += 1);\n  typeIds.set(type, next);\n  return next;\n}\n\n/**\n * Best-effort key derivation for icon switching when `contentKey` is not provided.\n * The goal is to:\n * - Transition when icon component type changes\n * - Not transition when only props change for the same icon type (self-animating icons)\n * - Transition when toggling to/from nullish content\n */\nfunction deriveContentKey(children: ReactNode): string {\n  if (isNullishContent(children)) return 'nullish';\n  if (!isValidElement(children)) return `non-element:${typeof children}`;\n\n  const { type, key } = children;\n  const keyPart = key == null ? '' : `:${String(key)}`;\n\n  if (typeof type === 'string') return `host:${type}${keyPart}`;\n  if (typeof type === 'function') return `fn:${getTypeId(type)}${keyPart}`;\n  if (typeof type === 'object' && type != null)\n    return `obj:${getTypeId(type)}${keyPart}`;\n  if (typeof type === 'symbol') return `sym:${String(type)}${keyPart}`;\n\n  return `unknown${keyPart}`;\n}\n\nconst IconSwitchElement = tasty({\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n  },\n});\n\nconst IconSlotElement = tasty({\n  styles: {\n    gridArea: '1 / 1',\n    display: 'grid',\n    placeItems: 'center',\n    placeSelf: 'stretch',\n    opacity: {\n      '': 0,\n      entered: 1,\n    },\n    transition: {\n      '': 'theme $transition ease-out',\n      'exit | entered': 'theme $transition ease-in',\n    },\n  },\n});\n\n/**\n * A component that cross-fades between icons when children change.\n * Useful for animated icon transitions in buttons, items, etc.\n *\n * When `contentKey` changes, a transition is triggered.\n * When only `children` changes (same `contentKey`), content is updated in-place\n * without transition, allowing self-animating icons (like DirectionIcon) to work.\n */\nexport function IconSwitch(props: CubeIconSwitchProps) {\n  const { children, contentKey, noWrapper, ...rest } = props;\n\n  const keyCounterRef = useRef(0);\n  const effectiveKey = contentKey ?? deriveContentKey(children);\n  const prevEffectiveKeyRef = useRef<string | number>(effectiveKey);\n  const prevChildrenRef = useRef<ReactNode>(children);\n\n  const [icons, setIcons] = useState<IconEntry[]>(() => [\n    { key: keyCounterRef.current, content: children },\n  ]);\n\n  useLayoutEffect(() => {\n    const prevKey = prevEffectiveKeyRef.current;\n    const prevChildren = prevChildrenRef.current;\n\n    const hasKeyChanged = effectiveKey !== prevKey;\n    const hasNullishToggled =\n      isNullishContent(children) !== isNullishContent(prevChildren);\n\n    // Transition rules:\n    // - If key changed -> transition (add new icon entry)\n    // - If we toggled nullish <-> non-nullish -> transition (even if key did not change)\n    // - Otherwise -> no state update (children reference changes are handled at render time)\n    if (hasKeyChanged || hasNullishToggled) {\n      keyCounterRef.current += 1;\n      const newEntry: IconEntry = {\n        key: keyCounterRef.current,\n        content: children,\n      };\n      setIcons((prev) => [...prev, newEntry]);\n    }\n\n    prevEffectiveKeyRef.current = effectiveKey;\n    prevChildrenRef.current = children;\n  }, [children, effectiveKey]);\n\n  const handleExitComplete = useCallback((exitedKey: number) => {\n    setIcons((prev) => prev.filter((icon) => icon.key !== exitedKey));\n  }, []);\n\n  const latestKey = icons[icons.length - 1]?.key;\n\n  // Detect if we're in an intermediate render (transition pending but effect hasn't added new entry yet).\n  // In this state, we must use stored content to avoid flashing the new icon before the transition.\n  const isKeyChangePending = effectiveKey !== prevEffectiveKeyRef.current;\n  const isNullishChangePending =\n    isNullishContent(children) !== isNullishContent(prevChildrenRef.current);\n  const isTransitionPending = isKeyChangePending || isNullishChangePending;\n\n  const content = icons.map((icon) => {\n    const isActive = icon.key === latestKey;\n    // Use current children for active icon ONLY when no transition is pending.\n    // During intermediate renders (before effect adds new entry), use stored content.\n    // For exiting icons, always use stored content to preserve appearance during fade-out.\n    const displayContent =\n      isActive && !isTransitionPending ? children : icon.content;\n\n    return (\n      <DisplayTransition\n        key={icon.key}\n        isShown={isActive}\n        animateOnMount={icon.key !== 0}\n        onRest={(transition) => {\n          if (transition === 'exit') {\n            handleExitComplete(icon.key);\n          }\n        }}\n      >\n        {({ isShown, phase, ref }) => (\n          <IconSlotElement\n            ref={ref}\n            mods={{\n              entered: isShown,\n              phase,\n            }}\n          >\n            {displayContent}\n          </IconSlotElement>\n        )}\n      </DisplayTransition>\n    );\n  });\n\n  if (noWrapper) {\n    return <>{content}</>;\n  }\n\n  return <IconSwitchElement {...rest}>{content}</IconSwitchElement>;\n}\n\nexport type { CubeIconSwitchProps as IconSwitchProps };\n"],"mappings":"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"}

package/dist/components/layout/Flex.d.ts

@@ -1,10 +1,7 @@
 
 import { AllBaseProps, ContainerStyleProps } from "@tenphi/tasty";
-import * as react from "react";
-
 //#region src/components/layout/Flex.d.ts
-interface CubeFlexProps extends AllBaseProps, ContainerStyleProps {}
-declare const Flex: react.ForwardRefExoticComponent<CubeFlexProps & react.RefAttributes<unknown>>;
+export interface CubeFlexProps extends AllBaseProps, ContainerStyleProps {}
+export declare const Flex: import("react").ForwardRefExoticComponent<CubeFlexProps & import("react").RefAttributes<unknown>>;
 //#endregion
-export { CubeFlexProps, Flex };
 //# sourceMappingURL=Flex.d.ts.map

package/dist/components/layout/Flex.js

@@ -1,10 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { c } from "react/compiler-runtime";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/layout/Flex.tsx
 const FlexElement = tasty({ styles: {
 	display: "flex",
@@ -39,7 +38,7 @@ const Flex = forwardRef(function Flex(props, ref) {
 	} else t2 = $[7];
 	return t2;
 });
-
 //#endregion
 export { Flex };
+
 //# sourceMappingURL=Flex.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","names":["AllBaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","tasty","forwardRef","extractStyles","FlexElement","styles","display","flow","CubeFlexProps","Flex","props","ref","$","_c","t0","t1","eventProps","t2"],"sources":["../../../src/components/layout/Flex.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../utils/styles';\n\nconst FlexElement = tasty({\n  styles: {\n    display: 'flex',\n    flow: 'row',\n  },\n});\n\nexport interface CubeFlexProps extends AllBaseProps, ContainerStyleProps {}\n\nexport const Flex = forwardRef(function Flex(props: CubeFlexProps, ref) {\n  const styles = extractStyles(props, CONTAINER_STYLES);\n\n  return (\n    <FlexElement\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;;AAWA,MAAMO,cAAcH,MAAM,EACxBI,QAAQ;CACNC,SAAS;CACTC,MAAM;CACR,EACD,CAAC;AAIF,MAAaE,OAAOP,WAAW,SAAAO,KAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;AAAA,KAAAF,EAAA,OAAAF,OAAA;AACdI,OAAAX,cAAcO,OAAOZ,iBAAiB;AAAAc,IAAA,KAAAF;AAAAE,IAAA,KAAAE;OAAAA,MAAAF,EAAA;CAArD,MAAAP,SAAeS;CAAuC,IAAAC;AAAA,KAAAH,EAAA,OAAAF,OAAA;AAI9CK,OAAAf,gBAAgBU,OAAO,EAAAM,YAAc,MAAM,CAAC;AAAAJ,IAAA,KAAAF;AAAAE,IAAA,KAAAG;OAAAA,MAAAH,EAAA;CAAA,IAAAK;AAAA,KAAAL,EAAA,OAAAD,OAAAC,EAAA,OAAAP,UAAAO,EAAA,OAAAG,IAAA;AADlDE,OAAA,oBAAC;GAAW,GACNF;GACCJ;GACGN;IACR;AAAAO,IAAA,KAAAD;AAAAC,IAAA,KAAAP;AAAAO,IAAA,KAAAG;AAAAH,IAAA,KAAAK;OAAAA,MAAAL,EAAA;AAAA,QAJFK;EAMF"}
+{"version":3,"file":"Flex.js","names":["AllBaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","tasty","forwardRef","extractStyles","FlexElement","styles","display","flow","CubeFlexProps","Flex","props","ref","$","_c","t0","t1","eventProps","t2","_c"],"sources":["../../../src/components/layout/Flex.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../utils/styles';\n\nconst FlexElement = tasty({\n  styles: {\n    display: 'flex',\n    flow: 'row',\n  },\n});\n\nexport interface CubeFlexProps extends AllBaseProps, ContainerStyleProps {}\n\nexport const Flex = forwardRef(function Flex(props: CubeFlexProps, ref) {\n  const styles = extractStyles(props, CONTAINER_STYLES);\n\n  return (\n    <FlexElement\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;AAWA,MAAMO,cAAcH,MAAM,EACxBI,QAAQ;CACNC,SAAS;CACTC,MAAM;AACR,EACF,CAAC;AAID,MAAaE,OAAOP,WAAW,SAAAO,KAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAF,OAAA;EACdI,KAAAX,cAAcO,OAAOZ,gBAAgB;EAACc,EAAA,KAAAF;EAAAE,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAArD,MAAAP,SAAeS;CAAuC,IAAAC;CAAA,IAAAH,EAAA,OAAAF,OAAA;EAI9CK,KAAAf,gBAAgBU,OAAO,EAAAM,YAAc,KAAK,CAAC;EAACJ,EAAA,KAAAF;EAAAE,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAD,OAAAC,EAAA,OAAAP,UAAAO,EAAA,OAAAG,IAAA;EADlDE,KAAA,oBAAC,aAAD;GAAY,GACNF;GACCJ;GACGN;EAAM,CAAA;EACdO,EAAA,KAAAD;EAAAC,EAAA,KAAAP;EAAAO,EAAA,KAAAG;EAAAH,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OAJFK;AAIE,CAEL"}

package/dist/components/layout/Flow.d.ts

@@ -1,10 +1,7 @@
 
 import { AllBaseProps, ContainerStyleProps } from "@tenphi/tasty";
-import * as react from "react";
-
 //#region src/components/layout/Flow.d.ts
-interface CubeFlowProps extends AllBaseProps, ContainerStyleProps {}
-declare const Flow: react.ForwardRefExoticComponent<CubeFlowProps & react.RefAttributes<unknown>>;
+export interface CubeFlowProps extends AllBaseProps, ContainerStyleProps {}
+export declare const Flow: import("react").ForwardRefExoticComponent<CubeFlowProps & import("react").RefAttributes<unknown>>;
 //#endregion
-export { CubeFlowProps, Flow };
 //# sourceMappingURL=Flow.d.ts.map

package/dist/components/layout/Flow.js

@@ -1,10 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { c } from "react/compiler-runtime";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/layout/Flow.tsx
 const FlowElement = tasty({ styles: {
 	display: "block",
@@ -40,7 +39,7 @@ const Flow = forwardRef(function Flow(props, ref) {
 	} else t2 = $[7];
 	return t2;
 });
-
 //#endregion
 export { Flow };
+
 //# sourceMappingURL=Flow.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Flow.js","names":["AllBaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","tasty","forwardRef","extractStyles","FlowElement","styles","display","flow","STYLE_PROPS","CubeFlowProps","Flow","props","ref","$","_c","t0","t1","eventProps","t2"],"sources":["../../../src/components/layout/Flow.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../utils/styles';\n\nconst FlowElement = tasty({\n  styles: {\n    display: 'block',\n    flow: 'column',\n  },\n});\n\nconst STYLE_PROPS = CONTAINER_STYLES;\n\nexport interface CubeFlowProps extends AllBaseProps, ContainerStyleProps {}\n\nexport const Flow = forwardRef(function Flow(props: CubeFlowProps, ref) {\n  const styles = extractStyles(props, STYLE_PROPS);\n\n  return (\n    <FlowElement\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;;AAWA,MAAMO,cAAcH,MAAM,EACxBI,QAAQ;CACNC,SAAS;CACTC,MAAM;CACR,EACD,CAAC;AAEF,MAAMC,cAAcV;AAIpB,MAAaY,OAAOR,WAAW,SAAAQ,KAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;AAAA,KAAAF,EAAA,OAAAF,OAAA;AACdI,OAAAZ,cAAcQ,OAAOH,YAAY;AAAAK,IAAA,KAAAF;AAAAE,IAAA,KAAAE;OAAAA,MAAAF,EAAA;CAAhD,MAAAR,SAAeU;CAAkC,IAAAC;AAAA,KAAAH,EAAA,OAAAF,OAAA;AAIzCK,OAAAhB,gBAAgBW,OAAO,EAAAM,YAAc,MAAM,CAAC;AAAAJ,IAAA,KAAAF;AAAAE,IAAA,KAAAG;OAAAA,MAAAH,EAAA;CAAA,IAAAK;AAAA,KAAAL,EAAA,OAAAD,OAAAC,EAAA,OAAAR,UAAAQ,EAAA,OAAAG,IAAA;AADlDE,OAAA,oBAAC;GAAW,GACNF;GACCJ;GACGP;IACR;AAAAQ,IAAA,KAAAD;AAAAC,IAAA,KAAAR;AAAAQ,IAAA,KAAAG;AAAAH,IAAA,KAAAK;OAAAA,MAAAL,EAAA;AAAA,QAJFK;EAMF"}
+{"version":3,"file":"Flow.js","names":["AllBaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","tasty","forwardRef","extractStyles","FlowElement","styles","display","flow","STYLE_PROPS","CubeFlowProps","Flow","props","ref","$","_c","t0","t1","eventProps","t2","_c"],"sources":["../../../src/components/layout/Flow.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../utils/styles';\n\nconst FlowElement = tasty({\n  styles: {\n    display: 'block',\n    flow: 'column',\n  },\n});\n\nconst STYLE_PROPS = CONTAINER_STYLES;\n\nexport interface CubeFlowProps extends AllBaseProps, ContainerStyleProps {}\n\nexport const Flow = forwardRef(function Flow(props: CubeFlowProps, ref) {\n  const styles = extractStyles(props, STYLE_PROPS);\n\n  return (\n    <FlowElement\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;AAWA,MAAMO,cAAcH,MAAM,EACxBI,QAAQ;CACNC,SAAS;CACTC,MAAM;AACR,EACF,CAAC;AAED,MAAMC,cAAcV;AAIpB,MAAaY,OAAOR,WAAW,SAAAQ,KAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAF,OAAA;EACdI,KAAAZ,cAAcQ,OAAOH,WAAW;EAACK,EAAA,KAAAF;EAAAE,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAhD,MAAAR,SAAeU;CAAkC,IAAAC;CAAA,IAAAH,EAAA,OAAAF,OAAA;EAIzCK,KAAAhB,gBAAgBW,OAAO,EAAAM,YAAc,KAAK,CAAC;EAACJ,EAAA,KAAAF;EAAAE,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAD,OAAAC,EAAA,OAAAR,UAAAQ,EAAA,OAAAG,IAAA;EADlDE,KAAA,oBAAC,aAAD;GAAY,GACNF;GACCJ;GACGP;EAAM,CAAA;EACdQ,EAAA,KAAAD;EAAAC,EAAA,KAAAR;EAAAQ,EAAA,KAAAG;EAAAH,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OAJFK;AAIE,CAEL"}

package/dist/components/layout/Grid.d.ts

@@ -1,10 +1,7 @@
 
 import { AllBaseProps, ContainerStyleProps, ShortGridStyles } from "@tenphi/tasty";
-import * as react from "react";
-
 //#region src/components/layout/Grid.d.ts
-interface CubeGridProps extends Omit<AllBaseProps, 'rows'>, ContainerStyleProps, ShortGridStyles {}
-declare const Grid: react.ForwardRefExoticComponent<CubeGridProps & react.RefAttributes<unknown>>;
+export interface CubeGridProps extends Omit<AllBaseProps, 'rows'>, ContainerStyleProps, ShortGridStyles {}
+export declare const Grid: import("react").ForwardRefExoticComponent<CubeGridProps & import("react").RefAttributes<unknown>>;
 //#endregion
-export { CubeGridProps, Grid };
 //# sourceMappingURL=Grid.d.ts.map

package/dist/components/layout/Grid.js

@@ -1,10 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { c } from "react/compiler-runtime";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/layout/Grid.tsx
 const GridElement = tasty({ styles: {
 	display: "grid",
@@ -46,7 +45,7 @@ const Grid = forwardRef(function Grid(props, ref) {
 	} else t3 = $[7];
 	return t3;
 });
-
 //#endregion
 export { Grid };
+
 //# sourceMappingURL=Grid.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","names":["AllBaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","ShortGridStyles","tasty","forwardRef","extractStyles","GridElement","styles","display","flow","CubeGridProps","Omit","PROP_MAP","template","columns","rows","areas","const","Grid","props","ref","$","_c","t0","undefined","t1","eventProps","t2","Record","t3"],"sources":["../../../src/components/layout/Grid.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  ShortGridStyles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../utils/styles';\n\nconst GridElement = tasty({\n  styles: {\n    display: 'grid',\n    flow: 'row',\n  },\n});\n\nexport interface CubeGridProps\n  extends Omit<AllBaseProps, 'rows'>,\n    ContainerStyleProps,\n    ShortGridStyles {}\n\nconst PROP_MAP = {\n  template: 'gridTemplate',\n  columns: 'gridColumns',\n  rows: 'gridRows',\n  areas: 'gridAreas',\n} as const;\n\nexport const Grid = forwardRef(function Grid(props: CubeGridProps, ref) {\n  const styles = extractStyles(props, CONTAINER_STYLES, undefined, PROP_MAP);\n\n  return (\n    <GridElement\n      {...(filterBaseProps(props, { eventProps: true }) as Record<\n        string,\n        unknown\n      >)}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;;AAYA,MAAMQ,cAAcH,MAAM,EACxBI,QAAQ;CACNC,SAAS;CACTC,MAAM;CACR,EACD,CAAC;AAOF,MAAMG,WAAW;CACfC,UAAU;CACVC,SAAS;CACTC,MAAM;CACNC,OAAO;CACR;AAED,MAAaE,OAAOd,WAAW,SAAAc,KAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;AAAA,KAAAF,EAAA,OAAAF,OAAA;AACdI,OAAAlB,cAAcc,OAAOpB,kBAAkByB,QAAWZ,SAAS;AAAAS,IAAA,KAAAF;AAAAE,IAAA,KAAAE;OAAAA,MAAAF,EAAA;CAA1E,MAAAd,SAAegB;CAA4D,IAAAE;AAAA,KAAAJ,EAAA,OAAAF,OAAA;AAIlEM,OAAAxB,gBAAgBkB,OAAO,EAAAO,YAAc,MAAM,CAAC;AAAAL,IAAA,KAAAF;AAAAE,IAAA,KAAAI;OAAAA,MAAAJ,EAAA;CAA5C,MAAAM,KAAAF;CAGJ,IAAAI;AAAA,KAAAR,EAAA,OAAAD,OAAAC,EAAA,OAAAd,UAAAc,EAAA,OAAAM,IAAA;AAJHE,OAAA,oBAAC;GAAW,GACLF;GAIAP;GACGb;IACR;AAAAc,IAAA,KAAAD;AAAAC,IAAA,KAAAd;AAAAc,IAAA,KAAAM;AAAAN,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;AAAA,QAPFQ;EASF"}
+{"version":3,"file":"Grid.js","names":["AllBaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","ShortGridStyles","tasty","forwardRef","extractStyles","GridElement","styles","display","flow","CubeGridProps","Omit","PROP_MAP","template","columns","rows","areas","const","Grid","props","ref","$","_c","t0","undefined","t1","eventProps","t2","Record","t3","_c"],"sources":["../../../src/components/layout/Grid.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  ShortGridStyles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../utils/styles';\n\nconst GridElement = tasty({\n  styles: {\n    display: 'grid',\n    flow: 'row',\n  },\n});\n\nexport interface CubeGridProps\n  extends Omit<AllBaseProps, 'rows'>, ContainerStyleProps, ShortGridStyles {}\n\nconst PROP_MAP = {\n  template: 'gridTemplate',\n  columns: 'gridColumns',\n  rows: 'gridRows',\n  areas: 'gridAreas',\n} as const;\n\nexport const Grid = forwardRef(function Grid(props: CubeGridProps, ref) {\n  const styles = extractStyles(props, CONTAINER_STYLES, undefined, PROP_MAP);\n\n  return (\n    <GridElement\n      {...(filterBaseProps(props, { eventProps: true }) as Record<\n        string,\n        unknown\n      >)}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;AAYA,MAAMQ,cAAcH,MAAM,EACxBI,QAAQ;CACNC,SAAS;CACTC,MAAM;AACR,EACF,CAAC;AAKD,MAAMG,WAAW;CACfC,UAAU;CACVC,SAAS;CACTC,MAAM;CACNC,OAAO;AACT;AAEA,MAAaE,OAAOd,WAAW,SAAAc,KAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAF,OAAA;EACdI,KAAAlB,cAAcc,OAAOpB,kBAAkByB,KAAAA,GAAWZ,QAAQ;EAACS,EAAA,KAAAF;EAAAE,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAA1E,MAAAd,SAAegB;CAA4D,IAAAE;CAAA,IAAAJ,EAAA,OAAAF,OAAA;EAIlEM,KAAAxB,gBAAgBkB,OAAO,EAAAO,YAAc,KAAK,CAAC;EAACL,EAAA,KAAAF;EAAAE,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAA5C,MAAAM,KAAAF;CAGJ,IAAAI;CAAA,IAAAR,EAAA,OAAAD,OAAAC,EAAA,OAAAd,UAAAc,EAAA,OAAAM,IAAA;EAJHE,KAAA,oBAAC,aAAD;GAAY,GACLF;GAIAP;GACGb;EAAM,CAAA;EACdc,EAAA,KAAAD;EAAAC,EAAA,KAAAd;EAAAc,EAAA,KAAAM;EAAAN,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAPFQ;AAOE,CAEL"}

package/dist/components/layout/Panel.d.ts

@@ -1,10 +1,8 @@
 
 import { BaseProps, BaseStyleProps, BlockStyleProps, ColorStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
-import * as react from "react";
 import { ReactNode } from "react";
-
 //#region src/components/layout/Panel.d.ts
-interface CubePanelProps extends OuterStyleProps, BlockStyleProps, BaseStyleProps, ColorStyleProps, BaseProps {
+export interface CubePanelProps extends OuterStyleProps, BlockStyleProps, BaseStyleProps, ColorStyleProps, BaseProps {
   isStretched?: boolean;
   isCard?: boolean;
   isFloating?: boolean;
@@ -20,7 +18,7 @@ interface CubePanelProps extends OuterStyleProps, BlockStyleProps, BaseStyleProp
   children?: ReactNode;
   extra?: ReactNode;
 }
-declare const _Panel: react.ForwardRefExoticComponent<CubePanelProps & react.RefAttributes<HTMLDivElement>>;
+declare const _Panel: import("react").ForwardRefExoticComponent<CubePanelProps & import("react").RefAttributes<HTMLDivElement>>;
 //#endregion
-export { CubePanelProps, _Panel };
+export { _Panel as Panel };
 //# sourceMappingURL=Panel.d.ts.map