@duro-app/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,1850 @@
+import { jsx as a, jsxs as U, Fragment as pt } from "react/jsx-runtime";
+import { css as F, html as g } from "react-strict-dom";
+import { colors as o, typography as h, radii as D, spacing as i, shadows as Q, highContrastTheme as It, highContrastShadows as zt, lightTheme as Wt, lightShadows as Ht } from "@duro-app/tokens";
+import { colors as Xe, highContrastShadows as je, highContrastTheme as Ge, lightShadows as Ye, lightTheme as Ue, radii as Ke, shadows as _e, spacing as qe, typography as Je } from "@duro-app/tokens";
+import { useContext as $, createContext as V, useId as Y, useMemo as ht, useState as M, useRef as w, useCallback as B, useEffect as L, Children as mt } from "react";
+const ft = F.create({
+  base: {
+    padding: i.md,
+    borderRadius: D.sm,
+    borderWidth: 1,
+    borderStyle: "solid",
+    fontSize: h.fontSizeSm,
+    lineHeight: h.lineHeight
+  },
+  error: {
+    backgroundColor: o.errorBg,
+    borderColor: o.errorBorder,
+    color: o.errorText
+  },
+  success: {
+    backgroundColor: o.successBg,
+    borderColor: o.successBorder,
+    color: o.successText
+  },
+  warning: {
+    backgroundColor: o.warningBg,
+    borderColor: o.warningBorder,
+    color: o.warningText
+  },
+  info: {
+    backgroundColor: o.infoBg,
+    borderColor: o.infoBorder,
+    color: o.infoText
+  }
+});
+function Ie({
+  variant: t = "info",
+  children: e
+}) {
+  return /* @__PURE__ */ a(g.div, { role: "alert", style: [ft.base, ft[t]], children: e });
+}
+const J = F.create({
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontFamily: h.fontFamily,
+    fontWeight: h.fontWeightMedium,
+    lineHeight: 1,
+    borderRadius: D.full,
+    whiteSpace: "nowrap"
+  },
+  sizeMd: {
+    paddingTop: i.xs,
+    paddingBottom: i.xs,
+    paddingLeft: i.sm,
+    paddingRight: i.sm,
+    fontSize: h.fontSizeXs
+  },
+  sizeSm: {
+    paddingTop: 2,
+    paddingBottom: 2,
+    paddingLeft: i.xs,
+    paddingRight: i.xs,
+    fontSize: "0.625rem"
+  },
+  default: {
+    backgroundColor: o.bgCardHover,
+    color: o.textMuted
+  },
+  success: {
+    backgroundColor: o.successBg,
+    color: o.successText
+  },
+  warning: {
+    backgroundColor: o.warningBg,
+    color: o.warningText
+  },
+  error: {
+    backgroundColor: o.errorBg,
+    color: o.errorText
+  },
+  info: {
+    backgroundColor: o.infoBg,
+    color: o.infoText
+  }
+}), Dt = {
+  sm: J.sizeSm,
+  md: J.sizeMd
+};
+function ze({
+  variant: t = "default",
+  size: e = "md",
+  children: r
+}) {
+  return /* @__PURE__ */ a(g.span, { style: [J.base, Dt[e], J[t]], children: r });
+}
+const _ = F.create({
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: i.sm,
+    fontFamily: h.fontFamily,
+    fontSize: h.fontSizeSm,
+    fontWeight: h.fontWeightMedium,
+    lineHeight: h.lineHeight,
+    borderRadius: D.sm,
+    borderWidth: 1,
+    borderStyle: "solid",
+    cursor: "pointer",
+    transitionProperty: "background-color, border-color, color, opacity",
+    transitionDuration: "150ms",
+    transitionTimingFunction: "ease",
+    textDecoration: "none",
+    outlineWidth: {
+      default: 0,
+      ":focus-visible": 2
+    },
+    outlineStyle: {
+      default: "none",
+      ":focus-visible": "solid"
+    },
+    outlineColor: {
+      default: "transparent",
+      ":focus-visible": o.accent
+    },
+    outlineOffset: {
+      default: 0,
+      ":focus-visible": 2
+    }
+  },
+  sizeDefault: {
+    paddingTop: i.sm,
+    paddingBottom: i.sm,
+    paddingLeft: i.md,
+    paddingRight: i.md
+  },
+  sizeSmall: {
+    paddingTop: i.xs,
+    paddingBottom: i.xs,
+    paddingLeft: i.sm,
+    paddingRight: i.sm,
+    fontSize: h.fontSizeXs
+  },
+  primary: {
+    backgroundColor: {
+      default: o.accent,
+      ":hover": o.accentHover,
+      ":active": o.accentHover
+    },
+    borderColor: {
+      default: o.accent,
+      ":hover": o.accentHover
+    },
+    color: o.accentContrast
+  },
+  secondary: {
+    backgroundColor: {
+      default: "transparent",
+      ":hover": o.bgCardHover
+    },
+    borderColor: o.border,
+    color: o.textMuted
+  },
+  link: {
+    backgroundColor: "transparent",
+    borderColor: "transparent",
+    color: {
+      default: o.accent,
+      ":hover": o.accentHover
+    },
+    textDecoration: {
+      default: "none",
+      ":hover": "underline"
+    },
+    paddingLeft: 0,
+    paddingRight: 0
+  },
+  danger: {
+    backgroundColor: {
+      default: o.error,
+      ":hover": o.errorHover,
+      ":active": o.errorHover
+    },
+    borderColor: {
+      default: o.error,
+      ":hover": o.errorHover
+    },
+    color: o.errorContrast
+  },
+  fullWidth: {
+    width: "100%"
+  },
+  disabled: {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  }
+}), Bt = {
+  default: _.sizeDefault,
+  small: _.sizeSmall
+};
+function We({
+  variant: t = "primary",
+  size: e = "default",
+  fullWidth: r = !1,
+  disabled: n = !1,
+  type: l = "button",
+  onClick: s,
+  children: d
+}) {
+  return /* @__PURE__ */ a(g.button, { type: l, disabled: n, onClick: s, style: [_.base, Bt[e], _[t], r && _.fullWidth, n && _.disabled], children: d });
+}
+const q = F.create({
+  base: {
+    backgroundColor: o.bgCard,
+    color: o.text,
+    fontFamily: h.fontFamily
+  },
+  // Variants
+  elevated: {
+    borderRadius: D.lg,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: o.border,
+    boxShadow: Q.md
+  },
+  outlined: {
+    borderRadius: D.md,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: o.border
+  },
+  filled: {
+    borderRadius: D.md
+  },
+  interactive: {
+    borderRadius: D.md,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: {
+      default: o.border,
+      ":hover": o.accent
+    },
+    backgroundColor: {
+      default: o.bgCard,
+      ":hover": o.bgCardHover
+    },
+    cursor: "pointer",
+    transitionProperty: "background-color, border-color, transform",
+    transitionDuration: "150ms",
+    transitionTimingFunction: "ease",
+    transform: {
+      default: "translateY(0)",
+      ":hover": "translateY(-2px)"
+    }
+  },
+  // Sizes (padding)
+  sizeDefault: {
+    padding: i.lg
+  },
+  sizeCompact: {
+    padding: i.md
+  },
+  sizeFull: {
+    padding: i.xl
+  },
+  // Header
+  header: {
+    fontSize: h.fontSizeLg,
+    fontWeight: h.fontWeightSemibold,
+    marginBottom: i.md
+  }
+}), Lt = {
+  default: q.sizeDefault,
+  compact: q.sizeCompact,
+  full: q.sizeFull
+};
+function He({
+  variant: t = "outlined",
+  size: e = "default",
+  header: r,
+  onClick: n,
+  children: l
+}) {
+  return /* @__PURE__ */ U(g.div, { onClick: n, style: [q.base, q[t], Lt[e]], children: [
+    r && /* @__PURE__ */ a(g.div, { style: q.header, children: r }),
+    l
+  ] });
+}
+const bt = V(null);
+function Z() {
+  return $(bt);
+}
+const tt = F.create({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    gap: i.xs
+  },
+  label: {
+    fontSize: h.fontSizeSm,
+    fontWeight: h.fontWeightMedium,
+    color: o.text
+  },
+  description: {
+    fontSize: h.fontSizeXs,
+    color: o.textMuted
+  },
+  error: {
+    fontSize: h.fontSizeXs,
+    color: o.error
+  }
+});
+function Pt({
+  invalid: t = !1,
+  children: e
+}) {
+  const r = Y(), n = ht(() => ({
+    controlId: `${r}-control`,
+    descriptionId: `${r}-description`,
+    errorId: `${r}-error`,
+    invalid: t
+  }), [r, t]);
+  return /* @__PURE__ */ a(bt.Provider, { value: n, children: /* @__PURE__ */ a(g.div, { style: tt.root, children: e }) });
+}
+function Mt({
+  children: t
+}) {
+  const e = Z();
+  return /* @__PURE__ */ a(g.label, { for: e?.controlId, style: tt.label, children: t });
+}
+function Ft({
+  children: t
+}) {
+  const e = Z();
+  return /* @__PURE__ */ a(g.span, { id: e?.descriptionId, style: tt.description, children: t });
+}
+function Et({
+  children: t
+}) {
+  const e = Z();
+  return !e?.invalid && !t ? null : /* @__PURE__ */ a(g.span, { id: e?.errorId, role: "alert", style: tt.error, children: t });
+}
+const De = {
+  Root: Pt,
+  Label: Mt,
+  Description: Ft,
+  Error: Et
+}, gt = F.create({
+  base: {
+    width: "100%",
+    paddingTop: i.sm,
+    paddingBottom: i.sm,
+    paddingLeft: i.md,
+    paddingRight: i.md,
+    fontFamily: h.fontFamily,
+    fontSize: h.fontSizeSm,
+    lineHeight: h.lineHeight,
+    color: o.text,
+    backgroundColor: o.bg,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderRadius: D.sm,
+    transitionProperty: "border-color",
+    transitionDuration: "150ms",
+    transitionTimingFunction: "ease",
+    outlineWidth: {
+      default: 0,
+      ":focus-visible": 2
+    },
+    outlineStyle: {
+      default: "none",
+      ":focus-visible": "solid"
+    },
+    outlineColor: {
+      default: "transparent",
+      ":focus-visible": o.accent
+    },
+    outlineOffset: {
+      default: 0,
+      ":focus-visible": 1
+    }
+  },
+  default: {
+    borderColor: {
+      default: o.border,
+      ":hover": o.textMuted,
+      ":focus": o.accent
+    }
+  },
+  error: {
+    borderColor: {
+      default: o.error,
+      ":focus": o.error
+    }
+  }
+});
+function Be({
+  variant: t = "default",
+  type: e = "text",
+  name: r,
+  placeholder: n,
+  required: l,
+  minLength: s,
+  pattern: d,
+  autoComplete: c,
+  value: m,
+  defaultValue: u,
+  disabled: f,
+  onChange: p
+}) {
+  const S = Z(), R = d !== void 0 ? {
+    pattern: d
+  } : void 0;
+  return /* @__PURE__ */ a(g.input, { id: S?.controlId, type: e, name: r, placeholder: n, required: l, minLength: s, autoComplete: c, value: m, defaultValue: u, disabled: f, "aria-describedby": S ? `${S.descriptionId} ${S.invalid ? S.errorId : ""}`.trim() : void 0, "aria-invalid": S?.invalid || t === "error" || void 0, onChange: p, style: [gt.base, gt[t]], ...R });
+}
+const N = F.create({
+  root: {
+    position: "relative",
+    display: "inline-flex"
+  },
+  trigger: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: i.sm,
+    paddingTop: i.sm,
+    paddingBottom: i.sm,
+    paddingLeft: i.md,
+    paddingRight: i.md,
+    fontFamily: h.fontFamily,
+    fontSize: h.fontSizeSm,
+    color: o.text,
+    backgroundColor: {
+      default: "transparent",
+      ":hover": o.bgCardHover
+    },
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: o.border,
+    borderRadius: D.sm,
+    cursor: "pointer",
+    transitionProperty: "background-color, border-color",
+    transitionDuration: "150ms"
+  },
+  backdrop: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 49
+  },
+  popup: {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    marginTop: i.xs,
+    backgroundColor: o.bgCard,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: o.border,
+    borderRadius: D.sm,
+    boxShadow: Q.md,
+    paddingTop: i.xs,
+    paddingBottom: i.xs,
+    minWidth: 160,
+    zIndex: 50
+  },
+  popupEnd: {
+    left: "auto",
+    right: 0
+  },
+  item: {
+    display: "flex",
+    alignItems: "center",
+    paddingTop: i.sm,
+    paddingBottom: i.sm,
+    paddingLeft: i.md,
+    paddingRight: i.md,
+    fontSize: h.fontSizeSm,
+    fontFamily: h.fontFamily,
+    color: o.text,
+    borderRadius: D.sm,
+    cursor: "pointer",
+    backgroundColor: "transparent",
+    transitionProperty: "background-color",
+    transitionDuration: "150ms"
+  },
+  itemHighlighted: {
+    backgroundColor: o.bgCardHover
+  },
+  linkItem: {
+    textDecoration: "none",
+    color: {
+      default: o.text,
+      ":hover": o.text
+    }
+  }
+}), vt = V(null);
+function et() {
+  const t = $(vt);
+  if (!t) throw new Error("Menu compound components must be used within Menu.Root");
+  return t;
+}
+function $t() {
+  const [t, e] = M(!1), [r, n] = M(null), l = Y(), s = w(null), d = w(null), c = w(/* @__PURE__ */ new Map()), m = w([]), u = w(!1), f = B(() => {
+    e(!1), n(null), u.current = !1, d.current?.focus();
+  }, []), p = B(() => {
+    e((x) => (x ? (n(null), u.current = !1) : u.current = !0, !x));
+  }, []);
+  L(() => {
+    if (t && u.current) {
+      u.current = !1;
+      const x = m.current;
+      x.length > 0 && n(x[0]);
+    }
+  }, [t]);
+  const S = B((x, C) => {
+    c.current.set(x, C);
+    const v = c.current, y = [...v.keys()];
+    return y.sort((b, k) => {
+      const K = v.get(b), W = v.get(k);
+      return !K || !W ? 0 : K.compareDocumentPosition(W) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+    }), m.current = y, () => {
+      c.current.delete(x), m.current = m.current.filter((b) => b !== x);
+    };
+  }, []);
+  return L(() => {
+    const x = s.current;
+    if (!x || !t) return;
+    function C(v) {
+      const y = m.current;
+      if (y.length !== 0)
+        switch (v.key) {
+          case "ArrowDown": {
+            v.preventDefault(), n((b) => {
+              const k = b ? y.indexOf(b) : -1;
+              return y[(k + 1) % y.length];
+            });
+            break;
+          }
+          case "ArrowUp": {
+            v.preventDefault(), n((b) => {
+              const k = b ? y.indexOf(b) : 0;
+              return y[(k - 1 + y.length) % y.length];
+            });
+            break;
+          }
+          case "Home": {
+            v.preventDefault(), n(y[0]);
+            break;
+          }
+          case "End": {
+            v.preventDefault(), n(y[y.length - 1]);
+            break;
+          }
+          case "Enter":
+          case " ": {
+            v.preventDefault();
+            const b = c.current;
+            n((k) => (k && b.get(k)?.click(), k));
+            break;
+          }
+          case "Escape":
+          case "Tab": {
+            f();
+            break;
+          }
+        }
+    }
+    return x.addEventListener("keydown", C), () => x.removeEventListener("keydown", C);
+  }, [t, f]), {
+    ctx: {
+      open: t,
+      toggle: p,
+      close: f,
+      menuId: l,
+      highlightedId: r,
+      setHighlightedId: n,
+      registerItem: S,
+      triggerRef: d
+    },
+    rootRef: s
+  };
+}
+function At({
+  children: t
+}) {
+  const {
+    ctx: e,
+    rootRef: r
+  } = $t();
+  return /* @__PURE__ */ a(vt.Provider, { value: e, children: /* @__PURE__ */ a(g.div, { ref: r, style: N.root, children: t }) });
+}
+function Ot({
+  children: t
+}) {
+  const {
+    open: e,
+    toggle: r,
+    menuId: n,
+    triggerRef: l
+  } = et(), s = w(null);
+  return L(() => {
+    l.current = s.current;
+  }), /* @__PURE__ */ a(g.button, { ref: s, type: "button", onClick: r, "aria-expanded": e, "aria-haspopup": "menu", "aria-controls": e ? n : void 0, style: N.trigger, children: t });
+}
+function Vt({
+  children: t,
+  align: e = "start"
+}) {
+  const {
+    open: r,
+    close: n,
+    menuId: l,
+    highlightedId: s
+  } = et();
+  return r ? /* @__PURE__ */ U(pt, { children: [
+    /* @__PURE__ */ a(g.div, { style: N.backdrop, onClick: n }),
+    /* @__PURE__ */ a(g.div, { id: l, role: "menu", "aria-activedescendant": s ?? void 0, style: [N.popup, e === "end" && N.popupEnd], children: t })
+  ] }) : null;
+}
+function Nt({
+  onClick: t,
+  children: e
+}) {
+  const {
+    close: r,
+    highlightedId: n,
+    setHighlightedId: l,
+    registerItem: s
+  } = et(), d = Y(), c = w(null), m = n === d;
+  L(() => {
+    const f = c.current;
+    if (f)
+      return s(d, f);
+  }, [d, s]);
+  const u = () => {
+    t?.(), r();
+  };
+  return /* @__PURE__ */ a(g.div, { ref: c, id: d, role: "menuitem", onClick: u, onPointerEnter: () => l(d), style: [N.item, m && N.itemHighlighted], children: e });
+}
+function Xt({
+  href: t,
+  children: e
+}) {
+  const {
+    close: r,
+    highlightedId: n,
+    setHighlightedId: l,
+    registerItem: s
+  } = et(), d = Y(), c = w(null), m = n === d;
+  return L(() => {
+    const u = c.current;
+    if (u)
+      return s(d, u);
+  }, [d, s]), /* @__PURE__ */ a(g.a, { ref: c, id: d, href: t, onClick: r, role: "menuitem", onPointerEnter: () => l(d), style: [N.item, N.linkItem, m && N.itemHighlighted], children: e });
+}
+const Le = {
+  Root: At,
+  Trigger: Ot,
+  Popup: Vt,
+  Item: Nt,
+  LinkItem: Xt
+}, E = F.create({
+  root: {
+    position: "relative",
+    overflow: "hidden"
+  },
+  viewport: {
+    width: "100%",
+    height: "100%",
+    overflowX: "auto",
+    overflowY: "auto",
+    // Hide native scrollbar
+    scrollbarWidth: "none"
+  },
+  content: {
+    minWidth: "100%",
+    minHeight: "100%"
+  },
+  scrollbar: {
+    position: "absolute",
+    zIndex: 1,
+    display: "flex",
+    touchAction: "none",
+    userSelect: "none",
+    transitionProperty: "opacity",
+    transitionDuration: "200ms",
+    transitionTimingFunction: "ease"
+  },
+  scrollbarVertical: {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: 8,
+    flexDirection: "column",
+    paddingTop: 2,
+    paddingBottom: 2,
+    paddingRight: 2
+  },
+  scrollbarHorizontal: {
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: 8,
+    flexDirection: "row",
+    paddingLeft: 2,
+    paddingRight: 2,
+    paddingBottom: 2
+  },
+  scrollbarHidden: {
+    opacity: 0
+  },
+  scrollbarVisible: {
+    opacity: 1
+  },
+  thumb: {
+    position: "relative",
+    flex: 1,
+    backgroundColor: {
+      default: o.border,
+      ":hover": o.textMuted
+    },
+    borderRadius: D.full,
+    transitionProperty: "background-color",
+    transitionDuration: "150ms"
+  },
+  // Dynamic styles — simple identifier params only (StyleX constraint)
+  viewportMaxHeight: (t) => ({
+    maxHeight: t
+  }),
+  thumbVertical: (t, e) => ({
+    height: t,
+    transform: e
+  }),
+  thumbHorizontal: (t, e) => ({
+    width: t,
+    transform: e
+  })
+}), xt = V(null);
+function ot() {
+  const t = $(xt);
+  if (!t) throw new Error("ScrollArea compound components must be used within ScrollArea.Root");
+  return t;
+}
+function jt() {
+  const t = w(null), e = w(null), [r, n] = M(0), [l, s] = M(0), [d, c] = M(0), [m, u] = M(0), [f, p] = M(0), [S, R] = M(0), [x, C] = M(!1), v = w(null), y = B(() => {
+    const b = t.current;
+    b && (n(b.scrollTop), s(b.scrollLeft), c(b.scrollHeight), u(b.scrollWidth), p(b.clientHeight), R(b.clientWidth), C(!0), v.current && clearTimeout(v.current), v.current = setTimeout(() => C(!1), 1e3));
+  }, []);
+  return L(() => {
+    const b = t.current;
+    if (!b) return;
+    const k = new ResizeObserver(() => {
+      c(b.scrollHeight), u(b.scrollWidth), p(b.clientHeight), R(b.clientWidth);
+    });
+    return k.observe(b), c(b.scrollHeight), u(b.scrollWidth), p(b.clientHeight), R(b.clientWidth), () => k.disconnect();
+  }, []), L(() => {
+    const b = t.current;
+    if (b)
+      return b.addEventListener("scroll", y, {
+        passive: !0
+      }), () => b.removeEventListener("scroll", y);
+  }, [y]), {
+    viewportRef: t,
+    contentRef: e,
+    scrollTop: r,
+    scrollLeft: l,
+    scrollHeight: d,
+    scrollWidth: m,
+    clientHeight: f,
+    clientWidth: S,
+    scrolling: x
+  };
+}
+function Gt({
+  children: t
+}) {
+  const e = jt();
+  return /* @__PURE__ */ a(xt.Provider, { value: e, children: /* @__PURE__ */ a(g.div, { style: E.root, children: t }) });
+}
+function Yt({
+  children: t,
+  maxHeight: e
+}) {
+  const {
+    viewportRef: r
+  } = ot();
+  return /* @__PURE__ */ a(g.div, { ref: r, style: [E.viewport, e != null && E.viewportMaxHeight(e)], children: t });
+}
+function Ut({
+  children: t
+}) {
+  const {
+    contentRef: e
+  } = ot();
+  return /* @__PURE__ */ a(g.div, { ref: e, style: E.content, children: t });
+}
+function Kt({
+  orientation: t = "vertical",
+  children: e
+}) {
+  const {
+    scrolling: r,
+    scrollHeight: n,
+    scrollWidth: l,
+    clientHeight: s,
+    clientWidth: d
+  } = ot();
+  return (t === "vertical" ? n > s : l > d) ? /* @__PURE__ */ a(g.div, { style: [E.scrollbar, t === "vertical" ? E.scrollbarVertical : E.scrollbarHorizontal, r ? E.scrollbarVisible : E.scrollbarHidden], children: e }) : null;
+}
+function _t({
+  orientation: t = "vertical"
+}) {
+  const {
+    viewportRef: e,
+    scrollTop: r,
+    scrollLeft: n,
+    scrollHeight: l,
+    scrollWidth: s,
+    clientHeight: d,
+    clientWidth: c
+  } = ot(), m = w(!1), u = w(0), f = w(0), p = t === "vertical", S = Math.max(p ? d / l * 100 : c / s * 100, 10), R = p ? l - d : s - c, x = p ? d : c, C = S / 100 * x, v = p ? r : n, y = R > 0 ? v / R * (x - C) : 0, b = p ? E.thumbVertical(`${S}%`, `translateY(${y}px)`) : E.thumbHorizontal(`${S}%`, `translateX(${y}px)`), k = B((H) => {
+    H.preventDefault(), m.current = !0, u.current = p ? H.clientY : H.clientX, f.current = p ? e.current?.scrollTop ?? 0 : e.current?.scrollLeft ?? 0, H.target.setPointerCapture(H.pointerId);
+  }, [p, e]), K = B((H) => {
+    if (!m.current) return;
+    const T = e.current;
+    if (!T) return;
+    const I = (p ? H.clientY : H.clientX) - u.current, X = R / (x - C), z = I * X;
+    p ? T.scrollTop = f.current + z : T.scrollLeft = f.current + z;
+  }, [p, R, x, C, e]), W = B(() => {
+    m.current = !1;
+  }, []);
+  return /* @__PURE__ */ a(g.div, { onPointerDown: k, onPointerMove: K, onPointerUp: W, style: [E.thumb, b] });
+}
+const Pe = {
+  Root: Gt,
+  Viewport: Yt,
+  Content: Ut,
+  Scrollbar: Kt,
+  Thumb: _t
+}, O = F.create({
+  root: {
+    position: "relative",
+    display: "inline-flex"
+  },
+  trigger: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: i.sm,
+    paddingTop: i.sm,
+    paddingBottom: i.sm,
+    paddingLeft: i.md,
+    paddingRight: i.md,
+    fontFamily: h.fontFamily,
+    fontSize: h.fontSizeSm,
+    color: o.text,
+    backgroundColor: o.bgCard,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: {
+      default: o.border,
+      ":hover": o.accent
+    },
+    borderRadius: D.sm,
+    cursor: "pointer",
+    transitionProperty: "border-color",
+    transitionDuration: "150ms"
+  },
+  value: {
+    color: o.text
+  },
+  placeholder: {
+    color: o.textMuted
+  },
+  icon: {
+    display: "flex",
+    alignItems: "center",
+    color: o.textMuted
+  },
+  backdrop: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 49
+  },
+  popup: {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    marginTop: i.xs,
+    backgroundColor: o.bgCard,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: o.border,
+    borderRadius: D.sm,
+    boxShadow: Q.md,
+    paddingTop: i.xs,
+    paddingBottom: i.xs,
+    minWidth: 120,
+    zIndex: 50
+  },
+  item: {
+    display: "flex",
+    alignItems: "center",
+    paddingTop: i.sm,
+    paddingBottom: i.sm,
+    paddingLeft: i.md,
+    paddingRight: i.md,
+    fontSize: h.fontSizeSm,
+    fontFamily: h.fontFamily,
+    color: o.text,
+    borderRadius: D.sm,
+    cursor: "pointer",
+    backgroundColor: "transparent",
+    transitionProperty: "background-color",
+    transitionDuration: "150ms"
+  },
+  itemSelected: {
+    color: o.accent,
+    fontWeight: h.fontWeightMedium
+  },
+  itemHighlighted: {
+    backgroundColor: o.bgCardHover
+  },
+  hidden: {
+    display: "none"
+  }
+}), yt = V(null);
+function rt() {
+  const t = $(yt);
+  if (!t) throw new Error("Select compound components must be used within Select.Root");
+  return t;
+}
+function lt(t, e, r) {
+  const [n, l] = M(e), s = t !== void 0 ? t : n, d = B((c) => {
+    t === void 0 && l(c), r?.(c);
+  }, [t, r]);
+  return [s, d];
+}
+function qt({
+  defaultValue: t,
+  value: e,
+  onValueChange: r
+}) {
+  const [n, l] = lt(e, t ?? null, r), [s, d] = M(!1), [c, m] = M({}), [u, f] = M(null), p = Y(), S = w(null), R = w(null), x = w(/* @__PURE__ */ new Map()), C = w([]), v = B(() => {
+    d(!1), f(null), R.current?.focus();
+  }, []), y = B(() => {
+    d((W) => {
+      if (W)
+        f(null);
+      else {
+        const H = x.current, T = C.current;
+        let I = null;
+        for (const X of T) {
+          const z = H.get(X);
+          if (z && z.value === n) {
+            I = X;
+            break;
+          }
+        }
+        f(I ?? (T.length > 0 ? T[0] : null));
+      }
+      return !W;
+    });
+  }, [n]), b = B((W, H) => {
+    m((T) => T[W] === H ? T : {
+      ...T,
+      [W]: H
+    });
+  }, []), k = B((W, H, T) => {
+    x.current.set(W, {
+      value: H,
+      element: T
+    });
+    const I = x.current, X = [...I.keys()];
+    return X.sort((z, j) => {
+      const at = I.get(z)?.element, ut = I.get(j)?.element;
+      return !at || !ut ? 0 : at.compareDocumentPosition(ut) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+    }), C.current = X, () => {
+      x.current.delete(W), C.current = C.current.filter((z) => z !== W);
+    };
+  }, []);
+  return L(() => {
+    const W = S.current;
+    if (!W || !s) return;
+    function H(T) {
+      const I = C.current, X = x.current;
+      if (I.length !== 0)
+        switch (T.key) {
+          case "ArrowDown": {
+            T.preventDefault(), f((z) => {
+              const j = z ? I.indexOf(z) : -1;
+              return I[(j + 1) % I.length];
+            });
+            break;
+          }
+          case "ArrowUp": {
+            T.preventDefault(), f((z) => {
+              const j = z ? I.indexOf(z) : 0;
+              return I[(j - 1 + I.length) % I.length];
+            });
+            break;
+          }
+          case "Home": {
+            T.preventDefault(), f(I[0]);
+            break;
+          }
+          case "End": {
+            T.preventDefault(), f(I[I.length - 1]);
+            break;
+          }
+          case "Enter":
+          case " ": {
+            T.preventDefault(), f((z) => {
+              if (z) {
+                const j = X.get(z);
+                j && (l(j.value), v());
+              }
+              return z;
+            });
+            break;
+          }
+          case "Escape":
+          case "Tab": {
+            v();
+            break;
+          }
+        }
+    }
+    return W.addEventListener("keydown", H), () => W.removeEventListener("keydown", H);
+  }, [s, v, l]), {
+    ctx: ht(() => ({
+      open: s,
+      toggle: y,
+      close: v,
+      value: n,
+      setValue: l,
+      labels: c,
+      registerLabel: b,
+      listboxId: p,
+      highlightedId: u,
+      setHighlightedId: f,
+      registerItem: k,
+      triggerRef: R
+    }), [s, y, v, n, l, c, b, p, u, f, k]),
+    rootRef: S
+  };
+}
+function Jt({
+  name: t,
+  defaultValue: e,
+  value: r,
+  onValueChange: n,
+  children: l
+}) {
+  const {
+    ctx: s,
+    rootRef: d
+  } = qt({
+    defaultValue: e,
+    value: r,
+    onValueChange: n
+  });
+  return /* @__PURE__ */ a(yt.Provider, { value: s, children: /* @__PURE__ */ U(g.div, { ref: d, style: O.root, children: [
+    t && /* @__PURE__ */ a(g.input, { type: "hidden", name: t, value: s.value ?? "" }),
+    l
+  ] }) });
+}
+function Qt({
+  children: t
+}) {
+  const {
+    open: e,
+    toggle: r,
+    listboxId: n,
+    highlightedId: l,
+    triggerRef: s
+  } = rt(), d = w(null);
+  return L(() => {
+    s.current = d.current;
+  }), /* @__PURE__ */ a(g.button, { ref: d, type: "button", role: "combobox", onClick: r, "aria-expanded": e, "aria-haspopup": "listbox", "aria-controls": e ? n : void 0, "aria-activedescendant": l ?? void 0, style: O.trigger, children: t });
+}
+function Zt({
+  placeholder: t
+}) {
+  const {
+    value: e,
+    labels: r
+  } = rt(), n = e ? r[e] ?? e : null;
+  return /* @__PURE__ */ a(g.span, { style: n ? O.value : O.placeholder, children: n ?? t });
+}
+function te({
+  children: t
+}) {
+  return /* @__PURE__ */ a(g.span, { style: O.icon, children: t ?? /* @__PURE__ */ a("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ a("path", { d: "M6 9l6 6 6-6" }) }) });
+}
+function ee({
+  children: t
+}) {
+  const {
+    open: e,
+    close: r,
+    listboxId: n
+  } = rt();
+  return /* @__PURE__ */ U(pt, { children: [
+    e && /* @__PURE__ */ a(g.div, { style: O.backdrop, onClick: r }),
+    /* @__PURE__ */ a(g.div, { id: n, role: "listbox", "aria-hidden": !e, style: [O.popup, !e && O.hidden], children: t })
+  ] });
+}
+function oe({
+  value: t,
+  children: e
+}) {
+  const {
+    value: r,
+    setValue: n,
+    close: l,
+    registerLabel: s,
+    highlightedId: d,
+    setHighlightedId: c,
+    registerItem: m
+  } = rt(), u = Y(), f = w(null), p = r === t, S = d === u;
+  L(() => {
+    const x = f.current;
+    if (!x) return;
+    const C = x.textContent;
+    C && s(t, C);
+  }, [t, s]), L(() => {
+    const x = f.current;
+    if (x)
+      return m(u, t, x);
+  }, [u, t, m]);
+  const R = () => {
+    n(t), l();
+  };
+  return /* @__PURE__ */ a(g.div, { ref: f, id: u, role: "option", "aria-selected": p, onClick: R, onPointerEnter: () => c(u), style: [O.item, p && O.itemSelected, S && O.itemHighlighted], children: e });
+}
+function re({
+  children: t
+}) {
+  return /* @__PURE__ */ a(g.span, { children: t });
+}
+const Me = {
+  Root: Jt,
+  Trigger: Qt,
+  Value: Zt,
+  Icon: te,
+  Popup: ee,
+  Item: oe,
+  ItemText: re
+}, G = F.create({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 0
+  },
+  group: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  groupTrigger: {
+    display: "flex",
+    alignItems: "center",
+    gap: i.xs,
+    paddingTop: i.sm,
+    paddingBottom: i.sm,
+    paddingLeft: i.md,
+    paddingRight: i.md,
+    fontFamily: h.fontFamily,
+    fontSize: h.fontSizeXs,
+    fontWeight: h.fontWeightSemibold,
+    textTransform: "uppercase",
+    letterSpacing: "0.05em",
+    color: {
+      default: o.textMuted,
+      ":hover": o.text
+    },
+    backgroundColor: "transparent",
+    borderWidth: 0,
+    cursor: "pointer",
+    transitionProperty: "color",
+    transitionDuration: "150ms",
+    transitionTimingFunction: "ease"
+  },
+  groupTriggerActive: {
+    color: o.text
+  },
+  chevron: {
+    display: "inline-flex",
+    alignItems: "center",
+    transitionProperty: "transform",
+    transitionDuration: "150ms",
+    transitionTimingFunction: "ease"
+  },
+  chevronOpen: {
+    transform: "rotate(90deg)"
+  },
+  item: {
+    display: "flex",
+    alignItems: "center",
+    paddingTop: "6px",
+    paddingBottom: "6px",
+    paddingLeft: i.lg,
+    paddingRight: i.md,
+    fontFamily: h.fontFamily,
+    fontSize: h.fontSizeSm,
+    fontWeight: h.fontWeightNormal,
+    color: {
+      default: o.textMuted,
+      ":hover": o.text
+    },
+    backgroundColor: {
+      default: "transparent",
+      ":hover": o.bgCardHover
+    },
+    borderWidth: 0,
+    borderRadius: D.sm,
+    cursor: "pointer",
+    transitionProperty: "color, background-color",
+    transitionDuration: "150ms",
+    transitionTimingFunction: "ease",
+    textAlign: "left",
+    outlineWidth: {
+      default: 0,
+      ":focus-visible": 2
+    },
+    outlineStyle: {
+      default: "none",
+      ":focus-visible": "solid"
+    },
+    outlineColor: {
+      default: "transparent",
+      ":focus-visible": o.accent
+    }
+  },
+  itemActive: {
+    color: o.accent,
+    fontWeight: h.fontWeightMedium
+  }
+}), Ct = V(null);
+function St() {
+  const t = $(Ct);
+  if (!t) throw new Error("SideNav compound components must be used within SideNav.Root");
+  return t;
+}
+function ne({
+  children: t,
+  value: e,
+  defaultValue: r,
+  onValueChange: n
+}) {
+  const [l, s] = lt(e, r ?? null, n ? (p) => {
+    p !== null && n(p);
+  } : void 0), [d, c] = M(/* @__PURE__ */ new Set()), m = w([]), u = B((p) => {
+    c((S) => {
+      const R = new Set(S);
+      return R.has(p) ? R.delete(p) : R.add(p), R;
+    });
+  }, []), f = B((p) => (m.current.includes(p) || m.current.push(p), () => {
+    m.current = m.current.filter((S) => S !== p);
+  }), []);
+  return L(() => {
+    l && c((p) => p);
+  }, [l]), /* @__PURE__ */ a(Ct.Provider, { value: {
+    activeValue: l,
+    onSelect: s,
+    expandedGroups: d,
+    toggleGroup: u,
+    registerItem: f,
+    orderRef: m
+  }, children: /* @__PURE__ */ a(g.nav, { role: "navigation", style: G.root, children: t }) });
+}
+function ie({
+  children: t,
+  label: e,
+  groupKey: r,
+  defaultExpanded: n
+}) {
+  const l = r ?? e, {
+    expandedGroups: s,
+    toggleGroup: d,
+    activeValue: c
+  } = St(), m = s.has(l), u = w(null);
+  L(() => {
+    if (!c || s.has(l)) return;
+    const p = u.current;
+    if (!p) return;
+    p.querySelector(`[data-nav-value="${c}"]`) && d(l);
+  }, [c, l, s, d]), L(() => {
+    n && !s.has(l) && d(l);
+  }, []);
+  const f = !c || !u.current ? !1 : !!u.current.querySelector(`[data-nav-value="${c}"]`);
+  return /* @__PURE__ */ U(g.div, { ref: u, style: G.group, children: [
+    /* @__PURE__ */ U(g.button, { type: "button", onClick: () => d(l), style: [G.groupTrigger, f && G.groupTriggerActive], "aria-expanded": m, children: [
+      /* @__PURE__ */ a(g.span, { style: [G.chevron, m && G.chevronOpen], children: /* @__PURE__ */ a("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ a("path", { d: "M9 18l6-6-6-6" }) }) }),
+      e
+    ] }),
+    m && t
+  ] });
+}
+function le({
+  value: t,
+  children: e
+}) {
+  const {
+    activeValue: r,
+    onSelect: n,
+    registerItem: l
+  } = St(), s = r === t;
+  return L(() => l(t), [t, l]), /* @__PURE__ */ a(g.button, { type: "button", "data-nav-value": t, onClick: () => n(t), style: [G.item, s && G.itemActive], "aria-current": s ? "page" : void 0, children: e });
+}
+const Fe = {
+  Root: ne,
+  Group: ie,
+  Item: le
+}, P = F.create({
+  // Root
+  root: {
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: o.border,
+    borderRadius: D.md,
+    overflow: "hidden",
+    backgroundColor: o.bgCard,
+    fontFamily: h.fontFamily,
+    color: o.text
+  },
+  // Header group
+  header: {
+    backgroundColor: o.bgCard
+  },
+  // Row
+  row: {
+    display: "grid",
+    borderBottomWidth: 1,
+    borderBottomStyle: "solid",
+    borderBottomColor: o.border
+  },
+  rowLastChild: {
+    borderBottomWidth: 0
+  },
+  bodyRow: {
+    backgroundColor: {
+      default: "transparent",
+      ":hover": o.bgCardHover
+    },
+    transitionProperty: "background-color",
+    transitionDuration: "150ms",
+    transitionTimingFunction: "ease"
+  },
+  // Header cell
+  headerCell: {
+    fontWeight: h.fontWeightSemibold,
+    color: o.textMuted,
+    textAlign: "start"
+  },
+  // Body cell
+  cell: {
+    color: o.text,
+    display: "flex",
+    alignItems: "center"
+  },
+  // Size: sm
+  cellSm: {
+    paddingTop: i.xs,
+    paddingBottom: i.xs,
+    paddingLeft: i.sm,
+    paddingRight: i.sm,
+    fontSize: h.fontSizeXs
+  },
+  // Size: md
+  cellMd: {
+    paddingTop: i.sm,
+    paddingBottom: i.sm,
+    paddingLeft: i.md,
+    paddingRight: i.md,
+    fontSize: h.fontSizeSm
+  },
+  // Variant: striped (even body rows)
+  stripedEven: {
+    backgroundColor: {
+      default: o.bgCardHover,
+      ":hover": o.bgCardHover
+    }
+  },
+  // Variant: bordered (cells get side borders)
+  borderedCell: {
+    borderRightWidth: 1,
+    borderRightStyle: "solid",
+    borderRightColor: o.border
+  },
+  borderedCellLast: {
+    borderRightWidth: 0
+  },
+  // Dynamic styles — simple identifier params only (StyleX constraint)
+  gridColumns: (t) => ({
+    gridTemplateColumns: `repeat(${t}, 1fr)`
+  })
+}), wt = V(null);
+function nt() {
+  const t = $(wt);
+  if (!t) throw new Error("Table compound components must be used within Table.Root");
+  return t;
+}
+const st = V(!1);
+function se({
+  children: t,
+  variant: e = "default",
+  size: r = "md",
+  columns: n
+}) {
+  return /* @__PURE__ */ a(wt.Provider, { value: {
+    variant: e,
+    size: r,
+    columns: n,
+    isHeader: !1
+  }, children: /* @__PURE__ */ a(g.div, { role: "table", style: P.root, children: t }) });
+}
+function de({
+  children: t
+}) {
+  return /* @__PURE__ */ a(st.Provider, { value: !0, children: /* @__PURE__ */ a(g.div, { role: "rowgroup", style: P.header, children: t }) });
+}
+function ce({
+  children: t
+}) {
+  const {
+    variant: e
+  } = nt(), r = mt.toArray(t);
+  return /* @__PURE__ */ a(st.Provider, { value: !1, children: /* @__PURE__ */ a(g.div, { role: "rowgroup", children: r.map((n, l) => e === "striped" ? /* @__PURE__ */ a(Rt.Provider, { value: l, children: n }, l) : n) }) });
+}
+const Rt = V(-1);
+function ae({
+  children: t
+}) {
+  const {
+    variant: e,
+    columns: r
+  } = nt(), n = $(st), l = $(Rt), s = l >= 0 && l % 2 === 1, d = mt.toArray(t);
+  return /* @__PURE__ */ a(g.div, { role: "row", style: [P.row, P.gridColumns(r), !n && P.bodyRow, !n && e === "striped" && s && P.stripedEven], children: e === "bordered" ? d.map((c, m) => /* @__PURE__ */ a(dt.Provider, { value: {
+    index: m,
+    total: d.length
+  }, children: c }, m)) : t });
+}
+const dt = V({
+  index: 0,
+  total: 0
+});
+function ue({
+  children: t
+}) {
+  const {
+    size: e,
+    variant: r
+  } = nt(), {
+    index: n,
+    total: l
+  } = $(dt), s = r === "bordered" && n === l - 1;
+  return /* @__PURE__ */ a(g.div, { role: "columnheader", style: [P.headerCell, e === "sm" ? P.cellSm : P.cellMd, r === "bordered" && P.borderedCell, s && P.borderedCellLast], children: t });
+}
+function fe({
+  children: t
+}) {
+  const {
+    size: e,
+    variant: r
+  } = nt(), {
+    index: n,
+    total: l
+  } = $(dt), s = r === "bordered" && n === l - 1;
+  return /* @__PURE__ */ a(g.div, { role: "cell", style: [P.cell, e === "sm" ? P.cellSm : P.cellMd, r === "bordered" && P.borderedCell, s && P.borderedCellLast], children: t });
+}
+const Ee = {
+  Root: se,
+  Header: de,
+  Body: ce,
+  Row: ae,
+  HeaderCell: ue,
+  Cell: fe
+}, A = F.create({
+  root: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  rootVertical: {
+    flexDirection: "row"
+  },
+  list: {
+    display: "flex",
+    flexDirection: "row",
+    borderBottomWidth: 1,
+    borderBottomStyle: "solid",
+    borderBottomColor: o.border,
+    gap: i.xs
+  },
+  listVertical: {
+    flexDirection: "column",
+    borderBottomWidth: 0,
+    borderRightWidth: 1,
+    borderRightStyle: "solid",
+    borderRightColor: o.border,
+    gap: 0
+  },
+  tab: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingTop: i.sm,
+    paddingBottom: i.sm,
+    paddingLeft: i.md,
+    paddingRight: i.md,
+    fontFamily: h.fontFamily,
+    fontSize: h.fontSizeSm,
+    fontWeight: h.fontWeightMedium,
+    color: {
+      default: o.textMuted,
+      ":hover": o.text
+    },
+    backgroundColor: "transparent",
+    borderWidth: 0,
+    borderBottomWidth: 2,
+    borderBottomStyle: "solid",
+    borderBottomColor: "transparent",
+    cursor: "pointer",
+    transitionProperty: "color, border-color",
+    transitionDuration: "150ms",
+    transitionTimingFunction: "ease",
+    outlineWidth: {
+      default: 0,
+      ":focus-visible": 2
+    },
+    outlineStyle: {
+      default: "none",
+      ":focus-visible": "solid"
+    },
+    outlineColor: {
+      default: "transparent",
+      ":focus-visible": o.accent
+    },
+    outlineOffset: {
+      default: 0,
+      ":focus-visible": -2
+    }
+  },
+  tabVertical: {
+    justifyContent: "flex-start",
+    borderBottomWidth: 0,
+    borderRightWidth: 2,
+    borderRightStyle: "solid",
+    borderRightColor: "transparent"
+  },
+  tabActiveHorizontal: {
+    color: o.text,
+    borderBottomColor: o.accent
+  },
+  tabActiveVertical: {
+    color: o.text,
+    borderRightColor: o.accent
+  },
+  tabDisabled: {
+    opacity: 0.5,
+    cursor: "not-allowed",
+    color: o.textMuted
+  },
+  panel: {
+    paddingTop: i.md
+  },
+  panelVertical: {
+    paddingTop: 0,
+    paddingLeft: i.md
+  }
+}), kt = V(null);
+function ct() {
+  const t = $(kt);
+  if (!t) throw new Error("Tabs compound components must be used within Tabs.Root");
+  return t;
+}
+function ge({
+  value: t,
+  defaultValue: e,
+  onValueChange: r,
+  orientation: n = "horizontal"
+}) {
+  const [l, s] = lt(t, e ?? null, r ? (u) => {
+    u !== null && r(u);
+  } : void 0), d = w(/* @__PURE__ */ new Map()), c = w([]), m = B((u, f) => (d.current.set(u, f), c.current.includes(u) || c.current.push(u), () => {
+    d.current.delete(u), c.current = c.current.filter((p) => p !== u);
+  }), []);
+  return {
+    activeValue: l,
+    onSelect: s,
+    orientation: n,
+    registerTab: m,
+    tabsRef: d,
+    orderRef: c
+  };
+}
+function pe({
+  children: t,
+  value: e,
+  defaultValue: r,
+  onValueChange: n,
+  orientation: l = "horizontal"
+}) {
+  const s = ge({
+    value: e,
+    defaultValue: r,
+    onValueChange: n,
+    orientation: l
+  });
+  return /* @__PURE__ */ a(kt.Provider, { value: s, children: /* @__PURE__ */ a(g.div, { style: [A.root, l === "vertical" && A.rootVertical], children: t }) });
+}
+function he({
+  children: t
+}) {
+  const {
+    orientation: e,
+    activeValue: r,
+    onSelect: n,
+    tabsRef: l,
+    orderRef: s
+  } = ct(), d = w(null);
+  return L(() => {
+    const c = d.current;
+    if (!c) return;
+    function m(u) {
+      const f = s.current, p = l.current;
+      if (f.length === 0) return;
+      const S = this, R = e === "horizontal" ? "ArrowLeft" : "ArrowUp", x = e === "horizontal" ? "ArrowRight" : "ArrowDown";
+      let C = null;
+      switch (u.key) {
+        case x: {
+          u.preventDefault();
+          const v = r ? f.indexOf(r) : -1;
+          for (let y = 1; y <= f.length; y++) {
+            const b = (v + y) % f.length, k = f[b];
+            if (!p.get(k)) {
+              C = k;
+              break;
+            }
+          }
+          break;
+        }
+        case R: {
+          u.preventDefault();
+          const v = r ? f.indexOf(r) : 0;
+          for (let y = 1; y <= f.length; y++) {
+            const b = (v - y + f.length) % f.length, k = f[b];
+            if (!p.get(k)) {
+              C = k;
+              break;
+            }
+          }
+          break;
+        }
+        case "Home": {
+          u.preventDefault();
+          for (const v of f)
+            if (!p.get(v)) {
+              C = v;
+              break;
+            }
+          break;
+        }
+        case "End": {
+          u.preventDefault();
+          for (let v = f.length - 1; v >= 0; v--)
+            if (!p.get(f[v])) {
+              C = f[v];
+              break;
+            }
+          break;
+        }
+      }
+      C && (n(C), S.querySelector(`[data-tab-value="${C}"]`)?.focus());
+    }
+    return c.addEventListener("keydown", m), () => c.removeEventListener("keydown", m);
+  }, [e, r, n, l, s]), /* @__PURE__ */ a(g.div, { ref: d, role: "tablist", "aria-orientation": e, style: [A.list, e === "vertical" && A.listVertical], children: t });
+}
+function me({
+  value: t,
+  disabled: e = !1,
+  children: r
+}) {
+  const {
+    activeValue: n,
+    onSelect: l,
+    orientation: s,
+    registerTab: d
+  } = ct(), c = n === t, m = Y(), u = `${m}-panel`;
+  L(() => d(t, e), [t, e, d]);
+  const f = () => {
+    e || l(t);
+  };
+  return /* @__PURE__ */ a(g.button, { type: "button", role: "tab", id: m, "aria-selected": c, "aria-controls": u, "aria-disabled": e || void 0, "data-tab-value": t, tabIndex: c ? 0 : -1, onClick: f, style: [A.tab, s === "vertical" && A.tabVertical, c && (s === "vertical" ? A.tabActiveVertical : A.tabActiveHorizontal), e && A.tabDisabled], children: r });
+}
+function be({
+  value: t,
+  children: e
+}) {
+  const {
+    activeValue: r,
+    orientation: n
+  } = ct();
+  return r !== t ? null : /* @__PURE__ */ a(g.div, { role: "tabpanel", style: [A.panel, n === "vertical" && A.panelVertical], children: e });
+}
+const $e = {
+  Root: pe,
+  List: he,
+  Tab: me,
+  Panel: be
+}, ve = {
+  light: [Wt, Ht],
+  "high-contrast": [It, zt]
+}, xe = F.create({
+  root: {
+    display: "contents"
+  }
+});
+function Ae({
+  theme: t = "dark",
+  children: e
+}) {
+  const r = ve[t], n = [r?.[0], r?.[1], xe.root];
+  return /* @__PURE__ */ a(g.div, { style: n, children: e });
+}
+const it = F.create({
+  root: {
+    position: "relative",
+    display: "inline-flex"
+  },
+  popup: {
+    position: "absolute",
+    zIndex: 50,
+    paddingTop: i.xs,
+    paddingBottom: i.xs,
+    paddingLeft: i.sm,
+    paddingRight: i.sm,
+    backgroundColor: o.bgCard,
+    color: o.text,
+    fontFamily: h.fontFamily,
+    fontSize: h.fontSizeXs,
+    lineHeight: h.lineHeight,
+    borderRadius: D.sm,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: o.border,
+    boxShadow: Q.md,
+    whiteSpace: "nowrap",
+    pointerEvents: "none"
+  },
+  top: {
+    bottom: "100%",
+    left: "50%",
+    transform: "translateX(-50%)",
+    marginBottom: i.xs
+  },
+  bottom: {
+    top: "100%",
+    left: "50%",
+    transform: "translateX(-50%)",
+    marginTop: i.xs
+  },
+  left: {
+    right: "100%",
+    top: "50%",
+    transform: "translateY(-50%)",
+    marginRight: i.xs
+  },
+  right: {
+    left: "100%",
+    top: "50%",
+    transform: "translateY(-50%)",
+    marginLeft: i.xs
+  }
+}), Tt = V(null);
+function ye() {
+  const t = $(Tt);
+  if (!t) throw new Error("Tooltip compound components must be used within Tooltip.Root");
+  return t;
+}
+function Ce({
+  children: t,
+  content: e,
+  placement: r = "top",
+  delay: n = 300
+}) {
+  const [l, s] = M(!1), d = Y(), c = w(null), m = B(() => {
+    c.current && clearTimeout(c.current), c.current = setTimeout(() => s(!0), n);
+  }, [n]), u = B(() => {
+    c.current && clearTimeout(c.current), c.current = null, s(!1);
+  }, []);
+  return /* @__PURE__ */ a(Tt.Provider, { value: {
+    open: l,
+    show: m,
+    hide: u,
+    tooltipId: d,
+    placement: r
+  }, children: /* @__PURE__ */ U(g.div, { style: it.root, children: [
+    t,
+    l && /* @__PURE__ */ a(g.div, { id: d, role: "tooltip", style: [it.popup, it[r]], children: e })
+  ] }) });
+}
+function Se({
+  children: t
+}) {
+  const {
+    open: e,
+    show: r,
+    hide: n,
+    tooltipId: l
+  } = ye();
+  return /* @__PURE__ */ a(g.div, { onPointerEnter: r, onPointerLeave: n, onFocus: r, onBlur: n, "aria-describedby": e ? l : void 0, children: t });
+}
+const Oe = {
+  Root: Ce,
+  Trigger: Se
+};
+export {
+  Ie as Alert,
+  ze as Badge,
+  We as Button,
+  He as Card,
+  De as Field,
+  Be as Input,
+  Le as Menu,
+  Pe as ScrollArea,
+  Me as Select,
+  Fe as SideNav,
+  Ee as Table,
+  $e as Tabs,
+  Ae as ThemeProvider,
+  Oe as Tooltip,
+  Xe as colors,
+  je as highContrastShadows,
+  Ge as highContrastTheme,
+  Ye as lightShadows,
+  Ue as lightTheme,
+  Ke as radii,
+  _e as shadows,
+  qe as spacing,
+  Je as typography
+};
+//# sourceMappingURL=index.js.map