@indielayer/ui 0.1.0 → 0.2.2

package/lib/cjs/components/select/Select.vue_vue_type_template_id_e15ccf42_lang.js

@@ -0,0 +1,122 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+const _hoisted_1 = { class: "inline-block mb-1 relative pb-2" };
+const _hoisted_2 = ["textContent"];
+const _hoisted_3 = { class: "relative" };
+const _hoisted_4 = ["disabled", "name", "readonly", "value"];
+const _hoisted_5 = {
+  key: 0,
+  disabled: "",
+  value: ""
+};
+const _hoisted_6 = ["value", "disabled"];
+const _hoisted_7 = { class: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2" };
+const _hoisted_8 = /*#__PURE__*/vue.createElementVNode("path", { d: "M18 8L12 2L6 8" }, null, -1);
+const _hoisted_9 = /*#__PURE__*/vue.createElementVNode("path", { d: "M18 16L12 22L6 16" }, null, -1);
+const _hoisted_10 = [
+  _hoisted_8,
+  _hoisted_9
+];
+const _hoisted_11 = ["textContent"];
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_x_spinner = vue.resolveComponent("x-spinner");
+
+  return (vue.openBlock(), vue.createElementBlock("label", _hoisted_1, [
+    ($props.label)
+      ? (vue.openBlock(), vue.createElementBlock("p", {
+          key: 0,
+          class: vue.normalizeClass(["font-medium text-gray-800 dark:text-gray-200 mb-1", {
+        'text-xs': _ctx.size === 'xs',
+        'text-sm': _ctx.size === 'sm',
+        'text-lg': _ctx.size === 'lg',
+        'text-xl': _ctx.size === 'xl',
+      }]),
+          textContent: vue.toDisplayString($props.label)
+        }, null, 10, _hoisted_2))
+      : vue.createCommentVNode("", true),
+    vue.createElementVNode("div", _hoisted_3, [
+      vue.withDirectives(vue.createElementVNode("select", vue.mergeProps({
+        ref: "focusRef",
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($options.selected) = $event)),
+        class: ["block appearance-none w-full border border-gray-300 dark:border-gray-700 pr-8 rounded-form leading-tight focus:outline-none focus:border-primary-500 dark:focus:border-primary-500 transition-colors duration-150 ease-in-out", [
+          _ctx.disabled
+            ? 'bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 cursor-not-allowed'
+            : 'bg-white dark:bg-gray-900',
+          {
+            // shadow
+            'shadow': !$props.flat,
+
+            // size
+            'py-1': _ctx.size === 'auto',
+            'px-2 py-1 text-xs': _ctx.size === 'xs',
+            'px-2 py-1 text-sm': _ctx.size === 'sm',
+            'px-3 py-2': !['auto', 'xs', 'sm', 'lg', 'xl'].includes(_ctx.size),
+            'px-4 py-3 text-lg': _ctx.size === 'lg',
+            'px-6 py-6 text-xl': _ctx.size === 'xl',
+          },
+          {
+            'text-gray-400 dark:text-gray-500': _ctx.modelValue === '' || _ctx.modelValue === null,
+
+            // error
+            'border-error-500 focus:border-error-500 dark:focus:border-error-500': _ctx.errorInternal,
+          },
+        ]],
+        disabled: _ctx.disabled || _ctx.loading,
+        name: _ctx.name,
+        readonly: _ctx.readonly,
+        value: _ctx.modelValue
+      }, vue.toHandlers(_ctx.inputListeners)), [
+        ($props.placeholder)
+          ? (vue.openBlock(), vue.createElementBlock("option", _hoisted_5, vue.toDisplayString($props.placeholder), 1))
+          : vue.createCommentVNode("", true),
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.options, (option, index) => {
+          return (vue.openBlock(), vue.createElementBlock("option", {
+            key: index,
+            value: option.value,
+            disabled: option.disabled
+          }, vue.toDisplayString(option.label), 9, _hoisted_6))
+        }), 128)),
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 16, _hoisted_4), [
+        [vue.vModelSelect, $options.selected]
+      ]),
+      vue.createElementVNode("div", _hoisted_7, [
+        (_ctx.loading)
+          ? (vue.openBlock(), vue.createBlock(_component_x_spinner, {
+              key: 0,
+              size: _ctx.size
+            }, null, 8, ["size"]))
+          : (vue.openBlock(), vue.createElementBlock("svg", {
+              key: 1,
+              class: vue.normalizeClass(["stroke-2", [
+            _ctx.disabled ? 'text-gray-600 dark:text-gray-400': 'text-gray-700 dark:text-gray-300',
+            {
+              'h-3 w-3': _ctx.size === 'sm' || _ctx.size === 'xs',
+              'h-4 w-4': !['xs', 'sm', 'xl'].includes(_ctx.size),
+              'h-5 w-5': _ctx.size === 'xl',
+            }
+          ]]),
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              "stroke-linejoin": "round",
+              "stroke-linecap": "round",
+              fill: "none"
+            }, _hoisted_10, 2))
+      ])
+    ]),
+    (_ctx.errorInternal)
+      ? (vue.openBlock(), vue.createElementBlock("p", {
+          key: 1,
+          class: "text-sm text-error-500 mt-1",
+          textContent: vue.toDisplayString(_ctx.errorInternal)
+        }, null, 8, _hoisted_11))
+      : vue.createCommentVNode("", true)
+  ]))
+}
+
+exports.render = render;

