@cube-dev/ui-kit 0.113.1 → 0.115.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"DisplayTransition.js","names":[],"sources":["../../../../src/components/helpers/DisplayTransition/DisplayTransition.tsx"],"sourcesContent":["import {\n  ReactNode,\n  RefCallback,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nconst AUTO_FALLBACK_DURATION = 500;\n\ntype Phase = 'enter' | 'entered' | 'exit-pending' | 'exit' | 'unmounted';\ntype 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, ref }. Bind ref to the transitioned element for native event detection. */\n  children: (props: {\n    phase: ReportedPhase;\n    isShown: 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    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  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 element = elementRef.current;\n    const listeners = eventListenersRef.current;\n    if (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        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    if (!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  useEffect(() => {\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      }\n      // 'exit-pending' is handled in useLayoutEffect below\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      nextPaint(() => {\n        if (phaseRef.current === 'exit-pending') {\n          setPhase('exit');\n          ensureExitFlow();\n        }\n      });\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 transitioned element\n  // MUST be memoized so React doesn't re-call it on re-renders,\n  // which would cleanup event listeners mid-transition\n  const refCallback: RefCallback<HTMLElement> = useCallback((node) => {\n    if (node) {\n      elementRef.current = node;\n      // Don't call ensureEnterFlow() here - useLayoutEffect handles RAF scheduling\n      // to ensure symmetric timing with exit flow\n    } else {\n      cleanupEventListeners();\n      elementRef.current = null;\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  // When preserveContent is enabled, always use stored children:\n  // - During show: stored is updated above, so it equals current children\n  // - During hide: stored keeps the last shown content for the exit animation\n  const effectiveChildren = preserveContent\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    ref: refCallback,\n  });\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,124 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { DisplayTransition } from "../DisplayTransition/DisplayTransition.js";
+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;
+}
+const typeIds = /* @__PURE__ */ 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.
+*/
+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 hasNullishToggled = isNullishContent(children) !== isNullishContent(prevChildren);
+		if (hasKeyChanged || hasNullishToggled) {
+			keyCounterRef.current += 1;
+			const newEntry = {
+				key: keyCounterRef.current,
+				content: children
+			};
+			setIcons((prev) => [...prev, newEntry]);
+		}
+		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 isKeyChangePending = effectiveKey !== prevEffectiveKeyRef.current;
+	const isNullishChangePending = isNullishContent(children) !== isNullishContent(prevChildrenRef.current);
+	const isTransitionPending = isKeyChangePending || isNullishChangePending;
+	const content = icons.map((icon) => {
+		const isActive = icon.key === latestKey;
+		const displayContent = isActive && !isTransitionPending ? children : icon.content;
+		return /* @__PURE__ */ jsx(DisplayTransition, {
+			isShown: isActive,
+			animateOnMount: icon.key !== 0,
+			onRest: (transition) => {
+				if (transition === "exit") handleExitComplete(icon.key);
+			},
+			children: ({ isShown, phase, ref }) => /* @__PURE__ */ jsx(IconSlotElement, {
+				ref,
+				mods: {
+					entered: isShown,
+					phase
+				},
+				children: displayContent
+			})
+		}, icon.key);
+	});
+	if (noWrapper) return /* @__PURE__ */ jsx(Fragment$1, { children: content });
+	return /* @__PURE__ */ jsx(IconSwitchElement, {
+		...rest,
+		children: content
+	});
+}
+
+//#endregion
+export { IconSwitch };
+//# sourceMappingURL=IconSwitch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconSwitch.js","names":[],"sources":["../../../../src/components/helpers/IconSwitch/IconSwitch.tsx"],"sourcesContent":["import {\n  isValidElement,\n  ReactNode,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { BaseProps, tasty } from '../../../tasty';\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    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

@@ -0,0 +1,11 @@
+
+import { AllBaseProps, ContainerStyleProps } from "../../tasty/types.js";
+import "../../tasty/index.js";
+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>>;
+//#endregion
+export { CubeFlexProps, Flex };
+//# sourceMappingURL=Flex.d.ts.map

package/dist/components/layout/Flex.js

