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

package/lib/index.es.js

@@ -17,14 +17,13 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, normalizeStyle, withCtx, createElementBlock, renderSlot, createCommentVNode, Fragment, pushScopeId, popScopeId, createElementVNode, inject, 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";
-var version = "0.2.4";
+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;
@@ -48,23 +47,6 @@ const colorShade = (color, percentage) => {
   const blue = calcPrimary(b);
   return "rgb" + (a ? "a(" : "(") + red + "," + green + "," + blue + (a ? "," + a : ")");
 };
-const shades = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"];
-const indielayerColors = ["primary", "secondary", "success", "warning", "error"];
-function calculateColors() {
-  const customColors2 = {};
-  const e = document.createElement("div");
-  document.body.appendChild(e);
-  indielayerColors.forEach((color) => {
-    const c = __spreadValues({}, tailwindColors.gray);
-    shades.forEach((shade) => {
-      e.className = `bg-${color}-${shade}`;
-      c[shade] = window.getComputedStyle(e, null).getPropertyValue("background-color");
-    });
-    customColors2[color] = c;
-  });
-  e.remove();
-  return customColors2;
-}
 Object.freeze([
   "bg-primary-50",
   "bg-primary-100",
@@ -383,11 +365,23 @@ const tailwindColors = Object.freeze({
     900: "#881337"
   }
 });
-let customColors = {};
+var version = "1.0.0-alpha.5";
+const injectTabKey = Symbol();
+const injectFormKey = Symbol();
+const injectIconsKey = Symbol();
+const injectColorsKey = Symbol();
+const injectButtonGroupKey = Symbol();
+const injectNotificationKey = Symbol();
 const colorCache = {};
+const defaultColors = {
+  primary: tailwindColors.sky,
+  secondary: tailwindColors.slate,
+  success: tailwindColors.green,
+  warning: tailwindColors.yellow,
+  error: tailwindColors.red
+};
 const useColors = () => {
-  if (Object.keys(customColors).length === 0)
-    customColors = calculateColors();
+  const customColors = inject(injectColorsKey) || defaultColors;
   const getTailwindColor = (color) => tailwindColors[color];
   const getColorOpacity = (color, opacity) => setOpacity(color, opacity);
   const getPalette = (color) => {
@@ -470,6 +464,7 @@ var _export_sfc = (sfc, props) => {
   return target;
 };
 const _sfc_main$I = defineComponent({
+  name: "XAlert",
   props: __spreadProps(__spreadValues({}, useColors.props()), {
     tag: {
       type: String,
@@ -536,12 +531,12 @@ const _sfc_main$I = defineComponent({
     };
   }
 });
-const _withScopeId$3 = (n) => (pushScopeId("data-v-3f626502"), n = n(), popScopeId(), n);
+const _withScopeId$3 = (n) => (pushScopeId("data-v-35ce54d8"), n = n(), popScopeId(), n);
 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",
@@ -569,7 +564,7 @@ const _hoisted_6$7 = {
   key: 3,
   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"
 };
-const _hoisted_7$3 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("div", { class: "flex-grow" }, null, -1));
+const _hoisted_7$2 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("div", { class: "flex-grow" }, null, -1));
 const _hoisted_8$2 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("path", { d: "M6 18L18 6M6 6l12 12" }, null, -1));
 const _hoisted_9$1 = [
   _hoisted_8$2
@@ -585,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),
@@ -593,7 +588,7 @@ function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
       ])) : createCommentVNode("", true),
       renderSlot(_ctx.$slots, "default", {}, void 0, true),
       _ctx.removable ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-        _hoisted_7$3,