package/lib/cjs/{src/components → components}/skeleton/Skeleton.vue.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var Skeleton_vue_vue_type_script_lang = require('./Skeleton.vue_vue&type=script&lang.js');
-var Skeleton_vue_vue_type_template_id_f4226afe_lang = require('./Skeleton.vue_vue&type=template&id=f4226afe&lang.js');
+var Skeleton_vue_vue_type_script_lang = require('./Skeleton.vue_vue_type_script_lang.js');
+var Skeleton_vue_vue_type_template_id_a9c4d78c_lang = require('./Skeleton.vue_vue_type_template_id_a9c4d78c_lang.js');
 
-Skeleton_vue_vue_type_script_lang.render = Skeleton_vue_vue_type_template_id_f4226afe_lang.render;
+Skeleton_vue_vue_type_script_lang.render = Skeleton_vue_vue_type_template_id_a9c4d78c_lang.render;
 
 module.exports = Skeleton_vue_vue_type_script_lang;

package/lib/cjs/{src/components/tabs/Tabs.vue_vue&type=script&lang.js → components/skeleton/Skeleton.vue_vue_type_script_lang.js}

@@ -1,12 +1,12 @@
 'use strict';
 
 var script = {
-  name: 'XTabs',
+  name: 'XSkeleton',
 
   props: {
     tag: {
       type: String,
-      default: 'ul',
+      default: 'div',
     },
   },
 };

package/lib/cjs/{src/components/skeleton/Skeleton.vue_vue&type=template&id=f4226afe&lang.js → components/skeleton/Skeleton.vue_vue_type_template_id_a9c4d78c_lang.js}

@@ -7,16 +7,12 @@ var vue = require('vue');
 const _hoisted_1 = /*#__PURE__*/vue.createTextVNode(" ​ ");
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$props.tag), vue.mergeProps(_ctx.$attrs, {
-    class: ["animate-pulse bg-gray-300 dark:bg-gray-600", [
-      _ctx.$props.rounded ? 'rounded-full' : 'rounded-sm',
-    ]]
-  }), {
+  return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.tag), { class: "animate-pulse bg-gray-300 dark:bg-gray-600 rounded-md" }, {
     default: vue.withCtx(() => [
       _hoisted_1
     ]),
     _: 1
-  }, 16, ["class"]))
+  }))
 }
 
 exports.render = render;

package/lib/cjs/{src/components → components}/spacer/Spacer.vue.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Spacer_vue_vue_type_template_id_3c2aca79_lang = require('./Spacer.vue_vue&type=template&id=3c2aca79&lang.js');
+var Spacer_vue_vue_type_template_id_3c2aca79_lang = require('./Spacer.vue_vue_type_template_id_3c2aca79_lang.js');
 
 const script = {};
 

package/lib/cjs/{src/components → components}/spinner/Spinner.vue.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var Spinner_vue_vue_type_script_lang = require('./Spinner.vue_vue&type=script&lang.js');
-var Spinner_vue_vue_type_template_id_435d3ecf_lang = require('./Spinner.vue_vue&type=template&id=435d3ecf&lang.js');
+var Spinner_vue_vue_type_script_lang = require('./Spinner.vue_vue_type_script_lang.js');
+var Spinner_vue_vue_type_template_id_60c76aa5_lang = require('./Spinner.vue_vue_type_template_id_60c76aa5_lang.js');
 