@@ -0,0 +1,25 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { extractStyles } from "../../tasty/utils/styles.js";
+import { CONTAINER_STYLES } from "../../tasty/styles/list.js";
+import { tasty } from "../../tasty/tasty.js";
+import { filterBaseProps } from "../../tasty/utils/filter-base-props.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/layout/Flex.tsx
+const FlexElement = tasty({ styles: {
+	display: "flex",
+	flow: "row"
+} });
+const Flex = forwardRef(function Flex(props, ref) {
+	const styles = extractStyles(props, CONTAINER_STYLES);
+	return /* @__PURE__ */ jsx(FlexElement, {
+		...filterBaseProps(props, { eventProps: true }),
+		ref,
+		styles
+	});
+});
+
+//#endregion
+export { Flex };
+//# sourceMappingURL=Flex.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.js","names":[],"sources":["../../../src/components/layout/Flex.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  tasty,\n} from '../../tasty';\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,MAAM,cAAc,MAAM,EACxB,QAAQ;CACN,SAAS;CACT,MAAM;CACP,EACF,CAAC;AAIF,MAAa,OAAO,WAAW,SAAS,KAAK,OAAsB,KAAK;CACtE,MAAM,SAAS,cAAc,OAAO,iBAAiB;AAErD,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ"}

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

@@ -0,0 +1,11 @@
+
+import { AllBaseProps, ContainerStyleProps } from "../../tasty/types.js";
+import "../../tasty/index.js";
+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>>;
+//#endregion
+export { CubeFlowProps, Flow };
+//# sourceMappingURL=Flow.d.ts.map

package/dist/components/layout/Flow.js

@@ -0,0 +1,26 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { extractStyles } from "../../tasty/utils/styles.js";
+import { CONTAINER_STYLES } from "../../tasty/styles/list.js";
+import { tasty } from "../../tasty/tasty.js";
+import { filterBaseProps } from "../../tasty/utils/filter-base-props.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/layout/Flow.tsx
+const FlowElement = tasty({ styles: {
+	display: "block",
+	flow: "column"
+} });
+const STYLE_PROPS = CONTAINER_STYLES;
+const Flow = forwardRef(function Flow(props, ref) {
+	const styles = extractStyles(props, STYLE_PROPS);
+	return /* @__PURE__ */ jsx(FlowElement, {
+		...filterBaseProps(props, { eventProps: true }),
+		ref,
+		styles
+	});
+});
+
+//#endregion
+export { Flow };
+//# sourceMappingURL=Flow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flow.js","names":[],"sources":["../../../src/components/layout/Flow.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  tasty,\n} from '../../tasty';\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,MAAM,cAAc,MAAM,EACxB,QAAQ;CACN,SAAS;CACT,MAAM;CACP,EACF,CAAC;AAEF,MAAM,cAAc;AAIpB,MAAa,OAAO,WAAW,SAAS,KAAK,OAAsB,KAAK;CACtE,MAAM,SAAS,cAAc,OAAO,YAAY;AAEhD,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ"}

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

@@ -0,0 +1,11 @@
+
+import { AllBaseProps, ContainerStyleProps, ShortGridStyles } from "../../tasty/types.js";
+import "../../tasty/index.js";
+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>>;
+//#endregion
+export { CubeGridProps, Grid };
+//# sourceMappingURL=Grid.d.ts.map

package/dist/components/layout/Grid.js

@@ -0,0 +1,31 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { extractStyles } from "../../tasty/utils/styles.js";
+import { CONTAINER_STYLES } from "../../tasty/styles/list.js";
+import { tasty } from "../../tasty/tasty.js";
+import { filterBaseProps } from "../../tasty/utils/filter-base-props.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/layout/Grid.tsx
+const GridElement = tasty({ styles: {
+	display: "grid",
+	flow: "row"
+} });
+const PROP_MAP = {
+	template: "gridTemplate",
+	columns: "gridColumns",
+	rows: "gridRows",
+	areas: "gridAreas"
+};
+const Grid = forwardRef(function Grid(props, ref) {
+	const styles = extractStyles(props, CONTAINER_STYLES, void 0, PROP_MAP);
+	return /* @__PURE__ */ jsx(GridElement, {
+		...filterBaseProps(props, { eventProps: true }),
+		ref,
+		styles
+	});
+});
+
+//#endregion
+export { Grid };
+//# sourceMappingURL=Grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","names":[],"sources":["../../../src/components/layout/Grid.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  ShortGridStyles,\n  tasty,\n} from '../../tasty';\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 })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;AAYA,MAAM,cAAc,MAAM,EACxB,QAAQ;CACN,SAAS;CACT,MAAM;CACP,EACF,CAAC;AAOF,MAAM,WAAW;CACf,UAAU;CACV,SAAS;CACT,MAAM;CACN,OAAO;CACR;AAED,MAAa,OAAO,WAAW,SAAS,KAAK,OAAsB,KAAK;CACtE,MAAM,SAAS,cAAc,OAAO,kBAAkB,QAAW,SAAS;AAE1E,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ"}

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

