react-sxo 0.0.0

package/dist/index.js

@@ -0,0 +1,1000 @@
+import { resolveToken as W, useAccordion as X, useCheckbox as U, useDialog as F, useDraggable as K, useMenu as q, useRadioGroup as J, useSelect as Q, useToggle as Y, useTabs as Z, useTooltip as _, defaultTokens as ee } from "@sxo/design";
+export * from "@sxo/design";
+import { jsx as a, jsxs as k } from "react/jsx-runtime";
+import { getAccordionClasses as te, getAvatarClasses as se, getBadgeClasses as ne, getButtonClasses as oe, getCardClasses as re, getCheckboxClasses as le, getDialogClasses as ie, getDropdownClasses as S, getInputClasses as ae, getMenuClasses as ce, getPaginationClasses as de, getRadioClasses as ue, getSelectClasses as A, getSliderClasses as me, getSwitchClasses as pe, getTabsClasses as fe, getTagClasses as ge, getTooltipClasses as he } from "@sxo/ui";
+import y, { createContext as j, useContext as E, useMemo as M, useEffect as C, useState as N, useCallback as O, useRef as D } from "react";
+import { Icons as ve } from "@sxo/component-icons";
+import { useTable as $e } from "@sxo/component-table";
+import { StyleEngine as xe } from "@sxo/engine";
+const R = j(void 0);
+function V() {
+  const s = E(R);
+  if (!s)
+    throw new Error("useSxo must be used within a SxoProvider");
+  return s;
+}
+function $(s) {
+  const { engine: o } = V(), t = M(() => {
+    const e = s.split(/\s+/).filter(Boolean);
+    return o.generateSheet(e);
+  }, [s, o]);
+  return C(() => {
+    if (t) {
+      let e = document.getElementById("sxo-engine");
+      e || (e = document.createElement("style"), e.id = "sxo-engine", document.head.appendChild(e)), e.innerHTML.includes(t) || (e.innerHTML += t);
+    }
+  }, [t]), s;
+}
+function Ce(s) {
+  const { tokens: o } = V();
+  return M(() => W(o, s), [o, s]);
+}
+function Ee() {
+  const { tokens: s } = V(), [o, t] = N("xs"), e = O(() => {
+    const n = window.innerWidth, r = Object.entries(s.breakpoints).sort(
+      (l, d) => parseInt(d[1]) - parseInt(l[1])
+    );
+    for (const [l, d] of r)
+      if (n >= parseInt(d)) {
+        t(l);
+        return;
+      }
+    t("xs");
+  }, [s.breakpoints]);
+  return C(() => (e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e)), [e]), o;
+}
+const z = j(null), Ie = ({
+  children: s,
+  allowMultiple: o = !1,
+  defaultExpanded: t = [],
+  variant: e = "bordered",
+  className: n = ""
+}) => {
+  const [r, l] = N(t), d = (p) => {
+    l((m) => m.includes(p) ? m.filter((f) => f !== p) : o ? [...m, p] : [p]);
+  }, { getItemProps: u } = X({ allowMultiple: o, defaultExpanded: t }), i = te({ variant: e });
+  return $(
+    [
+      i.root,
+      i.trigger,
+      i.triggerText,
+      i.panel,
+      i.item(!0),
+      i.item(!1),
+      i.icon(!0),
+      i.icon(!1),
+      n
+    ].filter(Boolean).join(" ")
+  ), /* @__PURE__ */ a(z.Provider, { value: { expandedItems: r, toggleItem: d, getItemProps: u, styles: i }, children: /* @__PURE__ */ a("div", { className: `${i.root} ${n}`.trim(), children: s }) });
+}, Be = ({ value: s, title: o, children: t, className: e = "" }) => {
+  const n = E(z);
+  if (!n) throw new Error("AccordionItem must be used within Accordion");
+  const r = n.expandedItems.includes(s), { triggerProps: l, panelProps: d } = n.getItemProps(s, n.toggleItem);
+  return /* @__PURE__ */ k("div", { className: `${n.styles.item(r)} ${e}`.trim(), children: [
+    /* @__PURE__ */ k("button", { ...l, className: n.styles.trigger, children: [
+      /* @__PURE__ */ a("span", { className: n.styles.triggerText, children: o }),
+      /* @__PURE__ */ a(
+        "svg",
+        {
+          className: n.styles.icon(r),
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ a("path", { d: "m6 9 6 6 6-6" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a("div", { ...d, className: n.styles.panel, children: t })
+  ] });
+}, je = ({
+  src: s,
+  alt: o,
+  fallback: t,
+  size: e = "md",
+  shape: n = "circle",
+  className: r = ""
+}) => {
+  const l = se({ size: e, shape: n });
+  return $([l.root, l.image, l.fallback, r].filter(Boolean).join(" ")), /* @__PURE__ */ a("div", { className: `${l.root} ${r}`.trim(), children: s ? /* @__PURE__ */ a("img", { src: s, alt: o, className: l.image }) : /* @__PURE__ */ a("span", { className: l.fallback, children: t || (o == null ? void 0 : o.charAt(0)) || "?" }) });
+}, Le = ({
+  variant: s = "primary",
+  className: o = "",
+  children: t,
+  ...e
+}) => {
+  const n = ne({ variant: s }), r = $(`${n} ${o}`.trim());
+  return /* @__PURE__ */ a("span", { className: r, ...e, children: t });
+}, Me = ({
+  as: s = "div",
+  className: o = "",
+  children: t,
+  ...e
+}) => {
+  const n = {
+    p: "p",
+    padding: "p",
+    m: "m",
+    margin: "m",
+    bg: "bg",
+    text: "text",
+    rounded: "rounded",
+    shadow: "shadow",
+    w: "w",
+    h: "h",
+    display: "",
+    flex: "flex",
+    grid: "grid"
+  }, r = [o], l = {};
+  for (const [u, i] of Object.entries(e))
+    if (u in n) {
+      const p = n[u];
+      p ? r.push(`${p}-${i}`) : r.push(String(i));
+    } else
+      l[u] = i;
+  const d = $(r.filter(Boolean).join(" "));
+  return y.createElement(
+    s,
+    {
+      className: d,
+      ...l
+    },
+    t
+  );
+}, Ve = ({
+  variant: s,
+  size: o,
+  disabled: t,
+  rounded: e,
+  className: n,
+  children: r,
+  ...l
+}) => {
+  const d = oe({ variant: s, size: o, disabled: t, rounded: e }), u = $(`${d} ${n || ""}`);
+  return y.createElement(
+    "button",
+    {
+      className: u,
+      disabled: t,
+      ...l
+    },
+    r
+  );
+}, Se = ({
+  variant: s,
+  padding: o,
+  interactive: t,
+  rounded: e,
+  className: n,
+  children: r,
+  ...l
+}) => {
+  const d = re({ variant: s, padding: o, interactive: t, rounded: e }), u = $(`${d} ${n || ""}`);
+  return y.createElement(
+    "div",
+    {
+      className: u,
+      ...l
+    },
+    r
+  );
+}, G = j(
+  null
+), Ae = ({
+  value: s,
+  defaultValue: o = [],
+  onChange: t,
+  direction: e = "col",
+  gap: n = 2,
+  size: r = "md",
+  color: l = "primary",
+  children: d,
+  className: u = ""
+}) => {
+  const [i, p] = N(o), m = s !== void 0, f = m ? s : i, g = (h) => {
+    const c = f.includes(h) ? f.filter((v) => v !== h) : [...f, h];
+    m || p(c), t == null || t(c);
+  };
+  return /* @__PURE__ */ a(
+    G.Provider,
+    {
+      value: { value: f, toggleValue: g, size: r, color: l },
+      children: /* @__PURE__ */ a("div", { className: `flex flex-${e} gap-${n} ${u}`.trim(), children: d })
+    }
+  );
+}, Oe = ({
+  checked: s,
+  defaultChecked: o = !1,
+  value: t,
+  disabled: e = !1,
+  onChange: n,
+  size: r,
+  color: l,
+  children: d,
+  className: u = ""
+}) => {
+  const i = E(G), [p, m] = N(o), f = s !== void 0, g = i ? i.value.includes(t) : f ? s : p, h = r || (i == null ? void 0 : i.size) || "md", c = l || (i == null ? void 0 : i.color) || "primary", { getInputProps: v, getLabelProps: w } = U({
+    defaultChecked: g,
+    disabled: e
+  }), x = le(g, {
+    size: h,
+    color: c,
+    disabled: e
+  });
+  $([x.root, x.icon, u].filter(Boolean).join(" "));
+  const b = () => {
+    if (e) return;
+    const P = !g;
+    i && t !== void 0 ? i.toggleValue(t) : f || m(P), n == null || n(P);
+  };
+  return /* @__PURE__ */ k(
+    "label",
+    {
+      ...w(),
+      className: `inline-flex items-center gap-2 cursor-pointer ${e ? "opacity-50 cursor-not-allowed" : ""} ${u}`.trim(),
+      children: [
+        /* @__PURE__ */ k("div", { className: x.root, onClick: b, children: [
+          /* @__PURE__ */ a("input", { ...v(), className: "sr-only", readOnly: !0 }),
+          /* @__PURE__ */ a(
+            "svg",
+            {
+              className: x.icon,
+              width: "12",
+              height: "12",
+              viewBox: "0 0 12 12",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ a("polyline", { points: "2 6 5 9 10 3" })
+            }
+          )
+        ] }),
+        d && /* @__PURE__ */ a("span", { className: "text-sm select-none", children: d })
+      ]
+    }
+  );
+}, De = ({
+  isOpen: s,
+  onClose: o,
+  title: t,
+  description: e,
+  children: n,
+  footer: r,
+  size: l,
+  isCentered: d,
+  isDraggable: u = !1
+}) => {
+  const [i, p] = N({ x: 0, y: 0 }), { getDialogProps: m, getOverlayProps: f, getCloseButtonProps: g } = F({
+    isOpen: s,
+    onClose: o
+  }), { getDragProps: h } = K({
+    onDrag: (v) => {
+      p({ x: v.x, y: v.y });
+    }
+  }), c = ie({ size: l, isCentered: d });
+  return $(Object.values(c).join(" ")), s ? y.createElement("div", { className: c.container }, [
+    // 遮罩层
+    y.createElement("div", {
+      key: "overlay",
+      ...f(),
+      className: c.overlay
+    }),
+    // 内容层
+    y.createElement(
+      "div",
+      {
+        key: "content",
+        ...m(),
+        className: c.content,
+        style: {
+          transform: `translate(${i.x}px, ${i.y}px)`
+        }
+      },
+      [
+        // 关闭按钮
+        y.createElement(
+          "button",
+          {
+            key: "close",
+            ...g(),
+            className: c.closeButton
+          },
+          "✕"
+        ),
+        // 头部
+        y.createElement(
+          "div",
+          {
+            key: "header",
+            className: c.header,
+            ...u ? h() : {}
+          },
+          [
+            t && y.createElement(
+              "h2",
+              { key: "title", className: c.title },
+              t
+            ),
+            e && y.createElement(
+              "p",
+              { key: "desc", className: c.description },
+              e
+            )
+          ]
+        ),
+        // 内容
+        y.createElement("div", { key: "body", className: "dialog-body" }, n),
+        // 底部
+        r && y.createElement("div", { key: "footer", className: c.footer }, r)
+      ]
+    )
+  ]) : null;
+}, Re = ({
+  disabled: s = !1,
+  active: o = !1,
+  divider: t = !1,
+  header: e = "",
+  children: n,
+  className: r = "",
+  onClick: l
+}) => {
+  const d = S();
+  return t ? /* @__PURE__ */ a("div", { className: d.divider }) : e ? /* @__PURE__ */ a("div", { className: d.header, children: e }) : /* @__PURE__ */ a(
+    "div",
+    {
+      className: [
+        d.item,
+        o && d.itemActive,
+        s && d.itemDisabled,
+        r
+      ].filter(Boolean).join(" "),
+      onClick: (u) => {
+        s || l == null || l(u);
+      },
+      children: n
+    }
+  );
+}, ze = ({
+  trigger: s = "click",
+  placement: o = "bottom-left",
+  overlay: t,
+  children: e,
+  className: n = ""
+}) => {
+  const [r, l] = N(!1), d = D(null), u = S({ placement: o });
+  $(
+    [
+      u.container,
+      u.menu,
+      u.item,
+      u.itemActive,
+      u.itemDisabled,
+      u.divider,
+      u.header,
+      n
+    ].filter(Boolean).join(" ")
+  );
+  const i = () => l((g) => !g), p = () => l(!0), m = () => l(!1);
+  C(() => {
+    if (s === "click") {
+      const g = (h) => {
+        d.current && !d.current.contains(h.target) && m();
+      };
+      return window.addEventListener("click", g), () => window.removeEventListener("click", g);
+    }
+  }, [s]);
+  const f = {};
+  return s === "hover" ? (f.onMouseEnter = p, f.onMouseLeave = m) : f.onClick = (g) => {
+    g.stopPropagation(), i();
+  }, /* @__PURE__ */ k(
+    "div",
+    {
+      ref: d,
+      className: `${u.container} ${n}`.trim(),
+      ...f,
+      children: [
+        e,
+        r && /* @__PURE__ */ a("div", { className: u.menu, onClick: (g) => g.stopPropagation(), children: t })
+      ]
+    }
+  );
+}, Ge = ({
+  name: s,
+  size: o = "1em",
+  color: t = "currentColor",
+  strokeWidth: e = 2,
+  className: n = "",
+  style: r
+}) => {
+  const l = ve[s];
+  return $(n), /* @__PURE__ */ a(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: o,
+      height: o,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: t,
+      strokeWidth: e,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: n,
+      style: { display: "inline-block", verticalAlign: "middle", ...r },
+      children: /* @__PURE__ */ a("path", { d: l })
+    }
+  );
+}, He = ({
+  variant: s = "outline",
+  size: o = "md",
+  invalid: t = !1,
+  className: e = "",
+  ...n
+}) => {
+  const r = ae({ variant: s, size: o, invalid: t }), l = $(`${r} ${e}`.trim());
+  return /* @__PURE__ */ a("input", { className: l, ...n });
+};
+function T(s, o) {
+  if (s === void 0) return [];
+  if (typeof s != "object" || Array.isArray(s))
+    return [`${o}-${s}`];
+  const t = [], e = s;
+  return e.base !== void 0 && t.push(`${o}-${e.base}`), e.sm !== void 0 && t.push(`sm:${o}-${e.sm}`), e.md !== void 0 && t.push(`md:${o}-${e.md}`), e.lg !== void 0 && t.push(`lg:${o}-${e.lg}`), e.xl !== void 0 && t.push(`xl:${o}-${e.xl}`), e["2xl"] !== void 0 && t.push(`2xl:${o}-${e["2xl"]}`), t;
+}
+const We = ({
+  direction: s = "col",
+  gap: o = 4,
+  align: t = "stretch",
+  justify: e = "start",
+  wrap: n = !1,
+  className: r = "",
+  children: l,
+  ...d
+}) => {
+  const u = [
+    "flex",
+    ...T(s, "flex"),
+    ...T(o, "gap"),
+    ...T(t, "items"),
+    ...T(e, "justify"),
+    ...typeof n == "boolean" ? [n ? "flex-wrap" : "flex-nowrap"] : T(n, "flex").map(
+      (i) => i.includes("true") ? i.replace("-true", "-wrap") : i.replace("-false", "-nowrap")
+    ),
+    r
+  ].filter(Boolean).join(" ");
+  return $(u), /* @__PURE__ */ a("div", { className: u, ...d, children: l });
+}, Xe = ({
+  cols: s = 1,
+  rows: o,
+  gap: t = 4,
+  className: e = "",
+  children: n,
+  ...r
+}) => {
+  const l = [
+    "grid",
+    ...T(s, "grid-cols"),
+    ...T(o, "grid-rows"),
+    ...T(t, "gap"),
+    e
+  ].filter(Boolean).join(" ");
+  return $(l), /* @__PURE__ */ a("div", { className: l, ...r, children: n });
+}, Ue = ({
+  center: s = !0,
+  className: o = "",
+  children: t,
+  ...e
+}) => {
+  const n = ["container", s ? "mx-auto" : "", o].filter(Boolean).join(" ");
+  return $(n), /* @__PURE__ */ a("div", { className: n, ...e, children: t });
+}, Fe = ({
+  label: s,
+  items: o,
+  variant: t = "default",
+  className: e = ""
+}) => {
+  const [n, r] = N(!1), { getMenuProps: l, getItemProps: d, getButtonProps: u } = q({
+    isOpen: n,
+    id: "sxo-menu"
+  }), i = ce({ variant: t });
+  $(`${Object.values(i).join(" ")} ${e}`);
+  const p = () => r(!n);
+  return /* @__PURE__ */ k("div", { className: `${i.container} ${e}`.trim(), children: [
+    /* @__PURE__ */ a("button", { ...u(), className: i.button, onClick: p, children: s }),
+    n && /* @__PURE__ */ a("div", { ...l(), className: i.items, children: /* @__PURE__ */ a("div", { className: i.section, children: o.map((m) => /* @__PURE__ */ a(
+      "button",
+      {
+        ...d(m.id),
+        className: i.item,
+        onClick: () => {
+          var f;
+          (f = m.onClick) == null || f.call(m), r(!1);
+        },
+        children: m.label
+      },
+      m.id
+    )) }) })
+  ] });
+}, Ke = ({
+  total: s,
+  pageSize: o,
+  current: t,
+  onChange: e,
+  className: n = "",
+  size: r = "md",
+  variant: l = "outline",
+  rounded: d = !0,
+  showTotal: u = !1,
+  showJumper: i = !1
+}) => {
+  const p = Math.ceil(s / o), m = de({
+    size: r,
+    variant: l,
+    rounded: d
+  });
+  $(
+    `${m.container} ${m.item} ${m.active} ${m.disabled} ${m.ellipsis} ${n}`
+  );
+  const f = (c) => {
+    c < 1 || c > p || c === t || e == null || e(c);
+  }, g = (c) => /* @__PURE__ */ a(
+    "li",
+    {
+      className: `${m.item} ${t === c ? m.active : ""}`.trim(),
+      onClick: () => f(c),
+      children: c
+    },
+    c
+  ), h = () => {
+    const c = [];
+    if (c.push(
+      /* @__PURE__ */ a(
+        "li",
+        {
+          className: `${m.item} ${t === 1 ? m.disabled : ""}`.trim(),
+          onClick: () => f(t - 1),
+          children: "<"
+        },
+        "prev"
+      )
+    ), p <= 7)
+      for (let v = 1; v <= p; v++)
+        c.push(g(v));
+    else {
+      c.push(g(1)), t > 4 && c.push(
+        /* @__PURE__ */ a("li", { className: m.ellipsis, children: "..." }, "ellipsis-prev")
+      );
+      const v = Math.max(2, t - 2), w = Math.min(p - 1, t + 2);
+      for (let x = v; x <= w; x++)
+        c.push(g(x));
+      t < p - 3 && c.push(
+        /* @__PURE__ */ a("li", { className: m.ellipsis, children: "..." }, "ellipsis-next")
+      ), c.push(g(p));
+    }
+    return c.push(
+      /* @__PURE__ */ a(
+        "li",
+        {
+          className: `${m.item} ${t === p ? m.disabled : ""}`.trim(),
+          onClick: () => f(t + 1),
+          children: ">"
+        },
+        "next"
+      )
+    ), c;
+  };
+  return /* @__PURE__ */ k("nav", { className: `${m.container} ${n}`.trim(), children: [
+    u && /* @__PURE__ */ k("span", { className: m.total, children: [
+      "Total ",
+      s
+    ] }),
+    /* @__PURE__ */ a("ul", { className: "flex items-center gap-1 list-none p-0 m-0", children: h() }),
+    i && /* @__PURE__ */ k("div", { className: m.jumper, children: [
+      "Go to",
+      /* @__PURE__ */ a(
+        "input",
+        {
+          className: "w-12 h-8 px-2 border rounded text-center outline-none focus:border-primary-500",
+          type: "number",
+          onKeyUp: (c) => {
+            if (c.key === "Enter") {
+              const v = parseInt(c.target.value);
+              isNaN(v) || f(v);
+            }
+          }
+        }
+      )
+    ] })
+  ] });
+}, H = j(null), qe = ({
+  value: s,
+  defaultValue: o = "",
+  onChange: t,
+  name: e,
+  size: n = "md",
+  color: r = "primary",
+  children: l,
+  className: d = ""
+}) => {
+  const [u, i] = N(o), p = s !== void 0, m = p ? s : u, { value: f, setValue: g } = J({
+    defaultValue: m,
+    name: e
+  }), h = (c) => {
+    p || i(c), t == null || t(c);
+  };
+  return /* @__PURE__ */ a(
+    H.Provider,
+    {
+      value: { value: m, onChange: h, name: e, size: n, color: r },
+      children: /* @__PURE__ */ a("div", { className: `flex flex-col gap-2 ${d}`.trim(), children: l })
+    }
+  );
+}, Je = ({
+  value: s,
+  children: o,
+  className: t = "",
+  ...e
+}) => {
+  const n = E(H);
+  if (!n) throw new Error("Radio must be used within RadioGroup");
+  const r = n.value === s, l = e.size || n.size || "md", d = e.color || n.color || "primary", u = ue(r, { size: l, color: d });
+  return $([u.root, u.inner, t].filter(Boolean).join(" ")), /* @__PURE__ */ k("label", { className: `inline-flex items-center gap-2 cursor-pointer ${t}`.trim(), children: [
+    /* @__PURE__ */ k("div", { className: u.root, onClick: () => n.onChange(s), children: [
+      /* @__PURE__ */ a(
+        "input",
+        {
+          type: "radio",
+          name: n.name,
+          value: s,
+          checked: r,
+          className: "sr-only",
+          readOnly: !0
+        }
+      ),
+      /* @__PURE__ */ a("div", { className: u.inner })
+    ] }),
+    o && /* @__PURE__ */ a("span", { className: "text-sm select-none", children: o })
+  ] });
+}, Qe = ({
+  value: s,
+  defaultValue: o = "",
+  onChange: t,
+  placeholder: e = "Select an option",
+  size: n = "md",
+  disabled: r = !1,
+  children: l,
+  className: d = ""
+}) => {
+  const [u, i] = N(o), p = s !== void 0, m = p ? s : u, { isOpen: f, value: g, setValue: h, getTriggerProps: c, getListboxProps: v } = Q({
+    defaultValue: m,
+    disabled: r
+  }), w = A(f, { size: n, disabled: r });
+  $(`${w.trigger} ${w.listbox} ${w.option} ${d}`);
+  const x = (b) => {
+    r || (p || i(b), h(b), t == null || t(b));
+  };
+  return /* @__PURE__ */ k("div", { className: `relative inline-block w-full ${d}`.trim(), children: [
+    /* @__PURE__ */ k(
+      "div",
+      {
+        ...c(),
+        className: `${w.trigger} ${r ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`,
+        children: [
+          /* @__PURE__ */ a("span", { className: m ? "text-foreground" : "text-neutral-400", children: m || e }),
+          /* @__PURE__ */ a(
+            "svg",
+            {
+              className: `transition-transform duration-200 ${f ? "rotate-180" : ""}`,
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              children: /* @__PURE__ */ a("polyline", { points: "6 9 12 15 18 9" })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ a("div", { ...v(), className: w.listbox, children: y.Children.map(l, (b) => y.isValidElement(b) ? y.cloneElement(b, {
+      onSelect: x,
+      isSelected: m === b.props.value
+    }) : b) })
+  ] });
+}, Ye = ({
+  value: s,
+  children: o,
+  onSelect: t,
+  isSelected: e
+}) => {
+  const n = A(!1);
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: `${n.option} ${e ? "bg-primary/10 text-primary font-medium" : ""}`,
+      onClick: () => t == null ? void 0 : t(s),
+      children: o
+    }
+  );
+}, Ze = ({
+  value: s,
+  defaultValue: o = 0,
+  min: t = 0,
+  max: e = 100,
+  step: n = 1,
+  disabled: r = !1,
+  onChange: l,
+  className: d = ""
+}) => {
+  const [u, i] = N(o), p = s !== void 0, m = p ? s : u, f = D(null), [g, h] = N(!1), c = me({ disabled: r });
+  $(`${c.container} ${c.track} ${c.range} ${c.handle} ${d}`);
+  const v = (m - t) / (e - t) * 100, w = O(
+    (b) => {
+      if (r || !f.current) return;
+      const P = f.current.getBoundingClientRect();
+      let B = (b - P.left) / P.width;
+      B = Math.max(0, Math.min(1, B));
+      let I = t + B * (e - t);
+      I = Math.round(I / n) * n, I = Math.max(t, Math.min(e, I)), p || i(I), l == null || l(I);
+    },
+    [r, t, e, n, p, l]
+  ), x = (b) => {
+    r || (h(!0), w(b.clientX));
+  };
+  return C(() => {
+    if (!g) return;
+    const b = (B) => {
+      w(B.clientX);
+    }, P = () => {
+      h(!1);
+    };
+    return window.addEventListener("mousemove", b), window.addEventListener("mouseup", P), () => {
+      window.removeEventListener("mousemove", b), window.removeEventListener("mouseup", P);
+    };
+  }, [g, w]), /* @__PURE__ */ k(
+    "div",
+    {
+      ref: f,
+      className: `${c.container} ${d}`.trim(),
+      onMouseDown: x,
+      children: [
+        /* @__PURE__ */ a("div", { className: c.track, children: /* @__PURE__ */ a("div", { className: c.range, style: { width: `${v}%` } }) }),
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: c.handle,
+            style: {
+              left: `${v}%`,
+              transform: "translateX(-50%)"
+            }
+          }
+        )
+      ]
+    }
+  );
+}, _e = ({
+  checked: s,
+  defaultChecked: o = !1,
+  disabled: t = !1,
+  onChange: e,
+  size: n = "md",
+  color: r = "primary",
+  className: l = ""
+}) => {
+  const [d, u] = N(o), i = s !== void 0, p = i ? s : d, { getToggleProps: m } = Y(p), f = pe(p, {
+    size: n,
+    color: r,
+    disabled: t
+  });
+  $(`${f.track} ${f.thumb} ${l}`);
+  const g = () => {
+    if (t) return;
+    const h = !p;
+    i || u(h), e == null || e(h);
+  };
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      ...m(),
+      className: `${f.track} ${t ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${l}`.trim(),
+      onClick: g,
+      children: /* @__PURE__ */ a("span", { className: f.thumb })
+    }
+  );
+};
+function et({ data: s, columns: o, onRowClick: t, className: e = "" }) {
+  const {
+    getTableProps: n,
+    getHeaderProps: r,
+    getBodyProps: l,
+    getRowProps: d,
+    getCellProps: u,
+    getHeaderCellProps: i
+  } = $e({ data: s, columns: o, onRowClick: t }), p = n(), m = r(), f = l(), g = i(), h = u(), c = [
+    p.className,
+    m.className,
+    f.className,
+    g.className,
+    h.className,
+    "sxo-table-row border-b border-neutral-100 hover:bg-neutral-50 transition-colors"
+  ].join(" ");
+  return $(`${c} ${e}`), /* @__PURE__ */ a("div", { className: "overflow-x-auto", children: /* @__PURE__ */ k("table", { ...p, className: `${p.className} ${e}`.trim(), children: [
+    /* @__PURE__ */ a("thead", { ...m, children: /* @__PURE__ */ a("tr", { children: o.map((v) => /* @__PURE__ */ a("th", { ...g, children: v.header }, v.key)) }) }),
+    /* @__PURE__ */ a("tbody", { ...f, children: s.map((v, w) => /* @__PURE__ */ a("tr", { ...d(v), children: o.map((x) => /* @__PURE__ */ a("td", { ...h, children: x.render ? x.render(v) : v[x.key] }, x.key)) }, w)) })
+  ] }) });
+}
+const L = j(null), tt = ({
+  children: s,
+  defaultValue: o,
+  value: t,
+  onChange: e,
+  variant: n = "line",
+  size: r = "md",
+  className: l = ""
+}) => {
+  const [d, u] = N(o || ""), i = t !== void 0, p = i ? t : d, { getTabListProps: m, getTabProps: f, getTabPanelProps: g } = Z({
+    value: p,
+    onChange: (c) => {
+      i || u(c), e == null || e(c);
+    }
+  }), h = fe({ variant: n, size: r });
+  return $(`${h.list} ${l}`), /* @__PURE__ */ a(
+    L.Provider,
+    {
+      value: {
+        currentValue: p,
+        selectTab: (c) => {
+          i || u(c), e == null || e(c);
+        },
+        getTabProps: f,
+        getTabPanelProps: g,
+        styles: h
+      },
+      children: /* @__PURE__ */ a("div", { className: l, children: s })
+    }
+  );
+}, st = ({ children: s, className: o = "" }) => {
+  const t = E(L);
+  if (!t) throw new Error("TabList must be used within Tabs");
+  return /* @__PURE__ */ a("div", { role: "tablist", className: `${t.styles.list} ${o}`.trim(), children: s });
+}, nt = ({ value: s, children: o, className: t = "" }) => {
+  const e = E(L);
+  if (!e) throw new Error("Tab must be used within Tabs");
+  const n = e.currentValue === s, r = e.getTabProps(s, e.selectTab);
+  return /* @__PURE__ */ a("div", { ...r, className: `${e.styles.tab(n)} ${t}`.trim(), children: o });
+}, ot = ({ value: s, children: o, className: t = "" }) => {
+  const e = E(L);
+  if (!e) throw new Error("TabPanel must be used within Tabs");
+  const n = e.getTabPanelProps(s);
+  return /* @__PURE__ */ a("div", { ...n, className: `${e.styles.panel} ${t}`.trim(), children: o });
+}, rt = ({
+  variant: s = "solid",
+  color: o = "primary",
+  rounded: t = "sm",
+  size: e = "md",
+  closable: n = !1,
+  className: r = "",
+  children: l,
+  onClose: d,
+  ...u
+}) => {
+  const i = ge({ variant: s, color: o, rounded: t, size: e, closable: n }), p = $(`${i.base} ${r}`.trim());
+  return /* @__PURE__ */ k("span", { className: p, ...u, children: [
+    l,
+    n && /* @__PURE__ */ a(
+      "span",
+      {
+        className: i.closeIcon,
+        onClick: (m) => {
+          m.stopPropagation(), d == null || d();
+        },
+        children: "×"
+      }
+    )
+  ] });
+}, lt = ({
+  content: s,
+  children: o,
+  delay: t = 200,
+  variant: e = "dark",
+  className: n = ""
+}) => {
+  const [r, l] = N(!1), { getTriggerProps: d, getTooltipProps: u } = _({
+    delay: t,
+    defaultOpen: r
+  }), i = he({ variant: e });
+  $(`${i.content} ${n}`);
+  const p = d(
+    () => l(!0),
+    () => l(!1)
+  );
+  return /* @__PURE__ */ k("div", { className: "relative inline-block", children: [
+    y.cloneElement(o, p),
+    r && /* @__PURE__ */ a(
+      "div",
+      {
+        ...u(),
+        className: `${i.content} ${n} bottom-full left-1/2 -translate-x-1/2 mb-2`.trim(),
+        children: s
+      }
+    )
+  ] });
+}, it = ({
+  tokens: s = ee,
+  mode: o = "light",
+  children: t
+}) => {
+  const e = M(() => new xe(s), [s]);
+  return C(() => {
+    document.documentElement.setAttribute("data-sxo-mode", o);
+  }, [o]), C(() => {
+    const n = e.generateTokenCssVars();
+    let r = document.getElementById("sxo-tokens");
+    if (r || (r = document.createElement("style"), r.id = "sxo-tokens", document.head.appendChild(r)), r.innerHTML = n, !document.getElementById("sxo-engine")) {
+      const l = document.createElement("style");
+      l.id = "sxo-engine", document.head.appendChild(l);
+    }
+  }, [e]), C(() => {
+    let n = document.getElementById("sxo-reset");
+    n || (n = document.createElement("style"), n.id = "sxo-reset", document.head.appendChild(n), n.innerHTML = `
+				*, *::before, *::after { box-sizing: border-box; }
+				body { 
+					margin: 0; 
+					font-family: var(--sxo-typography-fontFamily-sans); 
+					-webkit-font-smoothing: antialiased;
+					background-color: var(--sxo-color-background-primary);
+					color: var(--sxo-color-neutral-900);
+					transition: background-color 0.3s ease, color 0.3s ease;
+				}
+				button, input, select, textarea { font-family: inherit; }
+				a { color: inherit; text-decoration: none; }
+			`);
+  }, []), y.createElement(R.Provider, { value: { tokens: s, engine: e } }, t);
+};
+export {
+  Ie as Accordion,
+  Be as AccordionItem,
+  je as Avatar,
+  Le as Badge,
+  Me as Box,
+  Ve as Button,
+  Se as Card,
+  Oe as Checkbox,
+  Ae as CheckboxGroup,
+  Ue as Container,
+  De as Dialog,
+  ze as Dropdown,
+  Re as DropdownItem,
+  Xe as Grid,
+  Ge as Icon,
+  He as Input,
+  Fe as Menu,
+  Ke as Pagination,
+  Je as Radio,
+  qe as RadioGroup,
+  Qe as Select,
+  Ye as SelectOption,
+  Ze as Slider,
+  We as Stack,
+  _e as Switch,
+  R as SxoContext,
+  nt as Tab,
+  st as TabList,
+  ot as TabPanel,
+  et as Table,
+  tt as Tabs,
+  rt as Tag,
+  it as ThemeProvider,
+  lt as Tooltip,
+  Ee as useBreakpoint,
+  $ as useStyle,
+  V as useSxo,
+  Ce as useToken
+};