plainframe-ui 0.1.6 → 0.1.7

package/dist/index.js

@@ -10978,13 +10978,250 @@ var Stepper = ({
   );
 };
 
+// src/components/Swap.tsx
+import React44, {
+  useState as useState20,
+  useCallback as useCallback13,
+  useEffect as useEffect14,
+  useRef as useRef14,
+  Children as Children6,
+  isValidElement as isValidElement15,
+  createContext as createContext6,
+  useContext as useContext9
+} from "react";
+import { css as css42, keyframes as keyframes3 } from "@emotion/react";
+import { jsx as jsx50 } from "@emotion/react/jsx-runtime";
+var SwapContext = createContext6(null);
+var useSwapContext = () => {
+  const ctx = useContext9(SwapContext);
+  if (!ctx) {
+    throw new Error("SwapItem must be used within Swap");
+  }
+  return ctx;
+};
+var ANIMATION_MS = 220;
+var scaleAnim = keyframes3`
+  0%   { transform: scale(1); }
+  45%  { transform: scale(0.85); }
+  55%  { transform: scale(0.85); }
+  100% { transform: scale(1); }
+`;
+var rotateAnim = keyframes3`
+  0%   { transform: rotate(0deg); }
+  49%  { transform: rotate(179deg); }
+  51%  { transform: rotate(181deg); }
+  100% { transform: rotate(360deg); }
+`;
+var scaleRotateAnim = keyframes3`
+  0%   { transform: scale(1)    rotate(0deg); }
+  40%  { transform: scale(0.9)  rotate(140deg); }
+  50%  { transform: scale(0.85) rotate(180deg); }
+  60%  { transform: scale(0.9)  rotate(220deg); }
+  100% { transform: scale(1)    rotate(360deg); }
+`;
+var SwapItem = React44.forwardRef(
+  ({ value, children, className = "", css: customCss }, ref) => {
+    const {
+      activeValue,
+      animationEffect,
+      isAnimating,
+      transitionFrom,
+      transitionTo,
+      transitionPhase
+    } = useSwapContext();
+    const isOverlayEffect = animationEffect === "rotate" || animationEffect === "scale-rotate" || animationEffect === "scale";
+    let shouldShow = false;
+    let opacity = 0;
+    if (!isAnimating || !isOverlayEffect) {
+      shouldShow = value === activeValue;
+      opacity = shouldShow ? 1 : 0;
+    } else {
+      const isFrom = value === transitionFrom;
+      const isTo = value === transitionTo;
+      if (isFrom || isTo) {
+        shouldShow = true;
+        if (transitionPhase === "first") {
+          opacity = isFrom ? 1 : 0;
+        } else {
+          opacity = isTo ? 1 : 0;
+        }
+      } else {
+        shouldShow = false;
+        opacity = 0;
+      }
+    }
+    const itemCss = css42({
+      gridArea: "1 / 1 / 2 / 2",
+      transition: `opacity ${ANIMATION_MS / 2}ms ease-out`,
+      opacity,
+      display: shouldShow ? "block" : "none"
+    });
+    return /* @__PURE__ */ jsx50(
+      "div",
+      {
+        ref,
+        className: `pfui-swap-item ${className}`,
+        css: [itemCss, customCss],
+        "aria-hidden": opacity === 0,
+        children
+      }
+    );
+  }
+);
+SwapItem.displayName = "SwapItem";
+var Swap = React44.forwardRef(
+  ({
+    variant = "toggle",
+    animationEffect = "scale",
+    flashDuration = 750,
+    value: controlledValue,
+    defaultValue,
+    onChange,
+    disabled = false,
+    children,
+    className = "",
+    css: customCss
+  }, ref) => {
+    const childArray = Children6.toArray(children).filter(isValidElement15);
+    const values = childArray.filter((child) => child.type === SwapItem).map((child) => child.props.value);
+    const initial = defaultValue ?? values[0] ?? "";
+    const [internalValue, setInternalValue] = useState20(initial);
+    const [isAnimating, setIsAnimating] = useState20(false);
+    const [isFlashing, setIsFlashing] = useState20(false);
+    const [transitionFrom, setTransitionFrom] = useState20(null);
+    const [transitionTo, setTransitionTo] = useState20(null);
+    const [transitionPhase, setTransitionPhase] = useState20("idle");
+    const isControlled = controlledValue !== void 0;
+    const activeValue = isControlled ? controlledValue : internalValue;
+    const flashMs = flashDuration ?? 200;
+    const timeoutsRef = useRef14([]);
+    const clearAllTimeouts = () => {
+      timeoutsRef.current.forEach((id) => window.clearTimeout(id));
+      timeoutsRef.current = [];
+    };
+    useEffect14(() => {
+      return () => {
+        clearAllTimeouts();
+      };
+    }, []);
+    const commitValue = (next) => {
+      if (isControlled) {
+        onChange?.(next);
+      } else {
+        setInternalValue(next);
+      }
+    };
+    const runSwap = useCallback13(
+      (from, to, after) => {
+        clearAllTimeouts();
+        setIsAnimating(true);
+        setTransitionFrom(from);
+        setTransitionTo(to);
+        setTransitionPhase("first");
+        const mid = window.setTimeout(() => {
+          commitValue(to);
+          setTransitionPhase("second");
+        }, ANIMATION_MS / 2);
+        const end = window.setTimeout(() => {
+          setIsAnimating(false);
+          setTransitionFrom(null);
+          setTransitionTo(null);
+          setTransitionPhase("idle");
+          after?.();
+        }, ANIMATION_MS);
+        timeoutsRef.current.push(mid, end);
+      },
+      [isControlled, onChange]
+    );
+    const handleSwap = useCallback13(() => {
+      if (disabled || isAnimating || isFlashing || values.length <= 1) return;
+      const base = initial;
+      const baseIndex = values.indexOf(base);
+      const nextIndexFromBase = baseIndex === -1 ? 0 : (baseIndex + 1) % values.length;
+      const nextFromBase = values[nextIndexFromBase];
+      if (variant === "toggle") {
+        const currentIndex = values.indexOf(activeValue);
+        const nextIndex = (currentIndex + 1) % values.length;
+        const nextValue = values[nextIndex];
+        runSwap(activeValue, nextValue);
+      } else {
+        setIsFlashing(true);
+        const flashValue = nextFromBase === base ? values[(nextIndexFromBase + 1) % values.length] : nextFromBase;
+        runSwap(base, flashValue, () => {
+          const pause = window.setTimeout(() => {
+            runSwap(flashValue, base, () => {
+              setIsFlashing(false);
+            });
+          }, flashMs);
+          timeoutsRef.current.push(pause);
+        });
+      }
+    }, [
+      disabled,
+      isAnimating,
+      isFlashing,
+      values,
+      activeValue,
+      variant,
+      flashMs,
+      runSwap,
+      initial
+    ]);
+    const animationKeyframes = animationEffect === "rotate" ? rotateAnim : animationEffect === "scale-rotate" ? scaleRotateAnim : scaleAnim;
+    const swapCss = css42({
+      position: "relative",
+      display: "inline-grid",
+      cursor: disabled ? "not-allowed" : "pointer",
+      opacity: disabled ? 0.55 : 1,
+      transformOrigin: "center",
+      backfaceVisibility: "hidden",
+      ...isAnimating && {
+        animation: `${animationKeyframes} ${ANIMATION_MS}ms cubic-bezier(0.4, 0, 0.2, 1)`
+      }
+    });
+    const contextValue = {
+      activeValue,
+      variant,
+      animationEffect,
+      flashDuration: flashMs,
+      isAnimating,
+      handleSwap,
+      disabled,
+      transitionFrom,
+      transitionTo,
+      transitionPhase
+    };
+    return /* @__PURE__ */ jsx50(SwapContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx50(
+      "div",
+      {
+        ref,
+        className: `pfui-swap ${className}`,
+        css: [swapCss, customCss],
+        onClick: handleSwap,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        onKeyDown: (e) => {
+          if (disabled) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleSwap();
+          }
+        },
+        "aria-disabled": disabled,
+        children
+      }
+    ) });
+  }
+);
+Swap.displayName = "Swap";
+
 // src/components/Tabs.tsx
