@spear-ai/spectral 1.6.17 → 1.8.0

package/dist/Tooltip.js

@@ -4,7 +4,7 @@ import { jsx as u, jsxs as S } from "react/jsx-runtime";
 import * as a from "react";
 import { c as J, e as Q, u as G, P as Z, b as C, g as ee } from "./index-OnYbwQjk.js";
 import { P as te, D as oe } from "./index-u1k2AYWy.js";
-import { u as re } from "./index-Dy-Hzr7y.js";
+import { u as re } from "./index-C12FUuIW.js";
 import { c as j, R as ne, a as ae, A as se, C as ie } from "./index-B3FZpM60.js";
 import { P as V } from "./index-D6HcSXrq.js";
 import { R as le } from "./index-Cd9V_YZ4.js";
@@ -18,81 +18,81 @@ var [O] = J("Tooltip", [
     delayDuration: t = ce,
     skipDelayDuration: r = 300,
     disableHoverableContent: n = !1,
-    children: l
-  } = e, s = a.useRef(!0), v = a.useRef(!1), i = a.useRef(0);
+    children: s
+  } = e, i = a.useRef(!0), v = a.useRef(!1), l = a.useRef(0);
   return a.useEffect(() => {
-    const p = i.current;
-    return () => window.clearTimeout(p);
+    const d = l.current;
+    return () => window.clearTimeout(d);
   }, []), /* @__PURE__ */ u(
     ue,
     {
       scope: o,
-      isOpenDelayedRef: s,
+      isOpenDelayedRef: i,
       delayDuration: t,
       onOpen: a.useCallback(() => {
-        window.clearTimeout(i.current), s.current = !1;
+        window.clearTimeout(l.current), i.current = !1;
       }, []),
       onClose: a.useCallback(() => {
-        window.clearTimeout(i.current), i.current = window.setTimeout(
-          () => s.current = !0,
+        window.clearTimeout(l.current), l.current = window.setTimeout(
+          () => i.current = !0,
           r
         );
       }, [r]),
       isPointerInTransitRef: v,
-      onPointerInTransitChange: a.useCallback((p) => {
-        v.current = p;
+      onPointerInTransitChange: a.useCallback((d) => {
+        v.current = d;
       }, []),
       disableHoverableContent: n,
-      children: l
+      children: s
     }
   );
 };
 $.displayName = z;
-var R = "Tooltip", [de, _] = O(R), B = (e) => {
+var R = "Tooltip", [pe, _] = O(R), B = (e) => {
   const {
     __scopeTooltip: o,
     children: t,
     open: r,
     defaultOpen: n,
-    onOpenChange: l,
-    disableHoverableContent: s,
+    onOpenChange: s,
+    disableHoverableContent: i,
     delayDuration: v
-  } = e, i = k(R, e.__scopeTooltip), p = A(o), [c, f] = a.useState(null), h = re(), d = a.useRef(0), m = s ?? i.disableHoverableContent, T = v ?? i.delayDuration, g = a.useRef(!1), [y, x] = Q({
+  } = e, l = k(R, e.__scopeTooltip), d = A(o), [c, f] = a.useState(null), m = re(), p = a.useRef(0), h = i ?? l.disableHoverableContent, T = v ?? l.delayDuration, g = a.useRef(!1), [y, x] = Q({
     prop: r,
     defaultProp: n ?? !1,
     onChange: (I) => {
-      I ? (i.onOpen(), document.dispatchEvent(new CustomEvent(D))) : i.onClose(), l?.(I);
+      I ? (l.onOpen(), document.dispatchEvent(new CustomEvent(D))) : l.onClose(), s?.(I);
     },
     caller: R
   }), w = a.useMemo(() => y ? g.current ? "delayed-open" : "instant-open" : "closed", [y]), P = a.useCallback(() => {
-    window.clearTimeout(d.current), d.current = 0, g.current = !1, x(!0);
+    window.clearTimeout(p.current), p.current = 0, g.current = !1, x(!0);
   }, [x]), E = a.useCallback(() => {
-    window.clearTimeout(d.current), d.current = 0, x(!1);
+    window.clearTimeout(p.current), p.current = 0, x(!1);
   }, [x]), N = a.useCallback(() => {
-    window.clearTimeout(d.current), d.current = window.setTimeout(() => {
-      g.current = !0, x(!0), d.current = 0;
+    window.clearTimeout(p.current), p.current = window.setTimeout(() => {
+      g.current = !0, x(!0), p.current = 0;
     }, T);
   }, [T, x]);
   return a.useEffect(() => () => {
-    d.current && (window.clearTimeout(d.current), d.current = 0);
-  }, []), /* @__PURE__ */ u(ne, { ...p, children: /* @__PURE__ */ u(
-    de,
+    p.current && (window.clearTimeout(p.current), p.current = 0);
+  }, []), /* @__PURE__ */ u(ne, { ...d, children: /* @__PURE__ */ u(
+    pe,
     {
       scope: o,
-      contentId: h,
+      contentId: m,
       open: y,
       stateAttribute: w,
       trigger: c,
       onTriggerChange: f,
       onTriggerEnter: a.useCallback(() => {
-        i.isOpenDelayedRef.current ? N() : P();
-      }, [i.isOpenDelayedRef, N, P]),
+        l.isOpenDelayedRef.current ? N() : P();
+      }, [l.isOpenDelayedRef, N, P]),
       onTriggerLeave: a.useCallback(() => {
-        m ? E() : (window.clearTimeout(d.current), d.current = 0);
-      }, [E, m]),
+        h ? E() : (window.clearTimeout(p.current), p.current = 0);
+      }, [E, h]),
       onOpen: P,
       onClose: E,
-      disableHoverableContent: m,
+      disableHoverableContent: h,
       children: t
     }
   ) });
@@ -100,25 +100,25 @@ var R = "Tooltip", [de, _] = O(R), B = (e) => {
 B.displayName = R;
 var L = "TooltipTrigger", U = a.forwardRef(
   (e, o) => {
-    const { __scopeTooltip: t, ...r } = e, n = _(L, t), l = k(L, t), s = A(t), v = a.useRef(null), i = G(o, v, n.onTriggerChange), p = a.useRef(!1), c = a.useRef(!1), f = a.useCallback(() => p.current = !1, []);
-    return a.useEffect(() => () => document.removeEventListener("pointerup", f), [f]), /* @__PURE__ */ u(se, { asChild: !0, ...s, children: /* @__PURE__ */ u(
+    const { __scopeTooltip: t, ...r } = e, n = _(L, t), s = k(L, t), i = A(t), v = a.useRef(null), l = G(o, v, n.onTriggerChange), d = a.useRef(!1), c = a.useRef(!1), f = a.useCallback(() => d.current = !1, []);
+    return a.useEffect(() => () => document.removeEventListener("pointerup", f), [f]), /* @__PURE__ */ u(se, { asChild: !0, ...i, children: /* @__PURE__ */ u(
       Z.button,
       {
         "aria-describedby": n.open ? n.contentId : void 0,
         "data-state": n.stateAttribute,
         ...r,
-        ref: i,
-        onPointerMove: C(e.onPointerMove, (h) => {
-          h.pointerType !== "touch" && !c.current && !l.isPointerInTransitRef.current && (n.onTriggerEnter(), c.current = !0);
+        ref: l,
+        onPointerMove: C(e.onPointerMove, (m) => {
+          m.pointerType !== "touch" && !c.current && !s.isPointerInTransitRef.current && (n.onTriggerEnter(), c.current = !0);
         }),
         onPointerLeave: C(e.onPointerLeave, () => {
           n.onTriggerLeave(), c.current = !1;
         }),
         onPointerDown: C(e.onPointerDown, () => {
-          n.open && n.onClose(), p.current = !0, document.addEventListener("pointerup", f, { once: !0 });
+          n.open && n.onClose(), d.current = !0, document.addEventListener("pointerup", f, { once: !0 });
         }),
         onFocus: C(e.onFocus, () => {
-          p.current || n.onOpen();
+          d.current || n.onOpen();
         }),
         onBlur: C(e.onBlur, n.onClose),
         onClick: C(e.onClick, n.onClose)
@@ -127,75 +127,75 @@ var L = "TooltipTrigger", U = a.forwardRef(
   }
 );
 U.displayName = L;
-var M = "TooltipPortal", [pe, fe] = O(M, {
+var M = "TooltipPortal", [de, fe] = O(M, {
   forceMount: void 0
 }), Y = (e) => {
-  const { __scopeTooltip: o, forceMount: t, children: r, container: n } = e, l = _(M, o);
-  return /* @__PURE__ */ u(pe, { scope: o, forceMount: t, children: /* @__PURE__ */ u(V, { present: t || l.open, children: /* @__PURE__ */ u(te, { asChild: !0, container: n, children: r }) }) });
+  const { __scopeTooltip: o, forceMount: t, children: r, container: n } = e, s = _(M, o);
+  return /* @__PURE__ */ u(de, { scope: o, forceMount: t, children: /* @__PURE__ */ u(V, { present: t || s.open, children: /* @__PURE__ */ u(te, { asChild: !0, container: n, children: r }) }) });
 };
 Y.displayName = M;
 var b = "TooltipContent", q = a.forwardRef(
   (e, o) => {
-    const t = fe(b, e.__scopeTooltip), { forceMount: r = t.forceMount, side: n = "top", ...l } = e, s = _(b, e.__scopeTooltip);
-    return /* @__PURE__ */ u(V, { present: r || s.open, children: s.disableHoverableContent ? /* @__PURE__ */ u(X, { side: n, ...l, ref: o }) : /* @__PURE__ */ u(ve, { side: n, ...l, ref: o }) });
+    const t = fe(b, e.__scopeTooltip), { forceMount: r = t.forceMount, side: n = "top", ...s } = e, i = _(b, e.__scopeTooltip);
+    return /* @__PURE__ */ u(V, { present: r || i.open, children: i.disableHoverableContent ? /* @__PURE__ */ u(X, { side: n, ...s, ref: o }) : /* @__PURE__ */ u(ve, { side: n, ...s, ref: o }) });
   }
 ), ve = a.forwardRef((e, o) => {
-  const t = _(b, e.__scopeTooltip), r = k(b, e.__scopeTooltip), n = a.useRef(null), l = G(o, n), [s, v] = a.useState(null), { trigger: i, onClose: p } = t, c = n.current, { onPointerInTransitChange: f } = r, h = a.useCallback(() => {
+  const t = _(b, e.__scopeTooltip), r = k(b, e.__scopeTooltip), n = a.useRef(null), s = G(o, n), [i, v] = a.useState(null), { trigger: l, onClose: d } = t, c = n.current, { onPointerInTransitChange: f } = r, m = a.useCallback(() => {
     v(null), f(!1);
-  }, [f]), d = a.useCallback(
-    (m, T) => {
-      const g = m.currentTarget, y = { x: m.clientX, y: m.clientY }, x = Te(y, g.getBoundingClientRect()), w = xe(y, x), P = ye(T.getBoundingClientRect()), E = be([...w, ...P]);
+  }, [f]), p = a.useCallback(
+    (h, T) => {
+      const g = h.currentTarget, y = { x: h.clientX, y: h.clientY }, x = Te(y, g.getBoundingClientRect()), w = xe(y, x), P = ye(T.getBoundingClientRect()), E = be([...w, ...P]);
       v(E), f(!0);
     },
     [f]
   );
-  return a.useEffect(() => () => h(), [h]), a.useEffect(() => {
-    if (i && c) {
-      const m = (g) => d(g, c), T = (g) => d(g, i);
-      return i.addEventListener("pointerleave", m), c.addEventListener("pointerleave", T), () => {
-        i.removeEventListener("pointerleave", m), c.removeEventListener("pointerleave", T);
+  return a.useEffect(() => () => m(), [m]), a.useEffect(() => {
+    if (l && c) {
+      const h = (g) => p(g, c), T = (g) => p(g, l);
+      return l.addEventListener("pointerleave", h), c.addEventListener("pointerleave", T), () => {
+        l.removeEventListener("pointerleave", h), c.removeEventListener("pointerleave", T);
       };
     }
-  }, [i, c, d, h]), a.useEffect(() => {
-    if (s) {
-      const m = (T) => {
-        const g = T.target, y = { x: T.clientX, y: T.clientY }, x = i?.contains(g) || c?.contains(g), w = !Ce(y, s);
-        x ? h() : w && (h(), p());
+  }, [l, c, p, m]), a.useEffect(() => {
+    if (i) {
+      const h = (T) => {
+        const g = T.target, y = { x: T.clientX, y: T.clientY }, x = l?.contains(g) || c?.contains(g), w = !Ce(y, i);
+        x ? m() : w && (m(), d());
       };
-      return document.addEventListener("pointermove", m), () => document.removeEventListener("pointermove", m);
+      return document.addEventListener("pointermove", h), () => document.removeEventListener("pointermove", h);
     }
-  }, [i, c, s, p, h]), /* @__PURE__ */ u(X, { ...e, ref: l });
-}), [he, me] = O(R, { isInside: !1 }), ge = ee("TooltipContent"), X = a.forwardRef(
+  }, [l, c, i, d, m]), /* @__PURE__ */ u(X, { ...e, ref: s });
+}), [me, he] = O(R, { isInside: !1 }), ge = ee("TooltipContent"), X = a.forwardRef(
   (e, o) => {
     const {
       __scopeTooltip: t,
       children: r,
       "aria-label": n,
-      onEscapeKeyDown: l,
-      onPointerDownOutside: s,
+      onEscapeKeyDown: s,
+      onPointerDownOutside: i,
       ...v
-    } = e, i = _(b, t), p = A(t), { onClose: c } = i;
+    } = e, l = _(b, t), d = A(t), { onClose: c } = l;
     return a.useEffect(() => (document.addEventListener(D, c), () => document.removeEventListener(D, c)), [c]), a.useEffect(() => {
-      if (i.trigger) {
-        const f = (h) => {
-          h.target?.contains(i.trigger) && c();
+      if (l.trigger) {
+        const f = (m) => {
+          m.target?.contains(l.trigger) && c();
         };
         return window.addEventListener("scroll", f, { capture: !0 }), () => window.removeEventListener("scroll", f, { capture: !0 });
       }
-    }, [i.trigger, c]), /* @__PURE__ */ u(
+    }, [l.trigger, c]), /* @__PURE__ */ u(
       oe,
       {
         asChild: !0,
         disableOutsidePointerEvents: !1,
-        onEscapeKeyDown: l,
-        onPointerDownOutside: s,
+        onEscapeKeyDown: s,
+        onPointerDownOutside: i,
         onFocusOutside: (f) => f.preventDefault(),
         onDismiss: c,
         children: /* @__PURE__ */ S(
           ie,
           {
-            "data-state": i.stateAttribute,
-            ...p,
+            "data-state": l.stateAttribute,
+            ...d,
             ...v,
             ref: o,
             style: {
@@ -208,7 +208,7 @@ var b = "TooltipContent", q = a.forwardRef(
             },
             children: [
               /* @__PURE__ */ u(ge, { children: r }),
-              /* @__PURE__ */ u(he, { scope: t, isInside: !0, children: /* @__PURE__ */ u(le, { id: i.contentId, role: "tooltip", children: n || r }) })
+              /* @__PURE__ */ u(me, { scope: t, isInside: !0, children: /* @__PURE__ */ u(le, { id: l.contentId, role: "tooltip", children: n || r }) })
             ]
           }
         )
@@ -220,7 +220,7 @@ q.displayName = b;
 var K = "TooltipArrow", W = a.forwardRef(
   (e, o) => {
     const { __scopeTooltip: t, ...r } = e, n = A(t);
-    return me(
+    return he(
       K,
       t
     ).isInside ? null : /* @__PURE__ */ u(ae, { ...n, ...r, ref: o });
@@ -228,9 +228,9 @@ var K = "TooltipArrow", W = a.forwardRef(
 );
 W.displayName = K;
 function Te(e, o) {
-  const t = Math.abs(o.top - e.y), r = Math.abs(o.bottom - e.y), n = Math.abs(o.right - e.x), l = Math.abs(o.left - e.x);
-  switch (Math.min(t, r, n, l)) {
-    case l:
+  const t = Math.abs(o.top - e.y), r = Math.abs(o.bottom - e.y), n = Math.abs(o.right - e.x), s = Math.abs(o.left - e.x);
+  switch (Math.min(t, r, n, s)) {
+    case s:
       return "left";
     case n:
       return "right";
@@ -284,9 +284,9 @@ function ye(e) {
 function Ce(e, o) {
   const { x: t, y: r } = e;
   let n = !1;
-  for (let l = 0, s = o.length - 1; l < o.length; s = l++) {
-    const v = o[l], i = o[s], p = v.x, c = v.y, f = i.x, h = i.y;
-    c > r != h > r && t < (f - p) * (r - c) / (h - c) + p && (n = !n);
+  for (let s = 0, i = o.length - 1; s < o.length; i = s++) {
+    const v = o[s], l = o[i], d = v.x, c = v.y, f = l.x, m = l.y;
+    c > r != m > r && t < (f - d) * (r - c) / (m - c) + d && (n = !n);
   }
   return n;
 }
@@ -300,8 +300,8 @@ function we(e) {
   for (let r = 0; r < e.length; r++) {
     const n = e[r];
     for (; o.length >= 2; ) {
-      const l = o[o.length - 1], s = o[o.length - 2];
-      if ((l.x - s.x) * (n.y - s.y) >= (l.y - s.y) * (n.x - s.x)) o.pop();
+      const s = o[o.length - 1], i = o[o.length - 2];
+      if ((s.x - i.x) * (n.y - i.y) >= (s.y - i.y) * (n.x - i.x)) o.pop();
       else break;
     }
     o.push(n);
@@ -311,8 +311,8 @@ function we(e) {
   for (let r = e.length - 1; r >= 0; r--) {
     const n = e[r];
     for (; t.length >= 2; ) {
-      const l = t[t.length - 1], s = t[t.length - 2];
-      if ((l.x - s.x) * (n.y - s.y) >= (l.y - s.y) * (n.x - s.x)) t.pop();
+      const s = t[t.length - 1], i = t[t.length - 2];
+      if ((s.x - i.x) * (n.y - i.y) >= (s.y - i.y) * (n.x - i.x)) t.pop();
       else break;
     }
     t.push(n);
@@ -320,26 +320,26 @@ function we(e) {
   return t.pop(), o.length === 1 && t.length === 1 && o[0].x === t[0].x && o[0].y === t[0].y ? o : o.concat(t);
 }
 var Pe = $, Ee = B, Re = U, _e = Y, Oe = q, Ae = W;
-const De = ({ delayDuration: e = 0, ...o }) => /* @__PURE__ */ u(Pe, { "data-slot": "tooltip-provider", delayDuration: e, ...o }), ze = ({ ...e }) => /* @__PURE__ */ u(De, { children: /* @__PURE__ */ u(Ee, { "data-slot": "tooltip", "data-testid": "spectral-tooltip", ...e }) }), $e = ({ asChild: e, children: o, ...t }) => /* @__PURE__ */ u(Re, { asChild: e, "data-slot": "tooltip-trigger", "data-testid": "spectral-tooltip-trigger", className: "w-fit", ...t, children: o }), Le = F(
-  `pointer-events-auto z-50 w-fit rounded-md px-3 py-1.5 text-xs shadow-lg will-change-transform outline-none select-none data-[state=open]:animate-in data-[state=open]:fade-in-0
-  data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2
-  data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2`,
+const De = ({ delayDuration: e = 0, ...o }) => /* @__PURE__ */ u(Pe, { "data-slot": "tooltip-provider", delayDuration: e, ...o }), ze = ({ ...e }) => /* @__PURE__ */ u(De, { children: /* @__PURE__ */ u(Ee, { "data-slot": "tooltip", "data-testid": "spectral-tooltip", ...e }) }), $e = ({ asChild: e, children: o, ...t }) => /* @__PURE__ */ u(Re, { asChild: e, className: "w-fit", "data-slot": "tooltip-trigger", "data-testid": "spectral-tooltip-trigger", ...t, children: o }), Le = F(
+  `bg-tooltip-bg text-text-primary tooltip-effects pointer-events-auto z-50 w-fit rounded-md px-3 py-1.5 text-xs will-change-transform outline-none select-none motion-safe:data-[state=open]:animate-in
+  motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=open]:zoom-in-95 motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[side=bottom]:slide-in-from-top-2
+  motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2`,
   {
     variants: {
       variant: {
-        default: "bg-tooltip-bg text-text-primary",
-        outline: "bg-tooltip-bg text-text-primary border-2 border-solid border-white"
+        default: "",
+        outline: "border-2 border-tooltip-outline-border"
       }
     },
     defaultVariants: {
       variant: "default"
     }
   }
-), ke = F("z-[-1] size-2.5 rotate-45 rounded-[2px]", {
+), ke = F("bg-tooltip-arrow fill-tooltip-arrow z-[-1] size-2.5 rotate-45 rounded-[2px]", {
   variants: {
     variant: {
-      default: "bg-tooltip-arrow fill-tooltip-arrow -translate-y-[calc(50%+1px)]",
-      outline: "bg-tooltip-arrow fill-tooltip-arrow border-2 border-solid border-white border-t-0 border-l-0 -translate-y-[calc(50%-1.5px)]"
+      default: "-translate-y-[calc(50%+1px)]",
+      outline: "border-2 border-tooltip-outline-arrow border-t-0 border-l-0 -translate-y-[calc(50%-1.5px)]"
     }
   },
   defaultVariants: {
@@ -349,13 +349,13 @@ const De = ({ delayDuration: e = 0, ...o }) => /* @__PURE__ */ u(Pe, { "data-slo
   children: e,
   className: o,
   showArrow: t = !1,
-  sideOffset: r = 0,
-  variant: n = "default",
-  side: l,
-  ...s
-}) => /* @__PURE__ */ u(_e, { "data-slot": "tooltip-portal", "data-testid": "spectral-tooltip-portal", children: /* @__PURE__ */ S(Oe, { className: H(Le({ variant: n }), o), "data-slot": "tooltip-content", "data-testid": "spectral-tooltip-content", sideOffset: r, side: l, ...s, children: [
+  side: r,
+  sideOffset: n = 0,
+  variant: s = "default",
+  ...i
+}) => /* @__PURE__ */ u(_e, { "data-testid": "spectral-tooltip-portal", "data-slot": "tooltip-portal", children: /* @__PURE__ */ S(Oe, { className: H(Le({ variant: s }), o), "data-slot": "tooltip-content", "data-testid": "spectral-tooltip-content", side: r, sideOffset: n, ...i, children: [
   e,
-  t && /* @__PURE__ */ u(Ae, { height: 8, className: H(ke({ variant: n })) })
+  t && /* @__PURE__ */ u(Ae, { className: H(ke({ variant: s })), height: 8 })
 ] }) });
 export {
   ze as Tooltip,

package/dist/Tray.d.ts

@@ -5,21 +5,21 @@ declare const TrayContentVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "full" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type TrayBaseProps = ComponentPropsWithoutRef<typeof TrayBase.Root> & {
-    size?: 'sm' | 'md' | 'lg' | 'full';
     children?: ReactNode;
+    size?: 'sm' | 'md' | 'lg' | 'full';
 };
 export declare const Tray: {
-    ({ size, children, ...props }: TrayBaseProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, size, ...props }: TrayBaseProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const TrayTrigger: {
-    ({ ref, className, ...props }: ComponentPropsWithoutRef<typeof TrayBase.Trigger> & {
+    ({ className, ref, ...props }: ComponentPropsWithoutRef<typeof TrayBase.Trigger> & {
         ref?: Ref<HTMLButtonElement>;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const TrayClose: {
-    ({ ref, className, ...props }: ComponentPropsWithoutRef<typeof TrayBase.Close> & {
+    ({ className, ref, ...props }: ComponentPropsWithoutRef<typeof TrayBase.Close> & {
         ref?: Ref<HTMLButtonElement>;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
@@ -28,25 +28,25 @@ export type TrayContentProps = ComponentPropsWithoutRef<typeof TrayBase.Content>
     children?: ReactNode;
 };
 export declare const TrayContent: {
-    ({ ref, className, size: sizeProp, children, ...props }: TrayContentProps & {
+    ({ children, className, ref, size: sizeProp, ...props }: TrayContentProps & {
         ref?: Ref<HTMLDivElement>;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const TrayHeader: {
-    ({ ref, className, children, ...props }: ComponentPropsWithoutRef<"div"> & {
+    ({ children, className, ref, ...props }: ComponentPropsWithoutRef<"div"> & {
         ref?: Ref<HTMLDivElement>;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const TrayTitle: {
-    ({ ref, className, children, ...props }: ComponentPropsWithoutRef<"h2"> & {
+    ({ children, className, ref, ...props }: ComponentPropsWithoutRef<"h2"> & {
         ref?: Ref<HTMLHeadingElement>;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const TraySubtitle: {
-    ({ ref, className, ...props }: ComponentPropsWithoutRef<"p"> & {
+    ({ className, ref, ...props }: ComponentPropsWithoutRef<"p"> & {
         ref?: Ref<HTMLParagraphElement>;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
@@ -55,7 +55,7 @@ export type TrayBodyProps = ComponentPropsWithoutRef<'div'> & {
     animationKey?: string | number;
 };
 export declare const TrayBody: {
-    ({ ref, className, children, animationKey: keyProp, ...props }: TrayBodyProps & {
+    ({ animationKey: keyProp, children, className, ref, ...props }: TrayBodyProps & {
         ref?: Ref<HTMLDivElement>;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;