@indielayer/ui 1.0.0-alpha.5 → 1.0.0-alpha.6

package/lib/index.es.js

@@ -365,7 +365,7 @@ const tailwindColors = Object.freeze({
     900: "#881337"
   }
 });
-var version = "1.0.0-alpha.5";
+var version = "1.0.0-alpha.6";
 const injectTabKey = Symbol();
 const injectFormKey = Symbol();
 const injectIconsKey = Symbol();
@@ -637,7 +637,8 @@ const _sfc_main$H = defineComponent({
     }
   }),
   setup(props) {
-    const icons = inject(injectIconsKey, {});
+    const icons = inject(injectIconsKey, () => {
+    }, false);
     const sizeClasses = computed(() => {
       if (props.size === "xs")
         return "h-3 w-3";
@@ -679,18 +680,18 @@ const _sfc_main$H = defineComponent({
       }
     });
     function getSVG(svgString) {
-      const temp = document.createElement("template");
-      temp.innerHTML = svgString.trim();
-      const [svg] = temp.content.children;
-      const names = svg.getAttributeNames();
+      svgString = svgString.trim();
+      const content = svgString.substring(svgString.indexOf(">") + 1, svgString.lastIndexOf("</svg>"));
+      const attrsRaw = svgString.substring(svgString.indexOf("<svg") + 4, svgString.indexOf(">")).trim().match(/[\w-]+="[^"]*"/g);
       const attributes = {};
-      names.forEach((n) => {
-        if (!["height", "width", "class"].includes(n))
-          attributes[n] = svg.getAttribute(n);
+      attrsRaw == null ? void 0 : attrsRaw.forEach((a) => {
+        const [attribute, value] = a.split("=");
+        if (!["height", "width", "class"].includes(attribute))
+          attributes[attribute] = value.replace(/(^"|"$)/g, "");
       });
       return {
         attributes,
-        content: svg.innerHTML
+        content
       };
     }
     return {
@@ -855,6 +856,8 @@ const _sfc_main$F = defineComponent({
       type: String,
       default: "right"
     },
+    offsetX: [Number, String],
+    offsetY: [Number, String],
     animated: Boolean,
     outlined: Boolean,
     icon: String,
@@ -889,8 +892,17 @@ const _sfc_main$F = defineComponent({
       }
       return classes;
     });
+    const offsetStyle = computed(() => {
+      const style = {};
+      if (props.offsetX)
+        style[props.align === "left" ? "marginLeft" : "marginRight"] = props.offsetX + "px";
+      if (props.offsetY)
+        style[props.position === "top" ? "marginTop" : "marginBottom"] = props.offsetY + "px";
+      return style;
+    });
     return {
       styles,
+      offsetStyle,
       positionClasses
     };
   }
@@ -915,7 +927,8 @@ function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
             {
               "border-2 border-gray-50 dark:border-gray-900": _ctx.outlined
             }
-          ]])
+          ]]),
+          style: normalizeStyle(_ctx.offsetStyle)
         }, [
           _ctx.animated ? (openBlock(), createElementBlock("div", _hoisted_2$i)) : createCommentVNode("", true),
           createElementVNode("div", {
@@ -931,7 +944,7 @@ function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
           }, [
             renderSlot(_ctx.$slots, "content")
           ], 2)
-        ], 2)) : createCommentVNode("", true)
+        ], 6)) : createCommentVNode("", true)
       ])
     ]),
     _: 3
@@ -1151,8 +1164,8 @@ const _sfc_main$C = defineComponent({
               bg: gray[800],
               text: "white",
               border: gray[600],
-              hover: { bg: !props.loading ? gray[800] : "" },
-              active: { bg: !props.loading ? gray[700] : "" }
+              hover: { bg: !props.loading ? gray[700] : "" },
+              active: { bg: !props.loading ? gray[600] : "" }
             }
           }));
         }
@@ -1415,7 +1428,7 @@ function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
 const cssModules$7 = {
   "$style": style0$7
 };
-var XButton = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["render", _sfc_render$C], ["__cssModules", cssModules$7], ["__scopeId", "data-v-7ada6753"]]);
+var XButton = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["render", _sfc_render$C], ["__cssModules", cssModules$7], ["__scopeId", "data-v-6cb75733"]]);
 var style0$6 = {
   "button-group": "_button-group_s7fyl_2",
   "button-group--rounded": "_button-group--rounded_s7fyl_1"
@@ -1596,7 +1609,7 @@ const _sfc_main$z = defineComponent({
     const checked = ref(false);
     watch(() => props.modelValue, (value) => {
       checked.value = !!value;
-    });
+    }, { immediate: true });
     watch(() => checked.value, (value) => {
       emit("update:modelValue", value);
     });
@@ -1679,7 +1692,7 @@ const _sfc_main$z = defineComponent({
     });
   }
 });
-const _withScopeId$2 = (n) => (pushScopeId("data-v-54fce636"), n = n(), popScopeId(), n);
+const _withScopeId$2 = (n) => (pushScopeId("data-v-05f49cb5"), n = n(), popScopeId(), n);
 const _hoisted_1$p = { class: "inline-block relative cursor-pointer align-middle mb-1 pb-2" };
 const _hoisted_2$g = ["aria-checked", "aria-disabled", "disabled", "name", "required"];
 const _hoisted_3$d = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("path", { d: "M0 11l2-2 5 5L18 3l2 2L7 18z" }, null, -1));
@@ -1752,7 +1765,7 @@ function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
 const cssModules$5 = {
   "$style": style0$5
 };
