@skiddph/prui 0.8.0 → 0.9.1

package/dist/core/time-picker.js

@@ -0,0 +1,305 @@
+import { jsxs as N, Fragment as U, jsx as u } from "react/jsx-runtime";
+import * as R from "react";
+import { Clock as G } from "lucide-react";
+import { cn as I } from "./cn.js";
+import { Portal as L, useOverlayStack as J, useEscapeKey as Q } from "./overlay.js";
+import { useAnchoredPosition as W } from "./anchor.js";
+import { moveIndex as F } from "./list-nav.js";
+import { usePruiI18n as V } from "../i18n.js";
+const P = (s) => String(s).padStart(2, "0");
+function _(s) {
+  if (!s || !/^\d{2}:\d{2}(:\d{2})?$/.test(s)) return null;
+  const [o, c, d] = s.split(":").map(Number);
+  return { h: o ?? 0, m: c ?? 0, s: d ?? 0 };
+}
+function X(s, o, c = 0, d) {
+  return d ? `${P(s)}:${P(o)}:${P(c)}` : `${P(s)}:${P(o)}`;
+}
+function z(s) {
+  const o = _(s);
+  return o ? o.h * 3600 + o.m * 60 + o.s : -1;
+}
+function Y(s) {
+  const o = [];
+  for (let c = 0; c < 60; c += Math.max(1, s)) o.push(c);
+  return o;
+}
+function C({ value: s, onSelect: o, minuteStep: c = 1, seconds: d = !1, min: h, max: y, compact: k, className: w }) {
+  const { t: b } = V(), t = _(s), x = h ? z(h) : -1 / 0, A = y ? z(y) : 1 / 0, p = [
+    { label: b.hours, items: Array.from({ length: 24 }, (e, a) => a), selected: (t == null ? void 0 : t.h) ?? null, unit: "h" },
+    { label: b.minutes, items: Y(c), selected: (t == null ? void 0 : t.m) ?? null, unit: "m" }
+  ];
+  d && p.push({ label: b.seconds, items: Array.from({ length: 60 }, (e, a) => a), selected: (t == null ? void 0 : t.s) ?? null, unit: "s" });
+  const H = (e, a) => {
+    const n = e === "h" ? a : (t == null ? void 0 : t.h) ?? 0, m = e === "m" ? a : (t == null ? void 0 : t.m) ?? 0, i = e === "s" ? a : (t == null ? void 0 : t.s) ?? 0, f = n * 3600 + m * 60 + i;
+    return f < x || f > A;
+  }, E = (e, a) => {
+    const n = e === "h" ? a : (t == null ? void 0 : t.h) ?? 0, m = e === "m" ? a : (t == null ? void 0 : t.m) ?? 0, i = e === "s" ? a : (t == null ? void 0 : t.s) ?? 0;
+    o(X(n, m, i, d));
+  }, S = (e, a) => {
+    var T, v, g, l, D, $, M, K;
+    const n = Array.from(
+      e.currentTarget.querySelectorAll("[role='option']:not([aria-disabled='true'])")
+    ), m = n.findIndex((r) => r.getAttribute("aria-selected") === "true"), i = n.indexOf(document.activeElement), f = i >= 0 ? i : m;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault(), (T = n[F(f, 1, n.length)]) == null || T.focus();
+        break;
+      case "ArrowUp":
+        e.preventDefault(), (v = n[F(f, -1, n.length)]) == null || v.focus();
+        break;
+      case "Home":
+        e.preventDefault(), (g = n[0]) == null || g.focus();
+        break;
+      case "End":
+        e.preventDefault(), (l = n[n.length - 1]) == null || l.focus();
+        break;
+      case "ArrowLeft":
+        if (a > 0) {
+          e.preventDefault();
+          const r = (D = e.currentTarget.previousElementSibling) == null ? void 0 : D.querySelectorAll("[role='option']:not([aria-disabled='true'])");
+          ($ = r == null ? void 0 : r[Math.min(f < 0 ? 0 : f, r.length - 1)]) == null || $.focus();
+        }
+        break;
+      case "ArrowRight":
+        if (a < p.length - 1) {
+          e.preventDefault();
+          const r = (M = e.currentTarget.nextElementSibling) == null ? void 0 : M.querySelectorAll("[role='option']:not([aria-disabled='true'])");
+          (K = r == null ? void 0 : r[Math.min(f < 0 ? 0 : f, r.length - 1)]) == null || K.focus();
+        }
+        break;
+    }
+  };
+  return /* @__PURE__ */ u("div", { className: I("prui-time-panel flex gap-1", w), role: "group", "aria-label": b.time, children: p.map((e, a) => /* @__PURE__ */ N(
+    "div",
+    {
+      role: "listbox",
+      "aria-label": e.label,
+      tabIndex: -1,
+      onKeyDown: (n) => S(n, a),
+      className: I("flex w-16 flex-col rounded-[var(--prui-radius-1)] outline-none", !k && "bg-[var(--prui-raise)]/40"),
+      children: [
+        k ? null : /* @__PURE__ */ u("div", { className: "px-2 pb-1 pt-2 text-center text-[10px] font-semibold uppercase tracking-wide text-[var(--prui-dim)]", children: e.label }),
+        /* @__PURE__ */ u("div", { className: "flex max-h-56 flex-col overflow-y-auto p-1", children: e.items.map((n) => {
+          const m = e.selected === n, i = H(e.unit, n);
+          return /* @__PURE__ */ u(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": m,
+              "aria-disabled": i || void 0,
+              tabIndex: m ? 0 : -1,
+              "data-testid": `time-${e.unit}`,
+              onClick: () => !i && E(e.unit, n),
+              className: I(
+                "rounded-[calc(var(--prui-radius-1))] py-1 text-center text-sm tabular-nums cursor-pointer outline-none",
+                "focus-visible:bg-[var(--prui-raise)]",
+                m ? "bg-[var(--prui-brand)] text-[var(--prui-brand-fg,#fff)] font-medium" : "text-[var(--prui-fg)] hover:bg-[var(--prui-raise)]",
+                i && "opacity-40 pointer-events-none"
+              ),
+              children: P(n)
+            },
+            n
+          );
+        }) })
+      ]
+    },
+    e.unit
+  )) });
+}
+function B(s, o, c) {
+  const { setElement: d, isTop: h } = J(o);
+  Q(o, h, c);
+  const { ref: y, position: k } = W({ active: o, anchorRef: s, side: "bottom", align: "start", offsetHeight: 280 });
+  return R.useEffect(() => {
+    if (!o) return;
+    const w = (b) => {
+      var x;
+      const t = b.target;
+      (x = s.current) != null && x.contains(t) || (!(t instanceof Element) || !t.closest("[data-prui-time-panel-wrap]")) && c();
+    };
+    return document.addEventListener("mousedown", w), () => document.removeEventListener("mousedown", w);
+  }), { setElement: d, floatingRef: y, position: k };
+}
+const Z = R.forwardRef(function({ value: o, defaultValue: c, onChange: d, minuteStep: h, seconds: y, min: k, max: w, disabled: b, placeholder: t = "HH:mm", ariaLabel: x, className: A }, p) {
+  const [H, E] = R.useState(c ?? ""), [S, e] = R.useState(!1), a = R.useRef(null), n = o !== void 0, m = n ? o : H, i = a, { setElement: f, floatingRef: T, position: v } = B(i, S, () => {
+    var l;
+    e(!1), (l = a.current) == null || l.focus();
+  }), g = (l) => {
+    n || E(l), d == null || d(l);
+  };
+  return /* @__PURE__ */ N(U, { children: [
+    /* @__PURE__ */ u(
+      "input",
+      {
+        ref: (l) => {
+          a.current = l, typeof p == "function" ? p(l) : p && (p.current = l);
+        },
+        type: "text",
+        readOnly: !0,
+        role: "combobox",
+        "aria-expanded": S,
+        "aria-haspopup": "dialog",
+        "aria-label": x,
+        placeholder: t,
+        disabled: b,
+        value: m,
+        onClick: () => e(!0),
+        onFocus: () => {
+          !b && !S && e(!0);
+        },
+        className: I(
+          "prui-time-picker h-9 w-full cursor-pointer rounded-[var(--prui-radius)] border border-[var(--prui-line)]",
+          "bg-[var(--prui-background)] px-3 pr-8 text-sm tabular-nums text-[var(--prui-fg)] placeholder:text-[var(--prui-dim)]",
+          "outline-none transition-colors focus:border-[var(--prui-brand)] focus:ring-2 focus:ring-[var(--prui-brand)]/30",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          A
+        )
+      }
+    ),
+    S ? /* @__PURE__ */ u(L, { children: /* @__PURE__ */ u(
+      "div",
+      {
+        ref: (l) => {
+          T(l), f(l);
+        },
+        role: "dialog",
+        "aria-label": x ?? "Choose time",
+        "data-prui-time-panel-wrap": !0,
+        className: "fixed z-[var(--prui-z-overlay)] rounded-[var(--prui-radius)] border border-[var(--prui-line)] bg-[var(--prui-surface)] p-2 shadow-[var(--prui-shadow-lg)]",
+        style: { top: (v == null ? void 0 : v.top) ?? -9999, left: (v == null ? void 0 : v.left) ?? -9999 },
+        children: /* @__PURE__ */ u(C, { value: m, onSelect: g, minuteStep: h, seconds: y, min: k, max: w })
+      }
+    ) }) : null
+  ] });
+});
+Z.displayName = "TimePicker";
+const ee = R.forwardRef(function({ value: o, defaultValue: c, onChange: d, minuteStep: h, seconds: y, min: k, max: w, disabled: b, placeholder: t = "HH:mm – HH:mm", ariaLabel: x, className: A }, p) {
+  const { t: H } = V(), [E, S] = R.useState(c ?? {}), [e, a] = R.useState(!1), n = R.useRef(null), m = o !== void 0, i = m ? o : E, f = n, { setElement: T, floatingRef: v, position: g } = B(f, e, () => {
+    var r;
+    a(!1), (r = n.current) == null || r.focus();
+  }), l = (r) => {
+    m || S(r), d == null || d(r);
+  }, D = (r, q) => {
+    const O = r === "from" ? q : i.from, j = r === "to" ? q : i.to;
+    if (O && j && z(j) < z(O)) {
+      l(r === "to" ? { from: q, to: void 0 } : { from: j, to: O });
+      return;
+    }
+    l({ from: O, to: j });
+  }, $ = i.from ? i.to ? `${i.from} – ${i.to}` : `${i.from} – …` : "", M = i.to ?? w, K = i.from ?? k;
+  return /* @__PURE__ */ N(U, { children: [
+    /* @__PURE__ */ u(
+      "input",
+      {
+        ref: (r) => {
+          n.current = r, typeof p == "function" ? p(r) : p && (p.current = r);
+        },
+        type: "text",
+        readOnly: !0,
+        role: "combobox",
+        "aria-expanded": e,
+        "aria-haspopup": "dialog",
+        "aria-label": x,
+        placeholder: t,
+        disabled: b,
+        value: $,
+        onClick: () => a(!0),
+        onFocus: () => {
+          !b && !e && a(!0);
+        },
+        className: I(
+          "prui-time-range-picker h-9 w-full cursor-pointer rounded-[var(--prui-radius)] border border-[var(--prui-line)]",
+          "bg-[var(--prui-background)] px-3 pr-8 text-sm tabular-nums text-[var(--prui-fg)] placeholder:text-[var(--prui-dim)]",
+          "outline-none transition-colors focus:border-[var(--prui-brand)] focus:ring-2 focus:ring-[var(--prui-brand)]/30",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          A
+        )
+      }
+    ),
+    /* @__PURE__ */ u(G, { className: "pointer-events-none -ml-7 h-4 w-4 text-[var(--prui-dim)]", "aria-hidden": !0 }),
+    e ? /* @__PURE__ */ u(L, { children: /* @__PURE__ */ u(
+      "div",
+      {
+        ref: (r) => {
+          v(r), T(r);
+        },
+        role: "dialog",
+        "aria-label": x ?? "Choose time range",
+        "data-prui-time-panel-wrap": !0,
+        className: "fixed z-[var(--prui-z-overlay)] rounded-[var(--prui-radius)] border border-[var(--prui-line)] bg-[var(--prui-surface)] p-3 shadow-[var(--prui-shadow-lg)]",
+        style: { top: (g == null ? void 0 : g.top) ?? -9999, left: (g == null ? void 0 : g.left) ?? -9999 },
+        children: /* @__PURE__ */ N("div", { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ N("div", { className: "flex gap-4", children: [
+            /* @__PURE__ */ N("div", { children: [
+              /* @__PURE__ */ u("div", { className: "mb-1 text-xs font-semibold text-[var(--prui-dim)]", children: H.from }),
+              /* @__PURE__ */ u(C, { compact: !0, value: i.from, onSelect: (r) => D("from", r), minuteStep: h, seconds: y, min: k, max: M })
+            ] }),
+            /* @__PURE__ */ N("div", { children: [
+              /* @__PURE__ */ u("div", { className: "mb-1 text-xs font-semibold text-[var(--prui-dim)]", children: H.to }),
+              /* @__PURE__ */ u(C, { compact: !0, value: i.to, onSelect: (r) => D("to", r), minuteStep: h, seconds: y, min: K, max: w })
+            ] })
+          ] }),
+          /* @__PURE__ */ N("div", { className: "flex items-center justify-between border-t border-[var(--prui-line)] pt-2 text-xs text-[var(--prui-dim)]", children: [
+            /* @__PURE__ */ u("span", { "data-testid": "timerange-label", children: $ || H.time }),
+            /* @__PURE__ */ N("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ u(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => l({}),
+                  className: "cursor-pointer rounded-[var(--prui-radius-1)] px-2 py-1 transition-colors hover:bg-[var(--prui-raise)]",
+                  children: H.clear
+                }
+              ),
+              /* @__PURE__ */ u(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    var r;
+                    a(!1), (r = n.current) == null || r.focus();
+                  },
+                  className: "cursor-pointer rounded-[var(--prui-radius-1)] bg-[var(--prui-brand)]/15 px-2 py-1 text-[var(--prui-brand)] transition-colors hover:bg-[var(--prui-brand)]/25",
+                  children: H.apply
+                }
+              )
+            ] })
+          ] })
+        ] })
+      }
+    ) }) : null
+  ] });
+});
+ee.displayName = "TimeRangePicker";
+const le = {
+  name: "TimePicker",
+  props: [
+    { name: "value", type: "string 'HH:mm' | 'HH:mm:ss'", default: "undefined", control: "text" },
+    { name: "defaultValue", type: "string", default: "undefined", control: "text" },
+    { name: "onChange", type: "(time: string) => void", default: null, control: "none" },
+    { name: "minuteStep", type: "number (minutes)", default: "1", control: "number" },
+    { name: "seconds", type: "boolean", default: "false", control: "boolean", description: "Adds a seconds column ('HH:mm:ss')." },
+    { name: "min", type: "string 'HH:mm'", default: "undefined", control: "text" },
+    { name: "max", type: "string 'HH:mm'", default: "undefined", control: "text" }
+  ]
+}, ue = {
+  name: "TimeRangePicker",
+  props: [
+    { name: "value", type: "{ from?: string, to?: string }", default: "{}", control: "object" },
+    { name: "defaultValue", type: "{ from?: string, to?: string }", default: "{}", control: "object" },
+    { name: "onChange", type: "(range: TimeRange) => void", default: null, control: "none" },
+    { name: "minuteStep", type: "number (minutes)", default: "1", control: "number" },
+    { name: "seconds", type: "boolean", default: "false", control: "boolean" },
+    { name: "min", type: "string 'HH:mm'", default: "undefined", control: "text" },
+    { name: "max", type: "string 'HH:mm'", default: "undefined", control: "text" }
+  ]
+};
+export {
+  C as TimePanel,
+  Z as TimePicker,
+  ee as TimeRangePicker,
+  le as timePickerPropsMeta,
+  ue as timeRangePickerPropsMeta
+};