@@ -0,0 +1,28 @@
+
+import { Styles } from "../../tasty/styles/types.js";
+import { BaseProps, BaseStyleProps, BlockStyleProps, ColorStyleProps, OuterStyleProps } from "../../tasty/types.js";
+import "../../tasty/index.js";
+import * as react from "react";
+import { ReactNode } from "react";
+
+//#region src/components/layout/Panel.d.ts
+interface CubePanelProps extends OuterStyleProps, BlockStyleProps, BaseStyleProps, ColorStyleProps, BaseProps {
+  isStretched?: boolean;
+  isCard?: boolean;
+  isFloating?: boolean;
+  styles?: Styles;
+  innerStyles?: Styles;
+  placeContent?: Styles['placeContent'];
+  placeItems?: Styles['placeItems'];
+  gridColumns?: Styles['gridTemplateColumns'];
+  gridRows?: Styles['gridTemplateRows'];
+  flow?: Styles['flow'];
+  gap?: Styles['gap'];
+  isFlex?: boolean;
+  children?: ReactNode;
+  extra?: ReactNode;
+}
+declare const _Panel: react.ForwardRefExoticComponent<CubePanelProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CubePanelProps, _Panel };
+//# sourceMappingURL=Panel.d.ts.map

package/dist/components/layout/Panel.js