-Spinner_vue_vue_type_script_lang.render = Spinner_vue_vue_type_template_id_435d3ecf_lang.render;
+Spinner_vue_vue_type_script_lang.render = Spinner_vue_vue_type_template_id_60c76aa5_lang.render;
 
 module.exports = Spinner_vue_vue_type_script_lang;

package/lib/cjs/{src/components/spinner/Spinner.vue_vue&type=template&id=435d3ecf&lang.js → components/spinner/Spinner.vue_vue_type_template_id_60c76aa5_lang.js}

@@ -13,10 +13,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (vue.openBlock(), vue.createElementBlock("svg", {
     class: vue.normalizeClass([
       {
-        'h-3 w-3': _ctx.$props.size === 'xs',
-        'h-4 w-4': _ctx.$props.size === 'sm',
-        'h-5 w-5': !['xs', 'sm', 'xl'].includes(_ctx.$props.size),
-        'h-6 w-6': _ctx.$props.size === 'xl',
+        'h-3 w-3': $props.size === 'xs',
+        'h-4 w-4': $props.size === 'sm',
+        'h-5 w-5': !['xs', 'sm', 'xl'].includes($props.size),
+        'h-6 w-6': $props.size === 'xl',
       },
 
     ]),

package/lib/cjs/{src/components → components}/status/StatusDot.vue.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var StatusDot_vue_vue_type_script_lang = require('./StatusDot.vue_vue&type=script&lang.js');
-var StatusDot_vue_vue_type_template_id_75d1a520_lang = require('./StatusDot.vue_vue&type=template&id=75d1a520&lang.js');
+var StatusDot_vue_vue_type_script_lang = require('./StatusDot.vue_vue_type_script_lang.js');
+var StatusDot_vue_vue_type_template_id_1d82aee7_lang = require('./StatusDot.vue_vue_type_template_id_1d82aee7_lang.js');
 
-StatusDot_vue_vue_type_script_lang.render = StatusDot_vue_vue_type_template_id_75d1a520_lang.render;
+StatusDot_vue_vue_type_script_lang.render = StatusDot_vue_vue_type_template_id_1d82aee7_lang.render;
 
 module.exports = StatusDot_vue_vue_type_script_lang;

package/lib/cjs/{src/components/status/StatusDot.vue_vue&type=script&lang.js → components/status/StatusDot.vue_vue_type_script_lang.js}

@@ -1,29 +1,17 @@
 'use strict';
 
-const validator = {
-  status: [
-    'primary',
-    'error',
-    'success',
-    'warning',
-  ],
-};
-
 var script = {
   name: 'XStatusDot',
 
-  validator,
-
   props: {
     animate: {
       type: Boolean,
       default: false,
     },
 
-    status: {
+    color: {
       type: String,
       default: 'primary',
-      validator: (value) => validator.status.includes(value),
     },
 
     tag: {

package/lib/cjs/components/status/StatusDot.vue_vue_type_template_id_1d82aee7_lang.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.tag), { class: "inline-block relative" }, {
+    default: vue.withCtx(() => [
+      vue.renderSlot(_ctx.$slots, "default"),
+      ($props.animate)
+        ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: vue.normalizeClass(["animate-ping opacity-75 absolute -top-0.5 -right-0.5 rounded-full h-3 w-3 z-10", [`bg-${$props.color}-500`]])
+          }, null, 2))
+        : vue.createCommentVNode("", true),
+      vue.createElementVNode("div", {
+        class: vue.normalizeClass(["absolute -top-0.5 -right-0.5 rounded-full h-3 w-3 z-10", [`bg-${$props.color}-500`]])
+      }, null, 2)
+    ]),
+    _: 3
+  }))
+}
+
+exports.render = render;

package/lib/cjs/{src/components → components}/table/Table.vue.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var Table_vue_vue_type_script_lang = require('./Table.vue_vue&type=script&lang.js');
-var Table_vue_vue_type_template_id_50d6ab12_lang = require('./Table.vue_vue&type=template&id=50d6ab12&lang.js');
+var Table_vue_vue_type_script_lang = require('./Table.vue_vue_type_script_lang.js');
+var Table_vue_vue_type_template_id_50d6ab12_lang = require('./Table.vue_vue_type_template_id_50d6ab12_lang.js');
 
 Table_vue_vue_type_script_lang.render = Table_vue_vue_type_template_id_50d6ab12_lang.render;
 

