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

package/lib/index.es.js

@@ -17,13 +17,13 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { inject, defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, normalizeStyle, withCtx, createElementBlock, renderSlot, createCommentVNode, Fragment, pushScopeId, popScopeId, createElementVNode, ref, watch, resolveComponent, toDisplayString, createVNode, renderList, createTextVNode, provide, onMounted, onUnmounted, withKeys, withModifiers, withDirectives, vModelCheckbox, Transition, vShow, getCurrentScope, onScopeDispose, getCurrentInstance, onBeforeMount, nextTick, unref, reactive, toRefs, watchEffect, Teleport, mergeProps, toHandlers, onBeforeUnmount, TransitionGroup, useCssModule, vModelRadio, vModelSelect } from "vue";
+import { inject, defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, normalizeStyle, withCtx, createElementBlock, renderSlot, createCommentVNode, Fragment, pushScopeId, popScopeId, createElementVNode, ref, watchEffect, mergeProps, watch, resolveComponent, toDisplayString, createVNode, renderList, createTextVNode, provide, onMounted, onUnmounted, withKeys, withModifiers, withDirectives, vModelCheckbox, Transition, vShow, getCurrentScope, onScopeDispose, getCurrentInstance, onBeforeMount, nextTick, unref, reactive, toRefs, Teleport, toHandlers, onBeforeUnmount, TransitionGroup, useCssModule, vModelRadio, vModelSelect } from "vue";
 const isHex = (hex) => /^#(?:[A-Fa-f0-9]{3}){1,2}$/.test(hex);
 const isRGB = (rgb) => /^rgb[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*(?:,(?![)])|(?=[)]))){3}[)]$/.test(rgb);
 const isRGBA = (rgba) => /^^rgba[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*,){3}\s*0*(?:\.\d+|1(?:\.0*)?)\s*[)]$/.test(rgba);
 const parseRGB = (rgb) => {
   var _a2;
-  return (_a2 = rgb.match(/(?<=\().+?(?=\))/g)) == null ? void 0 : _a2[0].split(",");
+  return (_a2 = rgb.match(new RegExp("(?<=\\().+?(?=\\))", "g"))) == null ? void 0 : _a2[0].split(",");
 };
 const hexToRGB = (hex) => {
   var _a2;
@@ -365,7 +365,7 @@ const tailwindColors = Object.freeze({
     900: "#881337"
   }
 });
-var version = "1.0.0-alpha.1";
+var version = "1.0.0-alpha.6";
 const injectTabKey = Symbol();
 const injectFormKey = Symbol();
 const injectIconsKey = Symbol();
@@ -536,7 +536,7 @@ const _hoisted_1$u = {
   key: 0,
   class: "flex-none pr-2"
 };