@@ -0,0 +1,133 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, DIMENSION_STYLES, OUTER_STYLES } from "../../tasty/styles/list.js";
+import { tasty } from "../../tasty/tasty.js";
+import { forwardRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/layout/Panel.tsx
+const PanelElement = tasty({
+	as: "section",
+	qa: "Panel",
+	styles: {
+		position: {
+			"": "relative",
+			"stretched | floating": "absolute"
+		},
+		inset: {
+			"": "initial",
+			stretched: true
+		},
+		display: "block",
+		radius: {
+			"": "0",
+			card: "1r"
+		},
+		border: {
+			"": "0",
+			card: "1bw"
+		},
+		flexGrow: 1,
+		placeSelf: "stretch"
+	}
+});
+const PanelInnerElement = tasty({
+	styles: {
+		position: "absolute",
+		display: {
+			"": "grid",
+			flex: "flex"
+		},
+		top: 0,
+		left: 0,
+		right: 0,
+		bottom: 0,
+		overflow: "auto",
+		scrollbar: "thin #dark.2",
+		gridColumns: "minmax(100%, 100%)",
+		gridRows: {
+			"": "initial",
+			stretched: "minmax(0, 1fr)"
+		},
+		radius: {
+			"": "0",
+			card: "(1r - 1bw)"
+		},
+		flow: "row",
+		placeContent: "start stretch"
+	},
+	styleProps: [
+		...OUTER_STYLES,
+		...BASE_STYLES,
+		...COLOR_STYLES
+	]
+});
+const STYLES = [
+	"placeContent",
+	"placeItems",
+	"gridColumns",
+	"gridRows",
+	"flow",
+	"gap",
+	"padding",
+	"overflow",
+	"fill",
+	"color",
+	"preset"
+];
+function Panel(props, ref) {
+	let { qa, mods, isStretched, isFloating, isCard, isFlex, styles, innerStyles, children, extra, style, ...otherProps } = props;
+	STYLES.forEach((style) => {
+		if (props[style]) {
+			innerStyles = {
+				...innerStyles,
+				[style]: props[style]
+			};
+			delete otherProps[style];
+		}
+	});
+	[
+		...OUTER_STYLES,
+		...BASE_STYLES,
+		...BLOCK_STYLES,
+		...COLOR_STYLES,
+		...DIMENSION_STYLES
+	].forEach((style) => {
+		if (style in otherProps) {
+			styles = {
+				...styles,
+				[style]: otherProps[style]
+			};
+			delete otherProps[style];
+		}
+	});
+	const appliedMods = useMemo(() => ({
+		floating: isFloating,
+		stretched: isStretched,
+		card: isCard,
+		flex: isFlex,
+		...mods
+	}), [
+		isStretched,
+		isCard,
+		mods
+	]);
+	return /* @__PURE__ */ jsxs(PanelElement, {
+		ref,
+		qa,
+		mods: appliedMods,
+		styles,
+		style,
+		...otherProps,
+		children: [/* @__PURE__ */ jsx(PanelInnerElement, {
+			mods: appliedMods,
+			styles: innerStyles,
+			children
+		}), extra]
+	});
+}
+const _Panel = forwardRef(Panel);
+_Panel.displayName = "Panel";
+
+//#endregion
+export { _Panel };
+//# sourceMappingURL=Panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","names":[],"sources":["../../../src/components/layout/Panel.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, ReactNode, useMemo } from 'react';\n\nimport {\n  BASE_STYLES,\n  BaseProps,\n  BaseStyleProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  COLOR_STYLES,\n  ColorStyleProps,\n  DIMENSION_STYLES,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '../../tasty';\n\nconst PanelElement = tasty({\n  as: 'section',\n  qa: 'Panel',\n  styles: {\n    position: {\n      '': 'relative',\n      'stretched | floating': 'absolute',\n    },\n    inset: {\n      '': 'initial',\n      stretched: true,\n    },\n    display: 'block',\n    radius: {\n      '': '0',\n      card: '1r',\n    },\n    border: {\n      '': '0',\n      card: '1bw',\n    },\n    flexGrow: 1,\n    placeSelf: 'stretch',\n  },\n});\n\nconst PanelInnerElement = tasty({\n  styles: {\n    position: 'absolute',\n    display: {\n      '': 'grid',\n      flex: 'flex',\n    },\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    overflow: 'auto',\n    scrollbar: 'thin #dark.2',\n    gridColumns: 'minmax(100%, 100%)',\n    gridRows: {\n      '': 'initial',\n      stretched: 'minmax(0, 1fr)',\n    },\n    radius: {\n      '': '0',\n      card: '(1r - 1bw)',\n    },\n    flow: 'row',\n    placeContent: 'start stretch',\n  },\n  styleProps: [...OUTER_STYLES, ...BASE_STYLES, ...COLOR_STYLES],\n});\n\nexport interface CubePanelProps\n  extends OuterStyleProps,\n    BlockStyleProps,\n    BaseStyleProps,\n    ColorStyleProps,\n    BaseProps {\n  isStretched?: boolean;\n  isCard?: boolean;\n  isFloating?: boolean;\n  styles?: Styles;\n  innerStyles?: Styles;\n  placeContent?: Styles['placeContent'];\n  placeItems?: Styles['placeItems'];\n  gridColumns?: Styles['gridTemplateColumns'];\n  gridRows?: Styles['gridTemplateRows'];\n  flow?: Styles['flow'];\n  gap?: Styles['gap'];\n  isFlex?: boolean;\n  children?: ReactNode;\n  extra?: ReactNode;\n}\n\nconst STYLES = [\n  'placeContent',\n  'placeItems',\n  'gridColumns',\n  'gridRows',\n  'flow',\n  'gap',\n  'padding',\n  'overflow',\n  'fill',\n  'color',\n  'preset',\n] as const;\n\nfunction Panel(props: CubePanelProps, ref: ForwardedRef<HTMLDivElement>) {\n  let {\n    qa,\n    mods,\n    isStretched,\n    isFloating,\n    isCard,\n    isFlex,\n    styles,\n    innerStyles,\n    children,\n    extra,\n    style,\n    ...otherProps\n  } = props;\n\n  STYLES.forEach((style) => {\n    if (props[style]) {\n      innerStyles = { ...innerStyles, [style]: props[style] };\n\n      delete otherProps[style];\n    }\n  });\n\n  [\n    ...OUTER_STYLES,\n    ...BASE_STYLES,\n    ...BLOCK_STYLES,\n    ...COLOR_STYLES,\n    ...DIMENSION_STYLES,\n  ].forEach((style) => {\n    if (style in otherProps) {\n      styles = { ...styles, [style]: otherProps[style] };\n\n      delete otherProps[style];\n    }\n  });\n\n  const appliedMods = useMemo(\n    () => ({\n      floating: isFloating,\n      stretched: isStretched,\n      card: isCard,\n      flex: isFlex,\n      ...mods,\n    }),\n    [isStretched, isCard, mods],\n  );\n\n  return (\n    <PanelElement\n      ref={ref}\n      qa={qa}\n      mods={appliedMods}\n      styles={styles}\n      style={style}\n      {...otherProps}\n    >\n      <PanelInnerElement mods={appliedMods} styles={innerStyles}>\n        {children}\n      </PanelInnerElement>\n      {extra}\n    </PanelElement>\n  );\n}\n\nconst _Panel = forwardRef(Panel);\n\n_Panel.displayName = 'Panel';\n\nexport { _Panel as Panel };\n"],"mappings":";;;;;;;AAiBA,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,UAAU;GACR,IAAI;GACJ,wBAAwB;GACzB;EACD,OAAO;GACL,IAAI;GACJ,WAAW;GACZ;EACD,SAAS;EACT,QAAQ;GACN,IAAI;GACJ,MAAM;GACP;EACD,QAAQ;GACN,IAAI;GACJ,MAAM;GACP;EACD,UAAU;EACV,WAAW;EACZ;CACF,CAAC;AAEF,MAAM,oBAAoB,MAAM;CAC9B,QAAQ;EACN,UAAU;EACV,SAAS;GACP,IAAI;GACJ,MAAM;GACP;EACD,KAAK;EACL,MAAM;EACN,OAAO;EACP,QAAQ;EACR,UAAU;EACV,WAAW;EACX,aAAa;EACb,UAAU;GACR,IAAI;GACJ,WAAW;GACZ;EACD,QAAQ;GACN,IAAI;GACJ,MAAM;GACP;EACD,MAAM;EACN,cAAc;EACf;CACD,YAAY;EAAC,GAAG;EAAc,GAAG;EAAa,GAAG;EAAa;CAC/D,CAAC;AAwBF,MAAM,SAAS;CACb;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,SAAS,MAAM,OAAuB,KAAmC;CACvE,IAAI,EACF,IACA,MACA,aACA,YACA,QACA,QACA,QACA,aACA,UACA,OACA,OACA,GAAG,eACD;AAEJ,QAAO,SAAS,UAAU;AACxB,MAAI,MAAM,QAAQ;AAChB,iBAAc;IAAE,GAAG;KAAc,QAAQ,MAAM;IAAQ;AAEvD,UAAO,WAAW;;GAEpB;AAEF;EACE,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACJ,CAAC,SAAS,UAAU;AACnB,MAAI,SAAS,YAAY;AACvB,YAAS;IAAE,GAAG;KAAS,QAAQ,WAAW;IAAQ;AAElD,UAAO,WAAW;;GAEpB;CAEF,MAAM,cAAc,eACX;EACL,UAAU;EACV,WAAW;EACX,MAAM;EACN,MAAM;EACN,GAAG;EACJ,GACD;EAAC;EAAa;EAAQ;EAAK,CAC5B;AAED,QACE,qBAAC;EACM;EACD;EACJ,MAAM;EACE;EACD;EACP,GAAI;aAEJ,oBAAC;GAAkB,MAAM;GAAa,QAAQ;GAC3C;IACiB,EACnB;GACY;;AAInB,MAAM,SAAS,WAAW,MAAM;AAEhC,OAAO,cAAc"}

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

@@ -0,0 +1,15 @@
+
+import { BaseProps, ContainerStyleProps } from "../../tasty/types.js";
+import "../../tasty/index.js";
+import * as react from "react";
+import { CSSProperties } from "react";
+
+//#region src/components/layout/Prefix.d.ts
+interface CubePrefixProps extends BaseProps, ContainerStyleProps {
+  onWidthChange?: Function;
+  outerGap?: CSSProperties['gap'];
+}
+declare const Prefix: react.ForwardRefExoticComponent<CubePrefixProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CubePrefixProps, Prefix };
+//# sourceMappingURL=Prefix.d.ts.map