-var Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["render", _sfc_render$z], ["__cssModules", cssModules$5], ["__scopeId", "data-v-54fce636"]]);
+var Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["render", _sfc_render$z], ["__cssModules", cssModules$5], ["__scopeId", "data-v-05f49cb5"]]);
 const _sfc_main$y = defineComponent({
   name: "XCollapse",
   components: {
@@ -2523,7 +2536,7 @@ const _sfc_main$v = defineComponent({
     useResizeObserver(scrollEl, triggerScroll);
     if (props.horizontal && props.mousewheel)
       useEventListener(scrollEl, "wheel", (e) => {
-        if (!scrollEl.value)
+        if (!scrollEl.value || scrollEl.value.scrollWidth <= scrollEl.value.clientWidth)
           return;
         e.preventDefault();
         scrollEl.value.scrollLeft += e.deltaY + e.deltaX;
@@ -2576,7 +2589,7 @@ function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
 const cssModules$4 = {
   "$style": style0$4
 };
-var XScroll = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render$v], ["__cssModules", cssModules$4], ["__scopeId", "data-v-ff88aa62"]]);
+var XScroll = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render$v], ["__cssModules", cssModules$4], ["__scopeId", "data-v-7362ac18"]]);
 const _sfc_main$u = defineComponent({
   name: "XDrawer",
   components: {
@@ -2939,7 +2952,8 @@ const _sfc_main$r = defineComponent({
       type: String,
       default: "text"
     },
-    inputClass: String
+    inputClass: String,
+    block: Boolean
   }),
   emits: useInputtable.emits(),
   setup(props, { emit }) {
@@ -3016,7 +3030,7 @@ const _hoisted_8$1 = ["textContent"];
 function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_x_icon = resolveComponent("x-icon");
   return openBlock(), createElementBlock("label", {
-    class: normalizeClass(["inline-block relative align-bottom text-left", { "mb-3": _ctx.isInsideForm }])
+    class: normalizeClass(["inline-block relative align-bottom text-left", { "mb-3": _ctx.isInsideForm, "w-full": _ctx.block }])
   }, [
     _ctx.label ? (openBlock(), createElementBlock("p", {
       key: 0,
@@ -3054,7 +3068,7 @@ function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
         placeholder: _ctx.placeholder,
         readonly: _ctx.readonly,
         type: _ctx.currentType,
-        value: _ctx.modelValue
+        value: _ctx.modelValue || ""
       }, _ctx.$attrs, toHandlers(_ctx.inputListeners), {
         onChange: _cache[0] || (_cache[0] = (...args) => _ctx.onChange && _ctx.onChange(...args))
       }), null, 16, _hoisted_3$b),
@@ -3133,7 +3147,7 @@ const _sfc_main$q = defineComponent({
     };
   }
 });
-const _withScopeId$1 = (n) => (pushScopeId("data-v-b6c57c10"), n = n(), popScopeId(), n);
+const _withScopeId$1 = (n) => (pushScopeId("data-v-af336fea"), n = n(), popScopeId(), n);
 const _hoisted_1$i = {
   key: 0,
   class: "inline-flex items-center"
@@ -3160,7 +3174,7 @@ const _hoisted_2$d = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ create
 function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.to ? "router-link" : _ctx.tag), {
     to: _ctx.to,
-    class: normalizeClass(["transition duration-300 ease-in-out cursor-pointer text-[color:var(--x-text)] dark:text-[color:var(--x-dark-text)]", [
+    class: normalizeClass(["transition duration-300 ease-in-out cursor-pointer inline-flex text-[color:var(--x-text)] dark:text-[color:var(--x-dark-text)]", [
       [_ctx.shadow ? _ctx.$style["link--shadow"] : ""],
       {
         "underline": _ctx.underline
@@ -3180,7 +3194,7 @@ function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
 const cssModules$3 = {
   "$style": style0$3
 };
-var XLink = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$q], ["__cssModules", cssModules$3], ["__scopeId", "data-v-b6c57c10"]]);
+var XLink = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$q], ["__cssModules", cssModules$3], ["__scopeId", "data-v-af336fea"]]);
 var style0$2 = {
   "menu-item": "_menu-item_1v1kj_2",
   "menu-item--active": "_menu-item--active_1v1kj_1"
@@ -3209,8 +3223,14 @@ const _sfc_main$p = defineComponent({
     icon: String,
     iconRight: String,
     loading: Boolean,
-    rounded: Boolean,
-    filled: Boolean,
+    rounded: {
+      type: Boolean,
+      default: true
+    },
+    filled: {
+      type: Boolean,
+      default: true
+    },
     selected: Boolean,
     disabled: Boolean
   }),
@@ -3241,6 +3261,11 @@ const _sfc_main$p = defineComponent({
         classObserver.disconnect();
     });
     function onItemClick(e) {
+      if (cItem.value.disabled) {
+        e.stopPropagation();
+        e.preventDefault();
+        return;
+      }
       cItem.value.onClick && cItem.value.onClick(e);
       emit("click", e);
     }
@@ -3265,7 +3290,12 @@ const _sfc_main$p = defineComponent({
       const color = colors.getPalette(cItem.value.color || "gray");
       const gray = colors.getPalette("gray");
       if (cItem.value.disabled)
-        return css.get("text", gray[300]);
+        return css.variables({
+          text: gray[300],
+          dark: {
+            text: gray[600]
+          }
+        });
       if (filled.value) {
         if (isActive.value) {
           return css.variables({
@@ -3359,7 +3389,7 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
     href: _ctx.cItem.href,
     target: _ctx.cItem.target,
     color: _ctx.cItem.color,
-    class: normalizeClass(["relative flex items-center whitespace-nowrap px-3 mt-1", [
+    class: normalizeClass(["relative !flex items-center whitespace-nowrap px-3 mt-1", [
       _ctx.$style["menu-item"],
       [_ctx.isActive ? _ctx.$style["menu-item--active"] : ""],
       {
@@ -3414,7 +3444,7 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
 const cssModules$2 = {
   "$style": style0$2
 };
-var XMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$p], ["__cssModules", cssModules$2], ["__scopeId", "data-v-6f9d99e4"]]);
+var XMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$p], ["__cssModules", cssModules$2], ["__scopeId", "data-v-11179d66"]]);
 const _sfc_main$o = defineComponent({
   name: "XMenu",
   components: {
@@ -3431,8 +3461,14 @@ const _sfc_main$o = defineComponent({
     collapseIcon: String,
     expanded: Boolean,
     disabled: Boolean,
-    rounded: Boolean,
-    filled: Boolean
+    rounded: {
+      type: Boolean,
+      default: true
+    },
+    filled: {
+      type: Boolean,
+      default: true
+    }
   }),
   emits: ["expand"]
 });
@@ -3523,7 +3559,8 @@ var Menu = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$o]])
 const _sfc_main$n = defineComponent({
   name: "XModal",
   components: {
-    XScroll
+    XScroll,
+    XIcon
   },
   props: {
     size: {
@@ -3648,7 +3685,7 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
         }, [
           _ctx.showClose ? (openBlock(), createElementBlock("div", {
             key: 0,
-            class: normalizeClass(["absolute p-1 top-4 right-4 rounded-full bg-opacity-10 hover:bg-opacity-30 cursor-pointer", [
+            class: normalizeClass(["flex absolute p-1 top-4 z-10 right-4 rounded-full bg-opacity-10 hover:bg-opacity-30 cursor-pointer", [
               _ctx.$slots.image ? "bg-gray-900 text-white" : "bg-gray-500 text-gray-800 dark:text-gray-300"
             ]]),
             onClick: _cache[0] || (_cache[0] = (...args) => _ctx.close && _ctx.close(...args))
@@ -4485,7 +4522,7 @@ const _sfc_main$g = defineComponent({
     });
   }
 });
-const _withScopeId = (n) => (pushScopeId("data-v-857bd200"), n = n(), popScopeId(), n);
+const _withScopeId = (n) => (pushScopeId("data-v-4e34dad2"), n = n(), popScopeId(), n);
 const _hoisted_1$c = ["aria-selected", "aria-disabled"];
 const _hoisted_2$8 = ["name", "required", "disabled"];
 const _hoisted_3$6 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("circle", {
@@ -4502,10 +4539,11 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_x_spinner = resolveComponent("x-spinner");
   return openBlock(), createElementBlock("label", {
     ref: "elRef",
-    class: "inline-block mb-1 relative cursor-pointer focus:outline-none",
+    tabindex: "0",
+    class: "inline-block mb-1 relative cursor-pointer focus:outline-none group",
     "aria-selected": _ctx.selected ? "true" : "false",
     "aria-disabled": _ctx.disabled || _ctx.loading ? "true" : void 0,
-    tabindex: "0",
+    style: normalizeStyle(_ctx.styles),
     onKeypress: _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => _ctx.$emit("update:modelValue", _ctx.value), ["prevent", "stop"]), ["space"]))
   }, [
     createElementVNode("div", {
@@ -4522,15 +4560,14 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
         [vModelRadio, _ctx.selected]
       ]),
       createElementVNode("div", {
-        class: normalizeClass(["rounded-full flex justify-center items-center flex-shrink-0 border-2 border-[color:var(--x-border)] bg-[color:var(--x-bg)] dark:border-[color:var(--x-dark-border)] dark:bg-[color:var(--x-dark-bg)]", [
+        class: normalizeClass(["rounded-full flex justify-center items-center flex-shrink-0 border-2 outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline border-[color:var(--x-border)] bg-[color:var(--x-bg)] dark:border-[color:var(--x-dark-border)] dark:bg-[color:var(--x-dark-bg)]", [
           [_ctx.glow && !_ctx.disabled && !_ctx.loading ? _ctx.$style["radio--glow"] : ""],
           {
             "h-4 w-4": _ctx.size === "sm" || _ctx.size === "xs",
             "h-5 w-5": !_ctx.size || !["xs", "sm", "xl"].includes(_ctx.size),
             "h-6 w-6": _ctx.size === "xl"
           }
-        ]]),
-        style: normalizeStyle(_ctx.styles)
+        ]])
       }, [
         _ctx.loading ? (openBlock(), createBlock(_component_x_spinner, {
           key: 0,
@@ -4547,7 +4584,7 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
           }]),
           viewBox: "0 0 20 20"
         }, _hoisted_4$5, 2))
-      ], 6),
+      ], 2),
       _ctx.label ? (openBlock(), createElementBlock("span", {
         key: 0,
         class: normalizeClass(["font-medium text-gray-800 dark:text-gray-200 pl-2", {
@@ -4576,12 +4613,12 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
       class: "text-sm text-red-500 mt-1",
       textContent: toDisplayString(_ctx.errorInternal)
     }, null, 8, _hoisted_6$2)) : createCommentVNode("", true)
-  ], 40, _hoisted_1$c);
+  ], 44, _hoisted_1$c);
 }
 const cssModules = {
   "$style": style0
 };
-var Radio = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g], ["__cssModules", cssModules], ["__scopeId", "data-v-857bd200"]]);
+var Radio = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g], ["__cssModules", cssModules], ["__scopeId", "data-v-4e34dad2"]]);
 const _sfc_main$f = defineComponent({
   name: "XTag",
   props: __spreadProps(__spreadValues(__spreadValues({}, useCommon.props()), useColors.props("gray")), {
@@ -5591,13 +5628,14 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
             "text-align": header.align,
             sort: _ctx.getSort(header.value, _ctx.sort),
             sortable: header.sortable,
+            width: header.width,
             onClick: ($event) => header.sortable ? _ctx.sortHeader(header) : null
           }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(header.text), 1)
             ]),
             _: 2
-          }, 1032, ["sticky-header", "text-align", "sort", "sortable", "onClick"]);
+          }, 1032, ["sticky-header", "text-align", "sort", "sortable", "width", "onClick"]);
         }), 128))
       ]),
       _: 1