-const _hoisted_2$k = {
+const _hoisted_2$l = {
   key: 1,
   width: "24",
   height: "24",
@@ -580,7 +580,7 @@ function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
     default: withCtx(() => [
       _ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_1$u, [
         renderSlot(_ctx.$slots, "icon", {}, void 0, true)
-      ])) : _ctx.type ? (openBlock(), createElementBlock("svg", _hoisted_2$k, [
+      ])) : _ctx.type ? (openBlock(), createElementBlock("svg", _hoisted_2$l, [
         _ctx.type === "info" ? (openBlock(), createElementBlock("path", _hoisted_3$f)) : createCommentVNode("", true),
         _ctx.type === "success" ? (openBlock(), createElementBlock("path", _hoisted_4$d)) : createCommentVNode("", true),
         _ctx.type === "error" ? (openBlock(), createElementBlock("path", _hoisted_5$7)) : createCommentVNode("", true),
@@ -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";
@@ -649,24 +650,77 @@ const _sfc_main$H = defineComponent({
         return "h-9 w-9";
       return "h-5 w-5";
     });
+    const isWrapSVG = ref(false);
+    const computedIcon = ref("");
+    const computedFilled = ref(props.filled);
+    const computedViewBox = ref(props.viewBox);
+    const attrs = ref({});
+    watchEffect(() => {
+      const injectedIcon = icons[props.icon];
+      isWrapSVG.value = false;
+      computedIcon.value = injectedIcon;
+      if (injectedIcon) {
+        if (typeof injectedIcon === "string") {
+          if (injectedIcon.startsWith("<svg")) {
+            isWrapSVG.value = true;
+            const { content, attributes } = getSVG(injectedIcon);
+            attrs.value = attributes;
+            computedIcon.value = content;
+          } else {
+            isWrapSVG.value = false;
+            computedIcon.value = injectedIcon;
+          }
+        } else if (typeof injectedIcon === "object") {
+          computedIcon.value = injectedIcon.icon;
+          computedFilled.value = injectedIcon.filled || props.filled;
+          computedViewBox.value = injectedIcon.viewBox || injectedIcon.viewbox || props.viewBox;
+        }
+      } else {
+        computedIcon.value = props.icon;
+      }
+    });
+    function getSVG(svgString) {
+      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 = {};
+      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
+      };
+    }
     return {
-      icons,
+      attrs,
+      isWrapSVG,
+      computedIcon,
+      computedFilled,
+      computedViewBox,
       sizeClasses
     };
   }
 });
-const _hoisted_1$t = ["fill", "stroke", "viewBox", "stroke-linecap", "stroke-linejoin", "innerHTML"];
+const _hoisted_1$t = ["innerHTML"];
+const _hoisted_2$k = ["stroke-linejoin", "stroke-linecap", "stroke", "fill", "viewBox", "innerHTML"];
 function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("svg", {
-    class: normalizeClass([_ctx.sizeClasses, { "stroke-2": !_ctx.filled }]),
-    fill: _ctx.filled ? "currentColor" : "none",
-    stroke: _ctx.filled ? void 0 : "currentColor",
-    viewBox: _ctx.viewBox,
-    "stroke-linecap": _ctx.filled ? void 0 : "round",
-    "stroke-linejoin": _ctx.filled ? void 0 : "round",
+  return _ctx.isWrapSVG ? (openBlock(), createElementBlock("svg", mergeProps({
+    key: 0,
+    class: ["inline", _ctx.sizeClasses]
+  }, _ctx.attrs, { innerHTML: _ctx.computedIcon }), null, 16, _hoisted_1$t)) : (openBlock(), createElementBlock("svg", {
+    key: 1,
     xmlns: "http://www.w3.org/2000/svg",
-    innerHTML: _ctx.icons[_ctx.icon] ? _ctx.icons[_ctx.icon] : _ctx.icon
-  }, null, 10, _hoisted_1$t);
+    class: normalizeClass(["inline", [_ctx.sizeClasses, { "stroke-2": !_ctx.computedFilled }]]),
+    "stroke-linejoin": _ctx.computedFilled ? void 0 : "round",
+    "stroke-linecap": _ctx.computedFilled ? void 0 : "round",
+    stroke: _ctx.computedFilled ? void 0 : "currentColor",
+    fill: _ctx.computedFilled ? "currentColor" : "none",
+    viewBox: _ctx.computedViewBox,
+    innerHTML: _ctx.computedIcon
+  }, null, 10, _hoisted_2$k));
 }
 var XIcon = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["render", _sfc_render$H]]);
 const avatar = "_avatar_v7jzc_2";
@@ -802,6 +856,8 @@ const _sfc_main$F = defineComponent({
       type: String,
       default: "right"
     },
+    offsetX: [Number, String],
+    offsetY: [Number, String],
     animated: Boolean,
     outlined: Boolean,
     icon: String,
@@ -836,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
     };
   }
@@ -862,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", {
@@ -878,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
@@ -1095,11 +1161,11 @@ const _sfc_main$C = defineComponent({
             hover: { bg: !props.loading ? gray[100] : "" },
             active: { bg: !props.loading ? gray[200] : "" },
             dark: {
-              bg: gray[900],
+              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] : "" }
             }
           }));
         }
@@ -1349,7 +1415,7 @@ function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
         size: _ctx.computedSize,
         icon: _ctx.iconRight,
         class: normalizeClass(["shrink-0", [
-          [_ctx.$slots.default ? "mr-2" : "m-0.5"],
+          [_ctx.$slots.default ? "ml-2" : "m-0.5"],
           {
             invisible: _ctx.loading
           }
@@ -1362,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-d8eeb328"]]);
+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"
@@ -1543,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);
     });
@@ -1626,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));
@@ -1699,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: {
@@ -1888,7 +1954,7 @@ const _sfc_main$x = defineComponent({
   }
 });
 function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), { class: "container mx-auto px-4" }, {
+  return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), { class: "max-w-screen-2xl mx-auto px-4" }, {
     default: withCtx(() => [
       renderSlot(_ctx.$slots, "default")
     ]),
@@ -2339,7 +2405,15 @@ function useScroll(element, options = {}) {
     directions
   };
 }