+        _hoisted_7$2,
         (openBlock(), createElementBlock("svg", {
           width: "24",
           height: "24",
@@ -614,7 +609,7 @@ function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
 const cssModules$9 = {
   "$style": style0$9
 };
-var Alert = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", _sfc_render$I], ["__cssModules", cssModules$9], ["__scopeId", "data-v-3f626502"]]);
+var Alert = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", _sfc_render$I], ["__cssModules", cssModules$9], ["__scopeId", "data-v-35ce54d8"]]);
 const useCommon = () => {
 };
 const validators$5 = Object.freeze({
@@ -627,12 +622,8 @@ useCommon.props = () => ({
   }
 });
 useCommon.validators = () => __spreadValues({}, validators$5);
-const injectTabKey = Symbol();
-const injectFormKey = Symbol();
-const injectIconsKey = Symbol();
-const injectButtonGroupKey = Symbol();
-const injectNotificationKey = Symbol();
 const _sfc_main$H = defineComponent({
+  name: "XIcon",
   validators: __spreadValues({}, useCommon.validators()),
   props: __spreadProps(__spreadValues({}, useCommon.props()), {
     icon: {
@@ -658,24 +649,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) {
+      const temp = document.createElement("template");
+      temp.innerHTML = svgString.trim();
+      const [svg] = temp.content.children;
+      const names = svg.getAttributeNames();
+      const attributes = {};
+      names.forEach((n) => {
+        if (!["height", "width", "class"].includes(n))
+          attributes[n] = svg.getAttribute(n);
+      });
+      return {
+        attributes,
+        content: svg.innerHTML
+      };
+    }
     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";
@@ -683,6 +727,7 @@ var style0$8 = {
   avatar
 };
 const _sfc_main$G = defineComponent({
+  name: "XAvatar",
   components: {
     XIcon
   },
@@ -794,8 +839,9 @@ function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
 const cssModules$8 = {
   "$style": style0$8
 };
-var Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", _sfc_render$G], ["__cssModules", cssModules$8], ["__scopeId", "data-v-1c1f558a"]]);
+var Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", _sfc_render$G], ["__cssModules", cssModules$8], ["__scopeId", "data-v-243016db"]]);
 const _sfc_main$F = defineComponent({
+  name: "XBadge",
   props: __spreadProps(__spreadValues(__spreadValues({}, useCommon.props()), useColors.props("primary")), {
     tag: {
       type: String,
@@ -893,6 +939,7 @@ function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var Badge = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["render", _sfc_render$F]]);
 const _sfc_main$E = defineComponent({
+  name: "XBreadcrumbs",
   props: {
     items: Array,
     icon: String,
@@ -969,8 +1016,8 @@ var Breadcrumbs = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["render", _sfc_rend
 const useInteractive = (el) => {
   return {
     focus: () => {
-      var _a2, _b2;
-      (_b2 = (_a2 = el.value) == null ? void 0 : _a2.focus) == null ? void 0 : _b2.call(_a2);
+      var _a2, _b;
+      (_b = (_a2 = el.value) == null ? void 0 : _a2.focus) == null ? void 0 : _b.call(_a2);
     }
   };
 };
@@ -979,6 +1026,7 @@ useInteractive.props = () => ({
   loading: Boolean
 });
 const _sfc_main$D = defineComponent({
+  name: "XSpinner",
   components: {
     XIcon
   },
@@ -1021,6 +1069,7 @@ var style0$7 = {
   "button--glow": "_button--glow_1sbr9_1"
 };
 const _sfc_main$C = defineComponent({
+  name: "XButton",
   components: {
     XIcon,
     XSpinner
@@ -1099,7 +1148,7 @@ 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] : "" },
@@ -1353,7 +1402,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
           }
@@ -1366,12 +1415,13 @@ 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-177c6a64"]]);
+var XButton = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["render", _sfc_render$C], ["__cssModules", cssModules$7], ["__scopeId", "data-v-7ada6753"]]);
 var style0$6 = {
   "button-group": "_button-group_s7fyl_2",
   "button-group--rounded": "_button-group--rounded_s7fyl_1"
 };
 const _sfc_main$B = defineComponent({
+  name: "XButtonGroup",
   validators: __spreadValues({}, useCommon.validators()),
   props: __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, useCommon.props()), useColors.props()), useInteractive.props()), {
     tag: {
@@ -1408,6 +1458,7 @@ const cssModules$6 = {
 };
 var ButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["render", _sfc_render$B], ["__cssModules", cssModules$6]]);
 const _sfc_main$A = defineComponent({
+  name: "XCard",
   props: {
     tag: {
       type: String,
@@ -1529,6 +1580,7 @@ var style0$5 = {
   "checkbox--glow": "_checkbox--glow_1dz66_1"
 };
 const _sfc_main$z = defineComponent({
+  name: "XCheckbox",
   components: {
     XSpinner
   },
@@ -1627,7 +1679,7 @@ const _sfc_main$z = defineComponent({
     });
   }
 });
-const _withScopeId$2 = (n) => (pushScopeId("data-v-38d58f5e"), n = n(), popScopeId(), n);
+const _withScopeId$2 = (n) => (pushScopeId("data-v-54fce636"), 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));
@@ -1692,7 +1744,7 @@ function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
     ], 34),
     _ctx.errorInternal ? (openBlock(), createElementBlock("p", {
       key: 0,
-      class: "text-sm text-error-500 mt-1",
+      class: "text-sm text-red-500 mt-1",
       textContent: toDisplayString(_ctx.errorInternal)
     }, null, 8, _hoisted_6$6)) : createCommentVNode("", true)
   ]);
@@ -1700,8 +1752,9 @@ 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-38d58f5e"]]);
+var Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["render", _sfc_render$z], ["__cssModules", cssModules$5], ["__scopeId", "data-v-54fce636"]]);
 const _sfc_main$y = defineComponent({
+  name: "XCollapse",
   components: {
     XIcon
   },
@@ -1879,6 +1932,7 @@ function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var XCollapse = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["render", _sfc_render$y]]);
 const _sfc_main$x = defineComponent({
+  name: "XContainer",
   props: {
     tag: {
       type: String,
@@ -1887,7 +1941,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")
     ]),
@@ -1896,6 +1950,7 @@ function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var Container = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["render", _sfc_render$x]]);
 const _sfc_main$w = defineComponent({
+  name: "XDivider",
   props: {
     label: String,
     vertical: Boolean
@@ -1947,10 +2002,12 @@ function tryOnScopeDispose(fn) {
   }
   return false;
 }
+var _a;
 const isClient = typeof window !== "undefined";
 const isString = (val) => typeof val === "string";
 const noop = () => {
 };
+isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
 function createFilterWrapper(filter, fn) {
   function wrapper(...args) {
     filter(() => fn.apply(this, args), { fn, thisArg: this, args });
@@ -1992,7 +2049,7 @@ function debounceFilter(ms, options = {}) {
 function throttleFilter(ms, trailing = true, leading = true) {
   let lastExec = 0;
   let timer;
-  let preventLeading = !leading;
+  let isLeading = true;
   const clear = () => {
     if (timer) {
       clearTimeout(timer);
@@ -2007,24 +2064,20 @@ function throttleFilter(ms, trailing = true, leading = true) {
       lastExec = Date.now();
       return invoke();
     }
-    if (elapsed > duration) {
+    if (elapsed > duration && (leading || !isLeading)) {
       lastExec = Date.now();
-      if (preventLeading)
-        preventLeading = false;
-      else
-        invoke();
-    }
-    if (trailing) {
+      invoke();
+    } else if (trailing) {
       timer = setTimeout(() => {
         lastExec = Date.now();
-        if (!leading)
-          preventLeading = true;
+        isLeading = true;
         clear();
         invoke();
       }, duration);
     }
     if (!leading && !timer)
-      timer = setTimeout(() => preventLeading = true, duration);
+      timer = setTimeout(() => isLeading = true, duration);
+    isLeading = false;
   };
   return filter;
 }
@@ -2129,10 +2182,11 @@ function onClickOutside(target, handler, options = {}) {
 }
 function useMediaQuery(query, options = {}) {
   const { window: window2 = defaultWindow } = options;
+  const isSupported = Boolean(window2 && "matchMedia" in window2);
   let mediaQuery;
   const matches = ref(false);
   const update = () => {
-    if (!window2)
+    if (!isSupported)
       return;
     if (!mediaQuery)
       mediaQuery = window2.matchMedia(query);
@@ -2338,7 +2392,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,
@@ -2356,11 +2418,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];
@@ -2429,8 +2491,6 @@ function checkPassiveEventSupport(document2) {
   document2.removeEventListener("x", noop);
   return supportsPassive;
 }
-var _a, _b;
-isClient && (window == null ? void 0 : window.navigator) && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.platform) && /iP(ad|hone|od)/.test((_b = window == null ? void 0 : window.navigator) == null ? void 0 : _b.platform);
 const scrollWrap = "_scrollWrap_1k3q9_2";
 const horizontal = "_horizontal_1k3q9_11";
 const vertical = "_vertical_1k3q9_17";
@@ -2446,6 +2506,7 @@ var style0$4 = {
   hideScroll
 };
 const _sfc_main$v = defineComponent({
+  name: "XScroll",
   props: {
     shadow: Boolean,
     horizontal: Boolean,
@@ -2515,8 +2576,9 @@ 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-75e75c8a"]]);
+var XScroll = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render$v], ["__cssModules", cssModules$4], ["__scopeId", "data-v-ff88aa62"]]);
 const _sfc_main$u = defineComponent({
+  name: "XDrawer",
   components: {
     XScroll
   },
@@ -2737,6 +2799,7 @@ function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var Drawer = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render$u]]);
 const _sfc_main$t = defineComponent({
+  name: "XForm",
   inheritAttrs: false,
   props: {
     autoValidate: {
@@ -2822,6 +2885,7 @@ function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
 var Form = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$t]]);
 const fallback = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=";
 const _sfc_main$s = defineComponent({
+  name: "XImage",
   props: {
     src: String
   },
@@ -2851,6 +2915,7 @@ function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var Image$1 = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["render", _sfc_render$s]]);
 const _sfc_main$r = defineComponent({
+  name: "XInput",
   validators: __spreadValues({}, useCommon.validators()),
   props: __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, useCommon.props()), useInteractive.props()), useInputtable.props()), {
     showPasswordToggle: {
@@ -2902,12 +2967,16 @@ const _sfc_main$r = defineComponent({
         return "px-5 py-4 text-xl";
       return "px-3 py-2";
     });
+    const css = useCSS("input");
+    const colors = useColors();
+    const color = colors.getPalette("primary");
+    const style = css.get("border", color[500]);
     function onChange(e) {
       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();
@@ -2926,6 +2995,7 @@ const _sfc_main$r = defineComponent({
       currentType,
       labelClasses,
       sizeClasses,
+      style,
       elRef,
       onChange,
       togglePasswordVisibility
@@ -2941,7 +3011,7 @@ const _hoisted_6$4 = {
   key: 1,
   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"
 };
-const _hoisted_7$2 = ["textContent"];
+const _hoisted_7$1 = ["textContent"];
 const _hoisted_8$1 = ["textContent"];
 function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_x_icon = resolveComponent("x-icon");
@@ -2962,17 +3032,18 @@ function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 8, ["size", "icon"])) : createCommentVNode("", true),
       createElementVNode("input", mergeProps({
         ref: "elRef",
-        class: ["appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:border-primary-500 dark:focus:border-primary-500 transition-colors duration-150 ease-in-out border-gray-300 hover:border-gray-400 dark:border-gray-700 border shadow-sm rounded-md", [
+        class: ["appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none transition-colors duration-150 ease-in-out border-gray-300 hover:border-gray-400 dark:border-gray-700 border shadow-sm rounded-md focus:border-[color:var(--x-input-border)]", [
           _ctx.sizeClasses,
           _ctx.disabled ? "bg-gray-100 dark:bg-gray-700 text-gray-500 cursor-not-allowed" : "bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200",
           _ctx.type === "password" ? "pr-9" : "",
           {
             "!pl-9": _ctx.icon,
             "!pr-9": _ctx.iconRight,
-            "border-error-500 focus:border-error-500 dark:focus:border-error-500": _ctx.errorInternal
+            "border-red-500 focus:border-red-500 dark:focus:border-red-500": _ctx.errorInternal
           },
           _ctx.inputClass
         ]],
+        style: _ctx.style,
         disabled: _ctx.disabled,
         min: _ctx.min,
         max: _ctx.max,
@@ -3012,9 +3083,9 @@ function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     _ctx.errorInternal ? (openBlock(), createElementBlock("p", {
       key: 1,
-      class: "text-sm text-error-500 mt-1",
+      class: "text-sm text-red-500 mt-1",
       textContent: toDisplayString(_ctx.errorInternal)
-    }, null, 8, _hoisted_7$2)) : _ctx.helper ? (openBlock(), createElementBlock("p", {
+    }, null, 8, _hoisted_7$1)) : _ctx.helper ? (openBlock(), createElementBlock("p", {
       key: 2,
       class: "text-sm text-gray-500 mt-1",
       textContent: toDisplayString(_ctx.helper)
@@ -3026,6 +3097,7 @@ var style0$3 = {
   "link--shadow": "_link--shadow_1tilo_1"
 };
 const _sfc_main$q = defineComponent({
+  name: "XLink",
   props: __spreadProps(__spreadValues({}, useColors.props()), {
     tag: {
       type: String,
@@ -3061,7 +3133,7 @@ const _sfc_main$q = defineComponent({
     };
   }
 });
-const _withScopeId$1 = (n) => (pushScopeId("data-v-f0eed94e"), n = n(), popScopeId(), n);
+const _withScopeId$1 = (n) => (pushScopeId("data-v-b6c57c10"), n = n(), popScopeId(), n);
 const _hoisted_1$i = {
   key: 0,
   class: "inline-flex items-center"
@@ -3108,12 +3180,13 @@ 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-f0eed94e"]]);
+var XLink = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$q], ["__cssModules", cssModules$3], ["__scopeId", "data-v-b6c57c10"]]);
 var style0$2 = {
   "menu-item": "_menu-item_1v1kj_2",
   "menu-item--active": "_menu-item--active_1v1kj_1"
 };
 const _sfc_main$p = defineComponent({
+  name: "XMenuItem",
   components: {
     XSpinner,
     XLink
@@ -3145,16 +3218,20 @@ 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 classObserver = new MutationObserver(check);
+    const isSupported = window && "MutationObserver" in window;
+    const classObserver = isSupported ? new MutationObserver(check) : null;
     onMounted(() => {
       if (!elRef.value)
         return;
       check();
-      if (htmlTag === "x-link")
-        classObserver.observe(elRef.value.$el, {
+      if (isSupported && htmlTag === "x-link")
+        classObserver == null ? void 0 : classObserver.observe(elRef.value.$el, {
           attributes: true,
           attributeFilter: ["class"]
         });
@@ -3337,7 +3414,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-777ef46c"]]);
+var XMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$p], ["__cssModules", cssModules$2], ["__scopeId", "data-v-6f9d99e4"]]);
 const _sfc_main$o = defineComponent({
   name: "XMenu",
   components: {
@@ -3437,13 +3514,14 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
           rounded: _ctx.rounded,
           class: normalizeClass({ "my-2": item.divider }),
           onActive: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("expand"))
-        }, null, 8, ["color", "size", "item", "disabled", "filled", "rounded", "class"]))
+        }, null, 40, ["color", "size", "item", "disabled", "filled", "rounded", "class"]))
       ], 64);
     }), 128))
   ])) : createCommentVNode("", true);
 }
 var Menu = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$o]]);
 const _sfc_main$n = defineComponent({
+  name: "XModal",
   components: {
     XScroll
   },
@@ -3607,6 +3685,7 @@ const validators$4 = {
   position: ["bottom", "top"]
 };
 const _sfc_main$m = defineComponent({
+  name: "XNotifications",
   components: {
     XIcon
   },
@@ -3698,7 +3777,7 @@ const _sfc_main$m = defineComponent({
       add(isMessage ? preset : __spreadValues(__spreadValues({}, preset), notification));
     }
     function add(notification) {
-      var _a2, _b2;
+      var _a2, _b;
       const mergeProps2 = {
         id: Date.now(),
         iconColor: props.color,
@@ -3712,7 +3791,7 @@ const _sfc_main$m = defineComponent({
       internalPosition.value = merged.position;
       const color = colors.getPalette(merged.iconColor);
       const colorAction = colors.getPalette(((_a2 = merged.action) == null ? void 0 : _a2.color) || "primary");
-      merged.style = css.variables({
+      const cssVariables = css.variables({
         icon: color[400],
         action: colorAction[400],
         hover: {
@@ -3726,8 +3805,9 @@ const _sfc_main$m = defineComponent({
           }
         }
       });
+      merged.style = Object.keys(cssVariables).map((key) => `${key}: ${cssVariables[key]}`).join(";");
       notifications.value.push(merged);
-      (_b2 = listRef.value) == null ? void 0 : _b2.scrollTo({ top: 0, behavior: "smooth" });
+      (_b = listRef.value) == null ? void 0 : _b.scrollTo({ top: 0, behavior: "smooth" });
       if (merged.timeout)
         setTimer(merged, merged.timeout);
     }
@@ -3824,7 +3904,9 @@ function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
                     key: 2,
                     icon: _ctx.removeIcon,
                     class: "text-gray-400 hover:text-gray-500 ml-3 shrink-0 cursor-pointer",
-                    onClick: ($event) => _ctx.remove(notification)
+                    onClick: () => {
+                      _ctx.remove(notification);
+                    }
                   }, null, 8, ["icon", "onClick"])) : createCommentVNode("", true)
                 ])
               ], 6);
@@ -3838,6 +3920,7 @@ function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var Notifications = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$m]]);
 const _sfc_main$l = defineComponent({
+  name: "XPaginationItem",
   components: {
     XButton
   },
@@ -3888,6 +3971,7 @@ function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var XPaginationItem = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$l]]);
 const _sfc_main$k = defineComponent({
+  name: "XPagination",
   components: {
     XIcon,
     XButton,
@@ -3934,6 +4018,10 @@ const _sfc_main$k = defineComponent({
         return "h-5 w-5";
       return "h-3 w-3";
     });
+    const css = useCSS("pagination");
+    const colors = useColors();
+    const color = colors.getPalette("primary");
+    const style = css.get("bg", color[500]);
     const quickInput = ref(props.modelValue + "");
     function onQuickInput() {
       const number = parseInt(quickInput.value);
@@ -3976,6 +4064,7 @@ const _sfc_main$k = defineComponent({
       nextIcon,
       quickInput,
       quickButtonSize,
+      style,
       onQuickInput,
       prevPage,
       nextPage
@@ -3993,11 +4082,7 @@ const _hoisted_5$3 = {
   key: 1,
   class: "flex items-center space-x-2"
 };
-const _hoisted_6$3 = {
-  key: 2,
-  class: "flex space-x-6"
-};
-const _hoisted_7$1 = ["onClick"];
+const _hoisted_6$3 = ["onClick"];
 function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_x_button = resolveComponent("x-button");
   const _component_x_input = resolveComponent("x-input");
@@ -4065,15 +4150,19 @@ function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
       selected: _ctx.modelValue === _ctx.totalPages,
       onInput: _cache[3] || (_cache[3] = (value) => _ctx.$emit("update:modelValue", value))
     }, null, 8, ["value", "links", "size", "selected"])) : createCommentVNode("", true)
-  ])) : _ctx.variant === "dots" ? (openBlock(), createElementBlock("ul", _hoisted_6$3, [
+  ])) : _ctx.variant === "dots" ? (openBlock(), createElementBlock("ul", {
+    key: 2,
+    class: "flex space-x-6",
+    style: normalizeStyle(_ctx.style)
+  }, [
     (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.totalPages, (i) => {
       return openBlock(), createElementBlock("li", {
         key: i,
-        class: normalizeClass(["rounded-full cursor-pointer", [_ctx.dotsClass, i === _ctx.modelValue ? "bg-primary-500" : "bg-gray-100 hover:bg-gray-200"]]),
+        class: normalizeClass(["rounded-full cursor-pointer", [_ctx.dotsClass, i === _ctx.modelValue ? "bg-[color:var(--x-pagination-bg)]" : "bg-gray-100 hover:bg-gray-200"]]),
         onClick: ($event) => _ctx.$emit("update:modelValue", i)
-      }, null, 10, _hoisted_7$1);
+      }, null, 10, _hoisted_6$3);
     }), 128))
-  ])) : createCommentVNode("", true);
+  ], 4)) : createCommentVNode("", true);
 }
 var Pagination = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$k]]);
 const popover = "_popover_2vipi_2";
@@ -4098,6 +4187,7 @@ const validators$3 = {
   position: ["bottom", "left", "right", "top"]
 };
 const _sfc_main$j = defineComponent({
+  name: "XPopover",
   validators: validators$3,
   props: {
     align: {
@@ -4220,6 +4310,7 @@ const cssModules$1 = {
 };
 var XPopover = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j], ["__cssModules", cssModules$1]]);
 const _sfc_main$i = defineComponent({
+  name: "XPopoverContainer",
   props: {
     tag: {
       default: "div",
@@ -4237,6 +4328,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var XPopoverContainer = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i]]);
 const _sfc_main$h = defineComponent({
+  name: "XProgress",
   props: __spreadProps(__spreadValues({}, useColors.props("primary")), {
     percentage: {
       type: Number,
@@ -4298,6 +4390,7 @@ var style0 = {
   "radio--glow": "_radio--glow_14rlz_1"
 };
 const _sfc_main$g = defineComponent({
+  name: "XRadio",
   components: {
     XSpinner
   },
@@ -4392,7 +4485,7 @@ const _sfc_main$g = defineComponent({
     });
   }
 });
-const _withScopeId = (n) => (pushScopeId("data-v-cebce3c2"), n = n(), popScopeId(), n);
+const _withScopeId = (n) => (pushScopeId("data-v-857bd200"), 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", {
@@ -4480,7 +4573,7 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
     ], 2)) : createCommentVNode("", true),
     _ctx.errorInternal ? (openBlock(), createElementBlock("p", {
       key: 1,
-      class: "text-sm text-error-500 mt-1",
+      class: "text-sm text-red-500 mt-1",
       textContent: toDisplayString(_ctx.errorInternal)
     }, null, 8, _hoisted_6$2)) : createCommentVNode("", true)
   ], 40, _hoisted_1$c);
@@ -4488,8 +4581,9 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
 const cssModules = {
   "$style": style0
 };
-var Radio = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g], ["__cssModules", cssModules], ["__scopeId", "data-v-cebce3c2"]]);
+var Radio = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g], ["__cssModules", cssModules], ["__scopeId", "data-v-857bd200"]]);
 const _sfc_main$f = defineComponent({
+  name: "XTag",
   props: __spreadProps(__spreadValues(__spreadValues({}, useCommon.props()), useColors.props("gray")), {
     tag: {
       type: String,
@@ -4573,6 +4667,7 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var XTag = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f]]);
 const _sfc_main$e = defineComponent({
+  name: "XSelect",
   components: {
     XTag,
     XMenuItem,
@@ -4656,6 +4751,10 @@ const _sfc_main$e = defineComponent({
         return "px-5 py-4 text-xl";
       return "px-3 py-2";
     });
+    const css = useCSS("select");
+    const colors = useColors();
+    const color = colors.getPalette("primary");
+    const style = css.get("border", color[500]);
     const availableOptions = computed(() => {
       var _a2;
       return (_a2 = props.options) == null ? void 0 : _a2.filter((option) => !option.disabled);
@@ -4793,6 +4892,7 @@ const _sfc_main$e = defineComponent({
       internalOptions,
       labelClasses,
       sizeClasses,
+      style,
       isEmpty,
       getLabel,
       handleRemove
@@ -4864,13 +4964,14 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
         ]),
         default: withCtx(() => [
           createElementVNode("div", {
-            class: normalizeClass(["w-full border border-gray-300 hover:border-gray-400 dark:border-gray-700 pr-8 group-focus:border-primary-500 dark:group-focus:border-primary-500 transition-colors duration-150 ease-in-out rounded-md shadow-sm", [
+            class: normalizeClass(["w-full border border-gray-300 hover:border-gray-400 dark:border-gray-700 pr-8 transition-colors duration-150 ease-in-out rounded-md shadow-sm group-focus:border-[color:var(--x-select-border)]", [
               _ctx.sizeClasses,
               _ctx.disabled ? "bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed" : "bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200",
               {
-                "border-error-500 focus:border-error-500 dark:focus:border-error-500": _ctx.errorInternal
+                "border-red-500 focus:border-red-500 dark:focus:border-red-500": _ctx.errorInternal
               }
-            ]])
+            ]]),
+            style: normalizeStyle(_ctx.style)
           }, [
             _ctx.multiple && Array.isArray(_ctx.selected) && _ctx.selected.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.selected, (value) => {
               return openBlock(), createBlock(_component_x_tag, {
@@ -4892,7 +4993,7 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
             ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
               _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_3$4, toDisplayString(_ctx.placeholder), 1)) : (openBlock(), createElementBlock("div", _hoisted_4$4, "\xA0"))
             ], 64))
-          ], 2)
+          ], 6)
         ]),
         _: 1
       }, 8, ["disabled", "dismiss-on-click"]),
@@ -4941,7 +5042,7 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     _ctx.errorInternal ? (openBlock(), createElementBlock("p", {
       key: 1,
-      class: "text-sm text-error-500 mt-1",
+      class: "text-sm text-red-500 mt-1",
       textContent: toDisplayString(_ctx.errorInternal)
     }, null, 8, _hoisted_11)) : _ctx.helper ? (openBlock(), createElementBlock("p", {
       key: 2,
@@ -4952,6 +5053,7 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var Select = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e]]);
 const _sfc_main$d = defineComponent({
+  name: "XSkeleton",
   props: {
     tag: {
       type: String,
@@ -4970,6 +5072,7 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d]]);
 const _sfc_main$c = defineComponent({
+  name: "XSlider",
   components: {
     XProgress
   },
@@ -5006,10 +5109,12 @@ const _sfc_main$c = defineComponent({
     });
     const css = useCSS("slider");
     const colors = useColors();
+    const primary = colors.getPalette("primary");
     const style = computed(() => {
       const color = colors.getPalette(props.color);
       return css.variables({
-        bg: color[500]
+        bg: color[500],
+        border: primary[500]
       });
     });
     watch(() => props.modelValue, (val) => {
@@ -5148,7 +5253,7 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
         ]),
         createElementVNode("div", {
           ref: "dragRef",
-          class: normalizeClass(["absolute w-[20px] h-[20px] -mt-[13px] -ml-[10px] rounded-full bg-white border shadow-sm group-focus:border-primary-500", [_ctx.isDragging ? "cursor-grabbing" : "cursor-grab"]]),
+          class: normalizeClass(["absolute w-[20px] h-[20px] -mt-[13px] -ml-[10px] rounded-full bg-white border shadow-sm group-focus:border-[color:var(--x-slider-border)]", [_ctx.isDragging ? "cursor-grabbing" : "cursor-grab"]]),
           style: normalizeStyle(`left: ${_ctx.value}%;`)
         }, null, 6)
       ], 2),
@@ -5156,22 +5261,26 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     _ctx.errorInternal ? (openBlock(), createElementBlock("p", {
       key: 1,
-      class: "text-sm text-error-500 mt-1",
+      class: "text-sm text-red-500 mt-1",
       textContent: toDisplayString(_ctx.errorInternal)
     }, null, 8, _hoisted_4$3)) : createCommentVNode("", true)
   ], 6);
 }
 var Slider = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c]]);
