@phantomclient/plugin 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/lib/vue.js CHANGED
@@ -1,149 +1,309 @@
1
- import { computed as u, inject as Y, h as P, toValue as E, defineComponent as k, useAttrs as L, useSlots as W, openBlock as o, createBlock as v, resolveDynamicComponent as $, normalizeClass as m, withCtx as N, createElementBlock as n, createCommentVNode as i, renderSlot as z, ref as C, watch as O, toDisplayString as x, createElementVNode as y, useId as D, onMounted as H, onBeforeUnmount as K, Fragment as A, withKeys as ee, unref as w, createVNode as G, Teleport as X, normalizeStyle as R, createTextVNode as Z, createSlots as te, mergeProps as ae, renderList as J, nextTick as oe } from "vue";
2
- import { P as ne } from "./chunks/api-B2tHXZiJ.js";
3
- import { f as F, P as se, c as le } from "./chunks/state-kAlKf5xt.js";
4
- function re() {
5
- const e = Y(se, null) ?? le();
6
- if (!e) throw new ne("NOT_SUPPORTED", "usePlugin() works inside a Phantom plugin frame; this component was drawn outside one");
1
+ import { computed as b, inject as Ce, h as ee, toValue as te, defineComponent as V, useAttrs as be, useSlots as Z, openBlock as n, createBlock as y, resolveDynamicComponent as q, normalizeClass as h, withCtx as F, createElementBlock as i, createCommentVNode as m, renderSlot as I, ref as M, watch as G, toDisplayString as _, createElementVNode as k, useId as ne, onMounted as fe, onBeforeUnmount as oe, Fragment as R, withKeys as Ve, unref as z, createVNode as le, Teleport as re, normalizeStyle as J, createTextVNode as xe, createSlots as Be, mergeProps as Me, renderList as X, nextTick as ae, normalizeProps as qe, guardReactiveProps as Se, withModifiers as Ee, Comment as Ie, Text as je } from "vue";
2
+ import { c as Ae } from "./chunks/api-DhaU9Jsd.js";
3
+ import { f as Q, P as Pe, c as Te } from "./chunks/state-BGYMFLti.js";
4
+ function Le() {
5
+ const e = Ce(Pe, null) ?? Te();
6
+ if (!e) throw new Ae("NOT_SUPPORTED", Re());
7
7
  return e;
8
8
  }
9
- function at(e) {
10
- return re().phantom(e);
9
+ function Re() {
10
+ return typeof document < "u" && "kind" in document.documentElement.dataset ? Q.initialized ? "usePlugin() found no plugin context: this frame is closing, and the plugin it ran has already been let go" : "usePlugin() found no plugin context, although a Phantom frame mounted this component. That is two copies of @phantomclient/plugin in the one frame: the frame provides the context on its copy, this component asks another, and neither can see the other. Check that @phantomclient/plugin and @phantomclient/plugin/vue resolve to the same installed package, and that nothing bundles the package into the plugin instead of leaving it to the frame" : "usePlugin() works inside a Phantom plugin frame; this component was drawn outside one";
11
11
  }
12
- function ot() {
13
- return u(() => F.games);
12
+ function Xt(e) {
13
+ return Le().phantom(e);
14
14
  }
15
- function nt() {
16
- return u(() => F.preferences);
15
+ function Zt() {
16
+ return b(() => Q.games);
17
17
  }
18
- function st() {
19
- return u(() => F.mode);
18
+ function Jt() {
19
+ return b(() => Q.preferences);
20
20
  }
21
- const ie = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
22
- var M = { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round" };
23
- const de = ({ size: e, strokeWidth: a = 2, absoluteStrokeWidth: t, color: r, iconNode: l, name: s, class: d, ...b }, { slots: f }) => P("svg", { ...M, width: e || M.width, height: e || M.height, stroke: r || M.stroke, "stroke-width": t ? Number(a) * 24 / Number(e) : a, class: ["lucide", `lucide-${ie(s ?? "icon")}`], ...b }, [...l.map((c) => P(...c)), ...f.default ? [f.default()] : []]), j = (e, a) => (t, { slots: r }) => P(de, { ...t, iconNode: a, name: e }, r), ue = j("CircleAlertIcon", [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }], ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }], ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]]), pe = j("EyeOffIcon", [["path", { d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49", key: "ct8e1f" }], ["path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242", key: "151rxh" }], ["path", { d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143", key: "13bj9a" }], ["path", { d: "m2 2 20 20", key: "1ooewy" }]]), ce = j("EyeIcon", [["path", { d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0", key: "1nclc0" }], ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]]), me = j("InfoIcon", [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }], ["path", { d: "M12 16v-4", key: "1dtifu" }], ["path", { d: "M12 8h.01", key: "e9boi3" }]]), he = j("LoaderCircleIcon", [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]]), U = { xs: "w-6", sm: "w-7", md: "w-8", lg: "w-10", xl: "w-10" };
24
- function be(e) {
25
- const a = u(() => {
26
- const r = { xs: "h-6 px-2 text-2xs", sm: "h-7 px-2.5 text-xs", md: "h-8 px-3 text-xs", lg: "h-10 px-3.5 text-sm", xl: "h-10 px-4 text-sm" };
27
- return r[E(e)] || r.md;
28
- }), t = u(() => U[E(e)] || U.md);
21
+ function Qt() {
22
+ return b(() => Q.mode);
23
+ }
24
+ const De = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
25
+ var K = { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round" };
26
+ const Ne = ({ size: e, strokeWidth: a = 2, absoluteStrokeWidth: t, color: l, iconNode: o, name: r, class: p, ...c }, { slots: f }) => ee("svg", { ...K, width: e || K.width, height: e || K.height, stroke: l || K.stroke, "stroke-width": t ? Number(a) * 24 / Number(e) : a, class: ["lucide", `lucide-${De(r ?? "icon")}`], ...c }, [...o.map((v) => ee(...v)), ...f.default ? [f.default()] : []]), A = (e, a) => (t, { slots: l }) => ee(Ne, { ...t, iconNode: a, name: e }, l), ve = A("CheckIcon", [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]]), We = A("ChevronDownIcon", [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]]), Ue = A("CircleAlertIcon", [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }], ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }], ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]]), Fe = A("EyeOffIcon", [["path", { d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49", key: "ct8e1f" }], ["path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242", key: "151rxh" }], ["path", { d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143", key: "13bj9a" }], ["path", { d: "m2 2 20 20", key: "1ooewy" }]]), He = A("EyeIcon", [["path", { d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0", key: "1nclc0" }], ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]]), Ke = A("InfoIcon", [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }], ["path", { d: "M12 16v-4", key: "1dtifu" }], ["path", { d: "M12 8h.01", key: "e9boi3" }]]), Oe = A("LoaderCircleIcon", [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]]), Ge = A("MinusIcon", [["path", { d: "M5 12h14", key: "1ays0h" }]]), ce = { xs: "w-6", sm: "w-7", md: "w-8", lg: "w-10", xl: "w-10" };
27
+ function Xe(e) {
28
+ const a = b(() => {
29
+ const l = { xs: "h-6 px-2 text-2xs", sm: "h-7 px-2.5 text-xs", md: "h-8 px-3 text-xs", lg: "h-10 px-3.5 text-sm", xl: "h-10 px-4 text-sm" };
30
+ return l[te(e)] || l.md;
31
+ }), t = b(() => ce[te(e)] || ce.md);
29
32
  return { sizeClasses: a, squareClasses: t };
30
33
  }
31
- function xe(e) {
32
- return { variantClasses: u(() => {
34
+ function Ze(e) {
35
+ return { variantClasses: b(() => {
33
36
  const a = { primary: ["border-transparent bg-phantom-accent text-phantom-accent-contrast", "hover:bg-phantom-accent-hover", "active:bg-phantom-accent-active"].join(" "), secondary: ["border-transparent bg-phantom-surface text-phantom-text", "hover:bg-phantom-selected", "active:bg-phantom-elevated"].join(" "), outline: ["border-phantom-border bg-transparent text-phantom-text", "hover:border-phantom-border-strong hover:bg-phantom-surface", "active:bg-phantom-selected"].join(" "), ghost: ["border-transparent bg-transparent text-phantom-muted", "hover:bg-phantom-surface hover:text-phantom-text", "active:bg-phantom-selected"].join(" "), danger: ["border-transparent bg-phantom-danger/[0.12] text-phantom-danger", "hover:bg-phantom-danger/20 hover:text-phantom-danger-hover", "active:bg-phantom-danger/25"].join(" "), success: ["border-transparent bg-phantom-positive/15 text-phantom-positive-strong", "hover:bg-phantom-positive/[0.22]", "active:bg-phantom-positive/[0.28]"].join(" ") };
34
- return a[E(e)] || a.primary;
37
+ return a[te(e)] || a.primary;
35
38
  }) };
36
39
  }
37
- const fe = { key: 0, class: "size-3.5 shrink-0 animate-spin rounded-full border border-current border-r-transparent", "aria-hidden": "true" }, lt = k({ __name: "index", props: { variant: { default: "primary" }, size: { default: "md" }, disabled: { type: Boolean, default: !1 }, loading: { type: Boolean, default: !1 }, icon: {}, iconRight: {}, type: { default: "button" }, fullWidth: { type: Boolean, default: !1 }, href: {} }, emits: ["click"], setup(e, { emit: a }) {
38
- const t = e, r = a, l = L(), s = W(), { variantClasses: d } = xe(() => t.variant), { sizeClasses: b, squareClasses: f } = be(() => t.size), c = u(() => typeof l.class == "string" && /(^|\s)rounded(-|\s|$)/.test(l.class)), h = u(() => !!(t.icon || t.iconRight) && !t.loading && !s.default), p = u(() => ["inline-flex items-center justify-center gap-1.5", c.value ? "" : "rounded-[7px]", "border font-medium tracking-normal", "transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-spring", "active:scale-[0.98]", "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-phantom-accent/60", "disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none", d.value, b.value, h.value && ["px-0", f.value], t.fullWidth && "w-full", t.loading && "cursor-wait", l.class]), g = u(() => t.href !== void 0), _ = u(() => t.disabled || t.loading), q = (V) => {
39
- !t.disabled && !t.loading && r("click", V);
40
+ const Je = { key: 0, class: "size-3.5 shrink-0 animate-spin rounded-full border border-current border-r-transparent", "aria-hidden": "true" }, Yt = V({ __name: "index", props: { variant: { default: "primary" }, size: { default: "md" }, disabled: { type: Boolean, default: !1 }, loading: { type: Boolean, default: !1 }, icon: {}, iconRight: {}, type: { default: "button" }, fullWidth: { type: Boolean, default: !1 }, href: {} }, emits: ["click"], setup(e, { emit: a }) {
41
+ const t = e, l = a, o = be(), r = Z(), { variantClasses: p } = Ze(() => t.variant), { sizeClasses: c, squareClasses: f } = Xe(() => t.size), v = b(() => typeof o.class == "string" && /(^|\s)rounded(-|\s|$)/.test(o.class)), g = b(() => !!(t.icon || t.iconRight) && !t.loading && !r.default), x = b(() => ["inline-flex items-center justify-center gap-1.5", v.value ? "" : "rounded-[7px]", "border font-medium tracking-normal", "transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-spring", "active:scale-[0.98]", "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-phantom-accent/60", "disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none", p.value, c.value, g.value && ["px-0", f.value], t.fullWidth && "w-full", t.loading && "cursor-wait", o.class]), $ = b(() => t.href !== void 0), B = b(() => t.disabled || t.loading), S = (j) => {
42
+ !t.disabled && !t.loading && l("click", j);
40
43
  };
41
- return (V, I) => (o(), v($(g.value ? "a" : "button"), { type: g.value ? void 0 : t.type, href: g.value && !_.value ? t.href : void 0, disabled: g.value ? void 0 : _.value, "aria-disabled": g.value && _.value ? "true" : void 0, class: m([p.value, g.value && _.value && "pointer-events-none cursor-not-allowed opacity-50"]), onClick: q }, { default: N(() => [t.loading ? (o(), n("span", fe)) : t.icon ? (o(), v($(t.icon), { key: 1, size: 14, class: "shrink-0" })) : i("", !0), z(V.$slots, "default"), t.iconRight && !t.loading ? (o(), v($(t.iconRight), { key: 2, size: 14, class: "shrink-0" })) : i("", !0)]), _: 3 }, 8, ["type", "href", "disabled", "aria-disabled", "class"]));
42
- } }), ge = ["title"], ve = ["src", "alt"], ye = { key: 1 }, rt = k({ __name: "index", props: { name: {}, imageUrl: { default: null }, size: { default: "md" } }, setup(e) {
43
- const a = e, t = C(!1), r = u(() => a.name.split(/\s+|@/).filter(Boolean).slice(0, 2).map((s) => s[0]).join("").toUpperCase()), l = u(() => a.size === "sm" ? "size-6 text-[8px]" : a.size === "lg" ? "size-10 text-xs" : a.size === "xl" ? "size-16 text-base" : "size-8 text-2xs");
44
- return O(() => a.imageUrl, () => {
44
+ return (j, P) => (n(), y(q($.value ? "a" : "button"), { type: $.value ? void 0 : t.type, href: $.value && !B.value ? t.href : void 0, disabled: $.value ? void 0 : B.value, "aria-disabled": $.value && B.value ? "true" : void 0, class: h([x.value, $.value && B.value && "pointer-events-none cursor-not-allowed opacity-50"]), onClick: S }, { default: F(() => [t.loading ? (n(), i("span", Je)) : t.icon ? (n(), y(q(t.icon), { key: 1, size: 14, class: "shrink-0" })) : m("", !0), I(j.$slots, "default"), t.iconRight && !t.loading ? (n(), y(q(t.iconRight), { key: 2, size: 14, class: "shrink-0" })) : m("", !0)]), _: 3 }, 8, ["type", "href", "disabled", "aria-disabled", "class"]));
45
+ } }), Qe = ["title"], Ye = ["src", "alt"], et = { key: 1 }, ea = V({ __name: "index", props: { name: {}, imageUrl: { default: null }, size: { default: "md" } }, setup(e) {
46
+ const a = e, t = M(!1), l = b(() => a.name.split(/\s+|@/).filter(Boolean).slice(0, 2).map((r) => r[0]).join("").toUpperCase()), o = b(() => a.size === "sm" ? "size-6 text-[8px]" : a.size === "lg" ? "size-10 text-xs" : a.size === "xl" ? "size-16 text-base" : "size-8 text-2xs");
47
+ return G(() => a.imageUrl, () => {
45
48
  t.value = !1;
46
- }), (s, d) => (o(), n("span", { class: m(["grid shrink-0 place-items-center overflow-hidden rounded-full bg-phantom-selected font-semibold text-phantom-muted", l.value]), title: a.name }, [a.imageUrl && !t.value ? (o(), n("img", { key: 0, src: a.imageUrl, alt: a.name, class: "size-full object-cover", referrerpolicy: "no-referrer", onError: d[0] || (d[0] = (b) => t.value = !0) }, null, 40, ve)) : (o(), n("span", ye, x(r.value), 1))], 10, ge));
47
- } }), ke = ["data-tone", "data-quiet"], it = k({ __name: "index", props: { tone: { default: "neutral" }, dot: { type: Boolean, default: !1 }, size: { default: "md" }, quiet: { type: Boolean, default: !1 } }, setup(e) {
48
- const a = e, t = u(() => {
49
- const s = { neutral: "bg-phantom-selected text-phantom-muted", success: "bg-phantom-positive/15 text-phantom-positive-strong", warning: "bg-phantom-amber/15 text-phantom-amber", danger: "bg-phantom-danger/15 text-phantom-danger", info: "bg-phantom-info/15 text-phantom-info", blue: "bg-phantom-blue/15 text-phantom-blue", violet: "bg-phantom-violet/15 text-phantom-violet", aqua: "bg-phantom-aqua/15 text-phantom-aqua", orange: "bg-phantom-orange/15 text-phantom-orange", magenta: "bg-phantom-magenta/15 text-phantom-magenta" };
50
- return a.quiet ? "bg-transparent text-phantom-muted" : s[a.tone];
51
- }), r = u(() => a.quiet ? { neutral: "bg-phantom-subtle", success: "bg-phantom-positive", warning: "bg-phantom-amber", danger: "bg-phantom-danger", info: "bg-phantom-info", blue: "bg-phantom-blue", violet: "bg-phantom-violet", aqua: "bg-phantom-aqua", orange: "bg-phantom-orange", magenta: "bg-phantom-magenta" }[a.tone] : "bg-current"), l = u(() => {
52
- const s = a.size === "sm";
53
- return a.quiet ? s ? "h-[18px] gap-1.5 text-2xs" : "h-6 gap-1.5 text-xs" : s ? "h-[18px] gap-1 rounded px-1.5 text-[10px] leading-4" : "h-6 gap-1.5 rounded-full px-2.5 text-xs capitalize";
49
+ }), (r, p) => (n(), i("span", { class: h(["grid shrink-0 place-items-center overflow-hidden rounded-full bg-phantom-selected font-semibold text-phantom-muted", o.value]), title: a.name }, [a.imageUrl && !t.value ? (n(), i("img", { key: 0, src: a.imageUrl, alt: a.name, class: "size-full object-cover", referrerpolicy: "no-referrer", onError: p[0] || (p[0] = (c) => t.value = !0) }, null, 40, Ye)) : (n(), i("span", et, _(l.value), 1))], 10, Qe));
50
+ } }), tt = ["data-tone", "data-quiet"], ta = V({ __name: "index", props: { tone: { default: "neutral" }, dot: { type: Boolean, default: !1 }, size: { default: "md" }, quiet: { type: Boolean, default: !1 } }, setup(e) {
51
+ const a = e, t = b(() => {
52
+ const r = { neutral: "bg-phantom-selected text-phantom-muted", success: "bg-phantom-positive/15 text-phantom-positive-strong", warning: "bg-phantom-amber/15 text-phantom-amber", danger: "bg-phantom-danger/15 text-phantom-danger", info: "bg-phantom-info/15 text-phantom-info", blue: "bg-phantom-blue/15 text-phantom-blue", violet: "bg-phantom-violet/15 text-phantom-violet", aqua: "bg-phantom-aqua/15 text-phantom-aqua", orange: "bg-phantom-orange/15 text-phantom-orange", magenta: "bg-phantom-magenta/15 text-phantom-magenta" };
53
+ return a.quiet ? "bg-transparent text-phantom-muted" : r[a.tone];
54
+ }), l = b(() => a.quiet ? { neutral: "bg-phantom-subtle", success: "bg-phantom-positive", warning: "bg-phantom-amber", danger: "bg-phantom-danger", info: "bg-phantom-info", blue: "bg-phantom-blue", violet: "bg-phantom-violet", aqua: "bg-phantom-aqua", orange: "bg-phantom-orange", magenta: "bg-phantom-magenta" }[a.tone] : "bg-current"), o = b(() => {
55
+ const r = a.size === "sm";
56
+ return a.quiet ? r ? "h-[18px] gap-1.5 text-2xs" : "h-6 gap-1.5 text-xs" : r ? "h-[18px] gap-1 rounded px-1.5 text-[10px] leading-4" : "h-6 gap-1.5 rounded-full px-2.5 text-xs capitalize";
54
57
  });
55
- return (s, d) => (o(), n("span", { class: m(["phantom-badge inline-flex shrink-0 items-center font-medium", [t.value, l.value]]), "data-tone": a.tone, "data-quiet": a.quiet || void 0 }, [a.dot || a.quiet ? (o(), n("span", { key: 0, class: m(["size-1.5 shrink-0 rounded-full", r.value]), "aria-hidden": "true" }, null, 2)) : i("", !0), z(s.$slots, "default")], 10, ke));
56
- } }), we = ["role"], ze = { class: "min-w-0 flex-1" }, dt = k({ __name: "index", props: { tone: { default: "neutral" }, icon: { default: void 0 } }, setup(e) {
57
- const a = e, t = { neutral: { box: "border-phantom-border bg-phantom-surface text-phantom-text", icon: "text-phantom-muted" }, success: { box: "border-phantom-border bg-phantom-surface text-phantom-text", icon: "text-phantom-positive" }, warning: { box: "border-phantom-amber/25 bg-phantom-amber/10 text-phantom-amber", icon: "text-phantom-amber" }, danger: { box: "border-phantom-danger/25 bg-phantom-danger/10 text-phantom-danger", icon: "text-phantom-danger" }, info: { box: "border-phantom-info/25 bg-phantom-info/10 text-phantom-info", icon: "text-phantom-info" } }, r = u(() => t[a.tone]);
58
- return (l, s) => (o(), n("div", { class: m(["flex items-start gap-2 rounded-lg border px-3 py-2.5 text-xs leading-5", r.value.box]), role: a.tone === "danger" ? "alert" : void 0 }, [a.icon ? (o(), v($(a.icon), { key: 0, size: 14, class: m(["mt-[3px] shrink-0", r.value.icon]) }, null, 8, ["class"])) : i("", !0), y("div", ze, [z(l.$slots, "default")])], 10, we));
59
- } }), ut = k({ __name: "EmptyState", props: { title: {}, description: { default: void 0 }, icon: { default: void 0 }, size: { default: "sm" }, plain: { type: Boolean, default: !1 } }, setup(e) {
60
- return (a, t) => (o(), n("div", { class: m(["flex h-full flex-col items-center justify-center text-center", [e.size === "lg" ? "min-h-64 gap-2 rounded-xl px-6 py-14" : "min-h-24 gap-1.5 rounded-lg px-4 py-5", !e.plain && "border border-dashed border-phantom-border"]]) }, [e.icon ? (o(), n("span", { key: 0, class: m(["grid shrink-0 place-items-center border border-phantom-border bg-phantom-surface text-phantom-muted", e.size === "lg" ? "mb-3 size-12 rounded-[14px]" : "mb-2 size-9 rounded-[10px]"]), "aria-hidden": "true" }, [(o(), v($(e.icon), { size: e.size === "lg" ? 20 : 16, "stroke-width": "1.8" }, null, 8, ["size"]))], 2)) : i("", !0), y("p", { class: m(e.size === "lg" ? "text-base font-medium text-phantom-text" : "text-xs font-medium text-phantom-text") }, x(e.title), 3), e.description ? (o(), n("p", { key: 1, class: m(e.size === "lg" ? "max-w-sm text-sm leading-6 text-phantom-muted" : "max-w-72 text-2xs leading-[18px] text-phantom-muted") }, x(e.description), 3)) : i("", !0), a.$slots.default ? (o(), n("div", { key: 2, class: m(e.size === "lg" ? "mt-4" : "mt-3") }, [z(a.$slots, "default")], 2)) : i("", !0)], 2));
61
- } }), _e = ["aria-label", "aria-describedby"], $e = ["id"], Ce = k({ __name: "InfoTip", props: { text: {}, label: {} }, setup(e) {
62
- const a = e, t = D(), r = C(null), l = C(null);
63
- function s() {
64
- var c;
65
- const h = (c = r.value) == null ? void 0 : c.getBoundingClientRect();
66
- if (!h) return;
67
- const p = 136, g = h.left + h.width / 2, _ = Math.min(Math.max(g, p), window.innerWidth - p);
68
- l.value = { top: h.top - 8, left: _ };
69
- }
70
- function d() {
71
- l.value = null;
72
- }
73
- function b() {
74
- l.value ? d() : s();
58
+ return (r, p) => (n(), i("span", { class: h(["phantom-badge inline-flex shrink-0 items-center font-medium", [t.value, o.value]]), "data-tone": a.tone, "data-quiet": a.quiet || void 0 }, [a.dot || a.quiet ? (n(), i("span", { key: 0, class: h(["size-1.5 shrink-0 rounded-full", l.value]), "aria-hidden": "true" }, null, 2)) : m("", !0), I(r.$slots, "default")], 10, tt));
59
+ } }), at = ["role"], nt = { class: "min-w-0 flex-1" }, aa = V({ __name: "index", props: { tone: { default: "neutral" }, icon: { default: void 0 } }, setup(e) {
60
+ const a = e, t = { neutral: { box: "border-phantom-border bg-phantom-surface text-phantom-text", icon: "text-phantom-muted" }, success: { box: "border-phantom-border bg-phantom-surface text-phantom-text", icon: "text-phantom-positive" }, warning: { box: "border-phantom-amber/25 bg-phantom-amber/10 text-phantom-amber", icon: "text-phantom-amber" }, danger: { box: "border-phantom-danger/25 bg-phantom-danger/10 text-phantom-danger", icon: "text-phantom-danger" }, info: { box: "border-phantom-info/25 bg-phantom-info/10 text-phantom-info", icon: "text-phantom-info" } }, l = b(() => t[a.tone]);
61
+ return (o, r) => (n(), i("div", { class: h(["flex items-start gap-2 rounded-lg border px-3 py-2.5 text-xs leading-5", l.value.box]), role: a.tone === "danger" ? "alert" : void 0 }, [a.icon ? (n(), y(q(a.icon), { key: 0, size: 14, class: h(["mt-[3px] shrink-0", l.value.icon]) }, null, 8, ["class"])) : m("", !0), k("div", nt, [I(o.$slots, "default")])], 10, at));
62
+ } }), na = V({ __name: "EmptyState", props: { title: {}, description: { default: void 0 }, icon: { default: void 0 }, size: { default: "sm" }, plain: { type: Boolean, default: !1 } }, setup(e) {
63
+ return (a, t) => (n(), i("div", { class: h(["flex h-full flex-col items-center justify-center text-center", [e.size === "lg" ? "min-h-64 gap-2 rounded-xl px-6 py-14" : "min-h-24 gap-1.5 rounded-lg px-4 py-5", !e.plain && "border border-dashed border-phantom-border"]]) }, [e.icon ? (n(), i("span", { key: 0, class: h(["grid shrink-0 place-items-center border border-phantom-border bg-phantom-surface text-phantom-muted", e.size === "lg" ? "mb-3 size-12 rounded-[14px]" : "mb-2 size-9 rounded-[10px]"]), "aria-hidden": "true" }, [(n(), y(q(e.icon), { size: e.size === "lg" ? 20 : 16, "stroke-width": "1.8" }, null, 8, ["size"]))], 2)) : m("", !0), k("p", { class: h(e.size === "lg" ? "text-base font-medium text-phantom-text" : "text-xs font-medium text-phantom-text") }, _(e.title), 3), e.description ? (n(), i("p", { key: 1, class: h(e.size === "lg" ? "max-w-sm text-sm leading-6 text-phantom-muted" : "max-w-72 text-2xs leading-[18px] text-phantom-muted") }, _(e.description), 3)) : m("", !0), a.$slots.default ? (n(), i("div", { key: 2, class: h(e.size === "lg" ? "mt-4" : "mt-3") }, [I(a.$slots, "default")], 2)) : m("", !0)], 2));
64
+ } }), ot = ["aria-label", "aria-describedby"], lt = ["id"], rt = V({ __name: "InfoTip", props: { text: {}, label: {} }, setup(e) {
65
+ const a = e, t = ne(), l = M(null), o = M(null);
66
+ function r() {
67
+ var v;
68
+ const g = (v = l.value) == null ? void 0 : v.getBoundingClientRect();
69
+ if (!g) return;
70
+ const x = 136, $ = g.left + g.width / 2, B = Math.min(Math.max($, x), window.innerWidth - x);
71
+ o.value = { top: g.top - 8, left: B };
72
+ }
73
+ function p() {
74
+ o.value = null;
75
+ }
76
+ function c() {
77
+ o.value ? p() : r();
75
78
  }
76
79
  function f() {
77
- d();
80
+ p();
78
81
  }
79
- return H(() => window.addEventListener("scroll", f, { capture: !0, passive: !0 })), K(() => window.removeEventListener("scroll", f, { capture: !0 })), (c, h) => (o(), n(A, null, [y("button", { ref_key: "button", ref: r, type: "button", class: "inline-grid size-4 shrink-0 place-items-center rounded-full text-phantom-subtle outline-none transition-colors hover:text-phantom-text focus-visible:text-phantom-text focus-visible:ring-2 focus-visible:ring-phantom-accent/30", "aria-label": a.label ? `About ${a.label}` : "More about this", "aria-describedby": l.value ? w(t) : void 0, "data-info-tip": "", onMouseenter: s, onMouseleave: d, onFocus: s, onBlur: d, onClick: b, onKeydown: ee(d, ["escape"]) }, [G(w(me), { size: 12, "stroke-width": "2", "aria-hidden": "true" })], 40, _e), (o(), v(X, { to: "body" }, [l.value ? (o(), n("span", { key: 0, id: w(t), role: "tooltip", class: "pointer-events-none fixed z-[200] w-max max-w-64 bg-phantom-elevated -translate-x-1/2 -translate-y-full rounded-lg border border-phantom-border-strong/80 px-2.5 py-1.5 text-left text-2xs leading-4 text-phantom-text-soft shadow-popover", style: R({ top: `${l.value.top}px`, left: `${l.value.left}px` }) }, x(a.text), 13, $e)) : i("", !0)]))], 64));
80
- } }), Be = { class: "min-w-0", "data-field": "" }, qe = { key: 0, class: "mb-1.5 flex min-w-0 items-center gap-1.5" }, Ve = ["for"], Se = { key: 1, class: "ml-auto shrink-0 text-2xs text-phantom-subtle" }, je = ["id"], Me = ["id"];
81
- function Ie(e, a, t) {
82
+ return fe(() => window.addEventListener("scroll", f, { capture: !0, passive: !0 })), oe(() => window.removeEventListener("scroll", f, { capture: !0 })), (v, g) => (n(), i(R, null, [k("button", { ref_key: "button", ref: l, type: "button", class: "inline-grid size-4 shrink-0 place-items-center rounded-full text-phantom-subtle outline-none transition-colors hover:text-phantom-text focus-visible:text-phantom-text focus-visible:ring-2 focus-visible:ring-phantom-accent/30", "aria-label": a.label ? `About ${a.label}` : "More about this", "aria-describedby": o.value ? z(t) : void 0, "data-info-tip": "", onMouseenter: r, onMouseleave: p, onFocus: r, onBlur: p, onClick: c, onKeydown: Ve(p, ["escape"]) }, [le(z(Ke), { size: 12, "stroke-width": "2", "aria-hidden": "true" })], 40, ot), (n(), y(re, { to: "body" }, [o.value ? (n(), i("span", { key: 0, id: z(t), role: "tooltip", class: "pointer-events-none fixed z-[200] w-max max-w-64 bg-phantom-elevated -translate-x-1/2 -translate-y-full rounded-lg border border-phantom-border-strong/80 px-2.5 py-1.5 text-left text-2xs leading-4 text-phantom-text-soft shadow-popover", style: J({ top: `${o.value.top}px`, left: `${o.value.left}px` }) }, _(a.text), 13, lt)) : m("", !0)]))], 64));
83
+ } }), st = { class: "min-w-0", "data-field": "" }, it = { key: 0, class: "mb-1.5 flex min-w-0 items-center gap-1.5" }, dt = ["for"], ut = { key: 1, class: "ml-auto shrink-0 text-2xs text-phantom-subtle" }, pt = ["id"], ct = ["id"];
84
+ function ge(e, a, t) {
82
85
  return t || a ? `${e}-note` : void 0;
83
86
  }
84
- const Te = k({ __name: "FieldFrame", props: { for: {}, label: { default: void 0 }, info: { default: void 0 }, optional: { type: Boolean, default: !1 }, hint: { default: void 0 }, error: { default: void 0 }, disabled: { type: Boolean, default: !1 } }, setup(e) {
87
+ const ye = V({ __name: "FieldFrame", props: { for: {}, label: { default: void 0 }, info: { default: void 0 }, optional: { type: Boolean, default: !1 }, hint: { default: void 0 }, error: { default: void 0 }, disabled: { type: Boolean, default: !1 } }, setup(e) {
85
88
  const a = e;
86
- return (t, r) => (o(), n("div", Be, [a.label || t.$slots.label ? (o(), n("div", qe, [y("label", { for: a.for, class: m(["truncate text-xs font-medium text-phantom-text-soft", a.disabled && "opacity-60"]) }, [z(t.$slots, "label", {}, () => [Z(x(a.label), 1)])], 10, Ve), a.info ? (o(), v(Ce, { key: 0, text: a.info, label: a.label }, null, 8, ["text", "label"])) : i("", !0), a.optional ? (o(), n("span", Se, " Optional ")) : i("", !0)])) : i("", !0), z(t.$slots, "default"), a.error ? (o(), n("p", { key: 1, id: `${a.for}-note`, class: "mt-1.5 flex items-start gap-1.5 text-2xs leading-4 text-phantom-danger", role: "alert" }, [G(w(ue), { size: 12, class: "mt-0.5 shrink-0", "aria-hidden": "true" }), y("span", null, x(a.error), 1)], 8, je)) : a.hint ? (o(), n("p", { key: 2, id: `${a.for}-note`, class: "mt-1.5 text-2xs leading-4 text-phantom-subtle" }, x(a.hint), 9, Me)) : i("", !0)]));
87
- } }), Pe = { class: "group relative min-w-0" }, Ee = ["id", "value", "type", "placeholder", "disabled", "required", "list", "aria-invalid", "aria-describedby"], Ne = { key: 1, class: "absolute inset-y-0 right-1.5 flex items-center gap-1 text-2xs text-phantom-subtle" }, Ae = ["aria-label", "aria-pressed", "title", "disabled"], Re = ["id"], Fe = ["value"], pt = k({ inheritAttrs: !1, __name: "index", props: { modelValue: { default: "" }, id: { default: void 0 }, label: { default: void 0 }, type: { default: "text" }, placeholder: { default: void 0 }, icon: { default: void 0 }, disabled: { type: Boolean, default: !1 }, required: { type: Boolean, default: !1 }, suggestions: { default: void 0 }, size: { default: "md" }, hint: { default: void 0 }, error: { default: void 0 }, info: { default: void 0 }, optional: { type: Boolean, default: !1 } }, emits: ["update:modelValue"], setup(e, { emit: a }) {
88
- const t = e, r = a, l = { xs: "h-7 text-2xs rounded-md bg-phantom-canvas px-2", sm: "h-8 text-xs rounded-lg bg-phantom-surface px-3", md: "h-9 text-[13px] rounded-lg bg-phantom-surface px-3", lg: "h-10 text-sm rounded-lg bg-phantom-surface px-3" }, s = { xs: 12, sm: 13, md: 14, lg: 15 }, d = L(), b = W(), f = D(), c = u(() => t.id ?? f), h = u(() => {
89
- var B;
90
- return (B = t.suggestions) != null && B.length ? `${c.value}-suggestions` : void 0;
91
- }), p = C(!1), g = u(() => t.type === "password"), _ = u(() => g.value && p.value ? "text" : t.type), q = u(() => !!t.error), V = u(() => Ie(c.value, t.hint, t.error)), I = u(() => g.value || !!b.trailing);
92
- function Q(B) {
93
- const S = B.target;
94
- r("update:modelValue", t.type === "number" ? S.valueAsNumber : S.value);
95
- }
96
- return (B, S) => (o(), v(Te, { for: c.value, label: t.label, info: t.info, optional: t.optional, hint: t.hint, error: t.error, disabled: t.disabled, "data-input": "" }, te({ default: N(() => [y("div", Pe, [t.icon ? (o(), v($(t.icon), { key: 0, size: s[t.size], "stroke-width": "1.8", class: m(["pointer-events-none absolute top-1/2 -translate-y-1/2 transition-colors", [t.size === "xs" ? "left-2" : "left-3", q.value ? "text-phantom-danger" : "text-phantom-subtle group-focus-within:text-phantom-text-soft"]]), "aria-hidden": "true" }, null, 8, ["size", "class"])) : i("", !0), y("input", ae(w(d), { id: c.value, value: t.modelValue, type: _.value, placeholder: t.placeholder, disabled: t.disabled, required: t.required, list: h.value, "aria-invalid": q.value || void 0, "aria-describedby": V.value, class: ["w-full min-w-0 border text-phantom-text shadow-[inset_0_1px_0_rgb(0_0_0/0.04)] outline-none transition-[border-color,background-color,box-shadow] placeholder:text-phantom-subtle hover:border-phantom-border-strong focus:bg-phantom-selected focus:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", [l[t.size], t.icon && (t.size === "xs" ? "pl-7" : "pl-9"), I.value && "pr-10", q.value ? "border-phantom-danger/60 hover:border-phantom-danger/80 focus:border-phantom-danger/80 focus:ring-phantom-danger/15" : "border-phantom-border focus:border-phantom-border-strong focus:ring-phantom-accent/10"]], onInput: Q }), null, 16, Ee), I.value ? (o(), n("span", Ne, [z(B.$slots, "trailing"), g.value ? (o(), n("button", { key: 0, type: "button", class: "grid size-7 place-items-center rounded-md text-phantom-subtle outline-none transition-colors hover:bg-phantom-selected hover:text-phantom-text focus-visible:ring-2 focus-visible:ring-phantom-accent/30 disabled:pointer-events-none", "aria-label": p.value ? "Hide password" : "Show password", "aria-pressed": p.value, title: p.value ? "Hide password" : "Show password", disabled: t.disabled, "data-reveal-password": "", onClick: S[0] || (S[0] = (T) => p.value = !p.value) }, [(o(), v($(p.value ? w(pe) : w(ce)), { size: 14, "stroke-width": "1.8" }))], 8, Ae)) : i("", !0)])) : i("", !0), h.value ? (o(), n("datalist", { key: 2, id: h.value }, [(o(!0), n(A, null, J(t.suggestions, (T) => (o(), n("option", { key: T, value: T }, null, 8, Fe))), 128))], 8, Re)) : i("", !0)])]), _: 2 }, [w(b).label ? { name: "label", fn: N(() => [z(B.$slots, "label")]), key: "0" } : void 0]), 1032, ["for", "label", "info", "optional", "hint", "error", "disabled"]));
97
- } }), Ue = { class: "flex flex-wrap items-end justify-between gap-4" }, Le = { class: "min-w-0" }, We = { key: 0, class: "mb-1 text-xs font-medium text-phantom-subtle" }, Oe = { class: "text-display text-phantom-text" }, De = { key: 1, class: "mt-1.5 max-w-xl text-[13px] leading-6 text-phantom-muted" }, He = { key: 0, class: "flex shrink-0 flex-wrap items-center gap-2" }, ct = k({ __name: "index", props: { title: {}, eyebrow: { default: void 0 }, description: { default: void 0 } }, setup(e) {
98
- return (a, t) => (o(), n("header", Ue, [y("div", Le, [e.eyebrow ? (o(), n("p", We, x(e.eyebrow), 1)) : i("", !0), y("h1", Oe, x(e.title), 1), e.description ? (o(), n("p", De, x(e.description), 1)) : i("", !0)]), a.$slots.actions ? (o(), n("div", He, [z(a.$slots, "actions")])) : i("", !0)]));
99
- } }), Ke = ["aria-selected", "onClick"], Ge = { key: 1, class: "text-2xs text-phantom-subtle" }, mt = k({ __name: "index", props: { modelValue: {}, options: {}, variant: { default: "pill" }, size: { default: "md" }, track: { type: Boolean, default: !1 }, block: { type: Boolean, default: !1 } }, emits: ["update:modelValue"], setup(e, { emit: a }) {
100
- const t = e, r = a, l = C(null), s = C(null), d = C(!1);
101
- function b() {
102
- var c;
103
- const h = (c = l.value) == null ? void 0 : c.querySelector('[aria-selected="true"]');
104
- s.value = h ? { left: h.offsetLeft, width: h.offsetWidth } : null;
89
+ return (t, l) => (n(), i("div", st, [a.label || t.$slots.label ? (n(), i("div", it, [k("label", { for: a.for, class: h(["truncate text-xs font-medium text-phantom-text-soft", a.disabled && "opacity-60"]) }, [I(t.$slots, "label", {}, () => [xe(_(a.label), 1)])], 10, dt), a.info ? (n(), y(rt, { key: 0, text: a.info, label: a.label }, null, 8, ["text", "label"])) : m("", !0), a.optional ? (n(), i("span", ut, " Optional ")) : m("", !0)])) : m("", !0), I(t.$slots, "default"), a.error ? (n(), i("p", { key: 1, id: `${a.for}-note`, class: "mt-1.5 flex items-start gap-1.5 text-2xs leading-4 text-phantom-danger", role: "alert" }, [le(z(Ue), { size: 12, class: "mt-0.5 shrink-0", "aria-hidden": "true" }), k("span", null, _(a.error), 1)], 8, pt)) : a.hint ? (n(), i("p", { key: 2, id: `${a.for}-note`, class: "mt-1.5 text-2xs leading-4 text-phantom-subtle" }, _(a.hint), 9, ct)) : m("", !0)]));
90
+ } }), mt = { class: "group relative min-w-0" }, ht = ["id", "value", "type", "placeholder", "disabled", "required", "list", "aria-invalid", "aria-describedby"], bt = { key: 1, class: "absolute inset-y-0 right-1.5 flex items-center gap-1 text-2xs text-phantom-subtle" }, ft = ["aria-label", "aria-pressed", "title", "disabled"], xt = ["id"], vt = ["value"], oa = V({ inheritAttrs: !1, __name: "index", props: { modelValue: { default: "" }, id: { default: void 0 }, label: { default: void 0 }, type: { default: "text" }, placeholder: { default: void 0 }, icon: { default: void 0 }, disabled: { type: Boolean, default: !1 }, required: { type: Boolean, default: !1 }, suggestions: { default: void 0 }, size: { default: "md" }, hint: { default: void 0 }, error: { default: void 0 }, info: { default: void 0 }, optional: { type: Boolean, default: !1 } }, emits: ["update:modelValue"], setup(e, { emit: a }) {
91
+ const t = e, l = a, o = { xs: "h-7 text-2xs rounded-md bg-phantom-canvas px-2", sm: "h-8 text-xs rounded-lg bg-phantom-surface px-3", md: "h-9 text-[13px] rounded-lg bg-phantom-surface px-3", lg: "h-10 text-sm rounded-lg bg-phantom-surface px-3" }, r = { xs: 12, sm: 13, md: 14, lg: 15 }, p = be(), c = Z(), f = ne(), v = b(() => t.id ?? f), g = b(() => {
92
+ var C;
93
+ return (C = t.suggestions) != null && C.length ? `${v.value}-suggestions` : void 0;
94
+ }), x = M(!1), $ = b(() => t.type === "password"), B = b(() => $.value && x.value ? "text" : t.type), S = b(() => !!t.error), j = b(() => ge(v.value, t.hint, t.error)), P = b(() => $.value || !!c.trailing);
95
+ function H(C) {
96
+ const T = C.target;
97
+ l("update:modelValue", t.type === "number" ? T.valueAsNumber : T.value);
98
+ }
99
+ return (C, T) => (n(), y(ye, { for: v.value, label: t.label, info: t.info, optional: t.optional, hint: t.hint, error: t.error, disabled: t.disabled, "data-input": "" }, Be({ default: F(() => [k("div", mt, [t.icon ? (n(), y(q(t.icon), { key: 0, size: r[t.size], "stroke-width": "1.8", class: h(["pointer-events-none absolute top-1/2 -translate-y-1/2 transition-colors", [t.size === "xs" ? "left-2" : "left-3", S.value ? "text-phantom-danger" : "text-phantom-subtle group-focus-within:text-phantom-text-soft"]]), "aria-hidden": "true" }, null, 8, ["size", "class"])) : m("", !0), k("input", Me(z(p), { id: v.value, value: t.modelValue, type: B.value, placeholder: t.placeholder, disabled: t.disabled, required: t.required, list: g.value, "aria-invalid": S.value || void 0, "aria-describedby": j.value, class: ["w-full min-w-0 border text-phantom-text shadow-[inset_0_1px_0_rgb(0_0_0/0.04)] outline-none transition-[border-color,background-color,box-shadow] placeholder:text-phantom-subtle hover:border-phantom-border-strong focus:bg-phantom-selected focus:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", [o[t.size], t.icon && (t.size === "xs" ? "pl-7" : "pl-9"), P.value && "pr-10", S.value ? "border-phantom-danger/60 hover:border-phantom-danger/80 focus:border-phantom-danger/80 focus:ring-phantom-danger/15" : "border-phantom-border focus:border-phantom-border-strong focus:ring-phantom-accent/10"]], onInput: H }), null, 16, ht), P.value ? (n(), i("span", bt, [I(C.$slots, "trailing"), $.value ? (n(), i("button", { key: 0, type: "button", class: "grid size-7 place-items-center rounded-md text-phantom-subtle outline-none transition-colors hover:bg-phantom-selected hover:text-phantom-text focus-visible:ring-2 focus-visible:ring-phantom-accent/30 disabled:pointer-events-none", "aria-label": x.value ? "Hide password" : "Show password", "aria-pressed": x.value, title: x.value ? "Hide password" : "Show password", disabled: t.disabled, "data-reveal-password": "", onClick: T[0] || (T[0] = (D) => x.value = !x.value) }, [(n(), y(q(x.value ? z(Fe) : z(He)), { size: 14, "stroke-width": "1.8" }))], 8, ft)) : m("", !0)])) : m("", !0), g.value ? (n(), i("datalist", { key: 2, id: g.value }, [(n(!0), i(R, null, X(t.suggestions, (D) => (n(), i("option", { key: D, value: D }, null, 8, vt))), 128))], 8, xt)) : m("", !0)])]), _: 2 }, [z(c).label ? { name: "label", fn: F(() => [I(C.$slots, "label")]), key: "0" } : void 0]), 1032, ["for", "label", "info", "optional", "hint", "error", "disabled"]));
100
+ } }), gt = { class: "flex flex-wrap items-end justify-between gap-4" }, yt = { class: "min-w-0" }, kt = { key: 0, class: "mb-1 text-xs font-medium text-phantom-subtle" }, wt = { class: "text-display text-phantom-text" }, zt = { key: 1, class: "mt-1.5 max-w-xl text-[13px] leading-6 text-phantom-muted" }, _t = { key: 0, class: "flex shrink-0 flex-wrap items-center gap-2" }, la = V({ __name: "index", props: { title: {}, eyebrow: { default: void 0 }, description: { default: void 0 } }, setup(e) {
101
+ return (a, t) => (n(), i("header", gt, [k("div", yt, [e.eyebrow ? (n(), i("p", kt, _(e.eyebrow), 1)) : m("", !0), k("h1", wt, _(e.title), 1), e.description ? (n(), i("p", zt, _(e.description), 1)) : m("", !0)]), a.$slots.actions ? (n(), i("div", _t, [I(a.$slots, "actions")])) : m("", !0)]));
102
+ } }), $t = ["aria-selected", "onClick"], Ct = { key: 1, class: "text-2xs text-phantom-subtle" }, ra = V({ __name: "index", props: { modelValue: {}, options: {}, variant: { default: "pill" }, size: { default: "md" }, track: { type: Boolean, default: !1 }, block: { type: Boolean, default: !1 } }, emits: ["update:modelValue"], setup(e, { emit: a }) {
103
+ const t = e, l = a, o = M(null), r = M(null), p = M(!1);
104
+ function c() {
105
+ var v;
106
+ const g = (v = o.value) == null ? void 0 : v.querySelector('[aria-selected="true"]');
107
+ r.value = g ? { left: g.offsetLeft, width: g.offsetWidth } : null;
105
108
  }
106
109
  let f = null;
107
- return H(() => {
108
- b(), requestAnimationFrame(() => d.value = !0), f = new ResizeObserver(() => b()), l.value && f.observe(l.value);
109
- }), K(() => f == null ? void 0 : f.disconnect()), O(() => [t.modelValue, t.options.map((c) => `${c.label}${c.badge ?? ""}`)], () => {
110
- oe(b);
111
- }, { deep: !0 }), (c, h) => (o(), n("div", { ref_key: "root", ref: l, class: m(["relative items-center", [e.block ? "flex w-full" : "inline-flex", e.variant === "underline" ? "gap-6" : "gap-0.5 rounded-lg p-0.5", e.variant === "pill" && e.track && "border border-phantom-border bg-phantom-surface"]]), role: "tablist" }, [s.value ? (o(), n("span", { key: 0, class: m(["absolute left-0", [e.variant === "underline" ? "bottom-0 h-0.5 rounded-full bg-phantom-text" : "phantom-segment-indicator inset-y-0.5 rounded-md bg-phantom-selected shadow-sm", d.value && "transition-[transform,width] duration-300 ease-spring"]]), style: R({ transform: `translateX(${s.value.left}px)`, width: `${s.value.width}px` }), "aria-hidden": "true" }, null, 6)) : i("", !0), (o(!0), n(A, null, J(e.options, (p) => (o(), n("button", { key: p.value, type: "button", role: "tab", "aria-selected": p.value === e.modelValue, class: m(["relative inline-flex items-center gap-1.5 font-medium transition-colors duration-150", [e.block && "flex-1 justify-center", e.variant === "underline" ? "py-3 text-sm" : e.size === "sm" ? "rounded-md px-2 py-0.5 text-2xs" : "rounded-md px-2.5 py-1 text-xs", p.value === e.modelValue ? "text-phantom-text" : "text-phantom-muted hover:text-phantom-text", e.variant === "underline" && !s.value && p.value === e.modelValue && "shadow-[inset_0_-2px_0_rgb(var(--phantom-text))]"]]), onClick: (g) => r("update:modelValue", p.value) }, [p.icon ? (o(), v($(p.icon), { key: 0, size: e.size === "sm" ? 12 : 13, class: "shrink-0", "aria-hidden": "true" }, null, 8, ["size"])) : i("", !0), Z(" " + x(p.label) + " ", 1), p.badge !== void 0 ? (o(), n("span", Ge, x(p.badge), 1)) : i("", !0)], 10, Ke))), 128))], 2));
112
- } }), ht = k({ __name: "Spinner", props: { size: { default: 13 } }, setup(e) {
113
- return (a, t) => (o(), v(w(he), { size: e.size, class: "animate-spin", "aria-hidden": "true" }, null, 8, ["size"]));
114
- } }), Xe = ["checked", "disabled", "aria-label"], bt = k({ __name: "Switch", props: { modelValue: { type: Boolean }, label: { default: void 0 }, disabled: { type: Boolean, default: !1 } }, emits: ["update:modelValue"], setup(e, { emit: a }) {
115
- const t = e, r = a;
116
- function l(s) {
117
- const d = s.currentTarget;
118
- t.disabled || d.closest("label") || r("update:modelValue", !t.modelValue);
119
- }
120
- return (s, d) => (o(), n("span", { class: m(["relative inline-flex shrink-0", e.disabled ? "opacity-50" : "cursor-pointer"]), onClick: l }, [y("input", { type: "checkbox", role: "switch", class: "peer sr-only", checked: e.modelValue, disabled: e.disabled, "aria-label": e.label, onChange: d[0] || (d[0] = (b) => r("update:modelValue", b.target.checked)) }, null, 40, Xe), y("span", { class: m(["relative h-[17px] w-[30px] rounded-full border border-phantom-border-strong bg-phantom-surface transition-[background-color,border-color] duration-150 peer-checked:border-phantom-text-soft peer-checked:bg-phantom-text-soft peer-checked:[&>span]:translate-x-[13px] peer-checked:[&>span]:bg-phantom-accent-contrast peer-focus-visible:ring-2 peer-focus-visible:ring-phantom-accent/30", !e.disabled && "hover:border-phantom-muted peer-checked:hover:border-phantom-text"]), "aria-hidden": "true" }, [...d[1] || (d[1] = [y("span", { class: "absolute left-[2px] top-[2px] size-[11px] rounded-full bg-phantom-subtle shadow-[0_1px_2px_rgb(var(--phantom-shadow)/0.35)] transition-[transform,background-color] duration-200 ease-spring" }, null, -1)])], 2)], 2));
121
- } }), Ze = { class: "block text-xs font-semibold text-phantom-text" }, Je = { key: 0, class: "mt-0.5 block text-2xs text-phantom-subtle" }, Qe = { key: 1, class: "mt-1 block text-2xs text-phantom-amber" }, xt = k({ __name: "Tooltip", props: { at: {}, title: {}, description: {}, note: {} }, setup(e) {
122
- return (a, t) => (o(), v(X, { to: "body" }, [e.at ? (o(), n("span", { key: 0, role: "tooltip", class: "phantom-glass-raised pointer-events-none fixed z-[200] max-w-56 -translate-y-1/2 rounded-lg border border-phantom-border-strong/80 px-2.5 py-1.5 text-left", style: R({ top: `${e.at.top}px`, left: `${e.at.left}px` }) }, [y("span", Ze, x(e.title), 1), e.description ? (o(), n("span", Je, x(e.description), 1)) : i("", !0), e.note ? (o(), n("span", Qe, x(e.note), 1)) : i("", !0)], 4)) : i("", !0)]));
110
+ return fe(() => {
111
+ c(), requestAnimationFrame(() => p.value = !0), f = new ResizeObserver(() => c()), o.value && f.observe(o.value);
112
+ }), oe(() => f == null ? void 0 : f.disconnect()), G(() => [t.modelValue, t.options.map((v) => `${v.label}${v.badge ?? ""}`)], () => {
113
+ ae(c);
114
+ }, { deep: !0 }), (v, g) => (n(), i("div", { ref_key: "root", ref: o, class: h(["relative items-center", [e.block ? "flex w-full" : "inline-flex", e.variant === "underline" ? "gap-6" : "gap-0.5 rounded-lg p-0.5", e.variant === "pill" && e.track && "border border-phantom-border bg-phantom-surface"]]), role: "tablist" }, [r.value ? (n(), i("span", { key: 0, class: h(["absolute left-0", [e.variant === "underline" ? "bottom-0 h-0.5 rounded-full bg-phantom-text" : "phantom-segment-indicator inset-y-0.5 rounded-md bg-phantom-selected shadow-sm", p.value && "transition-[transform,width] duration-300 ease-spring"]]), style: J({ transform: `translateX(${r.value.left}px)`, width: `${r.value.width}px` }), "aria-hidden": "true" }, null, 6)) : m("", !0), (n(!0), i(R, null, X(e.options, (x) => (n(), i("button", { key: x.value, type: "button", role: "tab", "aria-selected": x.value === e.modelValue, class: h(["relative inline-flex items-center gap-1.5 font-medium outline-none transition-colors duration-150 focus-visible:ring-2 focus-visible:ring-phantom-accent/45", [e.block && "flex-1 justify-center", e.variant === "underline" ? "rounded-md py-3 text-sm" : e.size === "sm" ? "rounded-md px-2 py-0.5 text-2xs" : "rounded-md px-2.5 py-1 text-xs", x.value === e.modelValue ? "text-phantom-text" : "text-phantom-muted hover:text-phantom-text", e.variant === "underline" && !r.value && x.value === e.modelValue && "shadow-[inset_0_-2px_0_rgb(var(--phantom-text))]"]]), onClick: ($) => l("update:modelValue", x.value) }, [x.icon ? (n(), y(q(x.icon), { key: 0, size: e.size === "sm" ? 12 : 13, class: "shrink-0", "aria-hidden": "true" }, null, 8, ["size"])) : m("", !0), xe(" " + _(x.label) + " ", 1), x.badge !== void 0 ? (n(), i("span", Ct, _(x.badge), 1)) : m("", !0)], 10, $t))), 128))], 2));
115
+ } });
116
+ function U(e, a, t) {
117
+ var l;
118
+ const o = e.length;
119
+ for (let r = 1; r <= o; r += 1) {
120
+ const p = ((a + t * r) % o + o) % o;
121
+ if (!((l = e[p]) != null && l.disabled)) return p;
122
+ }
123
+ return -1;
124
+ }
125
+ function Vt(e, a) {
126
+ var t;
127
+ const l = e.findIndex((o) => o.value === a);
128
+ return l >= 0 && !((t = e[l]) != null && t.disabled) ? l : U(e, -1, 1);
129
+ }
130
+ function Bt(e, a, t) {
131
+ const l = t.toLowerCase(), o = e.length, r = t.length === 1 ? a + 1 : Math.max(a, 0);
132
+ for (let p = 0; p < o; p += 1) {
133
+ const c = (r + p) % o, f = e[c];
134
+ if (f && !f.disabled && f.label.toLowerCase().startsWith(l)) return c;
135
+ }
136
+ return -1;
137
+ }
138
+ const Mt = 600;
139
+ function qt(e = Date.now) {
140
+ let a = "", t = -1 / 0;
141
+ return (l) => {
142
+ const o = e();
143
+ return a = o - t > Mt ? l : a + l, t = o, a;
144
+ };
145
+ }
146
+ function St(e, a, t, l) {
147
+ const { key: o } = e;
148
+ if (!a) return ["ArrowDown", "ArrowUp", "Enter", " "].includes(o) ? { kind: "open" } : { kind: "none" };
149
+ switch (o) {
150
+ case "ArrowDown":
151
+ return { kind: "move", index: U(l, t, 1) };
152
+ case "ArrowUp":
153
+ return { kind: "move", index: U(l, t, -1) };
154
+ case "Home":
155
+ return { kind: "move", index: U(l, -1, 1) };
156
+ case "End":
157
+ return { kind: "move", index: U(l, l.length, -1) };
158
+ case "Enter":
159
+ case " ":
160
+ return { kind: "choose", index: t };
161
+ case "Escape":
162
+ return { kind: "close", refocus: !0 };
163
+ case "Tab":
164
+ return { kind: "close", refocus: !1 };
165
+ default:
166
+ return o.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey ? { kind: "type", key: o } : { kind: "none" };
167
+ }
168
+ }
169
+ const me = 288, O = 4, W = 8;
170
+ function he(e, a, t, l = e.width) {
171
+ const o = a.height - e.bottom - W, r = e.top - W, p = o < Math.min(me, t) && r > o, c = e.left + l - (a.width - W);
172
+ return { left: `${c > 0 ? Math.max(W, e.left - c) : e.left}px`, minWidth: `${e.width}px`, maxWidth: `${Math.max(e.width, Math.min(352, a.width - W * 2))}px`, maxHeight: `${Math.max(0, Math.min(me, p ? r - O : o - O))}px`, ...p ? { bottom: `${a.height - e.top + O}px` } : { top: `${e.bottom + O}px` } };
173
+ }
174
+ const Et = ["id", "disabled", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant"], It = { key: 1, class: "shrink-0 text-phantom-subtle" }, jt = ["id", "aria-label"], At = ["id", "data-index", "aria-selected", "aria-disabled", "onMouseenter", "onClick"], Pt = { class: "min-w-0 flex-1" }, Tt = { key: 0, class: "mt-0.5 block text-2xs leading-4 text-phantom-subtle" }, Lt = { key: 1, class: "shrink-0 text-phantom-subtle" }, Rt = { key: 3, class: "w-3 shrink-0", "aria-hidden": "true" }, Dt = { key: 0, class: "px-3 py-1.5 text-2xs text-phantom-subtle" }, sa = V({ __name: "Select", props: { modelValue: {}, options: { default: void 0 }, ariaLabel: { default: void 0 }, label: { default: void 0 }, info: { default: void 0 }, hint: { default: void 0 }, error: { default: void 0 }, optional: { type: Boolean, default: !1 }, icon: { default: void 0 }, disabled: { type: Boolean, default: !1 }, placeholder: { default: "Choose one" }, size: { default: "md" }, variant: { default: "default" }, id: { default: void 0 } }, emits: ["update:modelValue"], setup(e, { emit: a }) {
175
+ const t = e, l = a, o = Z(), r = `phantom-select-${ne()}`, p = b(() => t.id ?? `${r}-field`), c = M(!1), f = M(-1), v = M(null), g = M(null), x = M({}), $ = b(() => t.size === "sm"), B = b(() => t.size === "lg"), S = b(() => t.variant === "ghost"), j = b(() => !!(t.label || t.hint || t.error));
176
+ function P(u) {
177
+ return typeof u == "string" ? u : Array.isArray(u) ? u.map((d) => P(d)).join("") : u && typeof u == "object" && "children" in u ? P(u.children) : "";
178
+ }
179
+ function H(u, d) {
180
+ for (const s of u ?? []) {
181
+ if (!s || typeof s != "object" || Array.isArray(s)) continue;
182
+ const w = s;
183
+ if (w.type === "option") {
184
+ const E = w.props ?? {}, N = P(w.children).trim();
185
+ d.push({ value: "value" in E ? E.value : N, label: N, description: typeof E.title == "string" ? E.title : void 0, disabled: E.disabled === "" || E.disabled === !0 });
186
+ } else w.type !== Ie && w.type !== je && Array.isArray(w.children) && H(w.children, d);
187
+ }
188
+ return d;
189
+ }
190
+ let C = [];
191
+ function T() {
192
+ var u;
193
+ return C = t.options ?? H((u = o.default) == null ? void 0 : u.call(o), []), C;
194
+ }
195
+ function D(u) {
196
+ return u.find((d) => d.value === t.modelValue);
197
+ }
198
+ async function ke() {
199
+ var u;
200
+ const d = v.value;
201
+ if (!d) return;
202
+ const s = { width: window.innerWidth, height: window.innerHeight }, w = C.length * 32 + 8, E = d.getBoundingClientRect();
203
+ x.value = he(E, s, w), await ae();
204
+ const N = (u = g.value) == null ? void 0 : u.getBoundingClientRect().width;
205
+ N && (x.value = he(E, s, w, N));
206
+ }
207
+ function Y() {
208
+ ae(() => {
209
+ var u, d;
210
+ (d = (u = g.value) == null ? void 0 : u.querySelector(`[data-index="${f.value}"]`)) == null || d.scrollIntoView({ block: "nearest" });
211
+ });
212
+ }
213
+ async function se() {
214
+ t.disabled || c.value || (f.value = Vt(C, t.modelValue), c.value = !0, await ke(), Y());
215
+ }
216
+ function L(u = !1) {
217
+ var d;
218
+ c.value && (c.value = !1, u && ((d = v.value) == null || d.focus()));
219
+ }
220
+ function ie(u) {
221
+ const d = C[u];
222
+ !d || d.disabled || (d.value !== t.modelValue && l("update:modelValue", d.value), L(!0));
223
+ }
224
+ const we = qt();
225
+ function ze(u) {
226
+ const d = St(u, c.value, f.value, C);
227
+ switch (d.kind) {
228
+ case "open":
229
+ u.preventDefault(), se();
230
+ return;
231
+ case "move":
232
+ u.preventDefault(), f.value = d.index, Y();
233
+ return;
234
+ case "choose":
235
+ u.preventDefault(), ie(d.index);
236
+ return;
237
+ case "close":
238
+ d.refocus && (u.preventDefault(), u.stopPropagation()), L(d.refocus);
239
+ return;
240
+ case "type": {
241
+ const s = Bt(C, f.value, we(d.key));
242
+ s >= 0 && (f.value = s, Y());
243
+ return;
244
+ }
245
+ }
246
+ }
247
+ function de(u) {
248
+ var d, s;
249
+ const w = u.target;
250
+ (d = v.value) != null && d.contains(w) || (s = g.value) != null && s.contains(w) || L();
251
+ }
252
+ function _e(u) {
253
+ var d;
254
+ (d = g.value) != null && d.contains(u.target) || L();
255
+ }
256
+ function ue() {
257
+ L();
258
+ }
259
+ function pe(u) {
260
+ const d = u ? "addEventListener" : "removeEventListener";
261
+ document[d]("mousedown", de, !0), document[d]("touchstart", de, !0), window[d]("scroll", _e, !0), window[d]("resize", ue), window[d]("blur", ue);
262
+ }
263
+ G(c, (u) => pe(u)), G(() => t.disabled, (u) => u && L()), oe(() => pe(!1));
264
+ const $e = b(() => S.value ? ["gap-1 rounded-md bg-transparent px-1.5 font-medium text-inherit hover:bg-phantom-text/5 focus-visible:ring-2 focus-visible:ring-phantom-accent/20", $.value ? "h-8 text-xs" : "h-9 text-[13px]"] : ["border text-phantom-text focus-visible:border-phantom-border-strong focus-visible:ring-2 focus-visible:ring-phantom-accent/15", $.value ? "h-8 gap-1.5 rounded-lg bg-phantom-surface pl-3 pr-2 text-xs" : B.value ? "h-12 gap-3 rounded-full bg-phantom-panel pl-5 pr-4 text-sm" : "h-9 gap-2 rounded-lg bg-phantom-surface pl-3 pr-2.5 text-[13px]", t.error ? "border-phantom-danger/60 hover:border-phantom-danger/80" : c.value ? "border-phantom-border-strong" : "border-phantom-border hover:border-phantom-border-strong"]);
265
+ return (u, d) => (n(), y(q(j.value ? ye : "div"), qe(Se(j.value ? { for: p.value, label: e.label, info: e.info, optional: e.optional, hint: e.hint, error: e.error, disabled: e.disabled } : { class: "relative inline-flex min-w-0 align-middle" })), { default: F(() => [k("div", { class: h(j.value ? "relative flex min-w-0" : "contents") }, [k("button", { id: p.value, ref_key: "trigger", ref: v, type: "button", class: h(["flex w-full min-w-0 items-center outline-none transition-colors duration-150 disabled:pointer-events-none disabled:opacity-50", $e.value]), disabled: e.disabled, "aria-label": e.label ? void 0 : e.ariaLabel, "aria-invalid": e.error ? !0 : void 0, "aria-describedby": z(ge)(p.value, e.hint, e.error), "aria-haspopup": "listbox", "aria-expanded": c.value, "aria-controls": c.value ? `${r}-list` : void 0, "aria-activedescendant": c.value && f.value >= 0 ? `${r}-option-${f.value}` : void 0, onClick: d[0] || (d[0] = (s) => c.value ? L() : void se()), onKeydown: ze }, [(n(!0), i(R, null, X([D(T())], (s) => (n(), i(R, { key: String(s == null ? void 0 : s.value) }, [!S.value && (e.icon ?? (s == null ? void 0 : s.icon)) ? (n(), y(q(e.icon ?? (s == null ? void 0 : s.icon)), { key: 0, size: 13, "stroke-width": 1.8, "aria-hidden": "true", class: h(["shrink-0", [$.value ? "" : "mr-0.5", e.error ? "text-phantom-danger" : "text-phantom-subtle"]]) }, null, 8, ["class"])) : m("", !0), k("span", { class: h(["min-w-0 truncate text-left", [S.value ? "" : "flex-1", s ? "" : "text-phantom-subtle"]]) }, _((s == null ? void 0 : s.label) ?? e.placeholder), 3), s != null && s.detail ? (n(), i("span", It, _(s.detail), 1)) : m("", !0)], 64))), 128)), le(z(We), { size: $.value || S.value ? 12 : B.value ? 15 : 13, "aria-hidden": "true", class: h(["shrink-0 transition-transform duration-150", [S.value ? "opacity-70" : "text-phantom-subtle", c.value ? "rotate-180" : ""]]) }, null, 8, ["size", "class"])], 42, Et), (n(), y(re, { to: "body" }, [c.value ? (n(), i("ul", { key: 0, id: `${r}-list`, ref_key: "list", ref: g, role: "listbox", "aria-label": e.label ?? e.ariaLabel, class: h(["phantom-select-list fixed z-[1000] overflow-y-auto border border-phantom-border-strong/80 bg-phantom-elevated shadow-popover", B.value ? "rounded-[22px] p-1.5" : "rounded-[10px] p-1"]), style: J(x.value) }, [(n(!0), i(R, null, X(z(C), (s, w) => (n(), i("li", { id: `${r}-option-${w}`, key: `${String(s.value)}-${w}`, "data-index": w, role: "option", "aria-selected": s.value === e.modelValue, "aria-disabled": s.disabled || void 0, class: h(["flex cursor-default gap-2 text-phantom-text", [$.value ? "rounded-lg px-2 py-1 text-2xs" : B.value ? "rounded-2xl px-3.5 py-2.5 text-sm" : "rounded-lg px-2 py-1.5 text-xs", s.description ? "items-start" : "items-center", s.disabled ? "opacity-40" : "", w === f.value && !s.disabled ? "bg-phantom-control" : ""]]), onMousedown: d[1] || (d[1] = Ee(() => {
266
+ }, ["prevent"])), onMouseenter: (E) => !s.disabled && (f.value = w), onClick: (E) => ie(w) }, [s.icon ? (n(), y(q(s.icon), { key: 0, size: 13, "stroke-width": 1.8, "aria-hidden": "true", class: h(["shrink-0 text-phantom-subtle", s.description ? "mt-px" : ""]) }, null, 8, ["class"])) : m("", !0), k("span", Pt, [k("span", { class: h(["block truncate", s.value === e.modelValue ? "font-medium" : ""]) }, _(s.label), 3), s.description ? (n(), i("span", Tt, _(s.description), 1)) : m("", !0)]), s.detail ? (n(), i("span", Lt, _(s.detail), 1)) : m("", !0), s.value === e.modelValue ? (n(), y(z(ve), { key: 2, size: 12, "aria-hidden": "true", class: h(["shrink-0 text-phantom-accent", s.description ? "mt-0.5" : ""]) }, null, 8, ["class"])) : (n(), i("span", Rt))], 42, At))), 128)), z(C).length ? m("", !0) : (n(), i("li", Dt, " Nothing to choose from "))], 14, jt)) : m("", !0)]))], 2)]), _: 1 }, 16));
267
+ } }), ia = V({ __name: "Spinner", props: { size: { default: 13 } }, setup(e) {
268
+ return (a, t) => (n(), y(z(Oe), { size: e.size, class: "animate-spin", "aria-hidden": "true" }, null, 8, ["size"]));
269
+ } }), Nt = ["id", "checked", "indeterminate", "disabled", "aria-label"], da = V({ __name: "Checkbox", props: { modelValue: { type: Boolean }, label: { default: void 0 }, indeterminate: { type: Boolean, default: !1 }, disabled: { type: Boolean, default: !1 }, block: { type: Boolean, default: !1 }, align: { default: "center" }, id: { default: void 0 } }, emits: ["update:modelValue"], setup(e, { emit: a }) {
270
+ const t = a, l = Z();
271
+ return (o, r) => (n(), y(q(z(l).default ? "label" : "span"), { class: h(["gap-2.5", [z(l).default && e.block ? "flex w-full" : "inline-flex", e.align === "start" ? "items-start" : "items-center", e.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"]]) }, { default: F(() => [k("span", { class: h(["relative grid size-4 shrink-0 place-items-center", z(l).default && e.align === "start" ? "mt-px" : ""]) }, [k("input", { id: e.id, type: "checkbox", class: "peer absolute inset-0 m-0 size-full cursor-[inherit] appearance-none opacity-0", checked: e.modelValue, indeterminate: e.indeterminate, disabled: e.disabled, "aria-label": z(l).default ? void 0 : e.label, onChange: r[0] || (r[0] = (p) => t("update:modelValue", p.target.checked)) }, null, 40, Nt), k("span", { class: h(["pointer-events-none grid size-4 place-items-center rounded-[5px] border transition-colors duration-150 peer-focus-visible:ring-2 peer-focus-visible:ring-phantom-accent/40", [e.modelValue || e.indeterminate ? "border-phantom-text bg-phantom-text text-phantom-canvas" : "border-phantom-border-strong bg-phantom-surface", !e.disabled && !e.modelValue && !e.indeterminate && "peer-hover:border-phantom-muted"]]), "aria-hidden": "true" }, [e.indeterminate ? (n(), y(z(Ge), { key: 0, size: 11, "stroke-width": 3 })) : e.modelValue ? (n(), y(z(ve), { key: 1, size: 11, "stroke-width": 3 })) : m("", !0)], 2)], 2), I(o.$slots, "default")]), _: 3 }, 8, ["class"]));
272
+ } }), Wt = ["checked", "disabled", "aria-label"], ua = V({ __name: "Switch", props: { modelValue: { type: Boolean }, label: { default: void 0 }, disabled: { type: Boolean, default: !1 } }, emits: ["update:modelValue"], setup(e, { emit: a }) {
273
+ const t = e, l = a;
274
+ function o(r) {
275
+ const p = r.currentTarget;
276
+ t.disabled || p.closest("label") || l("update:modelValue", !t.modelValue);
277
+ }
278
+ return (r, p) => (n(), i("span", { class: h(["relative inline-flex shrink-0", e.disabled ? "opacity-50" : "cursor-pointer"]), onClick: o }, [k("input", { type: "checkbox", role: "switch", class: "peer sr-only", checked: e.modelValue, disabled: e.disabled, "aria-label": e.label, onChange: p[0] || (p[0] = (c) => l("update:modelValue", c.target.checked)) }, null, 40, Wt), k("span", { class: h(["relative h-[17px] w-[30px] rounded-full border border-phantom-border-strong bg-phantom-surface transition-[background-color,border-color] duration-150 peer-checked:border-phantom-text-soft peer-checked:bg-phantom-text-soft peer-checked:[&>span]:translate-x-[13px] peer-checked:[&>span]:bg-phantom-accent-contrast peer-focus-visible:ring-2 peer-focus-visible:ring-phantom-accent/30", !e.disabled && "hover:border-phantom-muted peer-checked:hover:border-phantom-text"]), "aria-hidden": "true" }, [...p[1] || (p[1] = [k("span", { class: "absolute left-[2px] top-[2px] size-[11px] rounded-full bg-phantom-subtle shadow-[0_1px_2px_rgb(var(--phantom-shadow)/0.35)] transition-[transform,background-color] duration-200 ease-spring" }, null, -1)])], 2)], 2));
279
+ } }), Ut = { class: "block text-xs font-semibold text-phantom-text" }, Ft = { key: 0, class: "mt-0.5 block text-2xs text-phantom-subtle" }, Ht = { key: 1, class: "mt-1 block text-2xs text-phantom-amber" }, pa = V({ __name: "Tooltip", props: { at: {}, title: {}, description: { default: void 0 }, note: { default: void 0 }, place: { default: "beside" } }, setup(e) {
280
+ return (a, t) => (n(), y(re, { to: "body" }, [e.at ? (n(), i("span", { key: 0, role: "tooltip", class: h(["phantom-glass-raised pointer-events-none fixed z-[200] max-w-56 rounded-lg border border-phantom-border-strong/80 px-2.5 py-1.5 text-left", e.place === "below" ? "-translate-x-1/2" : "-translate-y-1/2"]), style: J({ top: `${e.at.top}px`, left: `${e.at.left}px` }) }, [k("span", Ut, _(e.title), 1), e.description ? (n(), i("span", Ft, _(e.description), 1)) : m("", !0), e.note ? (n(), i("span", Ht, _(e.note), 1)) : m("", !0)], 6)) : m("", !0)]));
123
281
  } });
124
- function ft(e, a = 10) {
282
+ function ca(e, a = 10) {
125
283
  const t = e.getBoundingClientRect();
126
284
  return { top: t.top + t.height / 2, left: t.right + a };
127
285
  }
128
- C("dark");
286
+ M("dark");
129
287
  export {
130
- rt as Avatar,
131
- it as Badge,
132
- lt as Button,
133
- dt as Callout,
134
- ut as EmptyState,
135
- Te as FieldFrame,
136
- Ce as InfoTip,
137
- pt as Input,
138
- ct as PageHeader,
139
- mt as SegmentedControl,
140
- ht as Spinner,
141
- bt as Switch,
142
- xt as Tooltip,
143
- ft as tooltipBeside,
144
- ot as useGames,
145
- at as usePhantom,
146
- re as usePlugin,
147
- nt as usePreferences,
148
- st as useThemeMode
288
+ ea as Avatar,
289
+ ta as Badge,
290
+ Yt as Button,
291
+ aa as Callout,
292
+ da as Checkbox,
293
+ na as EmptyState,
294
+ ye as FieldFrame,
295
+ rt as InfoTip,
296
+ oa as Input,
297
+ la as PageHeader,
298
+ ra as SegmentedControl,
299
+ sa as Select,
300
+ ia as Spinner,
301
+ ua as Switch,
302
+ pa as Tooltip,
303
+ ca as tooltipBeside,
304
+ Zt as useGames,
305
+ Xt as usePhantom,
306
+ Le as usePlugin,
307
+ Jt as usePreferences,
308
+ Qt as useThemeMode
149
309
  };