@defaultusr/dai-ui 1.0.4

package/dist/main.js

@@ -0,0 +1,1286 @@
+import { useFormControl as S, PopoverDialog as ee, Combobox as oe, ComboboxInput as te, ComboboxOptions as ae, ComboboxOption as le, MenuItems as se, MenuItem as ne, Tab as ie, TabList as re } from "vue-composable-ui";
+import { Menu as Ho, Popover as Fo, TabContainer as Ro, TabPanel as Go } from "vue-composable-ui";
+import { reactive as de, watch as T, onUnmounted as q, defineComponent as f, computed as B, createBlock as h, openBlock as s, resolveDynamicComponent as ue, normalizeClass as g, withCtx as v, createElementBlock as d, createCommentVNode as p, createElementVNode as r, renderSlot as y, createTextVNode as U, toDisplayString as _, useId as z, unref as c, createVNode as M, Transition as A, mergeModels as I, useModel as w, useTemplateRef as L, ref as N, onMounted as j, mergeProps as C, withDirectives as P, vModelText as ce, Fragment as Y, renderList as D, vModelSelect as pe, vModelCheckbox as me, vModelRadio as fe, nextTick as ve, normalizeStyle as O, Teleport as H, TransitionGroup as he, withModifiers as be } from "vue";
+import './assets/main.css';function ye(n, ...e) {
+  let a = [];
+  const t = de(e);
+  function o() {
+    t.length && (n.classList.add(...t), a = [...t]);
+  }
+  function l() {
+    n.classList.remove(...a);
+  }
+  return T(
+    t,
+    () => {
+      l(), o();
+    },
+    { immediate: !0 }
+  ), q(l), {
+    classList: t
+  };
+}
+const ge = {
+  key: 0,
+  class: "dai-btn__spinner"
+}, ke = { class: "dai-btn__caption" }, $o = /* @__PURE__ */ f({
+  __name: "btn",
+  props: {
+    submit: { type: [Boolean, String] },
+    reset: { type: Boolean },
+    href: {},
+    icon: {},
+    iconAfter: {},
+    color: { default: "primary" },
+    variant: {},
+    plain: { type: Boolean },
+    muted: { type: Boolean },
+    outlined: { type: Boolean },
+    size: {},
+    sm: { type: Boolean },
+    lg: { type: Boolean },
+    loading: { type: Boolean },
+    block: { type: Boolean },
+    rounded: { type: Boolean },
+    condensed: { type: Boolean }
+  },
+  setup(n) {
+    const e = n, a = B(() => e.submit ? "submit" : e.reset ? "reset" : "button"), t = B(() => e.variant ? e.variant : e.plain ? "plain" : e.muted ? "muted" : e.outlined ? "outlined" : "flat"), o = B(() => e.size ? e.size : e.sm ? "small" : e.lg ? "large" : "medium");
+    return (l, i) => (s(), h(ue(l.href ? "a" : "button"), {
+      type: l.href ? void 0 : a.value,
+      form: typeof l.submit == "string" ? l.submit : void 0,
+      href: l.href,
+      class: g(["dai-btn", {
+        [`dai-btn--${l.color}`]: l.color,
+        "dai-btn--flat": t.value === "flat",
+        "dai-btn--plain": t.value === "plain",
+        "dai-btn--muted": t.value === "muted",
+        "dai-btn--outlined": t.value === "outlined",
+        "dai-btn--sm": o.value === "small",
+        "dai-btn--lg": o.value === "large",
+        "dai-btn--loading": l.loading,
+        "dai-btn--block": l.block,
+        "dai-btn--rounded": l.rounded,
+        "dai-btn--condensed": l.condensed
+      }])
+    }, {
+      default: v(() => [
+        l.loading ? (s(), d("span", ge, i[0] || (i[0] = [
+          r("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 24 24"
+          }, [
+            r("circle", {
+              opacity: "0.25",
+              cx: "12",
+              cy: "12",
+              r: "10",
+              stroke: "currentColor",
+              "stroke-width": "4"
+            }),
+            r("path", {
+              opacity: "0.75",
+              fill: "currentColor",
+              d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            })
+          ], -1)
+        ]))) : p("", !0),
+        r("span", ke, [
+          l.icon ? (s(), d("div", {
+            key: 0,
+            class: g([l.icon, "dai-btn__icon"])
+          }, null, 2)) : p("", !0),
+          y(l.$slots, "default"),
+          l.iconAfter ? (s(), d("div", {
+            key: 1,
+            class: g([l.iconAfter, "dai-btn__icon"])
+          }, null, 2)) : p("", !0)
+        ])
+      ]),
+      _: 3
+    }, 8, ["type", "form", "href", "class"]));
+  }
+}), _e = { class: "dai-label" }, F = /* @__PURE__ */ f({
+  __name: "label",
+  props: {
+    text: {}
+  },
+  setup(n) {
+    return (e, a) => (s(), d("label", _e, [
+      y(e.$slots, "default", {}, () => [
+        U(_(e.text), 1)
+      ])
+    ]));
+  }
+}), we = { class: "dai-form-control__input-group__box" }, $e = /* @__PURE__ */ f({
+  __name: "inputGroup",
+  props: {
+    label: {},
+    labelFor: {},
+    outlined: { type: Boolean },
+    muted: { type: Boolean },
+    rounded: { type: Boolean },
+    disabled: { type: Boolean },
+    invalid: { type: Boolean },
+    lg: { type: Boolean },
+    sm: { type: Boolean }
+  },
+  setup(n) {
+    return (e, a) => (s(), d("div", {
+      class: g(["dai-form-control__input-group", {
+        "dai-form-control__input-group--labeled": !!e.label,
+        "dai-form-control__input-group--outlined": e.outlined,
+        "dai-form-control__input-group--muted": e.muted,
+        "dai-form-control__input-group--rounded": e.rounded,
+        "dai-form-control__input-group--lg": e.lg,
+        "dai-form-control__input-group--sm": e.sm,
+        "dai-form-control__input-group--disabled": e.disabled,
+        "dai-form-control__input-group--invalid": e.invalid
+      }])
+    }, [
+      e.label ? (s(), h(F, {
+        key: 0,
+        text: e.label,
+        for: e.labelFor,
+        class: "dai-form-control__input-group__label"
+      }, null, 8, ["text", "for"])) : p("", !0),
+      r("div", we, [
+        y(e.$slots, "default")
+      ])
+    ], 2));
+  }
+}), Be = { class: "dai-form-control__container" }, Ve = {
+  key: 0,
+  class: "dai-form-control__hint"
+}, Me = {
+  key: 0,
+  class: "dai-form-control__validation-message",
+  role: "alert"
+}, R = /* @__PURE__ */ f({
+  inheritAttrs: !1,
+  __name: "formControl",
+  props: {
+    id: {},
+    label: {},
+    labelInline: { type: Boolean },
+    labelInside: { type: Boolean },
+    hint: {},
+    validationMessage: {},
+    outlined: { type: Boolean },
+    muted: { type: Boolean },
+    rounded: { type: Boolean },
+    disabled: { type: Boolean },
+    invalid: { type: Boolean },
+    lg: { type: Boolean },
+    sm: { type: Boolean },
+    autocomplete: { type: [String, Boolean], default: "off" }
+  },
+  setup(n) {
+    const e = n, a = e.id || z(), t = B(() => typeof e.autocomplete == "string" ? e.autocomplete : e.autocomplete ? "on" : "off");
+    return (o, l) => (s(), d("div", {
+      class: g(["dai-form-control", {
+        [o.$attrs.class]: o.$attrs.class,
+        "dai-form-control--label-inline": o.labelInline,
+        "dai-form-control--invalid": o.invalid,
+        "dai-form-control--lg": o.lg
+      }])
+    }, [
+      o.label && !o.labelInside ? (s(), h(F, {
+        key: 0,
+        for: c(a),
+        text: o.label
+      }, null, 8, ["for", "text"])) : p("", !0),
+      r("div", Be, [
+        M($e, {
+          label: o.labelInside ? o.label : void 0,
+          "label-for": c(a),
+          outlined: o.outlined,
+          muted: o.muted,
+          rounded: o.rounded,
+          lg: o.lg,
+          sm: o.sm,
+          disabled: o.disabled,
+          invalid: o.invalid
+        }, {
+          default: v(() => [
+            y(o.$slots, "default", {
+              attrs: { id: c(a), disabled: o.disabled, autocomplete: t.value, ...o.$attrs, class: "" }
+            })
+          ]),
+          _: 3
+        }, 8, ["label", "label-for", "outlined", "muted", "rounded", "lg", "sm", "disabled", "invalid"]),
+        o.hint ? (s(), d("div", Ve, _(o.hint), 1)) : p("", !0),
+        M(A, { name: "dai-form-control__validation-message-transition" }, {
+          default: v(() => [
+            o.validationMessage ? (s(), d("div", Me, [
+              l[0] || (l[0] = r("svg", {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 256 256",
+                class: ""
+              }, [
+                r("path", {
+                  fill: "currentColor",
+                  d: "M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71Zm-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73ZM116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0Zm28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16Z"
+                })
+              ], -1)),
+              U(" " + _(o.validationMessage), 1)
+            ])) : p("", !0)
+          ]),
+          _: 1
+        })
+      ])
+    ], 2));
+  }
+}), Ce = (n, e) => {
+  const a = n.__vccOpts || n;
+  for (const [t, o] of e)
+    a[t] = o;
+  return a;
+}, Ie = {}, Ee = {
+  type: "button",
+  class: "dai-form-control__btn",
+  tabindex: "-1",
+  "aria-hidden": "true"
+};
+function Le(n, e) {
+  return s(), d("button", Ee, [
+    y(n.$slots, "default")
+  ]);
+}
+const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "title", "value"], Te = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor"
+}, Ae = {
+  key: 1,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor"
+}, Bo = /* @__PURE__ */ f({
+  __name: "input",
+  props: /* @__PURE__ */ I({
+    type: { default: "text" },
+    mask: {},
+    pattern: {},
+    title: {},
+    clearable: { type: Boolean },
+    validators: {},
+    showValidationError: { type: Boolean, default: !1 },
+    id: {},
+    label: {},
+    labelInline: { type: Boolean },
+    labelInside: { type: Boolean },
+    hint: {},
+    validationMessage: {},
+    outlined: { type: Boolean },
+    muted: { type: Boolean },
+    rounded: { type: Boolean },
+    disabled: { type: Boolean },
+    invalid: { type: Boolean },
+    lg: { type: Boolean },
+    sm: { type: Boolean },
+    autocomplete: { type: [String, Boolean] }
+  }, {
+    modelValue: {},
+    modelModifiers: {},
+    files: {},
+    filesModifiers: {}
+  }),
+  emits: ["update:modelValue", "update:files"],
+  setup(n) {
+    const e = n, a = w(n, "modelValue"), t = w(n, "files", {
+      set($) {
+        return o.value && (o.value.files = $), $;
+      }
+    }), o = L("formElement"), { isValid: l, validationMessage: i, validate: m } = S(
+      o,
+      e.validators,
+      e.showValidationError
+    ), u = N(!1);
+    T(a, () => {
+      t.value = o.value?.files || null;
+    });
+    let k;
+    const b = B(() => e.type === "password" ? u.value ? "text" : "password" : e.type), E = B(() => e.mask ? e.mask : e.type === "tel" ? {
+      mask: "{+7} (000) 000-00-00"
+    } : e.mask), K = B(() => e.pattern ? e.pattern : e.type === "tel" ? "^\\+7 \\(9\\d{2}\\) \\d{3}-\\d{2}-\\d{2}" : e.pattern), Q = B(() => e.title ? e.title : e.type === "tel" ? "+7 (999) 888-77-66" : e.title);
+    function W() {
+      u.value = !u.value;
+    }
+    function J() {
+      a.value = "";
+    }
+    function x($) {
+      if (k)
+        return;
+      const { value: V } = $.target;
+      a.value = V;
+    }
+    return j(() => {
+      E.value && import("./chunks/index.W-qQIppj.js").then(($) => {
+        k = $.default(
+          o.value,
+          E.value
+        ), k.on("accept", () => {
+          a.value = k.value;
+        });
+      });
+    }), ($, V) => (s(), h(R, C(e, {
+      "validation-message": $.showValidationError ? "" : c(i),
+      invalid: !c(l)
+    }), {
+      default: v(({ attrs: X }) => [
+        y($.$slots, "prepend"),
+        r("input", C({
+          ref_key: "formElement",
+          ref: o
+        }, X, {
+          type: b.value,
+          pattern: K.value,
+          title: Q.value,
+          value: a.value,
+          onInputPassive: x,
+          onKeyupPassive: V[0] || (V[0] = (ko) => !c(l) && c(m)()),
+          class: "dai-form-control__input"
+        }), null, 16, ze),
+        y($.$slots, "append"),
+        e.type === "password" && a.value ? (s(), h(Z, {
+          key: 0,
+          onClick: W
+        }, {
+          default: v(() => [
+            u.value ? (s(), d("svg", Ae, V[2] || (V[2] = [
+              r("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "stroke-width": "2",
+                d: "M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+              }, null, -1)
+            ]))) : (s(), d("svg", Te, V[1] || (V[1] = [
+              r("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "stroke-width": "2",
+                d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+              }, null, -1),
+              r("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "stroke-width": "2",
+                d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+              }, null, -1)
+            ])))
+          ]),
+          _: 1
+        })) : p("", !0),
+        $.clearable && a.value && !X.disabled ? (s(), h(Z, {
+          key: 1,
+          onClick: J
+        }, {
+          default: v(() => V[3] || (V[3] = [
+            r("svg", {
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor"
+            }, [
+              r("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "stroke-width": "2",
+                d: "M6 18L18 6M6 6l12 12"
+              })
+            ], -1)
+          ])),
+          _: 1,
+          __: [3]
+        })) : p("", !0)
+      ]),
+      _: 3
+    }, 16, ["validation-message", "invalid"]));
+  }
+}), Se = ["id"], je = ["for"], Pe = { class: "form-control__container" }, Oe = { class: "form-control__input-group" }, Ue = ["for"], Ne = {
+  key: 0,
+  class: "form-control__hint"
+}, Xe = {
+  key: 1,
+  class: "form-control__validation-message",
+  role: "alert"
+}, G = /* @__PURE__ */ f({
+  inheritAttrs: !1,
+  __name: "formControl",
+  props: {
+    id: {},
+    containerId: {},
+    label: {},
+    labelInline: { type: Boolean },
+    labelInside: { type: Boolean },
+    hint: {},
+    validationMessage: {},
+    outlined: { type: Boolean },
+    muted: { type: Boolean },
+    rounded: { type: Boolean },
+    disabled: { type: Boolean },
+    invalid: { type: Boolean },
+    lg: { type: Boolean },
+    sm: { type: Boolean },
+    autocomplete: { type: [String, Boolean], default: "off" }
+  },
+  setup(n) {
+    const e = n, a = e.id || z(), t = B(() => typeof e.autocomplete == "string" ? e.autocomplete : e.autocomplete ? "on" : "off");
+    return (o, l) => (s(), d("div", {
+      id: o.containerId,
+      class: g(["form-control", {
+        [o.$attrs.class]: o.$attrs.class,
+        "form-control--label-inline": o.labelInline,
+        "form-control--label-inside": o.labelInside,
+        "form-control--outlined": o.outlined,
+        "form-control--muted": o.muted,
+        "form-control--rounded": o.rounded,
+        "form-control--disabled": o.disabled,
+        "form-control--invalid": o.invalid,
+        "form-control--lg": o.lg,
+        "form-control--sm": o.sm
+      }])
+    }, [
+      o.label && !o.labelInside ? (s(), d("label", {
+        key: 0,
+        for: c(a)
+      }, _(o.label), 9, je)) : p("", !0),
+      r("div", Pe, [
+        r("div", Oe, [
+          o.label && o.labelInside ? (s(), d("label", {
+            key: 0,
+            for: c(a)
+          }, _(o.label), 9, Ue)) : p("", !0),
+          y(o.$slots, "default", {
+            attrs: { id: c(a), disabled: o.disabled, autocomplete: t.value, ...o.$attrs, class: "" }
+          })
+        ]),
+        o.hint ? (s(), d("div", Ne, _(o.hint), 1)) : p("", !0),
+        o.validationMessage ? (s(), d("div", Xe, [
+          l[0] || (l[0] = r("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 256 256",
+            class: ""
+          }, [
+            r("path", {
+              fill: "currentColor",
+              d: "M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71Zm-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73ZM116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0Zm28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16Z"
+            })
+          ], -1)),
+          U(" " + _(o.validationMessage), 1)
+        ])) : p("", !0)
+      ])
+    ], 10, Se));
+  }
+}), Vo = /* @__PURE__ */ f({
+  __name: "textarea",
+  props: /* @__PURE__ */ I({
+    autosize: { type: Boolean },
+    validators: {},
+    showValidationError: { type: Boolean, default: !1 }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(n) {
+    const e = n, a = w(n, "modelValue"), t = L("formElement"), { isValid: o, validationMessage: l, validate: i } = S(
+      t,
+      e.validators,
+      e.showValidationError
+    );
+    function m() {
+      if (!e.autosize) return;
+      const u = t.value, k = u.offsetHeight - u.clientHeight;
+      u.style.height = "auto", u.style.height = `${u.scrollHeight + k}px`;
+    }
+    return j(m), (u, k) => (s(), h(G, {
+      "validation-message": u.showValidationError ? "" : c(l),
+      invalid: !c(o)
+    }, {
+      default: v(({ attrs: b }) => [
+        P(r("textarea", C({
+          ref_key: "formElement",
+          ref: t
+        }, { ...b }, {
+          "onUpdate:modelValue": k[0] || (k[0] = (E) => a.value = E),
+          onKeyupPassive: k[1] || (k[1] = (E) => !c(o) && c(i)()),
+          onInputPassive: m,
+          class: ["form-control__textarea", {
+            "form-control__textarea--autosize": u.autosize
+          }]
+        }), null, 16), [
+          [ce, a.value]
+        ])
+      ]),
+      _: 1
+    }, 8, ["validation-message", "invalid"]));
+  }
+}), Ze = ["value"], Mo = /* @__PURE__ */ f({
+  __name: "select",
+  props: /* @__PURE__ */ I({
+    options: {},
+    optionText: { default: "text" },
+    optionValue: { default: "value" },
+    validators: {},
+    showValidationError: { type: Boolean, default: !1 }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(n) {
+    const e = n, a = w(n, "modelValue"), t = L("formElement"), { isValid: o, validationMessage: l, validate: i } = S(
+      t,
+      e.validators,
+      e.showValidationError
+    );
+    return (m, u) => (s(), h(R, {
+      "validation-message": m.showValidationError ? "" : c(l),
+      invalid: !c(o)
+    }, {
+      default: v(({ attrs: k }) => [
+        P(r("select", C({
+          class: "dai-select",
+          ref_key: "formElement",
+          ref: t
+        }, { ...k }, {
+          "onUpdate:modelValue": u[0] || (u[0] = (b) => a.value = b)
+        }), [
+          y(m.$slots, "default", {}, () => [
+            (s(!0), d(Y, null, D(m.options, (b) => (s(), d("option", {
+              value: b[m.optionValue],
+              key: b[m.optionValue]
+            }, _(b[m.optionText]), 9, Ze))), 128))
+          ])
+        ], 16), [
+          [pe, a.value]
+        ]),
+        u[1] || (u[1] = r("svg", {
+          class: "dai-select__btn",
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 16 16"
+        }, [
+          r("path", {
+            fill: "currentColor",
+            "fill-rule": "evenodd",
+            d: "M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06",
+            "clip-rule": "evenodd"
+          })
+        ], -1))
+      ]),
+      _: 3,
+      __: [1]
+    }, 8, ["validation-message", "invalid"]));
+  }
+}), qe = { class: "flex items-center h-5" }, Ye = ["id"], De = {
+  key: 0,
+  class: "ml-3 text-sm"
+}, He = ["for"], Fe = {
+  key: 0,
+  class: "text-secondary-500 dark:text-secondary-400"
+}, Co = /* @__PURE__ */ f({
+  inheritAttrs: !1,
+  __name: "checkbox",
+  props: /* @__PURE__ */ I({
+    color: { default: "primary" },
+    validators: {},
+    showValidationError: { type: Boolean, default: !0 },
+    label: {},
+    hint: {}
+  }, {
+    modelValue: { type: Boolean },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(n) {
+    const e = n, a = w(n, "modelValue"), t = z(), o = L("formElement"), { isValid: l } = S(
+      o,
+      e.validators,
+      e.showValidationError
+    );
+    return (i, m) => (s(), d("div", {
+      class: g(["flex items-start", i.$attrs.class])
+    }, [
+      r("div", qe, [
+        P(r("input", C({
+          ref_key: "formElement",
+          ref: o,
+          "onUpdate:modelValue": m[0] || (m[0] = (u) => a.value = u)
+        }, { ...i.$attrs, class: "" }, {
+          id: c(t),
+          type: "checkbox",
+          class: ["checkbox", {
+            [`checkbox--${i.color}`]: i.color,
+            "checkbox--invalid": !c(l)
+          }]
+        }), null, 16, Ye), [
+          [me, a.value]
+        ])
+      ]),
+      i.label ? (s(), d("div", De, [
+        r("label", {
+          for: c(t),
+          class: "font-medium select-none cursor-pointer"
+        }, _(i.label), 9, He),
+        i.hint ? (s(), d("p", Fe, _(i.hint), 1)) : p("", !0)
+      ])) : p("", !0)
+    ], 2));
+  }
+}), Re = { class: "flex items-center h-5" }, Ge = ["value", "id"], Ke = {
+  key: 0,
+  class: "text-sm"
+}, Qe = ["for"], We = {
+  key: 0,
+  class: "text-secondary-500 dark:text-secondary-400"
+}, Io = /* @__PURE__ */ f({
+  inheritAttrs: !1,
+  __name: "radio",
+  props: /* @__PURE__ */ I({
+    value: {},
+    color: { default: "primary" },
+    validators: {},
+    showValidationError: { type: Boolean, default: !0 },
+    label: {},
+    hint: {}
+  }, {
+    modelValue: { type: Boolean },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(n) {
+    const e = n, a = w(n, "modelValue"), t = z(), o = L("formElement"), { isValid: l } = S(
+      o,
+      e.validators,
+      e.showValidationError
+    );
+    return (i, m) => (s(), d("div", {
+      class: g(["flex items-start gap-3", i.$attrs.class])
+    }, [
+      r("div", Re, [
+        P(r("input", C({
+          type: "radio",
+          ref_key: "formElement",
+          ref: o,
+          "onUpdate:modelValue": m[0] || (m[0] = (u) => a.value = u)
+        }, { ...i.$attrs, class: "" }, {
+          value: i.value,
+          id: c(t),
+          class: ["radio", {
+            [`radio--${i.color}`]: i.color,
+            "radio--invalid": !c(l)
+          }]
+        }), null, 16, Ge), [
+          [fe, a.value]
+        ])
+      ]),
+      i.label ? (s(), d("div", Ke, [
+        r("label", {
+          for: c(t),
+          class: "font-medium select-none cursor-pointer"
+        }, _(i.label), 9, Qe),
+        i.hint ? (s(), d("p", We, _(i.hint), 1)) : p("", !0)
+      ])) : p("", !0)
+    ], 2));
+  }
+}), Je = { class: "flex items-start gap-3" }, xe = ["id", "aria-checked"], eo = {
+  key: 0,
+  class: "mt-0.5 text-sm"
+}, oo = ["for"], to = {
+  key: 0,
+  class: "text-secondary-500 dark:text-secondary-400"
+}, Eo = /* @__PURE__ */ f({
+  __name: "switch",
+  props: /* @__PURE__ */ I({
+    label: {},
+    hint: {}
+  }, {
+    modelValue: { type: Boolean },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(n) {
+    const e = w(n, "modelValue"), a = z();
+    return (t, o) => (s(), d("div", Je, [
+      r("button", {
+        onClick: o[0] || (o[0] = (l) => e.value = !e.value),
+        id: c(a),
+        "aria-checked": e.value,
+        role: "switch",
+        type: "button",
+        tabindex: "0",
+        class: g(["appearance-none flex-shrink-0 inline-block relative rounded-full w-10 h-6 p-0.5 transition-colors cursor-pointer select-none", [e.value ? "bg-primary-500" : "bg-secondary-300 dark:bg-dark-400"]]),
+        "un-focus-visible": "outline outline-primary-500 outline-2 outline-offset-2"
+      }, [
+        o[1] || (o[1] = r("span", { class: "sr-only" }, "Use setting", -1)),
+        r("div", {
+          "aria-hidden": "true",
+          class: g(["relative bg-white w-5 h-5 rounded-full shadow transition-all ease-in-out", [e.value ? "left-full -translate-x-full" : "left-0"]]),
+          "un-dark": "bg-dark-800"
+        }, null, 2)
+      ], 10, xe),
+      t.label ? (s(), d("div", eo, [
+        r("label", {
+          for: c(a),
+          class: "font-medium select-none cursor-pointer"
+        }, _(t.label), 9, oo),
+        t.hint ? (s(), d("p", to, _(t.hint), 1)) : p("", !0)
+      ])) : p("", !0)
+    ]));
+  }
+}), Lo = /* @__PURE__ */ f({
+  __name: "popoverDialog",
+  setup(n) {
+    return (e, a) => (s(), h(A, {
+      "enter-from-class": "opacity-0 scale-95",
+      "enter-to-class": "opacity-100 scale-100",
+      "enter-active-class": "transform transition ease-out duration-100",
+      "leave-from-class": "opacity-100 scale-100",
+      "leave-to-class": "opacity-0 scale-95",
+      "leave-active-class": "transform transition ease-in duration-75"
+    }, {
+      default: v(() => [
+        M(c(ee), {
+          class: "z-50 rounded-md overflow-hidden shadow-xl bg-white ring-1 ring-black ring-opacity-10 focus:outline-none",
+          "un-dark": "bg-dark-700 ring-dark-600"
+        }, {
+          default: v(() => [
+            y(e.$slots, "default")
+          ]),
+          _: 3
+        })
+      ]),
+      _: 3
+    }));
+  }
+}), zo = /* @__PURE__ */ f({
+  __name: "combobox",
+  props: {
+    modelValue: {},
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(n) {
+    const e = n, a = w(n, "modelValue"), t = z();
+    return (o, l) => (s(), h(G, C(e, { containerId: c(t) }), {
+      default: v(({ attrs: i }) => [
+        M(c(oe), C({ ...i }, {
+          activatorId: c(t),
+          modelValue: a.value,
+          "onUpdate:modelValue": l[0] || (l[0] = (m) => a.value = m)
+        }), {
+          default: v(() => [
+            y(o.$slots, "default")
+          ]),
+          _: 2
+        }, 1040, ["activatorId", "modelValue"])
+      ]),
+      _: 3
+    }, 16, ["containerId"]));
+  }
+}), To = /* @__PURE__ */ f({
+  __name: "comboboxInput",
+  setup(n) {
+    return (e, a) => (s(), h(c(te), { class: "form-control__input" }));
+  }
+}), Ao = /* @__PURE__ */ f({
+  __name: "comboboxOptions",
+  setup(n) {
+    return (e, a) => (s(), h(A, {
+      "enter-from-class": "opacity-0 scale-95",
+      "enter-to-class": "opacity-100 scale-100",
+      "enter-active-class": "transform transition ease-out duration-100",
+      "leave-from-class": "opacity-100 scale-100",
+      "leave-to-class": "opacity-0 scale-95",
+      "leave-active-class": "transform transition ease-in duration-75"
+    }, {
+      default: v(() => [
+        M(c(ae), {
+          class: "z-50 my-2 p-1 space-y-1 rounded-md overflow-hidden shadow-xl bg-white ring-1 ring-black ring-opacity-10 focus:outline-none",
+          "un-dark": "bg-dark-700 ring-dark-600"
+        }, {
+          default: v(() => [
+            y(e.$slots, "default")
+          ]),
+          _: 3
+        })
+      ]),
+      _: 3
+    }));
+  }
+}), So = /* @__PURE__ */ f({
+  __name: "comboboxOption",
+  props: {
+    value: {}
+  },
+  setup(n) {
+    return (e, a) => (s(), h(c(le), {
+      value: e.value,
+      class: "flex items-center px-3 py-2 cursor-pointer transition-colors text-sm rounded flex items-center gap-4 select-none outline-none",
+      "un-data-active": "[&:not([aria-checked=true])]:bg-secondary-100 [&:not([aria-checked=true])]:dark:bg-dark-600",
+      "un-aria-checked": "bg-primary-50 text-primary-500 dark:bg-dark-500 dark:text-white",
+      "un-aria-disabled": "pointer-events-none text-secondary-500 dark:text-secondary-400"
+    }, {
+      default: v(({ isActive: t, isSelected: o }) => [
+        y(e.$slots, "default", {
+          isActive: t,
+          isSelected: o
+        })
+      ]),
+      _: 3
+    }, 8, ["value"]));
+  }
+}), jo = /* @__PURE__ */ f({
+  __name: "menuItems",
+  setup(n) {
+    return (e, a) => (s(), h(A, {
+      "enter-from-class": "dai-menu-items--anim",
+      "leave-to-class": "dai-menu-items--anim"
+    }, {
+      default: v(() => [
+        M(c(se), { class: "dai-menu-items" }, {
+          default: v(() => [
+            y(e.$slots, "default")
+          ]),
+          _: 3
+        })
+      ]),
+      _: 3
+    }));
+  }
+}), ao = {
+  key: 0,
+  class: "text-secondary-400 flex-shrink-0"
+}, Po = /* @__PURE__ */ f({
+  __name: "menuItem",
+  props: {
+    icon: {}
+  },
+  setup(n) {
+    return (e, a) => (s(), h(c(ne), { class: "dai-menu-item" }, {
+      default: v(({ isActive: t, isSelected: o }) => [
+        e.icon ? (s(), d("div", ao, [
+          r("div", {
+            class: g(["h-5 w-5", e.icon])
+          }, null, 2)
+        ])) : p("", !0),
+        y(e.$slots, "default", {
+          isActive: t,
+          isSelected: o
+        })
+      ]),
+      _: 3
+    }));
+  }
+}), Oo = /* @__PURE__ */ f({
+  __name: "tab",
+  props: {
+    id: {},
+    ariaControls: {},
+    value: {}
+  },
+  setup(n) {
+    return (e, a) => (s(), h(c(ie), {
+      id: e.id,
+      "aria-controls": e.ariaControls,
+      value: e.value,
+      class: "dai-tab"
+    }, {
+      default: v(() => [
+        y(e.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["id", "aria-controls", "value"]));
+  }
+}), Uo = /* @__PURE__ */ f({
+  __name: "tabList",
+  setup(n) {
+    const e = L("tablist"), a = L("slider"), t = N({});
+    function o() {
+      if (!a.value) return;
+      const l = e.value?.$el;
+      if (!l) return;
+      const i = l.querySelector("[aria-selected=true]");
+      i && (t.value = {
+        left: `${i.offsetLeft}px`,
+        right: `${l.offsetWidth - i.offsetLeft - i.offsetWidth}px`,
+        transition: a.value.offsetLeft > i.offsetLeft ? "left .2s, right .5s" : "left .5s, right .2s"
+      });
+    }
+    return j(() => ve(o)), (l, i) => (s(), h(c(re), {
+      ref_key: "tablist",
+      ref: e,
+      onClickPassive: o,
+      class: "dai-tab-list"
+    }, {
+      default: v(() => [
+        r("div", {
+          ref_key: "slider",
+          ref: a,
+          class: "dai-tab-list__slider",
+          style: O(t.value)
+        }, null, 4),
+        y(l.$slots, "default")
+      ]),
+      _: 3
+    }, 512));
+  }
+}), lo = ["id"], No = /* @__PURE__ */ f({
+  inheritAttrs: !1,
+  __name: "offcanvas",
+  props: /* @__PURE__ */ I({
+    id: {},
+    position: { default: "right" },
+    push: { type: Boolean },
+    closeOnOutsideClick: { type: Boolean, default: !0 },
+    lg: { type: Boolean },
+    xl: { type: Boolean }
+  }, {
+    modelValue: { type: Boolean },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(n) {
+    const e = n, a = w(n, "modelValue"), t = e.id ?? z(), { classList: o } = ye(document.body, "nui-body-push");
+    T(a, () => {
+      if (!e.push || (o.splice(1), !a.value))
+        return;
+      let i = "nui-body-push--" + e.position;
+      e.lg && (i += "--lg"), e.xl && (i += "--xl"), o.push(i);
+    });
+    function l(i) {
+      i.target.closest(`#${t}`) || e.closeOnOutsideClick && (a.value = !1);
+    }
+    return j(() => {
+      window.addEventListener("click", l, { passive: !0 });
+    }), q(() => {
+      window.removeEventListener("click", l);
+    }), (i, m) => (s(), h(H, { to: "body" }, [
+      M(A, {
+        appear: "",
+        "enter-from-class": "nui-offcanvas--animate-hidden",
+        "enter-to-class": "nui-offcanvas--animate-shown",
+        "enter-active-class": "ease-in-out",
+        "leave-from-class": "nui-offcanvas--animate-shown",
+        "leave-to-class": "nui-offcanvas--animate-hidden",
+        "leave-active-class": "ease-in-out"
+      }, {
+        default: v(() => [
+          a.value ? (s(), d("div", C({
+            key: 0,
+            id: c(t)
+          }, i.$attrs, {
+            class: ["nui-offcanvas", {
+              [`nui-offcanvas--${i.position}`]: !0,
+              "nui-offcanvas--shadow": !i.push,
+              "nui-offcanvas--lg": i.lg,
+              "nui-offcanvas--xl": i.xl
+            }]
+          }), [
+            y(i.$slots, "default")
+          ], 16, lo)) : p("", !0)
+        ]),
+        _: 3
+      })
+    ]));
+  }
+}), so = {
+  key: 0,
+  role: "alert"
+}, no = { class: "flex items-start" }, io = {
+  class: "h-6 w-6",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor"
+}, ro = {
+  key: 0,
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  "stroke-width": "2",
+  d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+}, uo = {
+  key: 1,
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  "stroke-width": "2",
+  d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+}, co = {
+  key: 2,
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  "stroke-width": "2",
+  d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+}, po = {
+  key: 3,
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  "stroke-width": "2",
+  d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+}, mo = { class: "flex-grow pt-.5" }, fo = {
+  key: 0,
+  class: "mt-1 text-white text-opacity-80"
+}, vo = /* @__PURE__ */ f({
+  __name: "notification",
+  props: /* @__PURE__ */ I({
+    color: {},
+    icon: {},
+    message: {},
+    detail: {},
+    dismissible: { type: Boolean, default: !0 },
+    timeout: { default: 3e3 }
+  }, {
+    modelValue: { type: Boolean },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(n) {
+    const e = n, a = w(n, "modelValue");
+    let t;
+    function o() {
+      clearTimeout(t), a.value && e.timeout && (t = setTimeout(() => a.value = !1, e.timeout));
+    }
+    return T(a, o, { immediate: !0 }), (l, i) => a.value ? (s(), d("div", so, [
+      r("div", {
+        class: g(["rounded-md ring-1 ring-black ring-opacity-10 px-4 py-3 shadow-2xl text-sm opacity-95 hover:opacity-100 transition-opacity", {
+          "bg-secondary-600": !l.color || l.color == "secondary",
+          "bg-primary-400": l.color == "primary",
+          "bg-success-400": l.color == "success",
+          "bg-info-400": l.color == "info",
+          "bg-warning-400": l.color == "warning",
+          "bg-danger-400": l.color == "danger"
+        }])
+      }, [
+        r("div", no, [
+          l.icon ? (s(), d("div", {
+            key: 0,
+            class: g(["mx-auto flex-shrink-0 pr-4", {
+              "text-success-500": l.icon == "success",
+              "text-info-500": l.icon == "info",
+              "text-warning-500": l.icon == "warning",
+              "text-danger-600": l.icon == "error"
+            }])
+          }, [
+            (s(), d("svg", io, [
+              l.icon == "success" ? (s(), d("path", ro)) : l.icon == "info" ? (s(), d("path", uo)) : l.icon == "warning" ? (s(), d("path", co)) : l.icon == "error" ? (s(), d("path", po)) : p("", !0)
+            ]))
+          ], 2)) : p("", !0),
+          r("div", mo, [
+            r("div", {
+              class: g(["text-white text-opacity-90", {
+                "font-medium": l.detail
+              }])
+            }, _(l.message), 3),
+            l.detail ? (s(), d("div", fo, _(l.detail), 1)) : p("", !0)
+          ]),
+          l.dismissible ? (s(), d("div", {
+            key: 1,
+            onClick: i[0] || (i[0] = (m) => a.value = !1),
+            class: "ml-4 flex-shrink-0 text-white text-opacity-80 hover:text-opacity-100 cursor-pointer"
+          }, i[1] || (i[1] = [
+            r("svg", {
+              class: "h-5 w-5",
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor"
+            }, [
+              r("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "stroke-width": "2",
+                d: "M6 18L18 6M6 6l12 12"
+              })
+            ], -1)
+          ]))) : p("", !0)
+        ])
+      ], 2)
+    ])) : p("", !0);
+  }
+}), Xo = /* @__PURE__ */ f({
+  __name: "notificationQueue",
+  props: /* @__PURE__ */ I({
+    length: { default: 3 },
+    timeout: { default: 4e3 },
+    position: { default: "fixed" },
+    positionX: { default: "center" },
+    positionY: { default: "top" }
+  }, {
+    queue: { default: [] },
+    queueModifiers: {}
+  }),
+  emits: ["update:queue"],
+  setup(n) {
+    const e = n, a = w(n, "queue"), t = N([]);
+    let o = 0;
+    function l() {
+      a.value.length === 0 || t.value.length >= e.length || (t.value.push({ ...a.value[0], id: o++, show: !0 }), a.value.shift());
+    }
+    function i(u) {
+      setTimeout(() => {
+        t.value = t.value.filter(
+          (k) => k.id !== u
+        ), l();
+      }, 200);
+    }
+    T(a, l, { immediate: !0, deep: !0 });
+    const m = B(() => {
+      const u = ["opacity-0"];
+      return e.positionX === "right" ? u.push("translate-x-80") : e.positionX === "left" ? u.push("-translate-x-80") : e.positionX === "center" && e.positionY === "top" ? u.push("-translate-y-20") : e.positionX === "center" && e.positionY === "bottom" && u.push("translate-y-20"), u.join(" ");
+    });
+    return (u, k) => (s(), d("div", {
+      class: g(["fixed z-100 w-96 max-w-full flex gap-2", {
+        fixed: u.position == "fixed",
+        absolute: u.position == "absolute",
+        "top-4": u.positionY == "top",
+        "bottom-4": u.positionY == "bottom",
+        "right-4": u.positionX == "right",
+        "left-4": u.positionX == "left",
+        "left-1/2 -translate-x-1/2": u.positionX == "center",
+        "flex-col-reverse": u.positionY === "top",
+        "flex-col": u.positionY === "bottom"
+      }])
+    }, [
+      M(he, {
+        appear: "",
+        "enter-from-class": m.value,
+        "enter-active-class": "ease-out",
+        "leave-to-class": m.value,
+        "leave-active-class": "ease-in"
+      }, {
+        default: v(() => [
+          (s(!0), d(Y, null, D(t.value, (b) => (s(), h(vo, {
+            key: b.id,
+            color: b.color,
+            icon: b.type,
+            message: b.message,
+            detail: b.detail,
+            timeout: b.timeout ?? u.timeout,
+            modelValue: b.show,
+            "onUpdate:modelValue": [(E) => b.show = E, (E) => i(b.id)],
+            class: "transition-all duration-200"
+          }, null, 8, ["color", "icon", "message", "detail", "timeout", "modelValue", "onUpdate:modelValue"]))), 128))
+        ]),
+        _: 1
+      }, 8, ["enter-from-class", "leave-to-class"])
+    ], 2));
+  }
+}), ho = ["aria-valuenow"], Zo = /* @__PURE__ */ f({
+  __name: "progressbar",
+  props: {
+    value: {},
+    color: { default: "primary" },
+    height: { default: 5 },
+    rounded: { type: Boolean, default: !0 }
+  },
+  setup(n) {
+    const e = n, a = B(() => e.value === void 0);
+    return (t, o) => (s(), d("div", {
+      class: g(["overflow-hidden text-xs w-full flex-1", {
+        rounded: t.rounded,
+        "bg-primary-200": t.color == "primary",
+        "bg-success-200": t.color == "success",
+        "bg-info-200": t.color == "info",
+        "bg-warning-200": t.color == "warning",
+        "bg-danger-200": t.color == "danger"
+      }]),
+      style: O({ height: t.height + "px" }),
+      role: "progressbar",
+      "aria-valuemin": "0",
+      "aria-valuemax": "100",
+      "aria-valuenow": t.value
+    }, [
+      r("div", {
+        style: O(`width:${t.value}%`),
+        class: g([{
+          "bg-primary-500": t.color == "primary",
+          "bg-success-500": t.color == "success",
+          "bg-info-500": t.color == "info",
+          "bg-warning-500": t.color == "warning",
+          "bg-danger-500": t.color == "danger",
+          "progress-infinite": a.value
+        }, "h-full shadow-none relative text-center whitespace-nowrap text-white justify-center"])
+      }, null, 6)
+    ], 14, ho));
+  }
+}), bo = {
+  key: 0,
+  class: "z-50"
+}, yo = { class: "fixed inset-0 overflow-y-auto" }, go = { class: "modal__dialog" }, qo = /* @__PURE__ */ f({
+  inheritAttrs: !1,
+  __name: "modal",
+  props: {
+    modelValue: { type: Boolean },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(n) {
+    const e = w(n, "modelValue");
+    function a() {
+      e.value = !1;
+    }
+    return T(e, (t) => {
+      t ? document.body.classList.add("overflow-hidden") : document.body.classList.remove("overflow-hidden");
+    }), (t, o) => (s(), h(H, { to: "body" }, [
+      M(A, {
+        appear: "",
+        name: "modal",
+        duration: { enter: 300, leave: 200 }
+      }, {
+        default: v(() => [
+          e.value ? (s(), d("div", bo, [
+            o[0] || (o[0] = r("div", {
+              class: "modal__backdrop fixed inset-0 bg-primary-50/60 backdrop-blur-sm",
+              "aria-hidden": "true"
+            }, null, -1)),
+            r("div", yo, [
+              r("div", {
+                onClick: be(a, ["self"]),
+                class: "min-h-full flex items-center justify-center p-4 sm:p-6"
+              }, [
+                r("div", go, [
+                  y(t.$slots, "default", { close: a })
+                ])
+              ])
+            ])
+          ])) : p("", !0)
+        ]),
+        _: 3
+      })
+    ]));
+  }
+});
+export {
+  $o as Btn,
+  Co as Checkbox,
+  zo as Combobox,
+  To as ComboboxInput,
+  So as ComboboxOption,
+  Ao as ComboboxOptions,
+  Bo as Input,
+  Ho as Menu,
+  Po as MenuItem,
+  jo as MenuItems,
+  qo as Modal,
+  vo as Notification,
+  Xo as NotificationQueue,
+  No as Offcanvas,
+  Fo as Popover,
+  Lo as PopoverDialog,
+  Zo as Progressbar,
+  Io as Radio,
+  Mo as Select,
+  Eo as Switch,
+  Oo as Tab,
+  Ro as TabContainer,
+  Uo as TabList,
+  Go as TabPanel,
+  Vo as Textarea,
+  ye as useClassList
+};