-import React44 from "react";
-import { css as css42 } from "@emotion/react";
-import { Fragment as Fragment8, jsx as jsx50, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
+import React45 from "react";
+import { css as css43 } from "@emotion/react";
+import { Fragment as Fragment8, jsx as jsx51, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
 var Tab = () => null;
 Tab.displayName = "PF.Tab";
-var TabContent = ({ children }) => /* @__PURE__ */ jsx50(Fragment8, { children });
+var TabContent = ({ children }) => /* @__PURE__ */ jsx51(Fragment8, { children });
 TabContent.displayName = "PF.TabContent";
 function unwrapEmotion2(child) {
   const propsAny = child.props;
@@ -11017,11 +11254,11 @@ var Tabs = ({
   const stretch = fullWidth || width != null;
   const effAlign = align ?? (isV ? "left" : "center");
   const justifyMap = { left: "flex-start", center: "center", right: "flex-end" };
-  const { tabs, contents } = React44.useMemo(() => {
+  const { tabs, contents } = React45.useMemo(() => {
     const t = [];
     const c = [];
-    React44.Children.forEach(children, (child) => {
-      if (!React44.isValidElement(child)) return;
+    React45.Children.forEach(children, (child) => {
+      if (!React45.isValidElement(child)) return;
       const { type: origType, props } = unwrapEmotion2(child);
       const isTab = origType === Tab || origType?.displayName === Tab.displayName;
       const isContent = origType === TabContent || origType?.displayName === TabContent.displayName;
@@ -11037,20 +11274,20 @@ var Tabs = ({
     });
     return { tabs: t, contents: c };
   }, [children]);
-  const firstEnabled = React44.useMemo(() => tabs.find((t) => !t.disabled)?.value, [tabs]);
-  const [internal, setInternal] = React44.useState(() => {
+  const firstEnabled = React45.useMemo(() => tabs.find((t) => !t.disabled)?.value, [tabs]);
+  const [internal, setInternal] = React45.useState(() => {
     const ok = defaultValue !== void 0 && tabs.some((t) => t.value === defaultValue && !t.disabled);
     return ok ? defaultValue : firstEnabled;
   });
   const isControlled = value !== void 0;
   const currentValue = isControlled ? value : internal;
-  const listRef = React44.useRef(null);
-  const btnRefs = React44.useRef([]);
+  const listRef = React45.useRef(null);
+  const btnRefs = React45.useRef([]);
   const activeIndex = Math.max(0, tabs.findIndex((t) => t.value === currentValue));
-  const [indicator, setIndicator] = React44.useState({ left: 0, top: 0, width: 0, height: 0 });
-  const [ready, setReady] = React44.useState(false);
-  const [animate, setAnimate] = React44.useState(false);
-  const measure = React44.useCallback(() => {
+  const [indicator, setIndicator] = React45.useState({ left: 0, top: 0, width: 0, height: 0 });
+  const [ready, setReady] = React45.useState(false);
+  const [animate, setAnimate] = React45.useState(false);
+  const measure = React45.useCallback(() => {
     const list = listRef.current;
     const btn = btnRefs.current[activeIndex];
     if (!list || !btn) return;
@@ -11058,14 +11295,14 @@ var Tabs = ({
     const r = btn.getBoundingClientRect();
     setIndicator({ left: r.left - listRect.left, top: r.top - listRect.top, width: r.width, height: r.height });
   }, [activeIndex]);
-  React44.useLayoutEffect(() => {
+  React45.useLayoutEffect(() => {
     measure();
     if (!ready) {
       setReady(true);
       requestAnimationFrame(() => setAnimate(true));
     }
   }, [measure, ready]);
-  React44.useEffect(() => {
+  React45.useEffect(() => {
     const ro = new ResizeObserver(() => measure());
     if (listRef.current) ro.observe(listRef.current);
     const btn = btnRefs.current[activeIndex];
@@ -11112,14 +11349,14 @@ var Tabs = ({
   const thumbBg = variant === "subtle" ? theme.surface.panelBg ?? theme.surface.panelBg : variant === "ghost" ? theme.surface.subtleBg : "transparent";
   const underlineColor = theme.text.primary;
   const showThumb = variant === "subtle" || variant === "ghost" || variant === "underlined";
-  const rootCss2 = css42({
+  const rootCss2 = css43({
     "--pf-ease": "cubic-bezier(.4,0,.2,1)",
     display: "flex",
     flexDirection: "column",
     width: fullWidth ? "100%" : width == null ? "auto" : typeof width === "number" ? `${width}px` : width
   });
   const needsPad = variant === "subtle";
-  const trackBaseCss = css42({
+  const trackBaseCss = css43({
     position: "relative",
     display: stretch ? "flex" : "inline-flex",
     width: stretch ? "100%" : "auto",
@@ -11131,7 +11368,7 @@ var Tabs = ({
     background: trackBg,
     borderRadius: variant === "subtle" ? rounded ? isV ? theme.radius.lg : theme.radius.full : theme.radius.lg : "none"
   });
-  const thumbBaseCss = css42({
+  const thumbBaseCss = css43({
     position: "absolute",
     zIndex: 0,
     pointerEvents: "none",
@@ -11143,10 +11380,10 @@ var Tabs = ({
     ...isV ? { top: `${indicator.top}px`, height: `${indicator.height}px`, left: theme.spacing.xs, right: theme.spacing.xs } : { left: `${indicator.left}px`, width: `${indicator.width}px`, top: theme.spacing.xs, bottom: theme.spacing.xs },
     boxShadow: shadow && variant === "subtle" ? "0 1px 3px rgba(0,0,0,0.04), 0 6px 16px rgba(0,0,0,0.04)" : "none"
   });
-  const underlineCss = css42(
+  const underlineCss = css43(
     variant !== "underlined" ? {} : isV ? { background: "transparent", top: `${indicator.top}px`, height: `${indicator.height}px`, left: 0, width: 0, borderLeft: `2px solid ${underlineColor}`, borderBottom: "none", borderRadius: 2 } : { background: "transparent", left: `${indicator.left}px`, width: `${indicator.width}px`, bottom: 0, top: "auto", height: 0, borderBottom: `2px solid ${underlineColor}`, borderLeft: "none", borderRadius: 2 }
   );
-  const baseTabCss = css42({
+  const baseTabCss = css43({
     position: "relative",
     zIndex: 1,
     border: "none",
@@ -11170,7 +11407,7 @@ var Tabs = ({
     "&:hover": { color: textPrimary },
     "&[aria-disabled='true'], &:disabled": { opacity: 0.55, cursor: "not-allowed", color: disabledText }
   });
-  const contentWrapCss = css42({
+  const contentWrapCss = css43({
     display: "inline-flex",
     alignItems: "center",
     justifyContent: isV ? justifyMap[effAlign] : "center",
@@ -11178,8 +11415,8 @@ var Tabs = ({
     width: "100%",
     flexDirection: titlePosition === "top" ? "column-reverse" : titlePosition === "bottom" ? "column" : titlePosition === "left" ? "row-reverse" : "row"
   });
-  const panelCss = css42({ marginTop: theme.spacing.sm, width: "100%" });
-  const idBase = React44.useId();
+  const panelCss = css43({ marginTop: theme.spacing.sm, width: "100%" });
+  const idBase = React45.useId();
   const panelIdByValue = /* @__PURE__ */ new Map();
   contents.forEach((c, i) => panelIdByValue.set(c.value, `${idBase}-panel-${i}`));
   const tabIdForIndex = (i) => `${idBase}-tab-${i}`;
@@ -11194,10 +11431,10 @@ var Tabs = ({
         onKeyDown,
         css: [trackBaseCss, userTrackCss],
         children: [
-          showThumb && /* @__PURE__ */ jsx50("div", { className: "plainframe-ui-tabs-thumb", css: [thumbBaseCss, underlineCss, userThumbCss, activeIndicatorCss] }),
+          showThumb && /* @__PURE__ */ jsx51("div", { className: "plainframe-ui-tabs-thumb", css: [thumbBaseCss, underlineCss, userThumbCss, activeIndicatorCss] }),
           tabs.map((t, i) => {
             const isActive = currentValue === t.value;
-            return /* @__PURE__ */ jsx50(
+            return /* @__PURE__ */ jsx51(
               "button",
               {
                 ref: (el) => {
@@ -11215,7 +11452,7 @@ var Tabs = ({
                   if (!t.disabled) setSelected(t.value);
                 },
                 css: [baseTabCss, !t.disabled && focusRing(), t.css, isActive ? t.activeCss ?? activeTabCss : void 0],
-                children: /* @__PURE__ */ jsx50("span", { className: "plainframe-ui-tab-content", css: contentWrapCss, children: t.node })
+                children: /* @__PURE__ */ jsx51("span", { className: "plainframe-ui-tab-content", css: contentWrapCss, children: t.node })
               },
               String(t.value ?? i)
             );
@@ -11227,7 +11464,7 @@ var Tabs = ({
       const isActive = c.value === currentValue;
       const labelledByIndex = tabs.findIndex((t) => t.value === c.value);
       const labelledBy = labelledByIndex >= 0 ? tabIdForIndex(labelledByIndex) : void 0;
-      return /* @__PURE__ */ jsx50(
+      return /* @__PURE__ */ jsx51(
         "div",
         {
           role: "tabpanel",
@@ -11247,17 +11484,17 @@ var Tabs = ({
 // src/components/TextArea.tsx
 import {
   useLayoutEffect as useLayoutEffect3,
-  useRef as useRef14,
-  useState as useState20,
+  useRef as useRef15,
+  useState as useState21,
   useId as useId4,
   useMemo as useMemo20,
-  useCallback as useCallback13
+  useCallback as useCallback14
 } from "react";
-import { css as css43 } from "@emotion/react";
-import { jsx as jsx51, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
+import { css as css44 } from "@emotion/react";
+import { jsx as jsx52, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
 var u4 = (v) => v == null ? void 0 : typeof v === "number" ? `${v}px` : v;
 var asArr = (v) => v == null ? [] : Array.isArray(v) ? v : [v];
-var mergeCss2 = (...parts) => css43(parts.filter(Boolean));
+var mergeCss2 = (...parts) => css44(parts.filter(Boolean));
 var TextArea = ({
   label,
   value,
@@ -11337,9 +11574,9 @@ var TextArea = ({
   const N = theme.neutral;
   const T = theme.text;
   const isControlled = value !== void 0;
-  const [internal, setInternal] = useState20(defaultValue);
+  const [internal, setInternal] = useState21(defaultValue);
   const curr = isControlled ? value : internal;
-  const setValue = useCallback13(
+  const setValue = useCallback14(
     (next) => {
       if (!isControlled) setInternal(next);
       onChange?.(next);
@@ -11356,7 +11593,7 @@ var TextArea = ({
     [variant, borderW, error, theme.palette.danger, theme.surface.border]
   );
   const rootCss2 = useMemo20(
-    () => css43({
+    () => css44({
       boxSizing: "border-box",
       display: "block",
       minWidth: 0,
@@ -11472,7 +11709,7 @@ var TextArea = ({
     ),
     [s.helperFont, maxLength, curr.length, theme.palette.danger, T, userCharCountCss]
   );
-  const ref = useRef14(null);
+  const ref = useRef15(null);
   useLayoutEffect3(() => {
     if (typeof window === "undefined") return;
     const el = ref.current;
@@ -11500,8 +11737,8 @@ var TextArea = ({
   const helperId = helperText != null || showCharCount ? `${id ?? reactId}-help` : void 0;
   const inputId = id ?? reactId;
   return /* @__PURE__ */ jsxs30("div", { className: ["plainframe-ui-textarea", className || ""].join(" ").trim(), css: rootCss2, children: [
-    label && /* @__PURE__ */ jsx51("label", { htmlFor: inputId, className: "plainframe-ui-textarea-label", css: labelCss2, children: label }),
-    /* @__PURE__ */ jsx51(
+    label && /* @__PURE__ */ jsx52("label", { htmlFor: inputId, className: "plainframe-ui-textarea-label", css: labelCss2, children: label }),
+    /* @__PURE__ */ jsx52(
       "div",
       {
         className: "plainframe-ui-textarea-surface",
@@ -11509,7 +11746,7 @@ var TextArea = ({
         "aria-invalid": !!error || void 0,
         "aria-disabled": disabled || void 0,
         onClick: () => !disabled && ref.current?.focus(),
-        children: /* @__PURE__ */ jsx51(
+        children: /* @__PURE__ */ jsx52(
           "textarea",
           {
             ref,
@@ -11541,7 +11778,7 @@ var TextArea = ({
       }
     ),
     (helperText != null || showCharCount && maxLength != null) && /* @__PURE__ */ jsxs30("div", { className: "plainframe-ui-textarea-helper-row", css: helperRowCss, children: [
-      /* @__PURE__ */ jsx51("span", { id: helperId, className: "plainframe-ui-textarea-helper-text", css: helperTextCss, children: helperText }),
+      /* @__PURE__ */ jsx52("span", { id: helperId, className: "plainframe-ui-textarea-helper-text", css: helperTextCss, children: helperText }),
       showCharCount && maxLength != null && /* @__PURE__ */ jsxs30("span", { className: "plainframe-ui-textarea-char-count", css: charCountCss, children: [
         curr.length,
         "/",
@@ -11552,18 +11789,18 @@ var TextArea = ({
 };
 
 // src/components/Toast.tsx
-import React46, { useEffect as useEffect14, useSyncExternalStore } from "react";
-import { css as css44 } from "@emotion/react";
+import React47, { useEffect as useEffect15, useSyncExternalStore } from "react";
+import { css as css45 } from "@emotion/react";
 import { AnimatePresence as AnimatePresence5, motion as motion5, useAnimationControls } from "framer-motion";
 import { X as X4 } from "lucide-react";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment9, jsx as jsx52, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx53, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
 var isIterable = (obj) => obj != null && typeof obj[Symbol.iterator] === "function";
 var isPromise = (obj) => !!obj && (typeof obj === "object" || typeof obj === "function") && typeof obj.then === "function";
 function isOptionsInput(x) {
   if (x == null) return false;
   if (typeof x !== "object") return false;
-  if (React46.isValidElement(x)) return false;
+  if (React47.isValidElement(x)) return false;
   if (isPromise(x)) return false;
   if (isIterable(x)) return false;
   const keys = Object.keys(x);
@@ -11746,7 +11983,7 @@ var toast = Object.assign(
     }
     if (o.content == null && (o.title != null || o.description != null)) {
       o.content = /* @__PURE__ */ jsxs31("div", { children: [
-        o.title && /* @__PURE__ */ jsx52("strong", { style: { display: "block", marginBottom: 2 }, children: o.title }),
+        o.title && /* @__PURE__ */ jsx53("strong", { style: { display: "block", marginBottom: 2 }, children: o.title }),
         o.description
       ] });
     }
@@ -11910,16 +12147,16 @@ function positionCss(pos) {
   };
   return map[pos];
 }
-var rowCss = css44({ display: "flex", alignItems: "flex-start", gap: 10 });
-var iconWrapCss = css44({
+var rowCss = css45({ display: "flex", alignItems: "flex-start", gap: 10 });
+var iconWrapCss = css45({
   flex: "0 0 auto",
   paddingTop: 1,
   lineHeight: 0,
   marginLeft: -3,
   "& svg, & img, & canvas, & video": { display: "block" }
 });
-var textCss = css44({ fontSize: 14, lineHeight: 1.4, fontWeight: 500, flex: 1, minWidth: 0 });
-var actionRowCss = css44({ display: "flex", alignItems: "center", gap: 6, marginRight: -2 });
+var textCss = css45({ fontSize: 14, lineHeight: 1.4, fontWeight: 500, flex: 1, minWidth: 0 });
+var actionRowCss = css45({ display: "flex", alignItems: "center", gap: 6, marginRight: -2 });
 function ToastHost() {
   const snap = useSyncExternalStore(store.subscribe.bind(store), () => store.snapshot, () => store.snapshot);
   const theme = usePlainframeUITheme();
@@ -11936,7 +12173,7 @@ function ToastHost() {
     ...positionCss(cfg.position),
     ...cfg.styles.stack ?? {}
   };
-  return /* @__PURE__ */ jsx52("div", { className: "plainframe-ui-toast-stack", css: css44(stackStyle), children: /* @__PURE__ */ jsx52(AnimatePresence5, { initial: false, children: list.map((t, index) => {
+  return /* @__PURE__ */ jsx53("div", { className: "plainframe-ui-toast-stack", css: css45(stackStyle), children: /* @__PURE__ */ jsx53(AnimatePresence5, { initial: false, children: list.map((t, index) => {
     const from = snap.enterFrom[t.id] || "tail";
     const enterY = isBottom ? from === "head" ? -16 : 16 : from === "head" ? 16 : -16;
     const mt = index > 0 ? cfg.gutter : 0;
@@ -11974,8 +12211,8 @@ function ToastHost() {
     } else if (dismissMode === "never") {
       modeStyles[closeSel] = { display: "none" };
     }
-    const wrapCss = css44({ ...baseSurface, ...extraSurface, ...modeStyles });
-    const closeCss = css44({
+    const wrapCss = css45({ ...baseSurface, ...extraSurface, ...modeStyles });
+    const closeCss = css45({
       position: "absolute",
       top: 8,
       right: 8,
@@ -11996,10 +12233,10 @@ function ToastHost() {
     let content;
     if (t.bare && t.render) {
       const inner = typeof t.render === "function" ? t.render(ctx) : t.render;
-      content = /* @__PURE__ */ jsx52("div", { style: { pointerEvents: "auto" }, onClick: (e) => t.onClick?.(t.id, e), children: inner });
+      content = /* @__PURE__ */ jsx53("div", { style: { pointerEvents: "auto" }, onClick: (e) => t.onClick?.(t.id, e), children: inner });
     } else if (cfg.bareRenderer && cfg.renderer) {
       const inner = typeof cfg.renderer === "function" ? cfg.renderer(ctx) : cfg.renderer;
-      content = /* @__PURE__ */ jsx52("div", { style: { pointerEvents: "auto" }, onClick: (e) => t.onClick?.(t.id, e), children: inner });
+      content = /* @__PURE__ */ jsx53("div", { style: { pointerEvents: "auto" }, onClick: (e) => t.onClick?.(t.id, e), children: inner });
     } else {
       let innerBlock;
       if (cfg.renderer) {
@@ -12009,16 +12246,16 @@ function ToastHost() {
       } else {
         innerBlock = /* @__PURE__ */ jsxs31(Fragment9, { children: [
           /* @__PURE__ */ jsxs31("div", { css: rowCss, children: [
-            t.startIcon && /* @__PURE__ */ jsx52("div", { css: iconWrapCss, children: t.startIcon }),
-            /* @__PURE__ */ jsx52("div", { css: textCss, children: t.content }),
-            t.endIcon && /* @__PURE__ */ jsx52("div", { css: iconWrapCss, children: t.endIcon })
+            t.startIcon && /* @__PURE__ */ jsx53("div", { css: iconWrapCss, children: t.startIcon }),
+            /* @__PURE__ */ jsx53("div", { css: textCss, children: t.content }),
+            t.endIcon && /* @__PURE__ */ jsx53("div", { css: iconWrapCss, children: t.endIcon })
           ] }),
-          t.action && /* @__PURE__ */ jsx52("div", { css: actionRowCss, children: t.action })
+          t.action && /* @__PURE__ */ jsx53("div", { css: actionRowCss, children: t.action })
         ] });
       }
       content = /* @__PURE__ */ jsxs31("div", { css: wrapCss, onClick: (e) => t.onClick?.(t.id, e), children: [
         innerBlock,
-        /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsx53(
           "button",
           {
             className: "plainframe-ui-toast-close",
@@ -12028,12 +12265,12 @@ function ToastHost() {
               e.stopPropagation();
               toast.dismiss(t.id);
             },
-            children: /* @__PURE__ */ jsx52(X4, { strokeWidth: 2.5, size: 14 })
+            children: /* @__PURE__ */ jsx53(X4, { strokeWidth: 2.5, size: 14 })
           }
         )
       ] });
     }
-    return /* @__PURE__ */ jsx52(
+    return /* @__PURE__ */ jsx53(
       SwipeItem,
       {
         id: t.id,
@@ -12051,7 +12288,7 @@ function ToastHost() {
 function SwipeItem(props) {
   const { id, isBottom, mt, enterY, width, pauseOnHover, children } = props;
   const controls = useAnimationControls();
-  useEffect14(() => {
+  useEffect15(() => {
     controls.start({ opacity: 1, y: 0, height: "auto", x: 0, transition: ENTER_SPRING });
   }, [controls]);
   const itemStyle = {
@@ -12062,12 +12299,12 @@ function SwipeItem(props) {
     maxWidth: width != null ? typeof width === "number" ? `${width}px` : width : "none",
     ...cfg.styles.item ?? {}
   };
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(
     motion5.div,
     {
       layout: true,
       className: "plainframe-ui-toast-item",
-      css: css44(itemStyle),
+      css: css45(itemStyle),
       initial: { opacity: 0, y: enterY, height: "auto", x: 0 },
       animate: controls,
       exit: {
@@ -12105,19 +12342,19 @@ function SwipeItem(props) {
 }
 function ToastViewport() {
   ensureHost();
-  return hostEl ? createPortal(/* @__PURE__ */ jsx52(ToastHost, {}), hostEl) : null;
+  return hostEl ? createPortal(/* @__PURE__ */ jsx53(ToastHost, {}), hostEl) : null;
 }
 
 // src/components/Tooltip.tsx
-import React47, {
-  createContext as createContext6,
-  useContext as useContext9,
+import React48, {
+  createContext as createContext7,
+  useContext as useContext10,
   useId as useId5,
   useMemo as useMemo21,
-  useRef as useRef15,
-  useState as useState21
+  useRef as useRef16,
+  useState as useState22
 } from "react";
-import { css as css45 } from "@emotion/react";
+import { css as css46 } from "@emotion/react";
 import {
   useFloating as useFloating3,
   offset,
@@ -12134,7 +12371,7 @@ import {
   FloatingPortal as FloatingPortal3
 } from "@floating-ui/react";
 import { AnimatePresence as AnimatePresence6, motion as motion6 } from "framer-motion";
-import { jsx as jsx53, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
 var mergeRefs4 = (...refs) => (node) => {
   for (const r of refs) {
     if (!r) continue;
@@ -12145,9 +12382,9 @@ var mergeRefs4 = (...refs) => (node) => {
     }
   }
 };
-var TooltipCtx = createContext6(null);
+var TooltipCtx = createContext7(null);
 var useTooltipCtx = () => {
-  const v = useContext9(TooltipCtx);
+  const v = useContext10(TooltipCtx);
   if (!v) throw new Error("TooltipTrigger/TooltipContent must be inside <Tooltip>.");
   return v;
 };
@@ -12162,13 +12399,13 @@ var Tooltip = ({
   autoWidth = false,
   disableHoverListener = false
 }) => {
-  const [uc, setUc] = useState21(!!defaultOpen);
+  const [uc, setUc] = useState22(!!defaultOpen);
   const open = controlled ?? uc;
   const setOpen = (o) => {
     if (controlled === void 0) setUc(o);
     onOpenChange?.(o);
   };
-  const arrowRef = useRef15(null);
+  const arrowRef = useRef16(null);
   const floating = useFloating3({
     placement,
     open,
@@ -12226,7 +12463,7 @@ var Tooltip = ({
       getFloatingProps
     ]
   );
-  return /* @__PURE__ */ jsx53(TooltipCtx.Provider, { value: ctx, children });
+  return /* @__PURE__ */ jsx54(TooltipCtx.Provider, { value: ctx, children });
 };
 var TooltipTrigger = ({
   asChild = true,
@@ -12235,7 +12472,7 @@ var TooltipTrigger = ({
   css: userCss
 }) => {
   const { refs, getReferenceProps, id } = useTooltipCtx();
-  const isElement = React47.isValidElement(children);
+  const isElement = React48.isValidElement(children);
   const isDomChild = isElement && typeof children.type === "string";
   if (asChild && isElement && isDomChild) {
     const child = children;
@@ -12249,9 +12486,9 @@ var TooltipTrigger = ({
       child.props?.css || void 0,
       userCss
     ].filter(Boolean);
-    return React47.cloneElement(child, { ...merged, css: mergedCss });
+    return React48.cloneElement(child, { ...merged, css: mergedCss });
   }
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(
     "span",
     {
       ref: refs.setReference,
@@ -12287,7 +12524,7 @@ var TooltipContent = ({
   const initial = side === "bottom" ? { opacity: 0, y: -delta, scale: 0.98 } : side === "top" ? { opacity: 0, y: +delta, scale: 0.98 } : side === "left" ? { opacity: 0, x: +delta, scale: 0.98 } : { opacity: 0, x: -delta, scale: 0.98 };
   const exit = initial;
   const transformOrigin = side === "bottom" ? "center top" : side === "top" ? "center bottom" : side === "left" ? "right center" : "left center";
-  const tooltipBase = css45({
+  const tooltipBase = css46({
     zIndex: 1300,
     backgroundColor: theme.neutral[900],
     color: theme.neutral[0],
@@ -12302,7 +12539,7 @@ var TooltipContent = ({
     pointerEvents: "auto",
     transformOrigin
   });
-  const arrowBase = css45({
+  const arrowBase = css46({
     position: "absolute",
     width: 10,
     height: 10,
@@ -12313,7 +12550,7 @@ var TooltipContent = ({
   });
   const arrowData = middlewareData.arrow;
   const staticSide = { top: "bottom", bottom: "top", left: "right", right: "left" }[side];
-  return /* @__PURE__ */ jsx53(FloatingPortal3, { children: /* @__PURE__ */ jsx53(AnimatePresence6, { children: open && /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsx54(FloatingPortal3, { children: /* @__PURE__ */ jsx54(AnimatePresence6, { children: open && /* @__PURE__ */ jsxs32(
     motion6.div,
     {
       id,
@@ -12335,7 +12572,7 @@ var TooltipContent = ({
       ...getFloatingProps(),
       children: [
         children,
-        allowArrow && /* @__PURE__ */ jsx53(
+        allowArrow && /* @__PURE__ */ jsx54(
           "div",
           {
             ref: arrowRef,
@@ -12354,14 +12591,14 @@ var TooltipContent = ({
 };
 
 // src/theme/CssBaseline.tsx
-import { Global, css as css46 } from "@emotion/react";
-import { jsx as jsx54 } from "@emotion/react/jsx-runtime";
+import { Global, css as css47 } from "@emotion/react";
+import { jsx as jsx55 } from "@emotion/react/jsx-runtime";
 function CssBaseline() {
   const t = usePlainframeUITheme();
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55(
     Global,
     {
-      styles: css46`
+      styles: css47`
         *,*::before,*::after{box-sizing:border-box}
         :where(html){-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
         html,body,#root{height:100%}
@@ -12489,6 +12726,8 @@ export {
   SubMenu,
   SubMenuContent,
   SubMenuTrigger,
+  Swap,
+  SwapItem,
   Switch,
   Tab,
   TabContent,