package/lib/cjs/{src/components/table/Table.vue_vue&type=script&lang.js → components/table/Table.vue_vue_type_script_lang.js}

@@ -6,12 +6,12 @@ require('./TableBody.vue.js');
 require('./TableRow.vue.js');
 require('./TableCell.vue.js');
 require('../spinner/Spinner.vue.js');
-var TableHead_vue_vue_type_script_lang = require('./TableHead.vue_vue&type=script&lang.js');
-var TableHeader_vue_vue_type_script_lang = require('./TableHeader.vue_vue&type=script&lang.js');
-var TableBody_vue_vue_type_script_lang = require('./TableBody.vue_vue&type=script&lang.js');
-var TableRow_vue_vue_type_script_lang = require('./TableRow.vue_vue&type=script&lang.js');
-var TableCell_vue_vue_type_script_lang = require('./TableCell.vue_vue&type=script&lang.js');
-var Spinner_vue_vue_type_script_lang = require('../spinner/Spinner.vue_vue&type=script&lang.js');
+var TableHead_vue_vue_type_script_lang = require('./TableHead.vue_vue_type_script_lang.js');
+var TableHeader_vue_vue_type_script_lang = require('./TableHeader.vue_vue_type_script_lang.js');
+var TableBody_vue_vue_type_script_lang = require('./TableBody.vue_vue_type_script_lang.js');
+var TableRow_vue_vue_type_script_lang = require('./TableRow.vue_vue_type_script_lang.js');
+var TableCell_vue_vue_type_script_lang = require('./TableCell.vue_vue_type_script_lang.js');
+var Spinner_vue_vue_type_script_lang = require('../spinner/Spinner.vue_vue_type_script_lang.js');
 
 var script = {
   name: 'XTable',

package/lib/cjs/{src/components → components}/table/TableBody.vue.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var TableBody_vue_vue_type_script_lang = require('./TableBody.vue_vue&type=script&lang.js');
-var TableBody_vue_vue_type_template_id_fd21b336_lang = require('./TableBody.vue_vue&type=template&id=fd21b336&lang.js');
+var TableBody_vue_vue_type_script_lang = require('./TableBody.vue_vue_type_script_lang.js');
+var TableBody_vue_vue_type_template_id_fd21b336_lang = require('./TableBody.vue_vue_type_template_id_fd21b336_lang.js');
 
 TableBody_vue_vue_type_script_lang.render = TableBody_vue_vue_type_template_id_fd21b336_lang.render;
 

package/lib/cjs/{src/components → components}/table/TableCell.vue.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var TableCell_vue_vue_type_script_lang = require('./TableCell.vue_vue&type=script&lang.js');
-var TableCell_vue_vue_type_template_id_6b8d1953_lang = require('./TableCell.vue_vue&type=template&id=6b8d1953&lang.js');
+var TableCell_vue_vue_type_script_lang = require('./TableCell.vue_vue_type_script_lang.js');
+var TableCell_vue_vue_type_template_id_6b8d1953_lang = require('./TableCell.vue_vue_type_template_id_6b8d1953_lang.js');
 
 TableCell_vue_vue_type_script_lang.render = TableCell_vue_vue_type_template_id_6b8d1953_lang.render;
 

package/lib/cjs/{src/components → components}/table/TableHead.vue.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var TableHead_vue_vue_type_script_lang = require('./TableHead.vue_vue&type=script&lang.js');
-var TableHead_vue_vue_type_template_id_c753405c_lang = require('./TableHead.vue_vue&type=template&id=c753405c&lang.js');
+var TableHead_vue_vue_type_script_lang = require('./TableHead.vue_vue_type_script_lang.js');
+var TableHead_vue_vue_type_template_id_c753405c_lang = require('./TableHead.vue_vue_type_template_id_c753405c_lang.js');
 
 TableHead_vue_vue_type_script_lang.render = TableHead_vue_vue_type_template_id_c753405c_lang.render;
 

package/lib/cjs/{src/components → components}/table/TableHeader.vue.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var TableHeader_vue_vue_type_script_lang = require('./TableHeader.vue_vue&type=script&lang.js');
-var TableHeader_vue_vue_type_template_id_34196e32_lang = require('./TableHeader.vue_vue&type=template&id=34196e32&lang.js');
+var TableHeader_vue_vue_type_script_lang = require('./TableHeader.vue_vue_type_script_lang.js');
+var TableHeader_vue_vue_type_template_id_20f1eb1e_lang = require('./TableHeader.vue_vue_type_template_id_20f1eb1e_lang.js');
 
-TableHeader_vue_vue_type_script_lang.render = TableHeader_vue_vue_type_template_id_34196e32_lang.render;
+TableHeader_vue_vue_type_script_lang.render = TableHeader_vue_vue_type_template_id_20f1eb1e_lang.render;
 
 module.exports = TableHeader_vue_vue_type_script_lang;

package/lib/cjs/{src/components/table/TableHeader.vue_vue&type=template&id=34196e32&lang.js → components/table/TableHeader.vue_vue_type_template_id_20f1eb1e_lang.js}

@@ -36,8 +36,8 @@ const _hoisted_5 = /*#__PURE__*/vue.createElementVNode("line", {
 const _hoisted_6 = /*#__PURE__*/vue.createElementVNode("polyline", { points: "5 12 12 5 19 12" }, null, -1);
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("th", vue.mergeProps({
-    class: ["py-2 bg-gray-50 dark:bg-gray-800 font-medium tracking-wide uppercase text-xs pr-1 last:pr-0", [
+  return (vue.openBlock(), vue.createElementBlock("th", {
+    class: vue.normalizeClass(["py-2 bg-gray-50 dark:bg-gray-800 font-medium tracking-wide uppercase text-xs pr-1 last:pr-0", [
       {
         //sort
         'cursor-pointer hover:text-gray-800 dark:hover:text-gray-300 transition-colors duration-150 ease-in-out': $props.sortable,
@@ -49,8 +49,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         'text-right': $props.textAlign === 'right',
         'text-justify': $props.textAlign === 'justify',
       },
-    ]]
-  }, _ctx.$attrs), [
+    ]])
+  }, [
     ($props.sortable)
       ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
           vue.renderSlot(_ctx.$slots, "default"),
@@ -72,7 +72,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             : vue.createCommentVNode("", true)
         ]))
       : vue.renderSlot(_ctx.$slots, "default", { key: 1 })
-  ], 16))
+  ], 2))
 }
 
 exports.render = render;