package/dist/core/toast.js

@@ -1,97 +1,106 @@
-import { jsx as a, jsxs as d } from "react/jsx-runtime";
-import * as m from "react";
-import { createPortal as x } from "react-dom";
-import { XCircle as w, AlertTriangle as N, CheckCircle2 as T, Info as p, X as C } from "lucide-react";
-import { cn as s } from "./cn.js";
-import { usePruiI18n as k } from "../i18n.js";
-import { useReducedMotion as I } from "./overlay.js";
-const f = {
-  neutral: { icon: p, accent: "text-[var(--prui-brand)]" },
-  info: { icon: p, accent: "text-[var(--prui-brand)]" },
-  success: { icon: T, accent: "text-[var(--prui-ok)]" },
-  warning: { icon: N, accent: "text-[var(--prui-warn)]" },
-  danger: { icon: w, accent: "text-[var(--prui-danger)]" }
+import { jsx as a, jsxs as p } from "react/jsx-runtime";
+import * as f from "react";
+import { createPortal as w } from "react-dom";
+import { XCircle as N, AlertTriangle as T, CheckCircle2 as C, Info as b, X as k } from "lucide-react";
+import { cn as l } from "./cn.js";
+import { usePruiI18n as I } from "../i18n.js";
+import { useReducedMotion as M } from "./overlay.js";
+const v = {
+  neutral: { icon: b, accent: "text-[var(--prui-brand)]" },
+  info: { icon: b, accent: "text-[var(--prui-brand)]" },
+  success: { icon: C, accent: "text-[var(--prui-ok)]" },
+  warning: { icon: T, accent: "text-[var(--prui-warn)]" },
+  danger: { icon: N, accent: "text-[var(--prui-danger)]" }
 };
 let P = 1, r = [];
-const c = /* @__PURE__ */ new Set();
-function u() {
-  for (const o of c) o(r);
+const u = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Map();
+function m() {
+  for (const e of u) e(r);
 }
-function l(o) {
-  var e;
-  const t = r.find((i) => i.id === o);
-  r = r.filter((i) => i.id !== o), t && ((e = t.onDismiss) == null || e.call(t)), u();
+function d(e) {
+  var n;
+  const o = s.get(e);
+  o && (clearTimeout(o), s.delete(e));
+  const t = r.find((c) => c.id === e);
+  r = r.filter((c) => c.id !== e), t && ((n = t.onDismiss) == null || n.call(t)), m();
 }
-function D(o) {
-  const t = P++;
-  r = [...r, { ...o, id: t }], u();
-  const e = o.duration ?? 5e3;
-  return e > 0 && typeof setTimeout == "function" && setTimeout(() => l(t), e), { dismiss: () => l(t) };
+function X(e) {
+  const o = P++;
+  r = [...r, { ...e, id: o }], m();
+  const t = e.duration ?? 5e3;
+  return t > 0 && typeof setTimeout == "function" && s.set(
+    o,
+    setTimeout(() => {
+      s.delete(o), d(o);
+    }, t)
+  ), { dismiss: () => d(o) };
 }
-function X() {
-  var t;
-  const o = r;
+function E() {
+  var o;
+  const e = r;
   r = [];
-  for (const e of o) (t = e.onDismiss) == null || t.call(e);
-  u();
+  for (const t of s.values()) clearTimeout(t);
+  s.clear();
+  for (const t of e) (o = t.onDismiss) == null || o.call(t);
+  m();
 }
 function R() {
-  const [o, t] = m.useState(r);
-  return m.useEffect(() => {
-    const e = (i) => t([...i]);
-    return c.add(e), e(r), () => {
-      c.delete(e);
+  const [e, o] = f.useState(r);
+  return f.useEffect(() => {
+    const t = (n) => o([...n]);
+    return u.add(t), t(r), () => {
+      u.delete(t);
     };
-  }, []), o;
+  }, []), e;
 }
-function E({ position: o = "bottom-right", className: t } = {}) {
-  const e = R(), { t: i } = k(), b = I();
+function L({ position: e = "bottom-right", className: o } = {}) {
+  const t = R(), { t: n } = I(), c = M();
   if (typeof document > "u") return null;
-  const v = {
+  const h = {
     "top-right": "top-4 right-4",
     "top-center": "top-4 left-1/2 -translate-x-1/2",
     "bottom-right": "bottom-4 right-4",
     "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
     "bottom-left": "bottom-4 left-4"
-  }[o];
-  return x(
+  }[e];
+  return w(
     /* @__PURE__ */ a(
       "ol",
       {
         "aria-live": "polite",
-        "aria-label": i.notifications,
-        className: s("fixed z-[var(--prui-z-toast)] flex w-80 flex-col gap-2", v, t),
-        children: e.map((n) => {
-          const h = f[n.variant ?? "neutral"].icon, g = f[n.variant ?? "neutral"].accent;
-          return /* @__PURE__ */ d(
+        "aria-label": n.notifications,
+        className: l("fixed z-[var(--prui-z-toast)] flex w-80 flex-col gap-2", h, o),
+        children: t.map((i) => {
+          const g = v[i.variant ?? "neutral"].icon, x = v[i.variant ?? "neutral"].accent;
+          return /* @__PURE__ */ p(
             "li",
             {
               "data-testid": "toast",
-              "data-variant": n.variant ?? "neutral",
-              className: s(
+              "data-variant": i.variant ?? "neutral",
+              className: l(
                 "prui-toast flex items-start gap-3 rounded-[var(--prui-radius)] border border-[var(--prui-line)]",
                 "bg-[var(--prui-surface)] p-4 text-sm shadow-[var(--prui-shadow-md)]",
-                !b && "prui-anim-slide"
+                !c && "prui-anim-slide"
               ),
               children: [
-                /* @__PURE__ */ a(h, { className: s("mt-0.5 h-4 w-4 shrink-0", g), "aria-hidden": !0 }),
-                /* @__PURE__ */ d("div", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ a("div", { className: "font-medium text-[var(--prui-fg)]", children: n.title }),
-                  n.description ? /* @__PURE__ */ a("div", { className: "mt-0.5 text-[var(--prui-dim)]", children: n.description }) : null
+                /* @__PURE__ */ a(g, { className: l("mt-0.5 h-4 w-4 shrink-0", x), "aria-hidden": !0 }),
+                /* @__PURE__ */ p("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ a("div", { className: "font-medium text-[var(--prui-fg)]", children: i.title }),
+                  i.description ? /* @__PURE__ */ a("div", { className: "mt-0.5 text-[var(--prui-dim)]", children: i.description }) : null
                 ] }),
                 /* @__PURE__ */ a(
                   "button",
                   {
                     type: "button",
-                    "aria-label": i.dismiss,
-                    onClick: () => l(n.id),
+                    "aria-label": n.dismiss,
+                    onClick: () => d(i.id),
                     className: "-m-1 rounded-[var(--prui-radius-1)] p-1 cursor-pointer text-[var(--prui-dim)] transition-colors hover:text-[var(--prui-fg)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--prui-brand)]",
-                    children: /* @__PURE__ */ a(C, { className: "h-4 w-4", "aria-hidden": !0 })
+                    children: /* @__PURE__ */ a(k, { className: "h-4 w-4", "aria-hidden": !0 })
                   }
                 )
               ]
             },
-            n.id
+            i.id
           );
         })
       }
@@ -99,13 +108,13 @@ function E({ position: o = "bottom-right", className: t } = {}) {
     document.body
   );
 }
-const L = {
+const q = {
   name: "Toaster",
   props: [
     { name: "position", type: "'top-right' | 'top-center' | 'bottom-right' | 'bottom-center' | 'bottom-left'", default: "'bottom-right'", control: "select", options: ["top-right", "top-center", "bottom-right", "bottom-center", "bottom-left"] },
     { name: "className", type: "string", default: "undefined", control: "text" }
   ]
-}, q = {
+}, B = {
   name: "toast()",
   props: [
     { name: "title", type: "ReactNode", default: null, control: "text" },
@@ -115,9 +124,9 @@ const L = {
   ]
 };
 export {
-  E as Toaster,
-  X as dismissAllToasts,
-  D as toast,
-  q as toastPropsMeta,
-  L as toasterPropsMeta
+  L as Toaster,
+  E as dismissAllToasts,
+  X as toast,
+  B as toastPropsMeta,
+  q as toasterPropsMeta
 };