-function useSwipe(target, options = {}) {
+var SwipeDirection;
+(function(SwipeDirection2) {
+  SwipeDirection2["UP"] = "UP";
+  SwipeDirection2["RIGHT"] = "RIGHT";
+  SwipeDirection2["DOWN"] = "DOWN";
+  SwipeDirection2["LEFT"] = "LEFT";
+  SwipeDirection2["NONE"] = "NONE";
+})(SwipeDirection || (SwipeDirection = {}));
+function useSwipe(target, options) {
   const {
     threshold = 50,
     onSwipe,
@@ -2357,11 +2431,11 @@ function useSwipe(target, options = {}) {
   const isSwiping = ref(false);
   const direction = computed(() => {
     if (!isThresholdExceeded.value)
-      return "NONE";
+      return SwipeDirection.NONE;
     if (abs(diffX.value) > abs(diffY.value)) {
-      return diffX.value > 0 ? "LEFT" : "RIGHT";
+      return diffX.value > 0 ? SwipeDirection.LEFT : SwipeDirection.RIGHT;
     } else {
-      return diffY.value > 0 ? "UP" : "DOWN";
+      return diffY.value > 0 ? SwipeDirection.UP : SwipeDirection.DOWN;
     }
   });
   const getTouchEventCoords = (e) => [e.touches[0].clientX, e.touches[0].clientY];
@@ -2462,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;
@@ -2515,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: {
@@ -2878,7 +2952,8 @@ const _sfc_main$r = defineComponent({
       type: String,
       default: "text"
     },
-    inputClass: String
+    inputClass: String,
+    block: Boolean
   }),
   emits: useInputtable.emits(),
   setup(props, { emit }) {
@@ -2914,8 +2989,8 @@ const _sfc_main$r = defineComponent({
       if (!e.target)
         return;
       const target = e.target;
-      const value = Number(target.value);
       if (props.type === "number") {
+        const value = Number(target.value);
         if (typeof props.min !== "undefined") {
           if (value < props.min)
             target.value = props.min.toString();
@@ -2955,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,
@@ -2993,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),
@@ -3072,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"
@@ -3099,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
@@ -3119,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"
@@ -3148,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
   }),
@@ -3157,7 +3238,10 @@ const _sfc_main$p = defineComponent({
   setup(props, { emit }) {
     const elRef = ref();
     const isActive = ref(false);
-    const filled = computed(() => props.filled || props.item.filled);
+    const filled = computed(() => {
+      var _a2;
+      return props.filled || ((_a2 = props.item) == null ? void 0 : _a2.filled);
+    });
     const cItem = computed(() => __spreadValues(__spreadValues({}, props), props.item));
     const htmlTag = cItem.value.to || cItem.value.href ? "x-link" : "div";
     const isSupported = window && "MutationObserver" in window;
@@ -3177,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);
     }
@@ -3201,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({
@@ -3295,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"] : ""],
       {
@@ -3350,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-2c7185df"]]);
+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: {
@@ -3367,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"]
 });
@@ -3459,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: {
@@ -3584,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))
@@ -4421,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", {
@@ -4438,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", {
@@ -4458,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,
@@ -4483,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", {
@@ -4512,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")), {
@@ -5527,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
@@ -5578,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,
@@ -5590,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: () => {
@@ -5605,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
     });
@@ -5627,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,
@@ -5651,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)
@@ -5677,18 +5826,23 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var Tab = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
 const _sfc_main$3 = defineComponent({
-  name: "XTabs",
+  name: "XTabGroup",
   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 }) {
@@ -5697,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, {
@@ -5727,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();
@@ -5784,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")
@@ -5814,6 +5977,7 @@ const _sfc_main$2 = defineComponent({
       type: String,
       default: "ltr"
     },
+    rows: Number,
     max: Number,
     maxlength: Number,
     min: Number,
@@ -5824,7 +5988,8 @@ const _sfc_main$2 = defineComponent({
       default: true
     },
     preventEnter: Boolean,
-    inputClass: String
+    inputClass: String,
+    block: Boolean
   }),
   emits: useInputtable.emits(),
   setup(props, { emit }) {
@@ -5874,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,
@@ -5914,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,
@@ -5983,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", {
@@ -6153,6 +6319,7 @@ const create = (createOptions = {}) => {
         app.component(`${options.prefix}${component.name.slice(1)}`, component);
       });
     app.provide(injectColorsKey, options.colors);
+    app.provide(injectIconsKey, options.icons);
   };
   return {
     install: install2