@@ -5642,10 +5680,13 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
 var Table = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
 const _sfc_main$4 = defineComponent({
   name: "XTab",
+  components: {
+    XIcon,
+    XLink
+  },
   props: __spreadProps(__spreadValues({}, useCommon.props()), {
     value: {
-      type: [String, Number],
-      required: true
+      type: [String, Number]
     },
     tag: {
       type: String,
@@ -5654,11 +5695,14 @@ const _sfc_main$4 = defineComponent({
     to: String,
     label: String,
     icon: String,
-    disabled: Boolean
+    disabled: Boolean,
+    exact: Boolean
   }),
   setup(props) {
+    const cValue = computed(() => props.to || props.value);
     const cLabel = computed(() => props.label || props.value);
     const teleportTo = ref(null);
+    const elRef = ref();
     const tabs = inject(injectTabKey, {
       tabsContentRef: ref(null),
       activateTab: () => {
@@ -5669,20 +5713,59 @@ const _sfc_main$4 = defineComponent({
         grow: false
       })
     });
+    const isSupported = window && "MutationObserver" in window;
+    const mutationObserver = isSupported ? new MutationObserver(check) : null;
+    const cExact = computed(() => tabs.state.exact || props.exact);
+    const cSize = computed(() => props.size || tabs.state.size);
     onMounted(() => {
       teleportTo.value = tabs.tabsContentRef.value;
+      if (props.to)
+        check();
+      if (isSupported && props.to)
+        mutationObserver == null ? void 0 : mutationObserver.observe(elRef.value.$el, {
+          attributes: true,
+          attributeFilter: ["class"]
+        });
+    });
+    onBeforeUnmount(() => {
+      if (mutationObserver)
+        mutationObserver.disconnect();
     });
+    function check() {
+      var _a2;
+      if (elRef.value && elRef.value.$el && props.to) {
+        const active = (_a2 = elRef.value) == null ? void 0 : _a2.$el.classList.contains(cExact.value ? "router-link-exact-active" : "router-link-active");
+        if (active)
+          tabs.activateTab(cValue.value);
+      }
+    }
     const state = reactive({
-      selected: computed(() => tabs.state.active === props.value)
+      selected: computed(() => tabs.state.active === cValue.value)
     });
     function onClickTab() {
-      tabs.activateTab(props.value);
+      if (!props.to)
+        tabs.activateTab(cValue.value);
     }
+    const sizeClasses = computed(() => {
+      if (cSize.value === "xs")
+        return "text-xs";
+      else if (cSize.value === "sm")
+        return "text-sm";
+      else if (cSize.value === "lg")
+        return "text-lg";
+      else if (cSize.value === "xl")
+        return "text-xl";
+      return "";
+    });
     return __spreadProps(__spreadValues({}, toRefs(state)), {
       variant: tabs.state.variant,
       grow: tabs.state.grow,
+      elRef,
       cLabel,
+      cValue,
+      cSize,
       tabs,
+      sizeClasses,
       teleportTo,
       onClickTab
     });
@@ -5691,14 +5774,16 @@ const _sfc_main$4 = defineComponent({
 const _hoisted_1$3 = ["data-value"];
 const _hoisted_2$2 = { class: "flex items-center justify-center" };
 function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_x_icon = resolveComponent("x-icon");
+  const _component_XIcon = resolveComponent("XIcon");
   return openBlock(), createElementBlock("li", {
-    "data-value": _ctx.value,
+    "data-value": _ctx.cValue,
     class: normalizeClass(["shrink-0 font-medium", { "flex-1": _ctx.grow }])
   }, [
-    (openBlock(), createBlock(resolveDynamicComponent(_ctx.to ? "router-link" : _ctx.tag), {
+    (openBlock(), createBlock(resolveDynamicComponent(_ctx.to ? "x-link" : _ctx.tag), {
+      ref: "elRef",
       to: _ctx.to,
       class: normalizeClass(["py-2 transition-colors duration-150 ease-in-out whitespace-nowrap text-center", [
+        _ctx.sizeClasses,
         {
           "px-8": _ctx.variant === "block",
           "text-[color:var(--x-tabs-text)] dark:text-[color:var(--x-dark-tabs-text)]": _ctx.selected,
@@ -5715,14 +5800,14 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
         renderSlot(_ctx.$slots, "tab", {
           label: _ctx.label,
           value: _ctx.value,
-          size: _ctx.size,
+          size: _ctx.cSize,
           icon: _ctx.icon
         }, () => [
           createElementVNode("div", _hoisted_2$2, [
-            _ctx.icon ? (openBlock(), createBlock(_component_x_icon, {
+            _ctx.icon ? (openBlock(), createBlock(_component_XIcon, {
               key: 0,
               icon: _ctx.icon,
-              size: _ctx.size,
+              size: _ctx.cSize,
               class: "mr-1.5 shrink-0"
             }, null, 8, ["icon", "size"])) : createCommentVNode("", true),
             createElementVNode("span", null, toDisplayString(_ctx.cLabel), 1)
@@ -5745,14 +5830,19 @@ const _sfc_main$3 = defineComponent({
   components: {
     XScroll
   },
-  props: __spreadProps(__spreadValues({}, useColors.props("primary")), {
+  props: __spreadProps(__spreadValues(__spreadValues({}, useCommon.props()), useColors.props("primary")), {
     modelValue: [String, Number],
     variant: {
       type: String,
       default: "line"
     },
+    align: {
+      type: String,
+      default: "left"
+    },
     ghost: Boolean,
-    grow: Boolean
+    grow: Boolean,
+    exact: Boolean
   }),
   emits: ["update:modelValue"],
   setup(props, { emit }) {
@@ -5761,13 +5851,20 @@ const _sfc_main$3 = defineComponent({
     const trackerRef = ref();
     const tabsRef = ref();
     const tabsContentRef = ref();
+    const active = ref();
+    watchEffect(() => {
+      active.value = props.modelValue;
+    });
     const state = reactive({
-      active: computed(() => props.modelValue),
+      active: computed(() => active.value),
       variant: computed(() => props.variant),
       ghost: computed(() => props.ghost),
-      grow: computed(() => props.grow)
+      grow: computed(() => props.grow),
+      exact: computed(() => props.exact),
+      size: computed(() => props.size)
     });
     function activateTab(tab) {
+      active.value = tab;
       emit("update:modelValue", tab);
     }
     provide(injectTabKey, {
@@ -5791,13 +5888,13 @@ const _sfc_main$3 = defineComponent({
         scrollRef.value.scrollEl.scrollTo({ left: center, behavior: "smooth" });
     }, 100);
     useResizeObserver(wrapperRef, () => {
-      updateTracker(props.modelValue);
+      updateTracker(active.value);
     });
-    watch(() => props.modelValue, (value) => {
+    watch(() => active.value, (value) => {
       updateTracker(value);
     });
     onMounted(() => {
-      updateTracker(props.modelValue);
+      updateTracker(active.value);
     });
     const css = useCSS("tabs");
     const colors = useColors();
@@ -5848,7 +5945,9 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
             class: normalizeClass(["flex relative min-w-full w-fit", {
               "border-b border-gray-200 dark:border-gray-700": _ctx.variant === "line",
               "space-x-8": _ctx.variant === "line" && !_ctx.grow,
-              "z-[1]": _ctx.variant === "block"
+              "z-[1]": _ctx.variant === "block",
+              "justify-center": _ctx.align === "center",
+              "justify-end": _ctx.align === "right"
             }])
           }, [
             renderSlot(_ctx.$slots, "default")
@@ -5878,6 +5977,7 @@ const _sfc_main$2 = defineComponent({
       type: String,
       default: "ltr"
     },
+    rows: Number,
     max: Number,
     maxlength: Number,
     min: Number,
@@ -5888,7 +5988,8 @@ const _sfc_main$2 = defineComponent({
       default: true
     },
     preventEnter: Boolean,
-    inputClass: String
+    inputClass: String,
+    block: Boolean
   }),
   emits: useInputtable.emits(),
   setup(props, { emit }) {
@@ -5938,13 +6039,13 @@ const _sfc_main$2 = defineComponent({
   }
 });
 const _hoisted_1$1 = ["textContent"];
-const _hoisted_2$1 = ["disabled", "max", "maxlength", "min", "dir", "minlength", "name", "placeholder", "readonly", "value"];
+const _hoisted_2$1 = ["disabled", "max", "maxlength", "min", "dir", "rows", "minlength", "name", "placeholder", "readonly", "value"];
 const _hoisted_3$1 = ["textContent"];
 const _hoisted_4$1 = ["textContent"];
 function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
   var _a2;
   return openBlock(), createElementBlock("label", {
-    class: normalizeClass(["inline-block relative align-bottom text-left", { "mb-3": _ctx.isInsideForm }])
+    class: normalizeClass(["inline-block relative align-bottom text-left", { "mb-3": _ctx.isInsideForm, "w-full": _ctx.block }])
   }, [
     _ctx.label ? (openBlock(), createElementBlock("p", {
       key: 0,
@@ -5978,6 +6079,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
       maxlength: _ctx.maxlength,
       min: _ctx.min,
       dir: _ctx.dir,
+      rows: _ctx.rows,
       minlength: _ctx.minlength,
       name: _ctx.name,
       placeholder: _ctx.placeholder,
@@ -6047,7 +6149,7 @@ const _hoisted_4 = ["textContent"];
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_x_spinner = resolveComponent("x-spinner");
   return openBlock(), createElementBlock("label", {
-    class: normalizeClass(["inline-block mb-1 pb-2", [!_ctx.disabled ? "cursor-pointer" : "cursor-not-allowed"]])
+    class: normalizeClass(["inline-block", [!_ctx.disabled ? "cursor-pointer" : "cursor-not-allowed"]])
   }, [
     createElementVNode("div", _hoisted_1, [
       createElementVNode("div", {

package/lib/style.css

@@ -1 +1 @@
-._alert_1sdha_2[data-v-35ce54d8]{color:var(--x-alert-text);background-color:var(--x-alert-bg);border-color:var(--x-alert-border)}._alert--glow_1sdha_1[data-v-35ce54d8]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-alert-glow),0 4px 6px -4px var(--x-alert-glow)}.dark ._alert_1sdha_2[data-v-35ce54d8]{color:var(--x-dark-alert-text, var(--x-alert-text));background-color:var(--x-dark-alert-bg, var(--x-alert-bg));border-color:var(--x-dark-alert-border, var(--x-alert-border))}._avatar_v7jzc_2[data-v-243016db]{color:var(--x-avatar-text);background-color:var(--x-avatar-bg);border-color:var(--x-avatar-border)}.dark ._avatar_v7jzc_2[data-v-243016db]{color:var(--x-dark-avatar-text, var(--x-avatar-text));background-color:var(--x-dark-avatar-bg, var(--x-avatar-bg));border-color:var(--x-dark-avatar-border, var(--x-avatar-border))}._button_1sbr9_2[data-v-7ada6753]{color:var(--x-button-text);background-color:var(--x-button-bg);border-color:var(--x-button-border)}._button--glow_1sbr9_1[data-v-7ada6753]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-button-glow),0 4px 6px -4px var(--x-button-glow)}._button_1sbr9_2[data-v-7ada6753]:hover{color:var(--x-button-text-hover, var(--x-button-text));background-color:var(--x-button-bg-hover, var(--x-button-bg));border-color:var(--x-button-border-hover, var(--x-button-border))}._button_1sbr9_2[data-v-7ada6753]:active{color:var(--x-button-text-active, var(--x-button-text));background-color:var(--x-button-bg-active, var(--x-button-bg));border-color:var(--x-button-border-active, var(--x-button-border))}.dark ._button_1sbr9_2[data-v-7ada6753]{color:var(--x-dark-button-text, var(--x-button-text));background-color:var(--x-dark-button-bg, var(--x-button-bg));border-color:var(--x-dark-button-border, var(--x-button-border))}.dark ._button_1sbr9_2[data-v-7ada6753]:hover{color:var(--x-dark-button-text-hover, var(--x-dark-button-text, var(--x-button-text)));background-color:var(--x-dark-button-bg-hover, var(--x-dark-button-bg, var(--x-button-bg)));border-color:var(--x-dark-button-border-hover, var(--x-dark-button-border, var(--x-button-border)))}.dark ._button_1sbr9_2[data-v-7ada6753]:active{color:var(--x-dark-button-text-active, var(--x-dark-button-text));background-color:var(--x-dark-button-bg-active, var(--x-dark-button-bg, var(--x-button-bg)));border-color:var(--x-dark-button-border-active, var(--x-dark-button-border, var(--x-button-border)))}._button-group_s7fyl_2:not(._button-group--rounded_s7fyl_1)>:first-child{border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-left-width:1px}._button-group_s7fyl_2:not(._button-group--rounded_s7fyl_1)>:last-child{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}._button-group--rounded_s7fyl_1>:first-of-type{border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-left-width:1px}._button-group--rounded_s7fyl_1>:last-child{border-top-right-radius:9999px;border-bottom-right-radius:9999px}._checkbox--glow_1dz66_1[data-v-54fce636]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-glow),0 4px 6px -4px var(--x-glow)}._scrollWrap_1k3q9_2[data-v-ff88aa62]:before,._scrollWrap_1k3q9_2[data-v-ff88aa62]:after{content:"";pointer-events:none;position:absolute;z-index:1;transition:box-shadow .2s}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-ff88aa62]:before,._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-ff88aa62]:after{top:0;bottom:0;width:20px}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-ff88aa62]:before,._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-ff88aa62]:after{right:0;left:0;height:20px}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-ff88aa62]:before{left:0}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-ff88aa62]:after{right:0}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-ff88aa62]:before{top:0}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-ff88aa62]:after{bottom:0}._scrollWrap_1k3q9_2._shadow-left_1k3q9_36[data-v-ff88aa62]:before{box-shadow:inset 12px 0 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-right_1k3q9_40[data-v-ff88aa62]:after{box-shadow:inset -12px 0 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-top_1k3q9_44[data-v-ff88aa62]:before{box-shadow:inset 0 12px 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-bottom_1k3q9_48[data-v-ff88aa62]:after{box-shadow:inset 0 -12px 10px -10px #00000012}._hideScroll_1k3q9_53[data-v-ff88aa62]{-ms-overflow-style:auto;scrollbar-width:none}._hideScroll_1k3q9_53[data-v-ff88aa62]::-webkit-scrollbar{display:none}._link--shadow_1tilo_1[data-v-b6c57c10]{box-shadow:inset 0 -.315em 0 0 var(--x-shadow)}._link--shadow_1tilo_1[data-v-b6c57c10]:hover{box-shadow:inset 0 -1.125em 0 0 var(--x-shadow)}.dark ._link--shadow_1tilo_1[data-v-b6c57c10]{box-shadow:inset 0 -.315em 0 0 var(--x-dark-shadow)}.dark ._link--shadow_1tilo_1[data-v-b6c57c10]:hover{box-shadow:inset 0 -1.125em 0 0 var(--x-dark-shadow)}._menu-item_1v1kj_2[data-v-6f9d99e4]{color:var(--x-text);background-color:var(--x-bg)}._menu-item_1v1kj_2[data-v-6f9d99e4]:before{content:"";position:absolute;left:-1px;height:100%;width:1px;background-color:transparent}._menu-item_1v1kj_2[data-v-6f9d99e4]:hover{color:var(--x-text-hover, var(--x-text));background-color:var(--x-bg-hover, var(--x-bg))}.dark ._menu-item_1v1kj_2[data-v-6f9d99e4]{color:var(--x-dark-text);background:var(--x-dark-bg)}.dark ._menu-item_1v1kj_2[data-v-6f9d99e4]:hover{color:var(--x-dark-text-hover, var(--x-dark-text));background-color:var(--x-dark-bg-hover, var(--x-dark-bg))}.x-menu-inner ._menu-item_1v1kj_2[data-v-6f9d99e4]:hover:before,.x-menu-inner ._menu-item--active_1v1kj_1[data-v-6f9d99e4]:before{background-color:var(--x-border-hover)}._popover_2vipi_2 ._popoverContent_2vipi_3{visibility:hidden;transition-duration:.1s;transition-timing-function:cubic-bezier(.4,0,1,1)}._popover_2vipi_2 ._popoverTop_2vipi_8{--tw-translate-y: .5rem}._popover_2vipi_2 ._popoverRight_2vipi_11{--tw-translate-x: -.5rem}._popover_2vipi_2 ._popoverBottom_2vipi_14{--tw-translate-y: -.25rem}._popover_2vipi_2 ._popoverLeft_2vipi_17{--tw-translate-x: .5rem}._popover_2vipi_2._hover_2vipi_21:hover ._popoverContent_2vipi_3,._popover_2vipi_2._is-open_2vipi_22 ._popoverContent_2vipi_3{visibility:visible;transition-duration:.15s;transition-timing-function:cubic-bezier(0,0,.2,1)}._popover_2vipi_2._hover_2vipi_21:hover ._popoverTop_2vipi_8,._popover_2vipi_2._is-open_2vipi_22 ._popoverTop_2vipi_8{--tw-translate-y: .25rem}._popover_2vipi_2._hover_2vipi_21:hover ._popoverRight_2vipi_11,._popover_2vipi_2._is-open_2vipi_22 ._popoverRight_2vipi_11{--tw-translate-x: 0px}._popover_2vipi_2._hover_2vipi_21:hover ._popoverBottom_2vipi_14,._popover_2vipi_2._is-open_2vipi_22 ._popoverBottom_2vipi_14{--tw-translate-y: .25rem}._popover_2vipi_2._hover_2vipi_21:hover ._popoverLeft_2vipi_17,._popover_2vipi_2._is-open_2vipi_22 ._popoverLeft_2vipi_17{--tw-translate-x: 0px}._radio--glow_14rlz_1[data-v-857bd200]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-glow),0 4px 6px -4px var(--x-glow)}
+._alert_1sdha_2[data-v-35ce54d8]{color:var(--x-alert-text);background-color:var(--x-alert-bg);border-color:var(--x-alert-border)}._alert--glow_1sdha_1[data-v-35ce54d8]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-alert-glow),0 4px 6px -4px var(--x-alert-glow)}.dark ._alert_1sdha_2[data-v-35ce54d8]{color:var(--x-dark-alert-text, var(--x-alert-text));background-color:var(--x-dark-alert-bg, var(--x-alert-bg));border-color:var(--x-dark-alert-border, var(--x-alert-border))}._avatar_v7jzc_2[data-v-243016db]{color:var(--x-avatar-text);background-color:var(--x-avatar-bg);border-color:var(--x-avatar-border)}.dark ._avatar_v7jzc_2[data-v-243016db]{color:var(--x-dark-avatar-text, var(--x-avatar-text));background-color:var(--x-dark-avatar-bg, var(--x-avatar-bg));border-color:var(--x-dark-avatar-border, var(--x-avatar-border))}._button_1sbr9_2[data-v-6cb75733]{color:var(--x-button-text);background-color:var(--x-button-bg);border-color:var(--x-button-border)}._button--glow_1sbr9_1[data-v-6cb75733]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-button-glow),0 4px 6px -4px var(--x-button-glow)}._button_1sbr9_2[data-v-6cb75733]:hover{color:var(--x-button-text-hover, var(--x-button-text));background-color:var(--x-button-bg-hover, var(--x-button-bg));border-color:var(--x-button-border-hover, var(--x-button-border))}._button_1sbr9_2[data-v-6cb75733]:active{color:var(--x-button-text-active, var(--x-button-text));background-color:var(--x-button-bg-active, var(--x-button-bg));border-color:var(--x-button-border-active, var(--x-button-border))}.dark ._button_1sbr9_2[data-v-6cb75733]{color:var(--x-dark-button-text, var(--x-button-text));background-color:var(--x-dark-button-bg, var(--x-button-bg));border-color:var(--x-dark-button-border, var(--x-button-border))}.dark ._button_1sbr9_2[data-v-6cb75733]:hover{color:var(--x-dark-button-text-hover, var(--x-dark-button-text, var(--x-button-text)));background-color:var(--x-dark-button-bg-hover, var(--x-dark-button-bg, var(--x-button-bg)));border-color:var(--x-dark-button-border-hover, var(--x-dark-button-border, var(--x-button-border)))}.dark ._button_1sbr9_2[data-v-6cb75733]:active{color:var(--x-dark-button-text-active, var(--x-dark-button-text));background-color:var(--x-dark-button-bg-active, var(--x-dark-button-bg, var(--x-button-bg)));border-color:var(--x-dark-button-border-active, var(--x-dark-button-border, var(--x-button-border)))}._button-group_s7fyl_2:not(._button-group--rounded_s7fyl_1)>:first-child{border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-left-width:1px}._button-group_s7fyl_2:not(._button-group--rounded_s7fyl_1)>:last-child{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}._button-group--rounded_s7fyl_1>:first-of-type{border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-left-width:1px}._button-group--rounded_s7fyl_1>:last-child{border-top-right-radius:9999px;border-bottom-right-radius:9999px}._checkbox--glow_1dz66_1[data-v-05f49cb5]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-glow),0 4px 6px -4px var(--x-glow)}._scrollWrap_1k3q9_2[data-v-7362ac18]:before,._scrollWrap_1k3q9_2[data-v-7362ac18]:after{content:"";pointer-events:none;position:absolute;z-index:1;transition:box-shadow .2s}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-7362ac18]:before,._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-7362ac18]:after{top:0;bottom:0;width:20px}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-7362ac18]:before,._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-7362ac18]:after{right:0;left:0;height:20px}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-7362ac18]:before{left:0}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-7362ac18]:after{right:0}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-7362ac18]:before{top:0}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-7362ac18]:after{bottom:0}._scrollWrap_1k3q9_2._shadow-left_1k3q9_36[data-v-7362ac18]:before{box-shadow:inset 12px 0 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-right_1k3q9_40[data-v-7362ac18]:after{box-shadow:inset -12px 0 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-top_1k3q9_44[data-v-7362ac18]:before{box-shadow:inset 0 12px 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-bottom_1k3q9_48[data-v-7362ac18]:after{box-shadow:inset 0 -12px 10px -10px #00000012}._hideScroll_1k3q9_53[data-v-7362ac18]{-ms-overflow-style:auto;scrollbar-width:none}._hideScroll_1k3q9_53[data-v-7362ac18]::-webkit-scrollbar{display:none}._link--shadow_1tilo_1[data-v-af336fea]{box-shadow:inset 0 -.315em 0 0 var(--x-shadow)}._link--shadow_1tilo_1[data-v-af336fea]:hover{box-shadow:inset 0 -1.125em 0 0 var(--x-shadow)}.dark ._link--shadow_1tilo_1[data-v-af336fea]{box-shadow:inset 0 -.315em 0 0 var(--x-dark-shadow)}.dark ._link--shadow_1tilo_1[data-v-af336fea]:hover{box-shadow:inset 0 -1.125em 0 0 var(--x-dark-shadow)}._menu-item_1v1kj_2[data-v-11179d66]{color:var(--x-text);background-color:var(--x-bg)}._menu-item_1v1kj_2[data-v-11179d66]:before{content:"";position:absolute;left:-1px;height:100%;width:1px;background-color:transparent}._menu-item_1v1kj_2[data-v-11179d66]:hover{color:var(--x-text-hover, var(--x-text));background-color:var(--x-bg-hover, var(--x-bg))}.dark ._menu-item_1v1kj_2[data-v-11179d66]{color:var(--x-dark-text);background:var(--x-dark-bg)}.dark ._menu-item_1v1kj_2[data-v-11179d66]:hover{color:var(--x-dark-text-hover, var(--x-dark-text));background-color:var(--x-dark-bg-hover, var(--x-dark-bg))}.x-menu-inner ._menu-item_1v1kj_2[data-v-11179d66]:hover:before,.x-menu-inner ._menu-item--active_1v1kj_1[data-v-11179d66]:before{background-color:var(--x-border-hover)}._popover_2vipi_2 ._popoverContent_2vipi_3{visibility:hidden;transition-duration:.1s;transition-timing-function:cubic-bezier(.4,0,1,1)}._popover_2vipi_2 ._popoverTop_2vipi_8{--tw-translate-y: .5rem}._popover_2vipi_2 ._popoverRight_2vipi_11{--tw-translate-x: -.5rem}._popover_2vipi_2 ._popoverBottom_2vipi_14{--tw-translate-y: -.25rem}._popover_2vipi_2 ._popoverLeft_2vipi_17{--tw-translate-x: .5rem}._popover_2vipi_2._hover_2vipi_21:hover ._popoverContent_2vipi_3,._popover_2vipi_2._is-open_2vipi_22 ._popoverContent_2vipi_3{visibility:visible;transition-duration:.15s;transition-timing-function:cubic-bezier(0,0,.2,1)}._popover_2vipi_2._hover_2vipi_21:hover ._popoverTop_2vipi_8,._popover_2vipi_2._is-open_2vipi_22 ._popoverTop_2vipi_8{--tw-translate-y: .25rem}._popover_2vipi_2._hover_2vipi_21:hover ._popoverRight_2vipi_11,._popover_2vipi_2._is-open_2vipi_22 ._popoverRight_2vipi_11{--tw-translate-x: 0px}._popover_2vipi_2._hover_2vipi_21:hover ._popoverBottom_2vipi_14,._popover_2vipi_2._is-open_2vipi_22 ._popoverBottom_2vipi_14{--tw-translate-y: .25rem}._popover_2vipi_2._hover_2vipi_21:hover ._popoverLeft_2vipi_17,._popover_2vipi_2._is-open_2vipi_22 ._popoverLeft_2vipi_17{--tw-translate-x: 0px}._radio--glow_14rlz_1[data-v-4e34dad2]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-glow),0 4px 6px -4px var(--x-glow)}

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.0.0-alpha.5";
+declare const _default: "1.0.0-alpha.6";
 export default _default;