package/dist/components/layout/Prefix.js

@@ -0,0 +1,50 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { extractStyles, parseStyle } from "../../tasty/utils/styles.js";
+import { CONTAINER_STYLES } from "../../tasty/styles/list.js";
+import { tasty } from "../../tasty/tasty.js";
+import { filterBaseProps } from "../../tasty/utils/filter-base-props.js";
+import { useLayoutEffect as useLayoutEffect$1 } from "../../utils/react/useLayoutEffect.js";
+import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/layout/Prefix.tsx
+const PrefixElement = tasty({
+	element: "Prefix",
+	styles: {
+		position: "absolute",
+		display: "grid",
+		placeContent: "stretch",
+		placeItems: "center",
+		flow: "column",
+		gap: 0,
+		left: "$prefix-gap",
+		top: "$prefix-gap",
+		bottom: "$prefix-gap",
+		color: "#dark-02",
+		height: "(100% - (2 * $prefix-gap))"
+	}
+});
+const Prefix = forwardRef(function Prefix(allProps, outerRef) {
+	let { onWidthChange, outerGap = "1bw", children, ...props } = allProps;
+	const styles = extractStyles(props, CONTAINER_STYLES);
+	const ref = useCombinedRefs(outerRef);
+	useLayoutEffect$1(() => {
+		if (ref?.current && onWidthChange) onWidthChange(ref.current.offsetWidth);
+	}, [
+		children,
+		ref,
+		onWidthChange
+	]);
+	return /* @__PURE__ */ jsx(PrefixElement, {
+		...filterBaseProps(props, { eventProps: true }),
+		ref,
+		styles,
+		style: { "--prefix-gap": parseStyle(outerGap).output },
+		children
+	});
+});
+
+//#endregion
+export { Prefix };
+//# sourceMappingURL=Prefix.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Prefix.js","names":[],"sources":["../../../src/components/layout/Prefix.tsx"],"sourcesContent":["import { CSSProperties, forwardRef } from 'react';\n\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  parseStyle,\n  tasty,\n} from '../../tasty';\nimport { useCombinedRefs, useLayoutEffect } from '../../utils/react';\n\nconst PrefixElement = tasty({\n  element: 'Prefix',\n  styles: {\n    position: 'absolute',\n    display: 'grid',\n    placeContent: 'stretch',\n    placeItems: 'center',\n    flow: 'column',\n    gap: 0,\n    left: '$prefix-gap',\n    top: '$prefix-gap',\n    bottom: '$prefix-gap',\n    color: '#dark-02',\n    height: '(100% - (2 * $prefix-gap))',\n  },\n});\n\nexport interface CubePrefixProps extends BaseProps, ContainerStyleProps {\n  onWidthChange?: Function;\n  outerGap?: CSSProperties['gap'];\n}\n\nexport const Prefix = forwardRef<HTMLDivElement, CubePrefixProps>(\n  function Prefix(allProps, outerRef) {\n    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;\n\n    const styles = extractStyles(props, CONTAINER_STYLES);\n    const ref = useCombinedRefs(outerRef);\n\n    useLayoutEffect(() => {\n      if (ref?.current && onWidthChange) {\n        onWidthChange(ref.current.offsetWidth);\n      }\n    }, [children, ref, onWidthChange]);\n\n    return (\n      <PrefixElement\n        {...filterBaseProps(props, { eventProps: true })}\n        ref={ref}\n        styles={styles}\n        style={{\n          // @ts-ignore\n          '--prefix-gap': parseStyle(outerGap).output,\n        }}\n      >\n        {children}\n      </PrefixElement>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,gBAAgB,MAAM;CAC1B,SAAS;CACT,QAAQ;EACN,UAAU;EACV,SAAS;EACT,cAAc;EACd,YAAY;EACZ,MAAM;EACN,KAAK;EACL,MAAM;EACN,KAAK;EACL,QAAQ;EACR,OAAO;EACP,QAAQ;EACT;CACF,CAAC;AAOF,MAAa,SAAS,WACpB,SAAS,OAAO,UAAU,UAAU;CAClC,IAAI,EAAE,eAAe,WAAW,OAAO,UAAU,GAAG,UAAU;CAE9D,MAAM,SAAS,cAAc,OAAO,iBAAiB;CACrD,MAAM,MAAM,gBAAgB,SAAS;AAErC,yBAAsB;AACpB,MAAI,KAAK,WAAW,cAClB,eAAc,IAAI,QAAQ,YAAY;IAEvC;EAAC;EAAU;EAAK;EAAc,CAAC;AAElC,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;EACR,OAAO,EAEL,gBAAgB,WAAW,SAAS,CAAC,QACtC;EAEA;GACa;EAGrB"}

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

@@ -0,0 +1,21 @@
+
+import { Styles } from "../../tasty/styles/types.js";
+import "../../tasty/index.js";
+import { CubePanelProps } from "./Panel.js";
+import * as react from "react";
+
+//#region src/components/layout/ResizablePanel.d.ts
+type Direction = 'top' | 'right' | 'bottom' | 'left';
+interface CubeResizablePanelProps extends CubePanelProps {
+  handlerStyles?: Styles;
+  direction: Direction;
+  size?: number;
+  onSizeChange?: (size: number) => void;
+  minSize?: string | number;
+  maxSize?: string | number;
+  isDisabled?: boolean;
+}
+declare const _ResizablePanel: react.ForwardRefExoticComponent<CubeResizablePanelProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CubeResizablePanelProps, _ResizablePanel };
+//# sourceMappingURL=ResizablePanel.d.ts.map