-const _sfc_main$b = {};
+const _sfc_main$b = defineComponent({
+  name: "XSpacer"
+});
 const _hoisted_1$7 = { class: "flex-grow" };
-function _sfc_render$b(_ctx, _cache) {
+function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$7);
 }
 var Spacer = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b]]);
-const _sfc_main$a = {};
+const _sfc_main$a = defineComponent({
+  name: "XTableHead"
+});
 const _hoisted_1$6 = { class: "align-bottom" };
 const _hoisted_2$4 = { class: "text-sm text-gray-600 dark:text-gray-400 border-b" };
-function _sfc_render$a(_ctx, _cache) {
+function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("thead", _hoisted_1$6, [
     createElementVNode("tr", _hoisted_2$4, [
       renderSlot(_ctx.$slots, "default")
@@ -5184,6 +5293,7 @@ const validators$2 = {
   textAlign: ["left", "center", "right", "justify"]
 };
 const _sfc_main$9 = defineComponent({
+  name: "XTableHeader",
   validators: validators$2,
   props: {
     sort: {
@@ -5258,8 +5368,10 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2);
 }
 var TableHeader = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9]]);
-const _sfc_main$8 = {};
-function _sfc_render$8(_ctx, _cache) {
+const _sfc_main$8 = defineComponent({
+  name: "XTableBody"
+});
+function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("tbody", null, [
     renderSlot(_ctx.$slots, "default")
   ]);
@@ -5269,6 +5381,7 @@ const validators$1 = {
   verticalAlign: ["baseline", "bottom", "middle", "text-bottom", "text-top", "top"]
 };
 const _sfc_main$7 = defineComponent({
+  name: "XTableRow",
   validators: validators$1,
   props: {
     pointer: Boolean,
@@ -5318,6 +5431,7 @@ const validators = {
   ]
 };
 const _sfc_main$6 = defineComponent({
+  name: "XTableCell",
   validators,
   props: {
     textAlign: {
@@ -5364,6 +5478,7 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var TableCell = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6]]);
 const _sfc_main$5 = defineComponent({
+  name: "XTable",
   components: {
     TableHead,
     TableHeader,
@@ -5526,6 +5641,7 @@ 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",
   props: __spreadProps(__spreadValues({}, useCommon.props()), {
     value: {
       type: [String, Number],
@@ -5625,6 +5741,7 @@ 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: "XTabGroup",
   components: {
     XScroll
   },
@@ -5750,10 +5867,11 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     createElementVNode("div", _hoisted_1$2, null, 512)
   ]);
 }
-var Tabs = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
+var TabGroup = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
 const _sfc_main$2 = defineComponent({
+  name: "XTextarea",
   validators: __spreadValues({}, useCommon.validators()),
-  props: __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, useCommon.props()), useColors.props("primary")), useInteractive.props()), useInputtable.props()), {
+  props: __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, useCommon.props()), useInteractive.props()), useInputtable.props()), {
     helper: String,
     label: String,
     dir: {
@@ -5791,6 +5909,10 @@ const _sfc_main$2 = defineComponent({
     watch([() => props.modelValue, () => props.size], () => {
       setTimeout(resize);
     });
+    const css = useCSS("textarea");
+    const colors = useColors();
+    const color = colors.getPalette("primary");
+    const style = css.get("border", color[500]);
     function onInput() {
       resize();
     }
@@ -5809,6 +5931,7 @@ const _sfc_main$2 = defineComponent({
     const interactive = useInteractive(elRef);
     return __spreadProps(__spreadValues(__spreadValues({}, interactive), useInputtable(props, { focus: interactive.focus, emit })), {
       elRef,
+      style,
       onInput,
       onEnter
     });
@@ -5835,7 +5958,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 10, _hoisted_1$1)) : createCommentVNode("", true),
     createElementVNode("textarea", mergeProps({
       ref: "elRef",
-      class: ["appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:border-primary-500 dark:focus:border-primary-500 transition-colors duration-150 ease-in-out border-gray-300 dark:border-gray-700 resize-none overflow-hidden border shadow-sm rounded-md", [
+      class: ["appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none transition-colors duration-150 ease-in-out border-gray-300 dark:border-gray-700 resize-none overflow-hidden border shadow-sm rounded-md focus:border-[color:var(--x-textarea-border)]", [
         _ctx.disabled ? "bg-gray-100 dark:bg-gray-700 text-gray-500 cursor-not-allowed" : "bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200",
         {
           "px-2 py-1 text-xs": _ctx.size === "xs",
@@ -5845,10 +5968,11 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
           "px-5 py-4 text-xl": _ctx.size === "xl"
         },
         {
-          "border-error-500 focus:border-error-500 dark:focus:border-error-500": _ctx.errorInternal
+          "border-red-500 focus:border-red-500 dark:focus:border-red-500": _ctx.errorInternal
         },
         _ctx.inputClass
       ]],
+      style: _ctx.style,
       disabled: _ctx.disabled,
       max: _ctx.max,
       maxlength: _ctx.maxlength,
@@ -5865,7 +5989,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     }), null, 16, _hoisted_2$1),
     _ctx.errorInternal ? (openBlock(), createElementBlock("p", {
       key: 1,
-      class: "text-sm text-error-500 mt-1",
+      class: "text-sm text-red-500 mt-1",
       textContent: toDisplayString(_ctx.errorInternal)
     }, null, 8, _hoisted_3$1)) : _ctx.helper ? (openBlock(), createElementBlock("p", {
       key: 2,
@@ -5876,6 +6000,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var Textarea = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
 const _sfc_main$1 = defineComponent({
+  name: "XToggle",
   components: {
     XSpinner
   },
@@ -5992,13 +6117,14 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     _ctx.errorInternal ? (openBlock(), createElementBlock("p", {
       key: 0,
-      class: "text-sm text-error-500 mt-1",
+      class: "text-sm text-red-500 mt-1",
       textContent: toDisplayString(_ctx.errorInternal)
     }, null, 8, _hoisted_4)) : createCommentVNode("", true)
   ], 2);
 }
 var Toggle = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
 const _sfc_main = defineComponent({
+  name: "XTooltip",
   components: {
     XPopover,
     XPopoverContainer
@@ -6068,7 +6194,7 @@ var components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProp
   XTableHeader: TableHeader,
   XTableRow: TableRow,
   XTab: Tab,
-  XTabs: Tabs,
+  XTabGroup: TabGroup,
   XTag,
   XTextarea: Textarea,
   XToggle: Toggle,
@@ -6080,9 +6206,24 @@ const useNotification = () => {
     console.warn("useNotification must have a parent wrapped with Notifications component");
   return notification;
 };
-const install = (app, options = { prefix: "X" }) => {
-  Object.keys(components).forEach((name) => {
-    app.component(`${options.prefix}${name.slice(1)}`, components[name]);
-  });
+const defaultOptions = {
+  prefix: "X"
+};
+const create = (createOptions = {}) => {
+  const install2 = (app, installOptions = {}) => {
+    const options = __spreadValues(__spreadValues(__spreadValues({}, defaultOptions), createOptions), installOptions);
+    if (options.components)
+      options.components.forEach((component) => {
+        app.component(`${options.prefix}${component.name.slice(1)}`, component);
+      });
+    app.provide(injectColorsKey, options.colors);
+    app.provide(injectIconsKey, options.icons);
+  };
+  return {
+    install: install2
+  };
 };
-export { Alert as XAlert, Avatar as XAvatar, Badge as XBadge, Breadcrumbs as XBreadcrumbs, XButton, ButtonGroup as XButtonGroup, Card as XCard, Checkbox as XCheckbox, XCollapse, Container as XContainer, XDivider, Drawer as XDrawer, Form as XForm, XIcon, Image$1 as XImage, Input as XInput, XLink, Menu as XMenu, XMenuItem, Modal as XModal, Notifications as XNotifications, Pagination as XPagination, XPaginationItem, XPopover, XPopoverContainer, XProgress, Radio as XRadio, XScroll, Select as XSelect, Skeleton as XSkeleton, Slider as XSlider, Spacer as XSpacer, XSpinner, Tab as XTab, Table as XTable, TableBody as XTableBody, TableCell as XTableCell, TableHead as XTableHead, TableHeader as XTableHeader, TableRow as XTableRow, Tabs as XTabs, XTag, Textarea as XTextarea, Toggle as XToggle, Tooltip as XTooltip, install as default, injectButtonGroupKey, injectFormKey, injectIconsKey, injectNotificationKey, injectTabKey, useCSS, useColors, useCommon, useInputtable, useInteractive, useNotification, version };
+var install = create({
+  components: Object.keys(components).map((key) => components[key])
+});
+export { Alert as XAlert, Avatar as XAvatar, Badge as XBadge, Breadcrumbs as XBreadcrumbs, XButton, ButtonGroup as XButtonGroup, Card as XCard, Checkbox as XCheckbox, XCollapse, Container as XContainer, XDivider, Drawer as XDrawer, Form as XForm, XIcon, Image$1 as XImage, Input as XInput, XLink, Menu as XMenu, XMenuItem, Modal as XModal, Notifications as XNotifications, Pagination as XPagination, XPaginationItem, XPopover, XPopoverContainer, XProgress, Radio as XRadio, XScroll, Select as XSelect, Skeleton as XSkeleton, Slider as XSlider, Spacer as XSpacer, XSpinner, Tab as XTab, TabGroup as XTabGroup, Table as XTable, TableBody as XTableBody, TableCell as XTableCell, TableHead as XTableHead, TableHeader as XTableHeader, TableRow as XTableRow, XTag, Textarea as XTextarea, Toggle as XToggle, Tooltip as XTooltip, tailwindColors as colors, create as createUI, install as default, injectButtonGroupKey, injectColorsKey, injectFormKey, injectIconsKey, injectNotificationKey, injectTabKey, useCSS, useColors, useCommon, useInputtable, useInteractive, useNotification, version };