@aggc/ui 0.4.0 → 0.4.1

package/dist/chunks/UiSkeleton.vue_vue_type_script_setup_true_lang-Lghyrtms.js

@@ -0,0 +1,1201 @@
+import { defineComponent as p, openBlock as l, createElementBlock as o, normalizeClass as t, unref as a, renderSlot as y, createElementVNode as d, createBlock as ee, resolveDynamicComponent as ae, toDisplayString as c, createVNode as L, withCtx as te, createTextVNode as E, Fragment as z, renderList as V, createCommentVNode as b, withKeys as U, withModifiers as K, ref as $, useId as se, computed as R, watch as N, onMounted as le, onBeforeUnmount as oe, nextTick as T, normalizeStyle as ne } from "vue";
+import { j as ie, o as g, q as D, n as G, r as i, g as re, f as de, a as X, l as ce, p as ue, b as be, h as ge, i as fe, d as pe } from "./pageHeader-CcJrPX_8.js";
+import { CheckCircle2 as me, TriangleAlert as he, LoaderCircle as ve, Check as q, ChevronDown as ye } from "lucide-vue-next";
+const Ce = ie, Ea = /* @__PURE__ */ p({
+  __name: "PageSurface",
+  setup(e) {
+    return (s, n) => (l(), o("div", {
+      class: t(a(Ce))
+    }, [
+      y(s.$slots, "default")
+    ], 2));
+  }
+}), xe = g({
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "full",
+    borderWidth: "1px",
+    px: "3",
+    py: "1.5",
+    fontSize: "xs",
+    fontWeight: "700",
+    textTransform: "uppercase",
+    letterSpacing: "0.1em",
+    backdropFilter: "blur(16px) saturate(140%)",
+    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.16)",
+    _dark: {
+      boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)"
+    }
+  },
+  variants: {
+    tone: {
+      success: {
+        bg: "badge.successBg",
+        color: "badge.successText",
+        borderColor: "badge.successBorder"
+      },
+      warning: {
+        bg: "badge.warningBg",
+        color: "badge.warningText",
+        borderColor: "badge.warningBorder"
+      },
+      info: {
+        bg: "badge.infoBg",
+        color: "badge.infoText",
+        borderColor: "badge.infoBorder"
+      },
+      neutral: {
+        bg: "badge.neutralBg",
+        color: "badge.neutralText",
+        borderColor: "badge.neutralBorder"
+      }
+    }
+  },
+  defaultVariants: {
+    tone: "neutral"
+  }
+}), we = /* @__PURE__ */ p({
+  __name: "StatusBadge",
+  props: {
+    tone: { default: "neutral" }
+  },
+  setup(e) {
+    const s = e;
+    return (n, f) => (l(), o("span", {
+      class: t(a(xe)({ tone: s.tone }))
+    }, [
+      y(n.$slots, "default")
+    ], 2));
+  }
+}), ke = g({
+  base: {
+    borderWidth: "1px",
+    padding: "5"
+  },
+  variants: {
+    ok: {
+      true: {
+        borderColor: "result.okBorder",
+        bg: "result.okBg"
+      },
+      false: {
+        borderColor: "result.failBorder",
+        bg: "result.failBg"
+      }
+    }
+  }
+}), Se = (e) => D(G, ke({ ok: e })), Be = i({
+  display: "flex",
+  justifyContent: "space-between",
+  gap: "4",
+  alignItems: { base: "flex-start", md: "center" },
+  flexDirection: { base: "column", md: "row" },
+  mb: "3"
+}), $e = i({
+  display: "flex",
+  alignItems: "center",
+  gap: "3"
+}), ze = g({
+  base: {
+    width: "10",
+    height: "10",
+    borderRadius: "full",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  variants: {
+    ok: {
+      true: {
+        bg: "bg.accentSoft",
+        color: "text.accent"
+      },
+      false: {
+        bg: "badge.warningBg",
+        color: "badge.warningText"
+      }
+    }
+  }
+}), Ve = i({
+  fontSize: "lg",
+  fontWeight: "700",
+  color: "text.primary"
+}), Y = g({
+  base: {},
+  variants: {
+    spaced: {
+      true: { mb: "3" },
+      false: { mb: "0" }
+    }
+  }
+}), H = g({
+  base: {
+    fontSize: "sm",
+    fontWeight: "700",
+    mb: "2"
+  },
+  variants: {
+    tone: {
+      detail: { color: "result.detailText" },
+      warning: { color: "result.warningLabel" },
+      error: { color: "result.errorLabel" }
+    }
+  }
+}), P = g({
+  base: {
+    display: "grid",
+    gap: "1.5",
+    pl: "4"
+  },
+  variants: {
+    tone: {
+      detail: { color: "result.bodyText" },
+      warning: { color: "result.warningBody" },
+      error: { color: "result.errorBody" }
+    }
+  }
+}), Re = ["aria-live", "role"], Le = { key: 2 }, Fa = /* @__PURE__ */ p({
+  __name: "ResultPanel",
+  props: {
+    ok: { type: Boolean },
+    summary: {},
+    warnings: {},
+    errors: {},
+    messages: {},
+    live: {},
+    passLabel: {},
+    failLabel: {},
+    detailsLabel: {},
+    warningsLabel: {},
+    errorsLabel: {}
+  },
+  setup(e) {
+    const s = e;
+    return (n, f) => (l(), o("div", {
+      class: t(a(Se)(e.ok)),
+      "aria-live": s.live ?? "polite",
+      role: (s.live ?? "polite") === "off" ? void 0 : "status"
+    }, [
+      d("div", {
+        class: t(a(Be))
+      }, [
+        d("div", {
+          class: t(a($e))
+        }, [
+          d("div", {
+            class: t(a(ze)({ ok: e.ok }))
+          }, [
+            (l(), ee(ae(e.ok ? a(me) : a(he)), { size: 18 }))
+          ], 2),
+          d("h3", {
+            class: t(a(Ve))
+          }, c(s.summary), 3)
+        ], 2),
+        L(we, {
+          tone: e.ok ? "success" : "warning"
+        }, {
+          default: te(() => [
+            E(c(e.ok ? s.passLabel ?? "Pass" : s.failLabel ?? "Fail"), 1)
+          ]),
+          _: 1
+        }, 8, ["tone"])
+      ], 2),
+      e.messages?.length ? (l(), o("div", {
+        key: 0,
+        class: t(a(Y)({ spaced: !0 }))
+      }, [
+        d("p", {
+          class: t(a(H)({ tone: "detail" }))
+        }, c(s.detailsLabel ?? "Details"), 3),
+        d("ul", {
+          class: t(a(P)({ tone: "detail" }))
+        }, [
+          (l(!0), o(z, null, V(e.messages, (u) => (l(), o("li", { key: u }, c(u), 1))), 128))
+        ], 2)
+      ], 2)) : b("", !0),
+      e.warnings?.length ? (l(), o("div", {
+        key: 1,
+        class: t(a(Y)({ spaced: !!e.errors?.length }))
+      }, [
+        d("p", {
+          class: t(a(H)({ tone: "warning" }))
+        }, c(s.warningsLabel ?? "Warnings"), 3),
+        d("ul", {
+          class: t(a(P)({ tone: "warning" }))
+        }, [
+          (l(!0), o(z, null, V(e.warnings, (u) => (l(), o("li", { key: u }, c(u), 1))), 128))
+        ], 2)
+      ], 2)) : b("", !0),
+      e.errors?.length ? (l(), o("div", Le, [
+        d("p", {
+          class: t(a(H)({ tone: "error" }))
+        }, c(s.errorsLabel ?? "Errors"), 3),
+        d("ul", {
+          class: t(a(P)({ tone: "error" }))
+        }, [
+          (l(!0), o(z, null, V(e.errors, (u) => (l(), o("li", { key: u }, c(u), 1))), 128))
+        ], 2)
+      ])) : b("", !0)
+    ], 10, Re));
+  }
+}), Ie = i({
+  padding: "6"
+}), We = i({
+  height: "100%",
+  minHeight: "0",
+  display: "grid",
+  gridTemplateRows: "auto minmax(0, 1fr)"
+}), De = G, Te = re, He = i({
+  position: "relative",
+  zIndex: "1",
+  mb: "5"
+}), Pe = i({
+  position: "relative",
+  zIndex: "1",
+  mb: "0"
+}), Ee = de, Fe = X, je = ce, Oe = i({
+  color: "text.secondary",
+  lineHeight: "1.65",
+  fontSize: "sm",
+  maxWidth: "2xl"
+}), Ae = ue, Me = i({
+  position: "relative",
+  zIndex: "1",
+  minHeight: "0",
+  overflowY: "auto",
+  paddingRight: "1",
+  overscrollBehavior: "contain"
+}), Ue = i({
+  position: "relative",
+  zIndex: "1"
+}), ja = /* @__PURE__ */ p({
+  __name: "SectionCard",
+  props: {
+    title: {},
+    eyebrow: { default: "Workspace surface" },
+    description: { default: "" },
+    scrollBody: { type: Boolean, default: !1 },
+    collapseBodyGap: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const s = e;
+    return (n, f) => (l(), o("section", {
+      class: t(a(D)(a(De), a(Ie), s.scrollBody && a(We)))
+    }, [
+      d("div", {
+        class: t(a(D)(a(Te), s.collapseBodyGap ? a(Pe) : a(He)))
+      }, [
+        d("div", {
+          class: t(a(Ee))
+        }, [
+          s.eyebrow ? (l(), o("p", {
+            key: 0,
+            class: t(a(Fe))
+          }, c(s.eyebrow), 3)) : b("", !0),
+          d("h2", {
+            class: t(a(je))
+          }, c(s.title), 3),
+          s.description ? (l(), o("p", {
+            key: 1,
+            class: t(a(Oe))
+          }, c(s.description), 3)) : b("", !0)
+        ], 2),
+        n.$slots.actions ? (l(), o("div", {
+          key: 0,
+          class: t(a(Ae))
+        }, [
+          y(n.$slots, "actions")
+        ], 2)) : b("", !0)
+      ], 2),
+      d("div", {
+        class: t(s.scrollBody ? a(Me) : a(Ue))
+      }, [
+        y(n.$slots, "default")
+      ], 2)
+    ], 2));
+  }
+}), Ke = be, Ne = i({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "2",
+  minWidth: "0"
+}), Ye = i({
+  visibility: "hidden"
+}), Ge = i({
+  position: "absolute",
+  inset: "0",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "2",
+  px: "4",
+  py: "3",
+  pointerEvents: "none"
+}), Xe = ["type", "disabled", "aria-busy", "aria-label"], Oa = /* @__PURE__ */ p({
+  __name: "UiButton",
+  props: {
+    variant: { default: "solid" },
+    loading: { type: Boolean, default: !1 },
+    loadingLabel: { default: "Working..." },
+    disabled: { type: Boolean, default: !1 },
+    type: { default: "button" },
+    ariaLabel: { default: void 0 }
+  },
+  setup(e) {
+    return (s, n) => (l(), o("button", {
+      type: e.type,
+      disabled: e.disabled || e.loading,
+      "aria-busy": e.loading || void 0,
+      "aria-label": e.ariaLabel,
+      class: t(a(Ke)({ variant: e.variant, disabled: e.disabled, loading: e.loading }))
+    }, [
+      d("span", {
+        class: t([a(Ne), e.loading ? a(Ye) : void 0])
+      }, [
+        y(s.$slots, "default")
+      ], 2),
+      e.loading ? (l(), o("span", {
+        key: 0,
+        class: t(a(Ge))
+      }, [
+        L(a(ve), {
+          size: 14,
+          class: "aggc-spin",
+          "aria-hidden": "true"
+        }),
+        d("span", null, c(e.loadingLabel), 1)
+      ], 2)) : b("", !0)
+    ], 10, Xe));
+  }
+}), qe = g({
+  base: {
+    width: "100%",
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "3",
+    textAlign: "left",
+    borderRadius: "2xl",
+    borderWidth: "1px",
+    px: "4",
+    py: "3.5",
+    color: "text.primary",
+    transition: "all 160ms ease"
+  },
+  variants: {
+    checked: {
+      true: {
+        borderColor: "border.accent",
+        bg: "bg.selected",
+        boxShadow: "0 18px 40px -30px rgba(49,94,255,0.56)"
+      },
+      false: {
+        borderColor: "border.default",
+        bg: "bg.input",
+        boxShadow: "0 14px 32px -30px rgba(15,23,42,0.42)"
+      }
+    },
+    disabled: {
+      true: {
+        cursor: "not-allowed",
+        opacity: 0.5
+      },
+      false: {
+        cursor: "pointer"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      checked: !0,
+      disabled: !1,
+      css: {
+        _hover: {
+          borderColor: "border.accent",
+          transform: "translateY(-1px)"
+        }
+      }
+    },
+    {
+      checked: !1,
+      disabled: !1,
+      css: {
+        _hover: {
+          borderColor: "border.strong",
+          transform: "translateY(-1px)"
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    checked: !1,
+    disabled: !1
+  }
+}), Je = g({
+  base: {
+    mt: "0.5",
+    flexShrink: "0",
+    width: "22px",
+    height: "22px",
+    borderRadius: "md",
+    borderWidth: "1px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "all 160ms ease"
+  },
+  variants: {
+    checked: {
+      true: {
+        borderColor: "border.accent",
+        bg: "bg.accentStrong",
+        color: "text.inverse",
+        boxShadow: "0 12px 24px -16px rgba(49,94,255,0.7)"
+      },
+      false: {
+        borderColor: "border.default",
+        bg: "bg.buttonOutline",
+        color: "transparent",
+        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.32)"
+      }
+    }
+  },
+  defaultVariants: {
+    checked: !1
+  }
+}), Qe = i({
+  display: "grid",
+  gap: "1",
+  minWidth: "0"
+}), Ze = i({
+  fontSize: "sm",
+  fontWeight: "700",
+  lineHeight: "1.45"
+}), _e = i({
+  color: "text.secondary",
+  fontSize: "sm",
+  lineHeight: "1.55"
+}), ea = ["id", "name", "aria-checked", "aria-describedby", "aria-invalid", "disabled", "onKeydown"], Aa = /* @__PURE__ */ p({
+  __name: "UiCheckbox",
+  props: {
+    modelValue: { type: Boolean },
+    id: { default: void 0 },
+    name: { default: void 0 },
+    label: { default: void 0 },
+    description: { default: void 0 },
+    disabled: { type: Boolean, default: !1 },
+    invalid: { type: Boolean, default: !1 },
+    ariaDescribedby: { default: void 0 }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: s }) {
+    const n = e, f = s;
+    function u() {
+      n.disabled || f("update:modelValue", !n.modelValue);
+    }
+    return (m, I) => (l(), o("button", {
+      type: "button",
+      id: e.id,
+      name: e.name,
+      role: "checkbox",
+      "aria-checked": e.modelValue,
+      "aria-describedby": e.ariaDescribedby,
+      "aria-invalid": e.invalid || void 0,
+      disabled: e.disabled,
+      class: t(a(qe)({ checked: e.modelValue, disabled: e.disabled })),
+      onClick: u,
+      onKeydown: [
+        U(K(u, ["prevent"]), ["enter"]),
+        U(K(u, ["prevent"]), ["space"])
+      ]
+    }, [
+      d("span", {
+        class: t(a(Je)({ checked: e.modelValue })),
+        "aria-hidden": "true"
+      }, [
+        L(a(q), { size: 14 })
+      ], 2),
+      d("span", {
+        class: t(a(Qe))
+      }, [
+        e.label || m.$slots.default ? (l(), o("span", {
+          key: 0,
+          class: t(a(Ze))
+        }, [
+          y(m.$slots, "default", {}, () => [
+            E(c(e.label), 1)
+          ])
+        ], 2)) : b("", !0),
+        e.description || m.$slots.description ? (l(), o("span", {
+          key: 1,
+          class: t(a(_e))
+        }, [
+          y(m.$slots, "description", {}, () => [
+            E(c(e.description), 1)
+          ])
+        ], 2)) : b("", !0)
+      ], 2)
+    ], 42, ea));
+  }
+}), aa = i({
+  display: "grid",
+  gap: "2",
+  minWidth: "0"
+}), ta = i({
+  display: "flex",
+  alignItems: "flex-start",
+  justifyContent: "space-between",
+  gap: "3"
+}), sa = i({
+  display: "grid",
+  gap: "1",
+  minWidth: "0"
+}), la = X, oa = i({
+  fontSize: "sm",
+  fontWeight: "700",
+  color: "text.primary"
+}), na = ge, ia = i({
+  flexShrink: "0"
+}), ra = ["for"], da = ["id"], Ma = /* @__PURE__ */ p({
+  __name: "UiField",
+  props: {
+    id: {},
+    forId: {},
+    label: {},
+    hint: {},
+    eyebrow: {}
+  },
+  setup(e) {
+    return (s, n) => (l(), o("div", {
+      class: t(a(aa))
+    }, [
+      e.eyebrow || e.label || e.hint || s.$slots.meta ? (l(), o("div", {
+        key: 0,
+        class: t(a(ta))
+      }, [
+        d("div", {
+          class: t(a(sa))
+        }, [
+          e.eyebrow ? (l(), o("p", {
+            key: 0,
+            class: t(a(la))
+          }, c(e.eyebrow), 3)) : b("", !0),
+          e.label ? (l(), o("label", {
+            key: 1,
+            for: e.forId,
+            class: t(a(oa))
+          }, c(e.label), 11, ra)) : b("", !0),
+          e.hint ? (l(), o("p", {
+            key: 2,
+            id: e.id,
+            class: t(a(na))
+          }, c(e.hint), 11, da)) : b("", !0)
+        ], 2),
+        s.$slots.meta ? (l(), o("div", {
+          key: 0,
+          class: t(a(ia))
+        }, [
+          y(s.$slots, "meta")
+        ], 2)) : b("", !0)
+      ], 2)) : b("", !0),
+      y(s.$slots, "default")
+    ], 2));
+  }
+}), ca = D(
+  fe,
+  i({
+    paddingX: "4",
+    paddingY: "3",
+    display: "flex",
+    alignItems: "center",
+    gap: "3",
+    color: "text.secondary",
+    fontSize: "sm",
+    lineHeight: "1.5"
+  })
+), ua = i({
+  width: "2.5",
+  height: "2.5",
+  borderRadius: "full",
+  flexShrink: "0",
+  bg: "text.accent",
+  boxShadow: "0 0 0 0 rgba(49,94,255,0.35)",
+  animation: "loadingPulse 1.2s ease-out infinite"
+}), ba = i({
+  display: "grid",
+  gap: "0.5"
+}), ga = i({
+  fontWeight: "700",
+  color: "text.primary"
+}), fa = ["aria-live", "role"], Ua = /* @__PURE__ */ p({
+  __name: "UiLoadingState",
+  props: {
+    title: {},
+    description: {},
+    live: { default: "polite" }
+  },
+  setup(e) {
+    return (s, n) => (l(), o("div", {
+      class: t(a(ca)),
+      "data-testid": "loading-state",
+      "aria-live": e.live,
+      role: e.live === "off" ? void 0 : "status"
+    }, [
+      d("span", {
+        class: t(a(ua)),
+        "aria-hidden": "true",
+        "data-ui-loading-pulse": ""
+      }, null, 2),
+      d("div", {
+        class: t(a(ba))
+      }, [
+        d("p", {
+          class: t(a(ga))
+        }, c(e.title), 3),
+        d("p", null, c(e.description), 1)
+      ], 2)
+    ], 10, fa));
+  }
+}), pa = i({
+  display: "inline-flex",
+  width: "fit-content",
+  borderRadius: "full",
+  borderWidth: "1px",
+  borderColor: "border.default",
+  bg: "bg.input",
+  padding: "1",
+  gap: "1",
+  backdropFilter: "blur(18px) saturate(140%)",
+  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.18)"
+}), ma = g({
+  base: {
+    borderRadius: "full",
+    px: "3.5",
+    py: "2",
+    fontSize: "sm",
+    fontWeight: "600",
+    cursor: "pointer",
+    borderWidth: "1px",
+    transition: "all 160ms ease"
+  },
+  variants: {
+    active: {
+      true: {
+        borderColor: "border.accent",
+        bg: "bg.accentStrong",
+        color: "text.inverse",
+        boxShadow: "0 14px 26px -16px rgba(49,94,255,0.68)",
+        _hover: {
+          bg: "bg.accentStrong"
+        }
+      },
+      false: {
+        borderColor: "transparent",
+        bg: "transparent",
+        color: "text.secondary",
+        boxShadow: "none",
+        _hover: {
+          bg: "bg.hover"
+        }
+      }
+    }
+  }
+}), ha = ["onClick"], Ka = /* @__PURE__ */ p({
+  __name: "UiSegmentedControl",
+  props: {
+    modelValue: {},
+    options: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e) {
+    return (s, n) => (l(), o("div", {
+      class: t(a(pa))
+    }, [
+      (l(!0), o(z, null, V(e.options, (f) => (l(), o("button", {
+        key: f.value,
+        type: "button",
+        class: t(a(ma)({ active: f.value === e.modelValue })),
+        onClick: (u) => s.$emit("update:modelValue", f.value)
+      }, c(f.label), 11, ha))), 128))
+    ], 2));
+  }
+}), va = g({
+  base: {
+    position: "relative"
+  },
+  variants: {
+    open: {
+      true: { zIndex: "30" },
+      false: { zIndex: "1" }
+    }
+  },
+  defaultVariants: {
+    open: !1
+  }
+}), ya = g({
+  base: {
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "3",
+    borderWidth: "1px",
+    fontSize: "sm",
+    overflow: "hidden",
+    backdropFilter: "blur(24px) saturate(145%)",
+    transition: "all 160ms ease"
+  },
+  variants: {
+    size: {
+      sm: {
+        minHeight: "40px",
+        borderRadius: "lg",
+        px: "3",
+        py: "2.5"
+      },
+      md: {
+        minHeight: "48px",
+        borderRadius: "xl",
+        px: "4",
+        py: "3"
+      }
+    },
+    open: {
+      true: {
+        borderColor: "border.accent",
+        bg: "bg.cardStrong",
+        boxShadow: "0 18px 42px -28px rgba(49,94,255,0.42)"
+      },
+      false: {
+        borderColor: "border.default",
+        bg: "bg.input",
+        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.22)"
+      }
+    },
+    selected: {
+      true: { color: "text.primary" },
+      false: { color: "text.muted" }
+    },
+    disabled: {
+      true: {
+        cursor: "not-allowed",
+        opacity: 0.55
+      },
+      false: {
+        cursor: "pointer"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      disabled: !1,
+      css: {
+        _hover: {
+          borderColor: "border.strong",
+          bg: "bg.cardStrong"
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "md",
+    open: !1,
+    selected: !1,
+    disabled: !1
+  }
+}), Ca = pe({
+  placement: "anchored",
+  density: "cozy"
+}), xa = i({
+  width: "100%",
+  zIndex: "30",
+  maxHeight: "320px",
+  overflowY: "auto",
+  display: "grid"
+}), wa = i({
+  display: "block",
+  textAlign: "left",
+  minWidth: "0",
+  flex: "1",
+  overflow: "hidden"
+}), ka = i({
+  display: "block",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}), Sa = g({
+  base: {
+    color: "text.muted",
+    transition: "transform 160ms ease"
+  },
+  variants: {
+    open: {
+      true: { transform: "rotate(180deg)" },
+      false: { transform: "rotate(0deg)" }
+    }
+  },
+  defaultVariants: {
+    open: !1
+  }
+}), Ba = g({
+  base: {
+    width: "100%",
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    gap: "3",
+    textAlign: "left",
+    borderRadius: "xl",
+    px: "3",
+    borderWidth: "1px",
+    cursor: "pointer",
+    transition: "all 140ms ease",
+    _hover: {
+      bg: "bg.selected",
+      borderColor: "border.accent"
+    }
+  },
+  variants: {
+    size: {
+      sm: { py: "2.5" },
+      md: { py: "3" }
+    },
+    active: {
+      true: {
+        color: "text.primary",
+        bg: "bg.selected",
+        borderColor: "border.accent"
+      },
+      false: {
+        color: "text.secondary",
+        bg: "transparent",
+        borderColor: "transparent"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    active: !1
+  }
+}), $a = i({
+  display: "grid",
+  gap: "0.5",
+  minWidth: "0"
+}), za = i({
+  fontSize: "sm",
+  fontWeight: "600",
+  minWidth: "0",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}), Va = i({
+  color: "text.secondary",
+  fontSize: "xs",
+  lineHeight: "1.45",
+  overflowWrap: "anywhere"
+}), Ra = g({
+  base: {
+    color: "text.accent",
+    transition: "opacity 140ms ease"
+  },
+  variants: {
+    selected: {
+      true: { opacity: 1 },
+      false: { opacity: 0 }
+    }
+  },
+  defaultVariants: {
+    selected: !1
+  }
+}), La = ["id", "name", "disabled", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid"], Ia = ["id", "aria-activedescendant"], Wa = ["id", "aria-selected", "onMouseenter", "onClick", "onKeydown"], Na = /* @__PURE__ */ p({
+  __name: "UiSelect",
+  props: {
+    modelValue: {},
+    options: {},
+    id: { default: void 0 },
+    name: { default: void 0 },
+    placeholder: { default: "Select an option" },
+    disabled: { type: Boolean, default: !1 },
+    invalid: { type: Boolean, default: !1 },
+    size: { default: "md" },
+    ariaLabel: { default: void 0 },
+    ariaLabelledby: { default: void 0 },
+    ariaDescribedby: { default: void 0 }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: s }) {
+    const n = e, f = s, u = $(null), m = $(null), I = $([]), h = $(!1), x = $(-1), J = se(), W = R(() => n.id ?? `ui-select-${J}`), F = R(() => `${W.value}-listbox`), j = R(
+      () => n.options.find((r) => r.value === n.modelValue) ?? null
+    );
+    function k(r) {
+      if (!n.options.length) {
+        x.value = -1;
+        return;
+      }
+      const v = (r + n.options.length) % n.options.length;
+      x.value = v, T(() => {
+        I.value[v]?.focus();
+      });
+    }
+    function w() {
+      h.value = !1, x.value = -1;
+    }
+    async function O() {
+      if (n.disabled || !n.options.length)
+        return;
+      h.value = !0;
+      const r = n.options.findIndex((v) => v.value === n.modelValue);
+      await T(), k(r >= 0 ? r : 0);
+    }
+    function Q() {
+      if (h.value) {
+        w();
+        return;
+      }
+      O();
+    }
+    function A(r) {
+      f("update:modelValue", r), w(), T(() => {
+        m.value?.focus();
+      });
+    }
+    function Z(r) {
+      n.disabled || (r.key === "ArrowDown" || r.key === "Enter" || r.key === " ") && (r.preventDefault(), O());
+    }
+    function _(r, v) {
+      switch (r.key) {
+        case "ArrowDown":
+          r.preventDefault(), k(v + 1);
+          break;
+        case "ArrowUp":
+          r.preventDefault(), k(v - 1);
+          break;
+        case "Home":
+          r.preventDefault(), k(0);
+          break;
+        case "End":
+          r.preventDefault(), k(n.options.length - 1);
+          break;
+        case "Escape":
+          r.preventDefault(), w(), m.value?.focus();
+          break;
+        case "Enter":
+        case " ":
+          r.preventDefault(), A(n.options[v].value);
+          break;
+      }
+    }
+    function M(r) {
+      h.value && (u.value?.contains(r.target) || w());
+    }
+    return N(
+      () => n.options,
+      () => {
+        I.value = [], n.options.some((r) => r.value === n.modelValue) || w();
+      }
+    ), N(
+      () => n.disabled,
+      (r) => {
+        r && w();
+      }
+    ), le(() => {
+      document.addEventListener("pointerdown", M);
+    }), oe(() => {
+      document.removeEventListener("pointerdown", M);
+    }), (r, v) => (l(), o("div", {
+      ref_key: "rootRef",
+      ref: u,
+      class: t(a(va)({ open: h.value }))
+    }, [
+      d("button", {
+        ref_key: "triggerRef",
+        ref: m,
+        type: "button",
+        id: W.value,
+        name: e.name,
+        disabled: e.disabled,
+        class: t(a(ya)({ size: e.size, open: h.value, selected: !!j.value, disabled: e.disabled })),
+        "aria-haspopup": "listbox",
+        "aria-expanded": h.value,
+        "aria-controls": F.value,
+        "aria-label": e.ariaLabel,
+        "aria-labelledby": e.ariaLabelledby,
+        "aria-describedby": e.ariaDescribedby,
+        "aria-invalid": e.invalid || void 0,
+        onClick: Q,
+        onKeydown: Z
+      }, [
+        d("span", {
+          class: t(a(wa))
+        }, [
+          d("span", {
+            class: t(a(ka))
+          }, c(j.value?.label ?? e.placeholder), 3)
+        ], 2),
+        L(a(ye), {
+          size: 16,
+          class: t(a(Sa)({ open: h.value }))
+        }, null, 8, ["class"])
+      ], 42, La),
+      h.value ? (l(), o("div", {
+        key: 0,
+        id: F.value,
+        class: t([a(Ca), a(xa)]),
+        role: "listbox",
+        "aria-activedescendant": x.value >= 0 ? `${W.value}-${x.value}` : void 0
+      }, [
+        (l(!0), o(z, null, V(e.options, (C, S) => (l(), o("button", {
+          id: `${W.value}-${S}`,
+          key: C.value,
+          ref_for: !0,
+          ref: (B) => I.value[S] = B,
+          type: "button",
+          role: "option",
+          "aria-selected": C.value === e.modelValue,
+          class: t(a(Ba)({ size: e.size, active: x.value === S || C.value === e.modelValue })),
+          onMouseenter: (B) => x.value = S,
+          onClick: (B) => A(C.value),
+          onKeydown: (B) => _(B, S)
+        }, [
+          d("span", {
+            class: t(a($a))
+          }, [
+            d("span", {
+              class: t(a(za))
+            }, c(C.label), 3),
+            C.description && e.size === "md" ? (l(), o("span", {
+              key: 0,
+              class: t(a(Va))
+            }, c(C.description), 3)) : b("", !0)
+          ], 2),
+          L(a(q), {
+            size: 15,
+            class: t(a(Ra)({ selected: C.value === e.modelValue }))
+          }, null, 8, ["class"])
+        ], 42, Wa))), 128))
+      ], 10, Ia)) : b("", !0)
+    ], 2));
+  }
+}), Da = g({
+  base: {
+    position: "relative",
+    overflow: "hidden",
+    _before: {
+      content: '""',
+      position: "absolute",
+      inset: "0",
+      background: "linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.62) 50%, rgba(255,255,255,0) 100%)",
+      transform: "translateX(-100%)",
+      animation: "aggc-shimmer 1.45s ease-in-out infinite"
+    },
+    _dark: {
+      _before: {
+        background: "linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(186,204,236,0.22) 50%, rgba(255,255,255,0) 100%)"
+      }
+    }
+  },
+  variants: {
+    variant: {
+      text: {
+        width: "100%",
+        height: "0.875rem",
+        borderRadius: "md",
+        bg: "rgba(127, 146, 184, 0.14)",
+        _dark: {
+          bg: "rgba(210, 220, 240, 0.09)"
+        }
+      },
+      title: {
+        width: "100%",
+        height: "1.75rem",
+        borderRadius: "xl",
+        bg: "rgba(127, 146, 184, 0.14)",
+        _dark: {
+          bg: "rgba(210, 220, 240, 0.09)"
+        }
+      },
+      rect: {
+        width: "100%",
+        height: "5rem",
+        borderRadius: "xl",
+        bg: "rgba(127, 146, 184, 0.14)",
+        _dark: {
+          bg: "rgba(210, 220, 240, 0.09)"
+        }
+      },
+      pill: {
+        width: "5rem",
+        height: "1.75rem",
+        borderRadius: "999px",
+        bg: "rgba(127, 146, 184, 0.14)",
+        _dark: {
+          bg: "rgba(210, 220, 240, 0.09)"
+        }
+      },
+      circle: {
+        width: "2.75rem",
+        height: "2.75rem",
+        borderRadius: "999px",
+        bg: "rgba(127, 146, 184, 0.14)",
+        _dark: {
+          bg: "rgba(210, 220, 240, 0.09)"
+        }
+      },
+      stat: {
+        width: "100%",
+        height: "4.75rem",
+        borderRadius: "xl",
+        bg: "rgba(117, 138, 178, 0.16)",
+        _dark: {
+          bg: "rgba(210, 220, 240, 0.11)"
+        }
+      },
+      action: {
+        width: "100%",
+        height: "2.75rem",
+        borderRadius: "xl",
+        bg: "rgba(127, 146, 184, 0.14)",
+        _dark: {
+          bg: "rgba(210, 220, 240, 0.09)"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "rect"
+  }
+}), Ya = /* @__PURE__ */ p({
+  __name: "UiSkeleton",
+  props: {
+    variant: { default: "rect" },
+    width: { default: void 0 },
+    height: { default: void 0 }
+  },
+  setup(e) {
+    const s = e, n = R(() => Da({ variant: s.variant })), f = R(() => ({
+      width: s.width ?? (s.variant === "circle" ? "2.75rem" : s.variant === "pill" ? "5rem" : "100%"),
+      height: s.height ?? (s.variant === "text" ? "0.875rem" : s.variant === "title" || s.variant === "pill" ? "1.75rem" : s.variant === "circle" || s.variant === "action" ? "2.75rem" : s.variant === "stat" ? "4.75rem" : "5rem")
+    }));
+    return (u, m) => (l(), o("div", {
+      "aria-hidden": "true",
+      "data-ui-skeleton": "",
+      class: t(n.value),
+      style: ne(f.value)
+    }, null, 6));
+  }
+});
+export {
+  Ea as _,
+  Fa as a,
+  ja as b,
+  we as c,
+  Oa as d,
+  Aa as e,
+  Ma as f,
+  Ua as g,
+  Ka as h,
+  Na as i,
+  Ya as j
+};