vue2-sxo 0.0.0

package/dist/index.js

@@ -0,0 +1,2674 @@
+import { defaultTokens as I, tokensToCssVars as H, resolveToken as J, useAccordion as U, useDialog as W, useDraggable as _, useForm as Y, createI18n as Q, useMenu as Z, useSelect as ee, useTabs as te, useToastManager as ae, useTooltip as ne } from "@sxo/design";
+import { getAccordionClasses as le, getAlertClasses as se, getAvatarClasses as ie, getBadgeClasses as re, getBreadcrumbClasses as M, getButtonClasses as oe, getCardClasses as ue, getCheckboxClasses as ce, getDialogClasses as de, getDividerClasses as ve, getDropdownClasses as V, getEmptyClasses as fe, getSpinnerClasses as me, getProgressClasses as ge, getSkeletonClasses as ye, getInputClasses as pe, getMenuClasses as xe, getPaginationClasses as be, getRadioClasses as he, getResultClasses as Se, getSearchClasses as we, getSelectClasses as A, getSliderClasses as $e, getSwitchClasses as ke, getTabsClasses as Ce, getTagClasses as Be, getTimelineClasses as L, getToastClasses as E, getTooltipClasses as Te } from "@sxo/ui";
+import { defineComponent as f, inject as w, reactive as B, provide as k, watch as h, h as n, computed as m, ref as b, onMounted as R, onUnmounted as j, getCurrentInstance as y } from "vue";
+import { StyleEngine as D } from "@sxo/engine";
+const z = "sxo";
+function O() {
+  const e = w(z);
+  if (!e)
+    throw new Error("SXO plugin not installed");
+  return e;
+}
+const Ae = {
+  install(e, t = {}) {
+    const a = t.tokens || I, l = t.mode || "light", i = new D(a), s = B({
+      tokens: a,
+      engine: i,
+      mode: l
+    }), r = () => {
+      if (typeof document < "u") {
+        const o = s.engine.generateTokenCssVars(), u = "sxo-theme-vars";
+        let v = document.getElementById(u);
+        v || (v = document.createElement("style"), v.id = u, document.head.appendChild(v)), v.textContent = o, document.documentElement.setAttribute("data-sxo-mode", s.mode);
+      }
+    };
+    r(), e.mixin({
+      provide() {
+        return {
+          [z]: s
+        };
+      }
+    }), h(() => s.tokens, r, { deep: !0 });
+  }
+}, Le = f({
+  name: "SxoThemeProvider",
+  props: {
+    tokens: {
+      type: Object,
+      default: () => ({})
+    },
+    injectVars: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  setup(e, { slots: t }) {
+    const a = w(z), l = B({
+      tokens: {
+        ...(a == null ? void 0 : a.tokens) || I,
+        ...e.tokens
+      },
+      engine: new D({
+        ...(a == null ? void 0 : a.tokens) || I,
+        ...e.tokens
+      }),
+      mode: (a == null ? void 0 : a.mode) || "light"
+    });
+    return k(z, l), h(() => l.tokens, () => {
+      if (e.injectVars && typeof document < "u") {
+        const s = H(l.tokens), r = "sxo-theme-vars-nested";
+        let o = document.getElementById(r);
+        o || (o = document.createElement("style"), o.id = r, document.head.appendChild(o));
+        const u = `:root {
+${Object.entries(s).map(([v, c]) => `  ${v}: ${c};`).join(`
+`)}
+}`;
+        o.textContent = u;
+      }
+    }, { deep: !0, immediate: !0 }), () => n("div", { class: "sxo-theme-provider" }, t.default ? t.default() : []);
+  }
+});
+function g(e) {
+  const { engine: t } = O(), a = m(() => (typeof e == "function" ? e() : e).split(/\s+/).filter(Boolean)), l = m(() => t.generateBatch(a.value));
+  return h(
+    l,
+    (i) => {
+      if (i && typeof document < "u") {
+        const s = document.getElementById("sxo-engine");
+        if (s)
+          s.innerHTML.includes(i) || (s.innerHTML += i);
+        else {
+          const r = document.createElement("style");
+          r.id = "sxo-engine", r.innerHTML = i, document.head.appendChild(r);
+        }
+      }
+    },
+    { immediate: !0 }
+  ), typeof e == "function" ? m(e) : e;
+}
+function Re(e) {
+  const { tokens: t } = O();
+  return m(() => J(t, e));
+}
+function De() {
+  const { tokens: e } = O(), t = b("xs"), a = () => {
+    const l = window.innerWidth, i = Object.entries(e.breakpoints).sort(
+      (s, r) => Number.parseInt(r[1]) - Number.parseInt(s[1])
+    );
+    for (const [s, r] of i)
+      if (l >= Number.parseInt(r)) {
+        t.value = s;
+        return;
+      }
+    t.value = "xs";
+  };
+  return R(() => {
+    a(), window.addEventListener("resize", a);
+  }), j(() => {
+    window.removeEventListener("resize", a);
+  }), t;
+}
+const Ne = f({
+  name: "SxoAccordion",
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    allowMultiple: {
+      type: Boolean,
+      default: !1
+    },
+    variant: {
+      type: String,
+      default: "bordered"
+    }
+  },
+  model: {
+    prop: "value",
+    event: "input"
+  },
+  setup(e, { emit: t, slots: a, attrs: l }) {
+    const i = b(e.value);
+    h(
+      () => e.value,
+      (u) => {
+        i.value = u;
+      }
+    );
+    const s = (u) => {
+      i.value.includes(u) ? i.value = i.value.filter((v) => v !== u) : i.value = e.allowMultiple ? [...i.value, u] : [u], t("input", i.value);
+    }, { getItemProps: r } = U({
+      allowMultiple: e.allowMultiple,
+      defaultExpanded: i.value
+    }), o = m(() => le({ variant: e.variant }));
+    return g(() => {
+      const u = o.value;
+      return [
+        u.root,
+        u.trigger,
+        u.triggerText,
+        u.panel,
+        u.item(!0),
+        u.item(!1),
+        u.icon(!0),
+        u.icon(!1),
+        l.class
+      ].filter(Boolean).join(" ");
+    }), {
+      expandedItems: i,
+      toggleItem: s,
+      getItemProps: r,
+      styles: o,
+      renderRoot() {
+        var u;
+        return n(
+          "div",
+          {
+            class: [o.value.root, l.class],
+            on: l.on
+          },
+          (u = a.default) == null ? void 0 : u.call(a)
+        );
+      }
+    };
+  },
+  provide() {
+    return {
+      sxoAccordion: this
+    };
+  },
+  render() {
+    return this.renderRoot();
+  }
+}), qe = f({
+  name: "SxoAccordionItem",
+  inject: ["sxoAccordion"],
+  props: {
+    value: {
+      type: String,
+      required: !0
+    },
+    title: {
+      type: String,
+      required: !0
+    }
+  },
+  render() {
+    const e = this.sxoAccordion, t = e.expandedItems.includes(this.value), { triggerProps: a, panelProps: l } = e.getItemProps(this.value, e.toggleItem);
+    return n(
+      "div",
+      {
+        class: [e.styles.item(t), this.$attrs.class]
+      },
+      [
+        n(
+          "button",
+          {
+            attrs: a,
+            class: e.styles.trigger,
+            on: {
+              click: a.onClick
+            }
+          },
+          [
+            n("span", { class: e.styles.triggerText }, this.title),
+            n(
+              "svg",
+              {
+                class: e.styles.icon(t),
+                attrs: {
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-width": "2",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round"
+                }
+              },
+              [n("path", { attrs: { d: "m6 9 6 6 6-6" } })]
+            )
+          ]
+        ),
+        n(
+          "div",
+          {
+            attrs: l,
+            class: e.styles.panel
+          },
+          this.$slots.default
+        )
+      ]
+    );
+  }
+}), Fe = f({
+  name: "SxoAlert",
+  props: {
+    type: {
+      type: String,
+      default: "info"
+    },
+    variant: {
+      type: String,
+      default: "subtle"
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    description: {
+      type: String,
+      default: ""
+    },
+    closable: {
+      type: Boolean,
+      default: !1
+    },
+    showIcon: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  setup(e, { emit: t, slots: a, attrs: l }) {
+    const i = m(
+      () => se({
+        type: e.type,
+        variant: e.variant
+      })
+    );
+    g(() => {
+      const o = i.value;
+      return [
+        o.container,
+        o.icon,
+        o.content,
+        o.title,
+        o.description,
+        o.closeButton,
+        l.class
+      ].filter(Boolean).join(" ");
+    });
+    const s = () => {
+      if (!e.showIcon) return null;
+      if (a.icon) return n("div", { class: i.value.icon }, a.icon());
+      const o = {
+        info: n(
+          "svg",
+          {
+            attrs: {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }
+          },
+          [
+            n("circle", { attrs: { cx: "12", cy: "12", r: "10" } }),
+            n("line", { attrs: { x1: "12", y1: "16", x2: "12", y2: "12" } }),
+            n("line", { attrs: { x1: "12", y1: "8", x2: "12.01", y2: "8" } })
+          ]
+        ),
+        success: n(
+          "svg",
+          {
+            attrs: {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }
+          },
+          [
+            n("path", { attrs: { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" } }),
+            n("polyline", { attrs: { points: "22 4 12 14.01 9 11.01" } })
+          ]
+        ),
+        warning: n(
+          "svg",
+          {
+            attrs: {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }
+          },
+          [
+            n("path", {
+              attrs: {
+                d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+              }
+            }),
+            n("line", { attrs: { x1: "12", y1: "9", x2: "12", y2: "13" } }),
+            n("line", { attrs: { x1: "12", y1: "17", x2: "12.01", y2: "17" } })
+          ]
+        ),
+        error: n(
+          "svg",
+          {
+            attrs: {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }
+          },
+          [
+            n("circle", { attrs: { cx: "12", cy: "12", r: "10" } }),
+            n("line", { attrs: { x1: "15", y1: "9", x2: "9", y2: "15" } }),
+            n("line", { attrs: { x1: "9", y1: "9", x2: "15", y2: "15" } })
+          ]
+        )
+      };
+      return n("div", { class: i.value.icon }, [
+        o[e.type || "info"]
+      ]);
+    }, r = (o) => {
+      t("close", o);
+    };
+    return () => n("div", { class: [i.value.container, l.class] }, [
+      s(),
+      n("div", { class: i.value.content }, [
+        (e.title || a.title) && n(
+          "div",
+          { class: i.value.title },
+          a.title ? a.title() : e.title
+        ),
+        (e.description || a.default) && n(
+          "div",
+          { class: i.value.description },
+          a.default ? a.default() : e.description
+        )
+      ]),
+      e.closable && n("div", { class: i.value.closeButton, on: { click: r } }, [
+        n(
+          "svg",
+          {
+            attrs: {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            },
+            class: "w-4 h-4"
+          },
+          [
+            n("line", { attrs: { x1: "18", y1: "6", x2: "6", y2: "18" } }),
+            n("line", { attrs: { x1: "6", y1: "6", x2: "18", y2: "18" } })
+          ]
+        )
+      ])
+    ]);
+  }
+}), Ge = f({
+  name: "SxoAvatar",
+  props: {
+    src: String,
+    alt: String,
+    fallback: String,
+    size: {
+      type: String,
+      default: "md"
+    },
+    shape: {
+      type: String,
+      default: "circle"
+    }
+  },
+  setup(e, { attrs: t }) {
+    const a = y(), l = (a == null ? void 0 : a.proxy.$listeners) || {}, i = m(
+      () => ie({
+        size: e.size,
+        shape: e.shape
+      })
+    );
+    return g(() => {
+      const s = i.value;
+      return [s.root, s.image, s.fallback, t.class].filter(Boolean).join(" ");
+    }), () => {
+      var s;
+      return n(
+        "div",
+        {
+          class: [i.value.root, t.class],
+          on: l
+        },
+        [
+          e.src ? n("img", {
+            attrs: {
+              src: e.src,
+              alt: e.alt
+            },
+            class: i.value.image
+          }) : n(
+            "span",
+            {
+              class: i.value.fallback
+            },
+            e.fallback || ((s = e.alt) == null ? void 0 : s.charAt(0)) || "?"
+          )
+        ]
+      );
+    };
+  }
+}), Xe = f({
+  name: "SxoBadge",
+  props: {
+    variant: {
+      type: String,
+      default: "primary"
+    }
+  },
+  setup(e, { slots: t, attrs: a }) {
+    const l = y(), i = (l == null ? void 0 : l.proxy.$listeners) || {}, s = m(() => re({ variant: e.variant }));
+    return g(() => `${s.value} ${a.class || ""}`.trim()), () => n(
+      "span",
+      {
+        attrs: a,
+        class: [s.value, a.class],
+        on: i
+      },
+      t.default ? t.default() : []
+    );
+  }
+}), Ke = f({
+  name: "SxoBox",
+  props: {
+    as: {
+      type: String,
+      default: "div"
+    }
+  },
+  setup(e, { slots: t, attrs: a }) {
+    const l = y(), i = (l == null ? void 0 : l.proxy.$listeners) || {}, s = g(() => {
+      const r = [a.class || ""], o = {
+        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"
+      };
+      for (const [u, v] of Object.entries(o))
+        if (a[u] !== void 0) {
+          const c = a[u];
+          v ? r.push(`${v}-${c}`) : r.push(String(c));
+        }
+      return r.filter(Boolean).join(" ");
+    });
+    return () => n(
+      e.as,
+      {
+        attrs: a,
+        class: typeof s == "string" ? s : s.value,
+        on: i
+      },
+      t.default ? t.default() : []
+    );
+  }
+}), He = f({
+  name: "SxoBreadcrumbItem",
+  props: {
+    href: { type: String, default: "" },
+    current: { type: Boolean, default: !1 }
+  },
+  setup(e, { slots: t, attrs: a }) {
+    const l = y(), i = (l == null ? void 0 : l.proxy.$listeners) || {}, s = m(() => M());
+    return g(() => {
+      const r = s.value;
+      return [r.item, r.link, r.current, a.class].filter(Boolean).join(" ");
+    }), () => {
+      var r, o;
+      return n("div", { class: s.value.item }, [
+        e.href && !e.current ? n(
+          "a",
+          {
+            attrs: { href: e.href, ...a },
+            class: [s.value.link],
+            on: i
+          },
+          (r = t.default) == null ? void 0 : r.call(t)
+        ) : n(
+          "span",
+          {
+            class: [
+              e.current ? s.value.current : s.value.link,
+              a.class
+            ],
+            attrs: a,
+            on: i
+          },
+          (o = t.default) == null ? void 0 : o.call(t)
+        )
+      ]);
+    };
+  }
+}), Je = f({
+  name: "SxoBreadcrumb",
+  props: {
+    separator: { type: String, default: "/" }
+  },
+  setup(e, { slots: t, attrs: a }) {
+    const l = y(), i = (l == null ? void 0 : l.proxy.$listeners) || {}, s = m(() => M({ separator: e.separator }));
+    return g(() => {
+      const r = s.value;
+      return [r.container, r.separator, a.class].filter(Boolean).join(" ");
+    }), () => {
+      var u;
+      const r = ((u = t.default) == null ? void 0 : u.call(t)) || [], o = r.reduce((v, c, d) => (v.push(c), d < r.length - 1 && v.push(n("span", { class: s.value.separator }, e.separator)), v), []);
+      return n(
+        "nav",
+        {
+          class: [s.value.container, a.class],
+          attrs: { "aria-label": "Breadcrumb", ...a },
+          on: i
+        },
+        o
+      );
+    };
+  }
+}), Ue = f({
+  name: "SxoButton",
+  props: {
+    variant: {
+      type: String,
+      default: "primary"
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e, { slots: t, attrs: a }) {
+    const l = y(), i = (l == null ? void 0 : l.proxy.$listeners) || {}, s = m(() => oe({
+      variant: e.variant,
+      size: e.size,
+      disabled: e.disabled
+    }));
+    return g(() => `${s.value} ${a.class || ""}`.trim()), () => n(
+      "button",
+      {
+        attrs: {
+          ...a,
+          disabled: e.disabled
+        },
+        class: [s.value, a.class],
+        on: i
+      },
+      t.default ? t.default() : []
+    );
+  }
+}), We = f({
+  name: "SxoCard",
+  props: {
+    variant: {
+      type: String,
+      default: "default"
+    },
+    padding: {
+      type: String,
+      default: "md"
+    },
+    interactive: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e, { slots: t, attrs: a }) {
+    const l = y(), i = (l == null ? void 0 : l.proxy.$listeners) || {}, s = m(() => ue({
+      variant: e.variant,
+      padding: e.padding,
+      interactive: e.interactive
+    }));
+    return g(() => s.value), () => n(
+      "div",
+      {
+        attrs: a,
+        class: s.value,
+        on: i
+      },
+      t.default ? t.default() : []
+    );
+  }
+}), N = Symbol("CheckboxGroup"), _e = f({
+  name: "SxoCheckboxGroup",
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    direction: {
+      type: String,
+      default: "col"
+    },
+    gap: {
+      type: [String, Number],
+      default: 2
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    color: {
+      type: String,
+      default: "primary"
+    }
+  },
+  setup(e, { emit: t, slots: a, attrs: l }) {
+    const i = b([...e.value]);
+    h(
+      () => e.value,
+      (r) => {
+        i.value = [...r];
+      }
+    );
+    const s = (r) => {
+      const o = i.value.indexOf(r);
+      o > -1 ? i.value.splice(o, 1) : i.value.push(r);
+      const u = [...i.value];
+      t("input", u), t("change", u);
+    };
+    return k(N, {
+      value: i,
+      size: e.size,
+      color: e.color,
+      toggleValue: s
+    }), g(() => `flex flex-${e.direction} gap-${e.gap} ${l.class || ""}`.trim()), () => {
+      var r;
+      return n(
+        "div",
+        {
+          class: `flex flex-${e.direction} gap-${e.gap} ${l.class || ""}`.trim(),
+          attrs: { ...l }
+        },
+        (r = a.default) == null ? void 0 : r.call(a)
+      );
+    };
+  }
+}), Ye = f({
+  name: "SxoCheckbox",
+  model: {
+    prop: "checked",
+    event: "input"
+  },
+  props: {
+    checked: {
+      type: [Boolean, String, Number, Object],
+      default: void 0
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    value: {
+      type: [String, Number, Boolean, Object],
+      default: void 0
+    },
+    size: {
+      type: String,
+      default: void 0
+    },
+    color: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(e, { emit: t, attrs: a, slots: l }) {
+    const i = w(N, null), s = m(() => i && e.value !== void 0 ? i.value.value.includes(e.value) : e.checked === !0), r = m(() => e.size || (i == null ? void 0 : i.size) || "md"), o = m(() => e.color || (i == null ? void 0 : i.color) || "primary"), u = m(() => ce(s.value, {
+      size: r.value,
+      color: o.value,
+      disabled: e.disabled
+    }));
+    g(() => {
+      const c = u.value;
+      return `${c.root} ${c.icon} ${a.class || ""}`.trim();
+    });
+    const v = (c) => {
+      if (e.disabled) return;
+      const d = c.target.checked;
+      i && e.value !== void 0 ? i.toggleValue(e.value) : (t("input", d), t("change", d));
+    };
+    return () => n(
+      "label",
+      {
+        class: [
+          "inline-flex items-center cursor-pointer select-none",
+          e.disabled ? "opacity-50 cursor-not-allowed" : "",
+          a.class
+        ]
+      },
+      [
+        n("input", {
+          attrs: {
+            type: "checkbox",
+            checked: s.value,
+            disabled: e.disabled,
+            ...a
+          },
+          class: "hidden",
+          on: {
+            change: v
+          }
+        }),
+        n(
+          "div",
+          {
+            class: u.value.root
+          },
+          [
+            n(
+              "svg",
+              {
+                class: u.value.icon,
+                attrs: {
+                  width: "12",
+                  height: "12",
+                  viewBox: "0 0 12 12",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-width": "2",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round"
+                }
+              },
+              [n("polyline", { attrs: { points: "2 6 5 9 10 3" } })]
+            )
+          ]
+        ),
+        e.label || l.default ? n(
+          "span",
+          { class: "ml-2 text-sm" },
+          l.default ? l.default() : e.label
+        ) : null
+      ]
+    );
+  }
+}), Qe = f({
+  name: "SxoDialog",
+  props: {
+    isOpen: {
+      type: Boolean,
+      required: !0
+    },
+    title: String,
+    description: String,
+    size: {
+      type: String,
+      default: "md"
+    },
+    isCentered: {
+      type: Boolean,
+      default: !1
+    },
+    isDraggable: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e, { slots: t, emit: a, attrs: l }) {
+    const i = y(), s = (i == null ? void 0 : i.proxy.$listeners) || {}, r = B({ x: 0, y: 0 }), { getDialogProps: o, getOverlayProps: u, getCloseButtonProps: v } = W({
+      isOpen: e.isOpen,
+      onClose: () => a("close")
+    }), { getDragProps: c } = _({
+      onDrag: (x) => {
+        r.x = x.x, r.y = x.y;
+      }
+    }), d = de({
+      size: e.size,
+      isCentered: e.isCentered
+    });
+    return g(() => Object.values(d).join(" ")), () => e.isOpen ? n(
+      "div",
+      {
+        class: `${d.container} ${l.class || ""}`.trim(),
+        on: s
+      },
+      [
+        // 遮罩层
+        n("div", {
+          attrs: u(),
+          class: d.overlay
+        }),
+        // 内容层
+        n(
+          "div",
+          {
+            attrs: o(),
+            class: d.content,
+            style: {
+              transform: `translate(${r.x}px, ${r.y}px)`
+            }
+          },
+          [
+            // 关闭按钮
+            n(
+              "button",
+              {
+                attrs: v(),
+                class: d.closeButton
+              },
+              ["✕"]
+            ),
+            // 头部 (支持拖拽)
+            n(
+              "div",
+              {
+                class: d.header,
+                on: e.isDraggable ? c().on : {}
+              },
+              [
+                e.title ? n("h2", { class: d.title }, [e.title]) : null,
+                e.description ? n("p", { class: d.description }, [e.description]) : null
+              ]
+            ),
+            // 内容
+            n("div", { class: "dialog-body" }, [
+              t.default ? t.default() : []
+            ]),
+            // 底部
+            t.footer ? n("div", { class: d.footer }, [t.footer()]) : null
+          ]
+        )
+      ]
+    ) : null;
+  }
+}), Ze = f({
+  name: "SxoDivider",
+  props: {
+    direction: {
+      type: String,
+      default: "horizontal"
+    },
+    type: {
+      type: String,
+      default: "solid"
+    },
+    contentPlacement: {
+      type: String,
+      default: "center"
+    }
+  },
+  setup(e, { slots: t, attrs: a }) {
+    const l = y(), i = (l == null ? void 0 : l.proxy.$listeners) || {}, s = m(
+      () => ve({
+        direction: e.direction,
+        type: e.type,
+        contentPlacement: e.contentPlacement
+      })
+    );
+    return g(() => {
+      const r = s.value;
+      return [r.container, r.line, r.lineLeft, r.lineRight, r.text, a.class].filter(Boolean).join(" ");
+    }), () => {
+      var o;
+      return e.direction === "vertical" ? n("div", {
+        class: [s.value.container, a.class],
+        attrs: a,
+        on: i
+      }) : t.default ? n(
+        "div",
+        {
+          class: [s.value.container, a.class],
+          attrs: a,
+          on: i
+        },
+        [
+          n("div", { class: [s.value.line, s.value.lineLeft] }),
+          n("span", { class: s.value.text }, (o = t.default) == null ? void 0 : o.call(t)),
+          n("div", { class: [s.value.line, s.value.lineRight] })
+        ]
+      ) : n("div", {
+        class: [s.value.line, "my-4", a.class],
+        attrs: a,
+        on: i
+      });
+    };
+  }
+}), et = f({
+  name: "SxoDropdownItem",
+  props: {
+    disabled: { type: Boolean, default: !1 },
+    active: { type: Boolean, default: !1 },
+    divider: { type: Boolean, default: !1 },
+    header: { type: String, default: "" }
+  },
+  setup(e, { slots: t, attrs: a }) {
+    const l = m(() => V());
+    return () => {
+      var r;
+      if (e.divider) return n("div", { class: l.value.divider });
+      if (e.header) return n("div", { class: l.value.header }, e.header);
+      const i = y(), s = (i == null ? void 0 : i.proxy.$listeners) || {};
+      return n(
+        "div",
+        {
+          class: [
+            l.value.item,
+            e.active && l.value.itemActive,
+            e.disabled && l.value.itemDisabled,
+            a.class
+          ],
+          on: {
+            ...s,
+            click: (o) => {
+              e.disabled || s.click && (Array.isArray(s.click) ? s.click.forEach((u) => u(o)) : s.click(o));
+            }
+          }
+        },
+        (r = t.default) == null ? void 0 : r.call(t)
+      );
+    };
+  }
+}), tt = f({
+  name: "SxoDropdown",
+  props: {
+    placement: { type: String, default: "bottom-left" },
+    trigger: { type: String, default: "click" }
+  },
+  setup(e, { slots: t, attrs: a }) {
+    const l = b(!1), i = b(null), s = m(() => V({ placement: e.placement }));
+    g(() => {
+      const d = s.value;
+      return [
+        d.container,
+        d.menu,
+        d.item,
+        d.itemActive,
+        d.itemDisabled,
+        d.divider,
+        d.header,
+        a.class
+      ].filter(Boolean).join(" ");
+    });
+    const r = () => l.value = !l.value, o = () => l.value = !0, u = () => l.value = !1, v = (d) => {
+      const x = i.value;
+      x && !x.contains(d.target) && u();
+    };
+    R(() => {
+      e.trigger === "click" && window.addEventListener("click", v);
+    }), j(() => {
+      e.trigger === "click" && window.removeEventListener("click", v);
+    });
+    const c = m(() => e.trigger === "hover" ? {
+      mouseenter: o,
+      mouseleave: u
+    } : {
+      click: (d) => {
+        d.stopPropagation(), r();
+      }
+    });
+    return () => {
+      var d, x;
+      return n(
+        "div",
+        {
+          ref: "dropdownRef",
+          class: [s.value.container, a.class],
+          on: c.value
+        },
+        [
+          (d = t.default) == null ? void 0 : d.call(t),
+          l.value && n(
+            "div",
+            {
+              class: s.value.menu,
+              on: {
+                click: (p) => p.stopPropagation()
+              }
+            },
+            (x = t.overlay) == null ? void 0 : x.call(t)
+          )
+        ]
+      );
+    };
+  },
+  // Handle ref correctly in Vue 2 setup
+  mounted() {
+    this.dropdownRef = this.$el;
+  }
+}), at = f({
+  name: "SxoEmpty",
+  props: {
+    description: {
+      type: String,
+      default: "No Data"
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    image: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(e, { slots: t, attrs: a }) {
+    const l = y(), i = (l == null ? void 0 : l.proxy.$listeners) || {}, s = m(
+      () => fe({
+        size: e.size
+      })
+    );
+    g(() => {
+      const o = s.value;
+      return [o.container, o.image, o.description, o.extra, a.class].filter(Boolean).join(" ");
+    });
+    const r = () => t.image ? n("div", { class: s.value.image }, t.image()) : e.image ? n("img", {
+      attrs: { src: e.image, alt: "empty" },
+      class: s.value.image
+    }) : n(
+      "svg",
+      {
+        attrs: {
+          viewBox: "0 0 100 100",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "1.5"
+        },
+        class: s.value.image
+      },
+      [
+        n("rect", { attrs: { x: "20", y: "20", width: "60", height: "60", rx: "8" } }),
+        n("path", { attrs: { d: "M20 40h60M40 20v60" } }),
+        n("circle", { attrs: { cx: "50", cy: "50", r: "10", opacity: "0.5" } })
+      ]
+    );
+    return () => n(
+      "div",
+      {
+        class: [s.value.container, a.class],
+        attrs: a,
+        on: i
+      },
+      [
+        r(),
+        n(
+          "div",
+          { class: s.value.description },
+          t.default ? t.default() : e.description
+        ),
+        t.extra && n("div", { class: s.value.extra }, t.extra())
+      ]
+    );
+  }
+}), ze = f({
+  name: "SxoSpinner",
+  props: {
+    size: {
+      type: String,
+      default: "md"
+    },
+    color: {
+      type: String,
+      default: "primary"
+    }
+  },
+  setup(e, { attrs: t }) {
+    const a = me({
+      size: e.size,
+      color: e.color
+    });
+    return g(() => a), () => n("div", {
+      attrs: t,
+      class: a
+    });
+  }
+}), je = f({
+  name: "SxoProgress",
+  props: {
+    value: {
+      type: Number,
+      required: !0
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    color: {
+      type: String,
+      default: "primary"
+    },
+    size: {
+      type: String,
+      default: "md"
+    }
+  },
+  setup(e, { attrs: t }) {
+    const a = ge({
+      value: e.value,
+      max: e.max,
+      color: e.color,
+      size: e.size
+    });
+    return g(() => `${a.root} ${a.bar}`), () => n("div", { attrs: t, class: a.root }, [
+      n("div", {
+        class: a.bar,
+        style: { width: `${a.percentage}%` }
+      })
+    ]);
+  }
+}), Pe = f({
+  name: "SxoSkeleton",
+  props: {
+    variant: {
+      type: String,
+      default: "rect"
+    },
+    width: [String, Number],
+    height: [String, Number],
+    animate: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  setup(e, { attrs: t }) {
+    const a = ye({
+      variant: e.variant,
+      animate: e.animate
+    });
+    g(() => a);
+    const l = {
+      width: typeof e.width == "number" ? `${e.width}px` : e.width,
+      height: typeof e.height == "number" ? `${e.height}px` : e.height
+    };
+    return () => n("div", {
+      attrs: t,
+      class: a,
+      style: l
+    });
+  }
+}), nt = {
+  Spinner: ze,
+  Progress: je,
+  Skeleton: Pe
+}, q = "SxoForm", lt = f({
+  name: "SxoForm",
+  props: {
+    initialValues: {
+      type: Object,
+      required: !0
+    },
+    rules: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(e, { slots: t, attrs: a }) {
+    const l = y(), i = (l == null ? void 0 : l.proxy.$listeners) || {}, s = Y({
+      initialValues: e.initialValues,
+      rules: e.rules,
+      onSubmit: (o) => l == null ? void 0 : l.proxy.$emit("submit", o)
+    }), r = B({
+      values: { ...e.initialValues },
+      errors: {}
+    });
+    return s.subscribe(() => {
+      r.values = { ...s.values }, r.errors = { ...s.errors };
+    }), k(q, {
+      values: r.values,
+      errors: r.errors,
+      setFieldValue: s.setFieldValue
+    }), () => {
+      var o;
+      return n(
+        "form",
+        {
+          attrs: a,
+          on: {
+            ...i,
+            submit: s.handleSubmit
+          }
+        },
+        (o = t.default) == null ? void 0 : o.call(t)
+      );
+    };
+  }
+}), st = f({
+  name: "SxoFormItem",
+  props: {
+    name: String,
+    label: String
+  },
+  setup(e, { slots: t }) {
+    const a = w(q);
+    if (!a) throw new Error("FormItem must be used within Form");
+    return () => {
+      var l;
+      return n("div", { class: "flex flex-col gap-1 mb-4" }, [
+        e.label && n("label", { class: "text-sm font-bold opacity-70" }, e.label),
+        (l = t.default) == null ? void 0 : l.call(t),
+        e.name && a.errors[e.name] && n(
+          "span",
+          { class: "text-xs text-red-500 font-medium" },
+          a.errors[e.name]
+        )
+      ]);
+    };
+  }
+}), F = "SxoI18n", it = f({
+  name: "SxoI18nProvider",
+  props: {
+    locale: {
+      type: String,
+      default: "en"
+    },
+    messages: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(e, { slots: t }) {
+    const a = Q({
+      locale: e.locale,
+      messages: e.messages
+    }), l = B({
+      locale: a.locale
+    });
+    return a.subscribe((s) => {
+      l.locale = s;
+    }), k(F, {
+      state: l,
+      t: (s, ...r) => a.t(s, ...r),
+      setLocale: (s) => {
+        a.locale = s;
+      }
+    }), () => t.default ? t.default() : [];
+  }
+});
+function rt() {
+  const e = w(F);
+  return e ? {
+    locale: e.state.locale,
+    t: e.t,
+    setLocale: e.setLocale
+  } : {
+    locale: "en",
+    t: (t) => t,
+    setLocale: () => {
+    }
+  };
+}
+const ot = f({
+  name: "SxoInput",
+  props: {
+    variant: {
+      type: String,
+      default: "outline"
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    invalid: {
+      type: Boolean,
+      default: !1
+    },
+    value: {
+      type: [String, Number],
+      default: ""
+    }
+  },
+  setup(e, { emit: t, attrs: a }) {
+    const l = y(), i = (l == null ? void 0 : l.proxy.$listeners) || {}, s = m(() => pe({
+      variant: e.variant,
+      size: e.size,
+      invalid: e.invalid
+    }));
+    g(() => `${s.value} ${a.class || ""}`.trim());
+    const r = (o) => {
+      t("input", o.target.value);
+    };
+    return () => n("input", {
+      attrs: {
+        ...a,
+        value: e.value
+      },
+      class: [s.value, a.class],
+      on: {
+        ...i,
+        input: r
+      }
+    });
+  }
+});
+function S(e, t) {
+  if (e === void 0) return [];
+  if (typeof e != "object" || Array.isArray(e))
+    return [`${t}-${e}`];
+  const a = [], l = e;
+  return l.base !== void 0 && a.push(`${t}-${l.base}`), l.sm !== void 0 && a.push(`sm:${t}-${l.sm}`), l.md !== void 0 && a.push(`md:${t}-${l.md}`), l.lg !== void 0 && a.push(`lg:${t}-${l.lg}`), l.xl !== void 0 && a.push(`xl:${t}-${l.xl}`), l["2xl"] !== void 0 && a.push(`2xl:${t}-${l["2xl"]}`), a;
+}
+const ut = f({
+  name: "SxoStack",
+  props: {
+    direction: {
+      type: [String, Object],
+      default: "col"
+    },
+    gap: {
+      type: [String, Number, Object],
+      default: 4
+    },
+    align: {
+      type: [String, Object],
+      default: "stretch"
+    },
+    justify: {
+      type: [String, Object],
+      default: "start"
+    },
+    wrap: {
+      type: [Boolean, Object],
+      default: !1
+    }
+  },
+  setup(e, { slots: t, attrs: a }) {
+    const l = m(
+      () => [
+        "flex",
+        ...S(e.direction, "flex"),
+        ...S(e.gap, "gap"),
+        ...S(e.align, "items"),
+        ...S(e.justify, "justify"),
+        ...typeof e.wrap == "boolean" ? [e.wrap ? "flex-wrap" : "flex-nowrap"] : S(e.wrap, "flex").map(
+          (i) => i.includes("true") ? i.replace("-true", "-wrap") : i.replace("-false", "-nowrap")
+        ),
+        a.class
+      ].filter(Boolean).join(" ")
+    );
+    return g(() => l.value), () => {
+      var i;
+      return n(
+        "div",
+        {
+          attrs: { ...a },
+          class: l.value
+        },
+        (i = t.default) == null ? void 0 : i.call(t)
+      );
+    };
+  }
+}), ct = f({
+  name: "SxoGrid",
+  props: {
+    cols: {
+      type: [Number, Object],
+      default: 1
+    },
+    rows: {
+      type: [Number, Object],
+      default: void 0
+    },
+    gap: {
+      type: [String, Number, Object],
+      default: 4
+    }
+  },
+  setup(e, { slots: t, attrs: a }) {
+    const l = m(
+      () => [
+        "grid",
+        ...S(e.cols, "grid-cols"),
+        ...S(e.rows, "grid-rows"),
+        ...S(e.gap, "gap"),
+        a.class
+      ].filter(Boolean).join(" ")
+    );
+    return g(() => l.value), () => {
+      var i;
+      return n(
+        "div",
+        {
+          attrs: { ...a },
+          class: l.value
+        },
+        (i = t.default) == null ? void 0 : i.call(t)
+      );
+    };
+  }
+}), dt = f({
+  name: "SxoContainer",
+  props: {
+    center: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  setup(e, { slots: t, attrs: a }) {
+    const l = m(
+      () => ["container", e.center ? "mx-auto" : "", a.class].filter(Boolean).join(" ")
+    );
+    return g(() => l.value), () => {
+      var i;
+      return n(
+        "div",
+        {
+          attrs: { ...a },
+          class: l.value
+        },
+        (i = t.default) == null ? void 0 : i.call(t)
+      );
+    };
+  }
+}), vt = f({
+  name: "SxoMenu",
+  props: {
+    label: {
+      type: [String, Object],
+      required: !0
+    },
+    items: {
+      type: Array,
+      required: !0
+    },
+    variant: {
+      type: String,
+      default: "default"
+    }
+  },
+  setup(e, { emit: t, refs: a, slots: l }) {
+    const i = b(!1), { getMenuProps: s, getItemProps: r, getButtonProps: o } = Z({
+      isOpen: i.value,
+      id: "sxo-menu"
+    }), u = xe({ variant: e.variant });
+    g(() => `${Object.values(u).join(" ")}`);
+    const v = () => {
+      i.value = !i.value;
+    }, c = (d) => {
+      t("select", d), i.value = !1;
+    };
+    return () => n(
+      "div",
+      {
+        class: u.container,
+        attrs: { "data-sxo-component": "Menu" }
+      },
+      [
+        n(
+          "button",
+          {
+            attrs: o(),
+            class: u.button,
+            on: {
+              click: v
+            }
+          },
+          l.label ? l.label() : e.label
+        ),
+        i.value ? n(
+          "div",
+          {
+            attrs: s(),
+            class: u.items
+          },
+          [
+            n(
+              "div",
+              { class: u.section },
+              e.items.map(
+                (d) => n(
+                  "button",
+                  {
+                    attrs: r(d.id),
+                    key: d.id,
+                    class: u.item,
+                    on: {
+                      click: () => c(d)
+                    }
+                  },
+                  d.label
+                )
+              )
+            )
+          ]
+        ) : null
+      ]
+    );
+  }
+}), ft = f({
+  name: "SxoPagination",
+  props: {
+    total: { type: Number, default: 0 },
+    pageSize: { type: Number, default: 10 },
+    current: { type: Number, default: 1 },
+    size: { type: String, default: "md" },
+    variant: { type: String, default: "outline" },
+    rounded: { type: Boolean, default: !0 },
+    showTotal: { type: Boolean, default: !1 },
+    showJumper: { type: Boolean, default: !1 }
+  },
+  setup(e, { emit: t, attrs: a }) {
+    const l = y(), i = (l == null ? void 0 : l.proxy.$listeners) || {}, s = m(() => Math.ceil(e.total / e.pageSize)), r = m(
+      () => be({
+        size: e.size,
+        variant: e.variant,
+        rounded: e.rounded
+      })
+    );
+    g(() => {
+      const c = r.value;
+      return `${c.container} ${c.item} ${c.active} ${c.disabled} ${c.ellipsis} ${a.class || ""}`;
+    });
+    const o = (c) => {
+      c < 1 || c > s.value || c === e.current || t("change", c);
+    }, u = (c) => n(
+      "li",
+      {
+        key: c,
+        class: [r.value.item, e.current === c && r.value.active],
+        on: {
+          click: () => o(c)
+        }
+      },
+      [c]
+    ), v = () => {
+      const c = [], d = e.current, x = s.value;
+      if (c.push(
+        n(
+          "li",
+          {
+            class: [r.value.item, d === 1 && r.value.disabled],
+            on: {
+              click: () => o(d - 1)
+            }
+          },
+          ["<"]
+        )
+      ), x <= 7)
+        for (let p = 1; p <= x; p++)
+          c.push(u(p));
+      else {
+        c.push(u(1)), d > 4 && c.push(n("li", { class: r.value.ellipsis }, ["..."]));
+        const p = Math.max(2, d - 2), T = Math.min(x - 1, d + 2);
+        for (let $ = p; $ <= T; $++)
+          c.push(u($));
+        d < x - 3 && c.push(n("li", { class: r.value.ellipsis }, ["..."])), c.push(u(x));
+      }
+      return c.push(
+        n(
+          "li",
+          {
+            class: [r.value.item, d === x && r.value.disabled],
+            on: {
+              click: () => o(d + 1)
+            }
+          },
+          [">"]
+        )
+      ), c;
+    };
+    return () => n(
+      "nav",
+      {
+        class: `${r.value.container} ${a.class || ""}`.trim(),
+        on: i
+      },
+      [
+        e.showTotal && n("span", { class: r.value.total }, [`Total ${e.total}`]),
+        n("ul", { class: "flex items-center gap-1 list-none p-0 m-0" }, v()),
+        e.showJumper && n("div", { class: r.value.jumper }, [
+          "Go to",
+          n("input", {
+            class: "w-12 h-8 px-2 border rounded text-center outline-none focus:border-primary-500",
+            attrs: { type: "number" },
+            on: {
+              keyup: (c) => {
+                if (c.key === "Enter") {
+                  const d = parseInt(
+                    c.target.value
+                  );
+                  isNaN(d) || o(d);
+                }
+              }
+            }
+          })
+        ])
+      ]
+    );
+  }
+}), G = Symbol("RadioGroup"), mt = f({
+  name: "SxoRadioGroup",
+  props: {
+    value: {
+      type: String,
+      default: ""
+    },
+    name: {
+      type: String,
+      default: () => `sxo-radio-group-${Math.random().toString(36).substr(2, 9)}`
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    color: {
+      type: String,
+      default: "primary"
+    },
+    direction: {
+      type: String,
+      default: "row"
+    },
+    gap: {
+      type: [String, Number],
+      default: 2
+    }
+  },
+  setup(e, { emit: t, slots: a, attrs: l }) {
+    const i = b(e.value);
+    h(
+      () => e.value,
+      (r) => {
+        i.value = r;
+      }
+    );
+    const s = (r) => {
+      i.value = r, t("input", r), t("change", r);
+    };
+    return k(G, {
+      value: i,
+      name: e.name,
+      size: e.size,
+      color: e.color,
+      updateValue: s
+    }), () => {
+      var r;
+      return n(
+        "div",
+        {
+          class: `flex flex-${e.direction} gap-${e.gap} ${l.class || ""}`.trim()
+        },
+        (r = a.default) == null ? void 0 : r.call(a)
+      );
+    };
+  }
+}), gt = f({
+  name: "SxoRadio",
+  props: {
+    value: {
+      type: String,
+      required: !0
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    size: {
+      type: String,
+      default: void 0
+    },
+    color: {
+      type: String,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e, { slots: t, attrs: a }) {
+    const l = w(G);
+    if (!l) throw new Error("Radio must be used within RadioGroup");
+    const i = y(), s = (i == null ? void 0 : i.proxy.$listeners) || {}, r = m(() => l.value.value === e.value), o = m(() => e.size || l.size), u = m(() => e.color || l.color), v = m(
+      () => he(r.value, {
+        size: o.value,
+        color: u.value,
+        disabled: e.disabled
+      })
+    );
+    g(() => {
+      const d = v.value;
+      return [d.root, d.inner, a.class].filter(Boolean).join(" ");
+    });
+    const c = () => {
+      e.disabled || l.updateValue(e.value);
+    };
+    return () => {
+      var d, x;
+      return n(
+        "label",
+        {
+          class: [
+            "inline-flex items-center gap-2 cursor-pointer",
+            e.disabled ? "opacity-50 cursor-not-allowed" : "",
+            a.class
+          ],
+          on: {
+            click: c
+          }
+        },
+        [
+          n("div", { class: v.value.root }, [
+            n("input", {
+              attrs: {
+                type: "radio",
+                name: l.name,
+                value: e.value,
+                checked: r.value,
+                disabled: e.disabled
+              },
+              class: "sr-only",
+              on: {
+                change: c,
+                ...s
+              }
+            }),
+            n("div", { class: v.value.inner })
+          ]),
+          (((d = t.default) == null ? void 0 : d.call(t)) || e.label) && n(
+            "span",
+            { class: "text-sm font-medium" },
+            ((x = t.default) == null ? void 0 : x.call(t)) || e.label
+          )
+        ]
+      );
+    };
+  }
+}), yt = f({
+  name: "SxoResult",
+  props: {
+    status: { type: String, default: "info" },
+    title: { type: String, default: "" },
+    subTitle: { type: String, default: "" }
+  },
+  setup(e, { slots: t, attrs: a }) {
+    const l = y(), i = (l == null ? void 0 : l.proxy.$listeners) || {}, s = m(() => Se({ status: e.status }));
+    g(() => {
+      const o = s.value;
+      return `${o.container} ${o.icon} ${o.title} ${o.subTitle} ${o.extra} ${a.class || ""}`;
+    });
+    const r = () => {
+      if (t.icon) return n("div", { class: s.value.icon }, t.icon());
+      const o = {
+        success: n(
+          "svg",
+          {
+            attrs: {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }
+          },
+          [
+            n("path", { attrs: { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" } }),
+            n("polyline", { attrs: { points: "22 4 12 14.01 9 11.01" } })
+          ]
+        ),
+        error: n(
+          "svg",
+          {
+            attrs: {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }
+          },
+          [
+            n("circle", { attrs: { cx: "12", cy: "12", r: "10" } }),
+            n("line", { attrs: { x1: "15", y1: "9", x2: "9", y2: "15" } }),
+            n("line", { attrs: { x1: "9", y1: "9", x2: "15", y2: "15" } })
+          ]
+        ),
+        info: n(
+          "svg",
+          {
+            attrs: {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }
+          },
+          [
+            n("circle", { attrs: { cx: "12", cy: "12", r: "10" } }),
+            n("line", { attrs: { x1: "12", y1: "16", x2: "12", y2: "12" } }),
+            n("line", { attrs: { x1: "12", y1: "8", x2: "12.01", y2: "8" } })
+          ]
+        ),
+        warning: n(
+          "svg",
+          {
+            attrs: {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }
+          },
+          [
+            n("path", {
+              attrs: {
+                d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+              }
+            }),
+            n("line", { attrs: { x1: "12", y1: "9", x2: "12", y2: "13" } }),
+            n("line", { attrs: { x1: "12", y1: "17", x2: "12.01", y2: "17" } })
+          ]
+        ),
+        404: n("div", { class: "text-6xl font-black opacity-20" }, "404"),
+        500: n("div", { class: "text-6xl font-black opacity-20" }, "500"),
+        403: n("div", { class: "text-6xl font-black opacity-20" }, "403")
+      };
+      return n("div", { class: s.value.icon }, [o[e.status || "info"]]);
+    };
+    return () => {
+      var o;
+      return n(
+        "div",
+        {
+          class: [s.value.container, a.class],
+          attrs: a,
+          on: i
+        },
+        [
+          r(),
+          n(
+            "div",
+            { class: s.value.title },
+            t.title ? t.title() : e.title
+          ),
+          n(
+            "div",
+            { class: s.value.subTitle },
+            t.subTitle ? t.subTitle() : e.subTitle
+          ),
+          t.extra && n("div", { class: s.value.extra }, t.extra()),
+          (o = t.default) == null ? void 0 : o.call(t)
+        ]
+      );
+    };
+  }
+}), pt = f({
+  name: "SxoSearch",
+  props: {
+    value: {
+      type: String,
+      default: ""
+    },
+    placeholder: {
+      type: String,
+      default: "Search..."
+    },
+    variant: {
+      type: String,
+      default: "outline"
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    rounded: {
+      type: Boolean,
+      default: !0
+    },
+    loading: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e, { emit: t, attrs: a }) {
+    const l = y(), i = (l == null ? void 0 : l.proxy.$listeners) || {}, s = b(null), r = m(
+      () => we({
+        variant: e.variant,
+        size: e.size,
+        rounded: e.rounded
+      })
+    );
+    g(() => {
+      const c = r.value;
+      return `${c.container} ${c.input} ${c.icon} ${c.clear} ${a.class || ""}`;
+    });
+    const o = (c) => {
+      const d = c.target;
+      t("input", d.value);
+    }, u = (c) => {
+      c.key === "Enter" && t("search", e.value);
+    }, v = () => {
+      var c;
+      t("input", ""), t("clear"), (c = s.value) == null || c.focus();
+    };
+    return () => n("div", { class: [r.value.container, a.class] }, [
+      // Search Icon
+      n(
+        "span",
+        { class: r.value.icon },
+        n(
+          "svg",
+          {
+            attrs: {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            },
+            class: "w-full h-full"
+          },
+          [
+            n("circle", { attrs: { cx: "11", cy: "11", r: "8" } }),
+            n("line", {
+              attrs: { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }
+            })
+          ]
+        )
+      ),
+      // Input Field
+      n("input", {
+        ref: "inputRef",
+        attrs: {
+          ...a,
+          type: "text",
+          placeholder: e.placeholder
+        },
+        domProps: {
+          value: e.value
+        },
+        class: r.value.input,
+        on: {
+          ...i,
+          input: o,
+          keydown: u
+        }
+      }),
+      // Clear Button
+      e.value && n(
+        "span",
+        {
+          class: r.value.clear,
+          on: {
+            click: v
+          }
+        },
+        n(
+          "svg",
+          {
+            attrs: {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            },
+            class: "w-full h-full"
+          },
+          [
+            n("line", { attrs: { x1: "18", y1: "6", x2: "6", y2: "18" } }),
+            n("line", { attrs: { x1: "6", y1: "6", x2: "18", y2: "18" } })
+          ]
+        )
+      )
+    ]);
+  }
+}), X = Symbol("Select"), xt = f({
+  name: "SxoSelect",
+  props: {
+    value: {
+      type: String,
+      default: ""
+    },
+    placeholder: {
+      type: String,
+      default: "Select an option"
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e, { emit: t, slots: a, attrs: l }) {
+    const i = b(e.value);
+    h(
+      () => e.value,
+      (p) => {
+        i.value = p;
+      }
+    );
+    const { isOpen: s, setValue: r, getTriggerProps: o, getListboxProps: u } = ee({
+      defaultValue: i.value
+    }), v = m(() => A(s.value, { size: e.size }));
+    g(() => `${v.value.trigger} ${v.value.listbox} ${l.class || ""}`), k(X, {
+      currentValue: i,
+      handleSelect: (p) => {
+        i.value = p, r(p), t("input", p), t("change", p);
+      }
+    });
+    const d = y(), x = (d == null ? void 0 : d.proxy.$listeners) || {};
+    return () => {
+      var p;
+      return n(
+        "div",
+        {
+          class: `relative inline-block w-full ${l.class || ""}`.trim()
+        },
+        [
+          n(
+            "div",
+            {
+              attrs: { ...o().attrs },
+              class: v.value.trigger,
+              on: { ...o().on, ...x }
+            },
+            [
+              n(
+                "span",
+                {
+                  class: i.value ? "text-foreground" : "text-neutral-400"
+                },
+                i.value || e.placeholder
+              ),
+              n(
+                "svg",
+                {
+                  class: `transition-transform duration-200 ${s.value ? "rotate-180" : ""}`,
+                  attrs: {
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    "stroke-width": "2"
+                  }
+                },
+                [n("polyline", { attrs: { points: "6 9 12 15 18 9" } })]
+              )
+            ]
+          ),
+          s.value ? n(
+            "div",
+            {
+              attrs: { ...u().attrs },
+              class: v.value.listbox,
+              on: { ...u().on }
+            },
+            (p = a.default) == null ? void 0 : p.call(a)
+          ) : null
+        ]
+      );
+    };
+  }
+}), bt = f({
+  name: "SxoSelectOption",
+  props: {
+    value: {
+      type: String,
+      required: !0
+    }
+  },
+  setup(e, { slots: t, attrs: a }) {
+    const l = w(X);
+    if (!l) throw new Error("SelectOption must be used within Select");
+    const i = m(() => l.currentValue.value === e.value), s = A(!1);
+    return g(() => `${s.option} ${a.class || ""}`), () => {
+      var r;
+      return n(
+        "div",
+        {
+          class: `${s.option} ${i.value ? "bg-primary/10 text-primary font-medium" : ""} ${a.class || ""}`.trim(),
+          on: {
+            click: () => l.handleSelect(e.value)
+          }
+        },
+        (r = t.default) == null ? void 0 : r.call(t)
+      );
+    };
+  }
+}), ht = f({
+  name: "SxoSlider",
+  props: {
+    value: { type: Number, default: 0 },
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: 100 },
+    step: { type: Number, default: 1 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  setup(e, { emit: t, attrs: a }) {
+    const l = b(null), i = b(!1), s = m(() => $e({ disabled: e.disabled })), r = m(() => (e.value - e.min) / (e.max - e.min) * 100), o = (p) => {
+      if (e.disabled || !l.value) return;
+      const T = l.value.getBoundingClientRect();
+      let $ = (p - T.left) / T.width;
+      $ = Math.max(0, Math.min(1, $));
+      let C = e.min + $ * (e.max - e.min);
+      C = Math.round(C / e.step) * e.step, C = Math.max(e.min, Math.min(e.max, C)), t("input", C), t("change", C);
+    }, u = (p) => {
+      i.value && o(p.clientX);
+    }, v = () => {
+      i.value = !1, window.removeEventListener("mousemove", u), window.removeEventListener("mouseup", v);
+    }, c = (p) => {
+      e.disabled || (i.value = !0, o(p.clientX), window.addEventListener("mousemove", u), window.addEventListener("mouseup", v));
+    };
+    j(() => {
+      window.removeEventListener("mousemove", u), window.removeEventListener("mouseup", v);
+    });
+    const d = y(), x = (d == null ? void 0 : d.proxy.$listeners) || {};
+    return () => n(
+      "div",
+      {
+        ref: "sliderRef",
+        class: [s.value.container, a.class],
+        on: {
+          mousedown: c,
+          ...x
+        }
+      },
+      [
+        n("div", { class: s.value.track }, [
+          n("div", {
+            class: s.value.range,
+            style: { width: `${r.value}%` }
+          })
+        ]),
+        n("div", {
+          class: s.value.handle,
+          style: {
+            left: `${r.value}%`,
+            transform: "translateX(-50%)"
+          }
+        })
+      ]
+    );
+  },
+  // Handle ref in Vue 2 setup
+  mounted() {
+    this.sliderRef = this.$refs.sliderRef;
+  }
+}), St = f({
+  name: "SxoSwitch",
+  props: {
+    value: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    color: {
+      type: String,
+      default: "primary"
+    }
+  },
+  setup(e, { emit: t, attrs: a }) {
+    const l = b(e.value);
+    h(
+      () => e.value,
+      (u) => {
+        l.value = u;
+      }
+    );
+    const i = m(() => ke(l.value, {
+      size: e.size,
+      color: e.color,
+      disabled: e.disabled
+    }));
+    g(() => `${i.value.track} ${i.value.thumb} ${a.class || ""}`);
+    const s = () => {
+      e.disabled || (l.value = !l.value, t("input", l.value), t("change", l.value));
+    }, r = y(), o = (r == null ? void 0 : r.proxy.$listeners) || {};
+    return () => n(
+      "div",
+      {
+        class: `${i.value.track} ${e.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${a.class || ""}`.trim(),
+        on: {
+          click: s,
+          ...o
+        }
+      },
+      [n("span", { class: i.value.thumb })]
+    );
+  }
+}), P = "SxoTabs", wt = f({
+  name: "SxoTabs",
+  props: {
+    value: String,
+    defaultValue: String,
+    variant: {
+      type: String,
+      default: "line"
+    },
+    size: {
+      type: String,
+      default: "md"
+    }
+  },
+  provide() {
+    return {
+      [P]: this
+    };
+  },
+  setup(e, { emit: t, attrs: a }) {
+    const l = y(), i = (l == null ? void 0 : l.proxy.$listeners) || {}, s = b(e.value || e.defaultValue || "");
+    h(
+      () => e.value,
+      (v) => {
+        v !== void 0 && (s.value = v);
+      }
+    );
+    const { getTabProps: r, getTabPanelProps: o } = te({
+      value: s.value,
+      onChange: (v) => {
+        s.value = v, t("input", v), t("change", v);
+      }
+    }), u = m(
+      () => Ce({
+        variant: e.variant,
+        size: e.size
+      })
+    );
+    return g(() => `${u.value.list} ${a.class || ""}`), {
+      currentValue: s,
+      selectTab: (v) => {
+        s.value = v, t("input", v), t("change", v);
+      },
+      styles: u,
+      getTabProps: r,
+      getTabPanelProps: o,
+      listeners: i
+    };
+  },
+  render() {
+    return n(
+      "div",
+      {
+        class: this.$attrs.class,
+        on: this.listeners
+      },
+      this.$slots.default
+    );
+  }
+}), $t = f({
+  name: "SxoTabList",
+  inject: {
+    tabsContext: { from: P, default: null }
+  },
+  render() {
+    const e = this.tabsContext;
+    if (!e) throw new Error("TabList must be used within Tabs");
+    return n(
+      "div",
+      {
+        role: "tablist",
+        class: `${e.styles.list} ${this.$attrs.class || ""}`.trim()
+      },
+      this.$slots.default
+    );
+  }
+}), kt = f({
+  name: "SxoTab",
+  props: {
+    value: {
+      type: String,
+      required: !0
+    }
+  },
+  inject: {
+    tabsContext: { from: P, default: null }
+  },
+  render() {
+    const e = this.tabsContext;
+    if (!e) throw new Error("Tab must be used within Tabs");
+    const t = e.currentValue === this.value, a = e.getTabProps(this.value, e.selectTab);
+    return n(
+      "div",
+      {
+        attrs: a.attrs,
+        on: a.on,
+        class: `${e.styles.tab(t)} ${this.$attrs.class || ""}`.trim()
+      },
+      this.$slots.default
+    );
+  }
+}), Ct = f({
+  name: "SxoTabPanel",
+  props: {
+    value: {
+      type: String,
+      required: !0
+    }
+  },
+  inject: {
+    tabsContext: { from: P, default: null }
+  },
+  render() {
+    const e = this.tabsContext;
+    if (!e) throw new Error("TabPanel must be used within Tabs");
+    const t = e.getTabPanelProps(this.value);
+    return n(
+      "div",
+      {
+        attrs: t.attrs,
+        class: `${e.styles.panel} ${this.$attrs.class || ""}`.trim()
+      },
+      this.$slots.default
+    );
+  }
+}), Bt = f({
+  name: "SxoTag",
+  props: {
+    variant: {
+      type: String,
+      default: "solid"
+    },
+    color: {
+      type: String,
+      default: "primary"
+    },
+    rounded: {
+      type: String,
+      default: "sm"
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    closable: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e, { slots: t, attrs: a, emit: l }) {
+    const i = m(() => {
+      const u = Be({
+        variant: e.variant,
+        color: e.color,
+        rounded: e.rounded,
+        size: e.size,
+        closable: e.closable
+      });
+      return {
+        base: `${u.base} ${a.class || ""}`.trim(),
+        closeIcon: u.closeIcon
+      };
+    });
+    g(() => `${i.value.base} ${i.value.closeIcon}`);
+    const s = y(), r = (s == null ? void 0 : s.proxy.$listeners) || {}, o = (u) => {
+      u.stopPropagation(), l("close");
+    };
+    return () => {
+      var u;
+      return n(
+        "span",
+        {
+          class: i.value.base,
+          on: r,
+          attrs: { ...a }
+        },
+        [
+          (u = t.default) == null ? void 0 : u.call(t),
+          e.closable && n(
+            "span",
+            {
+              class: i.value.closeIcon,
+              on: {
+                click: o
+              }
+            },
+            "×"
+          )
+        ]
+      );
+    };
+  }
+}), Tt = f({
+  name: "SxoTimelineItem",
+  props: {
+    label: { type: String, default: "" },
+    title: { type: String, default: "" },
+    description: { type: String, default: "" },
+    color: { type: String, default: "" }
+  },
+  setup(e, { slots: t, attrs: a }) {
+    const l = y(), i = (l == null ? void 0 : l.proxy.$listeners) || {}, s = m(() => L());
+    return g(() => `${Object.values(s.value).join(" ")}`), () => n(
+      "div",
+      {
+        class: [s.value.item, a.class],
+        attrs: a,
+        on: i
+      },
+      [
+        n("div", { class: s.value.tail }),
+        n("div", {
+          class: s.value.dot,
+          style: e.color ? { backgroundColor: e.color } : void 0
+        }),
+        n("div", { class: s.value.content }, [
+          (e.label || t.label) && n(
+            "div",
+            { class: s.value.label },
+            t.label ? t.label() : e.label
+          ),
+          (e.title || t.title) && n(
+            "div",
+            { class: s.value.title },
+            t.title ? t.title() : e.title
+          ),
+          (e.description || t.default) && n(
+            "div",
+            { class: s.value.description },
+            t.default ? t.default() : e.description
+          )
+        ])
+      ]
+    );
+  }
+}), zt = f({
+  name: "SxoTimeline",
+  props: {
+    mode: { type: String, default: "left" }
+  },
+  setup(e, { slots: t, attrs: a }) {
+    const l = y(), i = (l == null ? void 0 : l.proxy.$listeners) || {}, s = m(() => L({ mode: e.mode }));
+    return g(() => `${Object.values(s.value).join(" ")}`), () => {
+      var r;
+      return n(
+        "div",
+        {
+          class: [s.value.container, a.class],
+          attrs: a,
+          on: i
+        },
+        (r = t.default) == null ? void 0 : r.call(t)
+      );
+    };
+  }
+}), K = "SxoToast", jt = f({
+  name: "SxoToastProvider",
+  setup(e, { slots: t }) {
+    const a = ae(), l = b([]), i = a.subscribe((s) => {
+      l.value = s;
+    });
+    return j(() => {
+      i();
+    }), k(K, a), () => n("div", { class: "sxo-toast-provider" }, [
+      t.default ? t.default() : [],
+      // In Vue 2, we don't have Teleport built-in.
+      // For a production app, we would use portal-vue or manual DOM manipulation.
+      n("div", { class: "sxo-toasts-container" }, Ie(l.value, a))
+    ]);
+  }
+});
+function Ie(e, t) {
+  return [
+    "top",
+    "bottom",
+    "top-left",
+    "top-right",
+    "bottom-left",
+    "bottom-right"
+  ].map((l) => {
+    const i = e.filter((r) => (r.position || "top-right") === l);
+    if (i.length === 0) return null;
+    const s = E({ position: l });
+    return n(
+      "div",
+      { class: s.container, key: l },
+      i.map(
+        (r) => n("div", { key: r.id, class: E({ type: r.type }).item }, [
+          // Content
+          n("div", { class: "flex-grow flex flex-col" }, [
+            r.title && n("div", { class: "text-sm font-bold" }, r.title),
+            r.description && n("div", { class: "text-xs opacity-80" }, r.description)
+          ]),
+          // Close Button
+          n(
+            "button",
+            {
+              class: "opacity-50 hover:opacity-100",
+              on: {
+                click: () => t.remove(r.id)
+              }
+            },
+            "✕"
+          )
+        ])
+      )
+    );
+  });
+}
+function Pt() {
+  const e = w(K);
+  return e || {
+    show: () => console.warn("ToastProvider not found"),
+    success: () => console.warn("ToastProvider not found"),
+    error: () => console.warn("ToastProvider not found")
+  };
+}
+const It = f({
+  name: "SxoTooltip",
+  props: {
+    content: {
+      type: [String, Object],
+      required: !0
+    },
+    delay: {
+      type: Number,
+      default: 200
+    },
+    variant: {
+      type: String,
+      default: "dark"
+    }
+  },
+  setup(e, { slots: t, attrs: a }) {
+    const l = y(), i = (l == null ? void 0 : l.proxy.$listeners) || {}, s = b(!1), { getTriggerProps: r, getTooltipProps: o } = ne({
+      delay: e.delay,
+      defaultOpen: s.value
+    }), u = m(() => Te({ variant: e.variant }));
+    g(() => `${u.value.content} ${a.class || ""}`);
+    const v = r(
+      () => {
+        s.value = !0;
+      },
+      () => {
+        s.value = !1;
+      }
+    );
+    return () => {
+      var c;
+      return n("div", { class: "relative inline-block" }, [
+        n(
+          "div",
+          {
+            attrs: { ...v.attrs },
+            on: { ...v.on, ...i }
+          },
+          (c = t.default) == null ? void 0 : c.call(t)
+        ),
+        s.value ? n(
+          "div",
+          {
+            attrs: { ...o().attrs },
+            class: `${u.value.content} ${a.class || ""} bottom-full left-1/2 -translate-x-1/2 mb-2`.trim()
+          },
+          t.content ? t.content() : e.content
+        ) : null
+      ]);
+    };
+  }
+});
+export {
+  Ne as Accordion,
+  qe as AccordionItem,
+  Fe as Alert,
+  Ge as Avatar,
+  Xe as Badge,
+  Ke as Box,
+  Je as Breadcrumb,
+  He as BreadcrumbItem,
+  Ue as Button,
+  We as Card,
+  Ye as Checkbox,
+  _e as CheckboxGroup,
+  dt as Container,
+  Qe as Dialog,
+  Ze as Divider,
+  tt as Dropdown,
+  et as DropdownItem,
+  at as Empty,
+  nt as Feedback,
+  lt as Form,
+  st as FormItem,
+  ct as Grid,
+  it as I18nProvider,
+  ot as Input,
+  vt as Menu,
+  ft as Pagination,
+  je as Progress,
+  gt as Radio,
+  mt as RadioGroup,
+  yt as Result,
+  z as SXO_KEY,
+  pt as Search,
+  xt as Select,
+  bt as SelectOption,
+  Pe as Skeleton,
+  ht as Slider,
+  ze as Spinner,
+  ut as Stack,
+  St as Switch,
+  Ae as SxoPlugin,
+  kt as Tab,
+  $t as TabList,
+  Ct as TabPanel,
+  wt as Tabs,
+  Bt as Tag,
+  Le as ThemeProvider,
+  zt as Timeline,
+  Tt as TimelineItem,
+  jt as ToastProvider,
+  It as Tooltip,
+  De as useBreakpoint,
+  rt as useI18n,
+  g as useStyle,
+  O as useSxo,
+  Pt as useToast,
+  Re as useToken
+};