package/lib/cjs/{src/components → components}/table/TableRow.vue.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var TableRow_vue_vue_type_script_lang = require('./TableRow.vue_vue&type=script&lang.js');
-var TableRow_vue_vue_type_template_id_4ffea48c_lang = require('./TableRow.vue_vue&type=template&id=4ffea48c&lang.js');
+var TableRow_vue_vue_type_script_lang = require('./TableRow.vue_vue_type_script_lang.js');
+var TableRow_vue_vue_type_template_id_75239b39_lang = require('./TableRow.vue_vue_type_template_id_75239b39_lang.js');
 
-TableRow_vue_vue_type_script_lang.render = TableRow_vue_vue_type_template_id_4ffea48c_lang.render;
+TableRow_vue_vue_type_script_lang.render = TableRow_vue_vue_type_template_id_75239b39_lang.render;
 
 module.exports = TableRow_vue_vue_type_script_lang;

package/lib/cjs/{src/components/table/TableRow.vue_vue&type=template&id=4ffea48c&lang.js → components/table/TableRow.vue_vue_type_template_id_75239b39_lang.js}

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
-    class: ["border-b border-gray-200 dark:border-gray-700", [
+  return (vue.openBlock(), vue.createElementBlock("tr", {
+    class: vue.normalizeClass(["border-b border-gray-200 dark:border-gray-700", [
       {
         'hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer': $props.clickable,
         // vertical-align
@@ -17,10 +17,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         'align-text-top': $props.verticalAlign === 'text-top',
         'align-top': $props.verticalAlign === 'top',
       },
-    ]]
-  }, _ctx.$attrs), [
+    ]])
+  }, [
     vue.renderSlot(_ctx.$slots, "default")
-  ], 16))
+  ], 2))
 }
 
 exports.render = render;

package/lib/cjs/components/tabs/Tab.vue.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var Tab_vue_vue_type_script_lang = require('./Tab.vue_vue_type_script_lang.js');
+var Tab_vue_vue_type_template_id_3ad17bb5_lang = require('./Tab.vue_vue_type_template_id_3ad17bb5_lang.js');
+
+Tab_vue_vue_type_script_lang.render = Tab_vue_vue_type_template_id_3ad17bb5_lang.render;
+
+module.exports = Tab_vue_vue_type_script_lang;

package/lib/cjs/components/tabs/Tab.vue_vue_type_script_lang.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var vue = require('vue');
+
+var script = {
+  name: 'XTab',
+
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+
+    value: {
+      type: [String, Number],
+      default: null,
+    },
+
+    color: {
+      type: String,
+      default: 'primary',
+    },
+
+    tag: {
+      type: String,
+      default: 'li',
+    },
+
+    to: {
+      type: String,
+      default: undefined,
+    },
+  },
+
+  setup(props) {
+    const tabs = vue.inject(
+      'tabs',
+      {
+        state: vue.reactive({
+          active: null,
+        }),
+        activateTab: () => {},
+      },
+    );
+
+    const state = vue.reactive({
+      selected: vue.computed(() => tabs.state.active === props.value),
+    });
+
+    function onClickTab() {
+      tabs.activateTab(props.value);
+    }
+
+    return {
+      ...vue.toRefs(state),
+      tabs,
+      onClickTab,
+    }
+  },
+};
+
+module.exports = script;

package/lib/cjs/components/tabs/Tab.vue_vue_type_template_id_3ad17bb5_lang.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.to ? 'router-link' : $props.tag), {
+    to: $props.to,
+    class: vue.normalizeClass(["pb-2 transition-colors duration-150 ease-in-out", [
+      {
+        [`border-b-2 border-${$props.color}-500 text-${$props.color}-500`]: _ctx.selected,
+        'cursor-pointer': !$props.disabled,
+        'cursor-not-allowed': $props.disabled,
+        'cursor-not-allowed text-gray-500': $props.disabled && !_ctx.selected,
+      },
+    ]]),
+    "aria-disabled": $props.disabled ? 'true' : null,
+    "aria-selected": _ctx.selected ? 'true' : 'false',
+    onClick: $setup.onClickTab
+  }, {
+    default: vue.withCtx(() => [
+      vue.renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3
+  }, 8, ["to", "class", "aria-disabled", "aria-selected", "onClick"]))
+}
+
+exports.render = render;

package/lib/cjs/components/tabs/Tabs.vue.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var Tabs_vue_vue_type_script_lang = require('./Tabs.vue_vue_type_script_lang.js');
+var Tabs_vue_vue_type_template_id_4f5b59bd_lang = require('./Tabs.vue_vue_type_template_id_4f5b59bd_lang.js');
+
+Tabs_vue_vue_type_script_lang.render = Tabs_vue_vue_type_template_id_4f5b59bd_lang.render;
+
+module.exports = Tabs_vue_vue_type_script_lang;

package/lib/cjs/components/tabs/Tabs.vue_vue_type_script_lang.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var vue = require('vue');
+
+var script = {
+  name: 'XTabs',
+
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: null,
+    },
+    tag: {
+      type: String,
+      default: 'ul',
+    },
+  },
+
+  emits: ['update:modelValue'],
+
+  setup(props, { emit }) {
+    const state = vue.reactive({
+      active: vue.computed(() => props.modelValue),
+    });
+
+    vue.provide('tabs', {
+      state,
+      activateTab,
+    });
+
+    function activateTab(tab) {
+      emit('update:modelValue', tab);
+    }
+  },
+};
+
+module.exports = script;

package/lib/cjs/{src/components/tabs/Tabs.vue_vue&type=template&id=17799e08&lang.js → components/tabs/Tabs.vue_vue_type_template_id_4f5b59bd_lang.js}

@@ -5,12 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$props.tag), vue.mergeProps(_ctx.$attrs, { class: "flex border-b border-gray-200 dark:border-gray-700 space-x-4" }), {
+  return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.tag), { class: "flex border-b border-gray-200 dark:border-gray-700 space-x-4" }, {
     default: vue.withCtx(() => [
       vue.renderSlot(_ctx.$slots, "default")
     ]),
     _: 3
-  }, 16))
+  }))
 }
 
 exports.render = render;

package/lib/cjs/components/tag/Tag.vue.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var Tag_vue_vue_type_script_lang = require('./Tag.vue_vue_type_script_lang.js');
+var Tag_vue_vue_type_template_id_3d8994a5_lang = require('./Tag.vue_vue_type_template_id_3d8994a5_lang.js');
+
+Tag_vue_vue_type_script_lang.render = Tag_vue_vue_type_template_id_3d8994a5_lang.render;
+
+module.exports = Tag_vue_vue_type_script_lang;