@gits-id/button - npm Package Compare versions

Comparing version 0.1.17-alpha.0 to 0.1.17-alpha.32

dist/button.cjs.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var e=require("vue");const y=e.createElementVNode("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"4"},null,-1),h=e.createElementVNode("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"},null,-1),x=[y,h],w={props:{xLarge:{type:Boolean,default:!1},large:{type:Boolean,default:!1},small:{type:Boolean,default:!1},xSmall:{type:Boolean,default:!1},color:{type:String,default:""}},emits:[],setup(o,{emit:r}){const t=o,s=e.computed(()=>t.large?"h-8 w-8":t.small?"h-4 w-4":t.xLarge?"h-10 w-10":t.xSmall?"h-3 w-3":"h-5 w-5"),n=e.computed(()=>{switch(t.color){case"primary":return"text-primary-600";case"info":return"text-info-600";case"warning":return"text-warning-600";case"error":return"text-error-600";case"success":return"text-success-600";case"white":return"text-white-600";default:return t.color||"text-gray-600"}});return(d,u)=>(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["animate-spin inline",[e.unref(s),e.unref(n)]]),xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},x,2))}};var v=(o,r)=>{const t=o.__vccOpts||o;for(const[s,n]of r)t[s]=n;return t};const m={key:0,class:"ml-2"},_=e.defineComponent({props:{size:{type:String,default:""},color:{type:String,default:""},to:{type:[String,Object],default:""},href:{type:String,default:""},text:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},ring:{type:Boolean,default:!0},tile:{type:Boolean,default:!1},icon:{type:Boolean,default:!1},block:{type:Boolean,default:!1},type:{type:String,default:"button"},solid:{type:Boolean,default:!1},noRing:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},loadingText:{type:String,default:""},newTab:{type:Boolean,default:!1},shadow:{type:Boolean,default:!1}},setup(o){const r=o,{disabled:t,ring:s,block:n,solid:d,noRing:u,loading:i,loadingText:c}=e.toRefs(r),b=e.computed(()=>r.to?"router-link":r.href?"a":"button");e.computed(()=>{if(r.icon)switch(r.size){case"xs":return"text-xs p-[6px] w-[30px] h-[30px]";case"sm":return"text-sm p-[6px] w-[36] h-[36]";case"lg":return"text-base p-2 w-[50px] h-[50px]";case"xl":return"text-lg p-2 w-[60px] h-[60px]";case"md":case"base":default:return"text-xs p-2 w-[40px] h-[40px]"}else switch(r.size){case"xs":return"text-xs px-2 py-1 h-[30px]";case"sm":return"text-sm px-3 py-1 h-9";case"lg":return"text-base px-6 py-3 h-[50px]";case"xl":return"text-lg px-8 py-4 h-[60px]";case"md":case"base":default:return"text-sm px-4 py-2 h-10"}}),e.computed(()=>{if(r.text)switch(r.color){case"primary":return"text-primary-600";case"secondary":return"text-secondary-600";case"info":return"text-info-600";case"warning":return"text-warning-600";case"error":return"text-error-600";case"success":return"text-success-600";case"gray-light":return"text-gray-3";default:return"text-gray-800"}else if(r.outlined)switch(r.color){case"primary":return"text-primary-600 border-primary-600 hover:bg-primary-600 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";case"secondary":return"text-secondary-600 border-secondary-600 hover:bg-secondary-600 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";case"info":return"text-info-600 border-info-600 hover:bg-info-600 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";case"warning":return"text-warning-600 border-warning-600 hover:bg-warning-600 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";case"error":return"text-error-600 border-error-600 hover:bg-error-600 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";case"success":return"text-success-600 border-success-600 hover:bg-success-600 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";case"gray-light":return"text-gray-3 border-gray-3 hover:bg-gray-300 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";default:return"text-gray-600 border-gray-600 hover:bg-gray-400 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent"}else switch(r.color){case"primary":return"text-white border-primary-600 bg-primary-600 hover:bg-primary-700 hover:border-primary-700";case"secondary":return"text-white border-secondary-600 bg-secondary-600 hover:border-secondary-700 hover:bg-secondary-700";case"info":return"text-white border-info-600 bg-info-600 hover:border-info-700 hover:bg-info-700";case"warning":return"text-white border-warning-600 bg-warning-600 hover:border-warning-700 hover:bg-warning-700";case"error":return"text-white border-error-600 bg-error-600 hover:border-error-700 hover:bg-error-700 focus:ring-error-600";case"success":return"text-white border-success-600 bg-success-600 hover:border-success-700 hover:bg-success-700";case"gray-light":return"text-gray-3 hover:text-gray-200 hover:bg-gray-50 bg-white border-gray-300 focus:border-gray-400 hover:border-gray-400";default:return"text-gray-800 hover:text-gray-900 hover:bg-gray-50 bg-white border-gray-300 focus:border-gray-400 hover:border-gray-400"}}),e.computed(()=>t?"disabled:cursor-not-allowed disabled:text-gray-400 disabled:bg-gray-200 disabled:border-gray-200 disabled:shadow-none":""),e.computed(()=>{switch(r.color){case"primary":return"focus:ring focus:ring-offset-2 focus:ring-primary-600 focus:ring-opacity-50";case"secondary":return"focus:ring focus:ring-offset-2 focus:ring-secondary-600 focus:ring-opacity-50";case"info":return"focus:ring focus:ring-offset-2 focus:ring-info-600 focus:ring-opacity-50";case"warning":return"focus:ring focus:ring-offset-2 focus:ring-warning-600 focus:ring-opacity-50";case"error":return"focus:ring focus:ring-offset-2 focus:ring-error-600 focus:ring-opacity-50";case"success":return"focus:ring focus:ring-offset-2 focus:ring-success-600 focus:ring-opacity-50";default:return"focus:ring focus:ring-offset-2 focus:ring-gray-400 focus:ring-opacity-50"}});const g=e.computed(()=>["btn",`btn-${r.color||"default"}`,`btn-${r.size||"md"}`,{"btn-outlined":r.outlined,[`btn-outlined-${r.color}`]:r.outlined,"btn-text":r.text,[`btn-text-${r.color}`]:r.text,"btn-rounded":r.rounded&&!r.tile,"btn-tile":r.tile&&!r.rounded,"w-full":r.block,shadow:r.shadow,"btn-icon":r.icon,"btn-loading":r.loading}]),p=e.computed(()=>{const a={};return r.to?a.to=r.to:r.href?a.href=r.href:a.type=r.type,a}),f=e.computed(()=>{switch(r.color){case"primary":case"info":case"warning":case"error":case"success":return"white";case"white":return"black";default:return r.color}});return(a,B)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(b)),e.mergeProps({class:e.unref(g),rel:o.newTab?"noopener":"",target:o.newTab?"_blank":"",disabled:e.unref(t)||e.unref(i)},{...e.unref(p),...a.$attrs}),{default:e.withCtx(()=>[e.unref(i)?e.renderSlot(a.$slots,"loading",{key:0},()=>[e.createVNode(e.unref(w),{color:e.unref(f)},null,8,["color"]),e.unref(c)?(e.openBlock(),e.createElementBlock("span",m,e.toDisplayString(e.unref(c)),1)):e.createCommentVNode("",!0)],!0):e.renderSlot(a.$slots,"default",{key:1},void 0,!0)]),_:3},16,["class","rel","target","disabled"]))}});var l=v(_,[["__scopeId","data-v-5bcf54b5"]]);exports.VBtn=l;exports.default=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var r=require("vue"),m=require("@gits-id/spinner");function B(a){return a&&typeof a=="object"&&"default"in a?a:{default:a}}var k=B(m);const S={key:0,class:"ml-2"},i=r.defineComponent({props:{size:{type:String,default:"md",validator:a=>["xs","sm","md","lg","xl"].includes(a)},color:{type:String,default:"default"},to:{type:[String,Object],default:""},href:{type:String,default:""},text:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},ring:{type:Boolean,default:!0},tile:{type:Boolean,default:!1},icon:{type:Boolean,default:!1},block:{type:Boolean,default:!1},type:{type:String,default:"button"},solid:{type:Boolean,default:!1},noRing:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},loadingText:{type:String,default:""},newTab:{type:Boolean,default:!1},shadow:{type:Boolean,default:!1}},setup(a){const e=a,{disabled:d,loading:n,loadingText:s}=r.toRefs(e),c=r.computed(()=>e.to?"router-link":e.href?"a":"button"),l=r.computed(()=>{const t={};return e.to?t.to=e.to:e.href?t.href=e.href:t.type=e.type,t}),b=r.computed(()=>{switch(e.color){case"primary":case"info":case"warning":case"error":case"success":return"white";case"white":return"black";default:return e.color}}),g={default:"border-gray-500 text-gray-800 bg-white hover:bg-gray-100 active:bg-gray-50 active:border-gray-600 active:text-gray-600",primary:"border-primary-500 bg-primary-500 text-white hover:bg-primary-600 hover:border-primary-600 active:bg-primary-400 active:border-primary-400",secondary:"border-secondary-500 bg-secondary-500 text-white hover:bg-secondary-600 hover:border-secondary-600 active:bg-secondary-400 active:border-secondary-400",info:"border-info-500 bg-info-500 text-white hover:bg-info-600 hover:border-info-600 active:bg-info-400 active:border-info-400",warning:"border-warning-500 bg-warning-500 text-white hover:bg-warning-600 hover:border-warning-600 active:bg-warning-400 active:border-warning-400",success:"border-success-500 bg-success-500 text-white hover:bg-success-600 hover:border-success-600 active:bg-success-400 active:border-success-400",error:"border-error-500 bg-error-500 text-white hover:bg-error-600 hover:border-error-600 active:bg-error-400 active:border-error-400",dark:"border-gray-800 bg-gray-800 text-white hover:bg-gray-900 hover:border-gray-900 active:bg-gray-700 active:border-gray-700"},u={default:"border-gray-500 text-gray-800 hover:bg-gray-700 hover:border-gray-700 hover:text-white active:bg-gray-50 active:border-gray-600 active:text-gray-600",primary:"border-primary-500 bg-transparent text-primary-500 hover:bg-primary-600 hover:border-primary-600 hover:text-white active:bg-primary-400 active:border-primary-400",secondary:"border-secondary-500 bg-transparent text-secondary-500 hover:bg-secondary-600 hover:border-secondary-600 hover:text-white active:bg-secondary-400 active:border-secondary-400",info:"border-info-500 bg-transparent text-info-500 hover:bg-info-600 hover:border-info-600 hover:text-white active:bg-info-400 active:border-info-400",warning:"border-warning-500 bg-transparent text-warning-500 hover:bg-warning-600 hover:border-warning-600 hover:text-white active:bg-warning-400 active:border-warning-400",success:"border-success-500 bg-transparent text-success-500 hover:bg-success-600 hover:border-success-600 hover:text-white active:bg-success-400 active:border-success-400",error:"border-error-500 bg-transparent text-error-500 hover:bg-error-600 hover:border-error-600 hover:text-white active:bg-error-400 active:border-error-400",dark:"border-gray-800 bg-transparent text-gray-800 hover:bg-gray-900 hover:border-gray-900 hover:text-white active:bg-gray-700 active:border-gray-700"},v={default:"border-transparent bg-transparent text-gray-800 hover:text-gray-900 active:text-gray-600",primary:"border-transparent bg-transparent text-primary-500 hover:text-primary-600 active:text-primary-400",secondary:"border-transparent bg-transparent text-secondary-500 hover:text-secondary-600 active:text-secondary-400",info:"border-transparent bg-transparent text-info-500 hover:text-info-600 active:text-info-400",warning:"border-transparent bg-transparent text-warning-500 hover:text-warning-600 active:text-warning-400",success:"border-transparent bg-transparent text-success-500 hover:text-success-600 active:text-success-400",error:"border-transparent bg-transparent text-error-500 hover:text-error-600 active:text-error-400",dark:"border-transparent bg-transparent text-gray-800 hover:text-gray-900 active:text-gray-600"},y={xs:"px-1.5 py-1 text-xs",sm:"px-2 py-1.5 text-sm",md:"px-4 py-2 text-base",lg:"px-5 py-3 text-lg",xl:"px-8 py-4 text-xl"},p={default:"",primary:"focus:ring-primary-300",secondary:"focus:ring-secondary-300",info:"focus:ring-info-300",warning:"focus:ring-warning-300",success:"focus:ring-success-300",error:"focus:ring-error-300",dark:"focus:ring-gray-300"},f=r.computed(()=>{let t=g[e.color];return e.outlined?t=u[e.color]:e.text&&(t=v[e.color]),t}),h=r.computed(()=>{let t="disabled:cursor-not-allowed disabled:shadow-none disabled:text-gray-400";e.outlined?t+=" disabled:border-gray-300 disabled:hover:bg-transparent disabled:hover:text-gray-400":t+=" disabled:bg-gray-300 disabled:border-gray-300";const o={default:"disabled:hover:bg-transparent disabled:active:bg-transparent",primary:"disabled:hover:bg-primary-500 disabled:hover:border-primary-500 disabled:active:bg-primary-500",secondary:"disabled:hover:bg-secondary-500 disabled:hover:border-secondary-500 disabled:active:bg-secondary-500",info:"disabled:hover:bg-info-500 disabled:hover:border-info-500 disabled:active:bg-info-500",warning:"disabled:hover:bg-warning-500 disabled:hover:border-warning-500 disabled:active:bg-warning-500",error:"disabled:hover:bg-error-500 disabled:hover:border-error-500 disabled:active:bg-error-500",success:"disabled:hover:bg-success-500 disabled:hover:border-success-500 disabled:active:bg-success-500",dark:"disabled:hover:bg-gray-800 disabled:hover:border-gray-800 disabled:active:bg-gray-800"};return e.loading?["disabled:cursor-not-allowed disabled:shadow-none",o[e.color]]:t}),x=r.computed(()=>{const t={xs:"w-[26px] h-[26px]",sm:"w-[34px] h-[34px]",md:"w-[42px] h-[42px]",lg:"w-[54px] h-[54px]",xl:"w-[62px] h-[62px]"},o={xs:"px-1",sm:"px-1.5",md:"px-2",lg:"px-2.5",xl:"px-3"};return[t[e.size],e.text?"p-0":o[e.size]].join(" ")}),w=r.computed(()=>["inline-flex justify-center items-center border rounded-md font-semibold transition duration-300",h.value,f.value,{"focus:ring focus:ring-offset-2 focus:outline-none":!e.noRing,[p[e.color]]:!e.noRing,"rounded-full":e.rounded,"rounded-none":e.tile,shadow:e.shadow,"w-full":e.block,"btn-loading":e.loading,[y[e.size]]:!e.icon,[x.value]:e.icon}]);return(t,o)=>(r.openBlock(),r.createBlock(r.resolveDynamicComponent(r.unref(c)),r.mergeProps({class:r.unref(w),rel:a.newTab?"noopener":"",target:a.newTab?"_blank":"",disabled:r.unref(d)||r.unref(n)},{...r.unref(l),...t.$attrs}),{default:r.withCtx(()=>[r.unref(n)?r.renderSlot(t.$slots,"loading",{key:0},()=>[r.createVNode(r.unref(k.default),{color:r.unref(b)},null,8,["color"]),r.unref(s)?(r.openBlock(),r.createElementBlock("span",S,r.toDisplayString(r.unref(s)),1)):r.createCommentVNode("",!0)]):r.renderSlot(t.$slots,"default",{key:1})]),_:3},16,["class","rel","target","disabled"]))}});exports.VBtn=i;exports.default=i;

dist/button.es.js

@@ -1,109 +0,4 @@
-import { computed, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, defineComponent, toRefs, createBlock, resolveDynamicComponent, mergeProps, withCtx, renderSlot, createVNode, toDisplayString, createCommentVNode } from 'vue';
+import { defineComponent, toRefs, computed, openBlock, createBlock, resolveDynamicComponent, unref, mergeProps, withCtx, renderSlot, createVNode, createElementBlock, toDisplayString, createCommentVNode } from 'vue';
+import VSpinner from '@gits-id/spinner';
 
-const _hoisted_1$1 = /*#__PURE__*/createElementVNode("circle", {
-  class: "opacity-25",
-  cx: "12",
-  cy: "12",
-  r: "10",
-  stroke: "currentColor",
-  "stroke-width": "4"
-}, null, -1);
-const _hoisted_2 = /*#__PURE__*/createElementVNode("path", {
-  class: "opacity-75",
-  fill: "currentColor",
-  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-}, null, -1);
-const _hoisted_3 = [
-  _hoisted_1$1,
-  _hoisted_2
-];
-
-
-const _sfc_main$1 = {
-  props: {
-  xLarge: {
-    type: Boolean,
-    default: false,
-  },
-  large: {
-    type: Boolean,
-    default: false,
-  },
-  small: {
-    type: Boolean,
-    default: false,
-  },
-  xSmall: {
-    type: Boolean,
-    default: false,
-  },
-  color: {
-    type: String,
-    default: '',
-  },
-},
-  emits: [],
-  setup(__props, { emit }) {
-
-const props = __props;
-
-
-
-
-
-const sizeClass = computed(() => {
-  if (props.large) {
-    return 'h-8 w-8';
-  } else if (props.small) {
-    return 'h-4 w-4';
-  } else if (props.xLarge) {
-    return 'h-10 w-10';
-  } else if (props.xSmall) {
-    return 'h-3 w-3';
-  } else {
-    return 'h-5 w-5';
-  }
-});
-
-const colorClass = computed(() => {
-  switch (props.color) {
-    case 'primary':
-      return 'text-primary-600';
-    case 'info':
-      return 'text-info-600';
-    case 'warning':
-      return 'text-warning-600';
-    case 'error':
-      return 'text-error-600';
-    case 'success':
-      return 'text-success-600';
-    case 'white':
-      return 'text-white-600';
-    default:
-      return props.color || 'text-gray-600';
-  }
-});
-
-return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock("svg", {
-    class: normalizeClass(["animate-spin inline", [unref(sizeClass), unref(colorClass)]]),
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24"
-  }, _hoisted_3, 2))
-}
-}
-
-};
-
-var VBtn_vue_vue_type_style_index_0_scoped_true_lang = '';
-
-var _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-
 const _hoisted_1 = {
@@ -117,7 +12,8 @@ key: 0,
       type: String,
-      default: ""
+      default: "md",
+      validator: (v) => ["xs", "sm", "md", "lg", "xl"].includes(v)
     },
     color: {
       type: String,
-      default: ""
+      default: "default"
     },
@@ -195,3 +91,3 @@ to: {
     const props = __props;
-    const { disabled, ring, block, solid, noRing, loading, loadingText } = toRefs(props);
+    const { disabled, loading, loadingText } = toRefs(props);
     const computedComponent = computed(() => {
@@ -206,133 +102,2 @@ if (props.to) {
     });
-    computed(() => {
-      if (props.icon) {
-        switch (props.size) {
-          case "xs":
-            return "text-xs p-[6px] w-[30px] h-[30px]";
-          case "sm":
-            return "text-sm p-[6px] w-[36] h-[36]";
-          case "lg":
-            return "text-base p-2 w-[50px] h-[50px]";
-          case "xl":
-            return "text-lg p-2 w-[60px] h-[60px]";
-          case "md":
-          case "base":
-          default:
-            return "text-xs p-2 w-[40px] h-[40px]";
-        }
-      } else {
-        switch (props.size) {
-          case "xs":
-            return "text-xs px-2 py-1 h-[30px]";
-          case "sm":
-            return "text-sm px-3 py-1 h-9";
-          case "lg":
-            return "text-base px-6 py-3 h-[50px]";
-          case "xl":
-            return "text-lg px-8 py-4 h-[60px]";
-          case "md":
-          case "base":
-          default:
-            return "text-sm px-4 py-2 h-10";
-        }
-      }
-    });
-    computed(() => {
-      if (props.text) {
-        switch (props.color) {
-          case "primary":
-            return "text-primary-600";
-          case "secondary":
-            return "text-secondary-600";
-          case "info":
-            return "text-info-600";
-          case "warning":
-            return "text-warning-600";
-          case "error":
-            return "text-error-600";
-          case "success":
-            return "text-success-600";
-          case "gray-light":
-            return "text-gray-3";
-          default:
-            return "text-gray-800";
-        }
-      } else if (props.outlined) {
-        switch (props.color) {
-          case "primary":
-            return "text-primary-600 border-primary-600 hover:bg-primary-600 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";
-          case "secondary":
-            return "text-secondary-600 border-secondary-600 hover:bg-secondary-600 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";
-          case "info":
-            return "text-info-600 border-info-600 hover:bg-info-600 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";
-          case "warning":
-            return "text-warning-600 border-warning-600 hover:bg-warning-600 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";
-          case "error":
-            return "text-error-600 border-error-600 hover:bg-error-600 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";
-          case "success":
-            return "text-success-600 border-success-600 hover:bg-success-600 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";
-          case "gray-light":
-            return "text-gray-3 border-gray-3 hover:bg-gray-300 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";
-          default:
-            return "text-gray-600 border-gray-600 hover:bg-gray-400 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";
-        }
-      } else {
-        switch (props.color) {
-          case "primary":
-            return "text-white border-primary-600 bg-primary-600 hover:bg-primary-700 hover:border-primary-700";
-          case "secondary":
-            return "text-white border-secondary-600 bg-secondary-600 hover:border-secondary-700 hover:bg-secondary-700";
-          case "info":
-            return "text-white border-info-600 bg-info-600 hover:border-info-700 hover:bg-info-700";
-          case "warning":
-            return "text-white border-warning-600 bg-warning-600 hover:border-warning-700 hover:bg-warning-700";
-          case "error":
-            return "text-white border-error-600 bg-error-600 hover:border-error-700 hover:bg-error-700 focus:ring-error-600";
-          case "success":
-            return "text-white border-success-600 bg-success-600 hover:border-success-700 hover:bg-success-700";
-          case "gray-light":
-            return "text-gray-3 hover:text-gray-200 hover:bg-gray-50 bg-white border-gray-300 focus:border-gray-400 hover:border-gray-400";
-          default:
-            return "text-gray-800 hover:text-gray-900 hover:bg-gray-50 bg-white border-gray-300 focus:border-gray-400 hover:border-gray-400";
-        }
-      }
-    });
-    computed(() => !disabled ? "" : "disabled:cursor-not-allowed disabled:text-gray-400 disabled:bg-gray-200 disabled:border-gray-200 disabled:shadow-none");
-    computed(() => {
-      switch (props.color) {
-        case "primary":
-          return "focus:ring focus:ring-offset-2 focus:ring-primary-600 focus:ring-opacity-50";
-        case "secondary":
-          return "focus:ring focus:ring-offset-2 focus:ring-secondary-600 focus:ring-opacity-50";
-        case "info":
-          return "focus:ring focus:ring-offset-2 focus:ring-info-600 focus:ring-opacity-50";
-        case "warning":
-          return "focus:ring focus:ring-offset-2 focus:ring-warning-600 focus:ring-opacity-50";
-        case "error":
-          return "focus:ring focus:ring-offset-2 focus:ring-error-600 focus:ring-opacity-50";
-        case "success":
-          return "focus:ring focus:ring-offset-2 focus:ring-success-600 focus:ring-opacity-50";
-        default:
-          return "focus:ring focus:ring-offset-2 focus:ring-gray-400 focus:ring-opacity-50";
-      }
-    });
-    const classes = computed(() => {
-      return [
-        "btn",
-        `btn-${props.color || "default"}`,
-        `btn-${props.size || "md"}`,
-        {
-          "btn-outlined": props.outlined,
-          [`btn-outlined-${props.color}`]: props.outlined,
-          "btn-text": props.text,
-          [`btn-text-${props.color}`]: props.text,
-          "btn-rounded": props.rounded && !props.tile,
-          "btn-tile": props.tile && !props.rounded,
-          "w-full": props.block,
-          shadow: props.shadow,
-          "btn-icon": props.icon,
-          "btn-loading": props.loading
-        }
-      ];
-    });
     const attrs = computed(() => {
@@ -363,2 +128,118 @@ const attrs2 = {};
     });
+    const defaultVariants = {
+      default: "border-gray-500 text-gray-800 bg-white hover:bg-gray-100 active:bg-gray-50 active:border-gray-600 active:text-gray-600",
+      primary: "border-primary-500 bg-primary-500 text-white hover:bg-primary-600 hover:border-primary-600 active:bg-primary-400 active:border-primary-400",
+      secondary: "border-secondary-500 bg-secondary-500 text-white hover:bg-secondary-600 hover:border-secondary-600 active:bg-secondary-400 active:border-secondary-400",
+      info: "border-info-500 bg-info-500 text-white hover:bg-info-600 hover:border-info-600 active:bg-info-400 active:border-info-400",
+      warning: "border-warning-500 bg-warning-500 text-white hover:bg-warning-600 hover:border-warning-600 active:bg-warning-400 active:border-warning-400",
+      success: "border-success-500 bg-success-500 text-white hover:bg-success-600 hover:border-success-600 active:bg-success-400 active:border-success-400",
+      error: "border-error-500 bg-error-500 text-white hover:bg-error-600 hover:border-error-600 active:bg-error-400 active:border-error-400",
+      dark: "border-gray-800 bg-gray-800 text-white hover:bg-gray-900 hover:border-gray-900 active:bg-gray-700 active:border-gray-700"
+    };
+    const outlinedVariants = {
+      default: "border-gray-500 text-gray-800 hover:bg-gray-700 hover:border-gray-700 hover:text-white active:bg-gray-50 active:border-gray-600 active:text-gray-600",
+      primary: "border-primary-500 bg-transparent text-primary-500 hover:bg-primary-600 hover:border-primary-600 hover:text-white active:bg-primary-400 active:border-primary-400",
+      secondary: "border-secondary-500 bg-transparent text-secondary-500 hover:bg-secondary-600 hover:border-secondary-600 hover:text-white active:bg-secondary-400 active:border-secondary-400",
+      info: "border-info-500 bg-transparent text-info-500 hover:bg-info-600 hover:border-info-600 hover:text-white active:bg-info-400 active:border-info-400",
+      warning: "border-warning-500 bg-transparent text-warning-500 hover:bg-warning-600 hover:border-warning-600 hover:text-white active:bg-warning-400 active:border-warning-400",
+      success: "border-success-500 bg-transparent text-success-500 hover:bg-success-600 hover:border-success-600 hover:text-white active:bg-success-400 active:border-success-400",
+      error: "border-error-500 bg-transparent text-error-500 hover:bg-error-600 hover:border-error-600 hover:text-white active:bg-error-400 active:border-error-400",
+      dark: "border-gray-800 bg-transparent text-gray-800 hover:bg-gray-900 hover:border-gray-900 hover:text-white active:bg-gray-700 active:border-gray-700"
+    };
+    const textVariants = {
+      default: "border-transparent bg-transparent text-gray-800 hover:text-gray-900 active:text-gray-600",
+      primary: "border-transparent bg-transparent text-primary-500 hover:text-primary-600 active:text-primary-400",
+      secondary: "border-transparent bg-transparent text-secondary-500 hover:text-secondary-600 active:text-secondary-400",
+      info: "border-transparent bg-transparent text-info-500 hover:text-info-600 active:text-info-400",
+      warning: "border-transparent bg-transparent text-warning-500 hover:text-warning-600 active:text-warning-400",
+      success: "border-transparent bg-transparent text-success-500 hover:text-success-600 active:text-success-400",
+      error: "border-transparent bg-transparent text-error-500 hover:text-error-600 active:text-error-400",
+      dark: "border-transparent bg-transparent text-gray-800 hover:text-gray-900 active:text-gray-600"
+    };
+    const sizeVariants = {
+      xs: "px-1.5 py-1 text-xs",
+      sm: "px-2 py-1.5 text-sm",
+      md: "px-4 py-2 text-base",
+      lg: "px-5 py-3 text-lg",
+      xl: "px-8 py-4 text-xl"
+    };
+    const ringVariants = {
+      default: "",
+      primary: "focus:ring-primary-300",
+      secondary: "focus:ring-secondary-300",
+      info: "focus:ring-info-300",
+      warning: "focus:ring-warning-300",
+      success: "focus:ring-success-300",
+      error: "focus:ring-error-300",
+      dark: "focus:ring-gray-300"
+    };
+    const colorClass = computed(() => {
+      let color = defaultVariants[props.color];
+      if (props.outlined) {
+        color = outlinedVariants[props.color];
+      } else if (props.text) {
+        color = textVariants[props.color];
+      }
+      return color;
+    });
+    const disabledClass = computed(() => {
+      let classes2 = "disabled:cursor-not-allowed disabled:shadow-none disabled:text-gray-400";
+      if (props.outlined) {
+        classes2 += " disabled:border-gray-300 disabled:hover:bg-transparent disabled:hover:text-gray-400";
+      } else {
+        classes2 += " disabled:bg-gray-300 disabled:border-gray-300";
+      }
+      const disabledHoverVariants = {
+        default: "disabled:hover:bg-transparent disabled:active:bg-transparent",
+        primary: "disabled:hover:bg-primary-500 disabled:hover:border-primary-500 disabled:active:bg-primary-500",
+        secondary: "disabled:hover:bg-secondary-500 disabled:hover:border-secondary-500 disabled:active:bg-secondary-500",
+        info: "disabled:hover:bg-info-500 disabled:hover:border-info-500 disabled:active:bg-info-500",
+        warning: "disabled:hover:bg-warning-500 disabled:hover:border-warning-500 disabled:active:bg-warning-500",
+        error: "disabled:hover:bg-error-500 disabled:hover:border-error-500 disabled:active:bg-error-500",
+        success: "disabled:hover:bg-success-500 disabled:hover:border-success-500 disabled:active:bg-success-500",
+        dark: "disabled:hover:bg-gray-800 disabled:hover:border-gray-800 disabled:active:bg-gray-800"
+      };
+      return props.loading ? [
+        "disabled:cursor-not-allowed disabled:shadow-none",
+        disabledHoverVariants[props.color]
+      ] : classes2;
+    });
+    const iconClass = computed(() => {
+      const iconSizes = {
+        xs: "w-[26px] h-[26px]",
+        sm: "w-[34px] h-[34px]",
+        md: "w-[42px] h-[42px]",
+        lg: "w-[54px] h-[54px]",
+        xl: "w-[62px] h-[62px]"
+      };
+      const iconPadding = {
+        xs: "px-1",
+        sm: "px-1.5",
+        md: "px-2",
+        lg: "px-2.5",
+        xl: "px-3"
+      };
+      return [
+        iconSizes[props.size],
+        props.text ? "p-0" : iconPadding[props.size]
+      ].join(" ");
+    });
+    const classes = computed(() => {
+      return [
+        "inline-flex justify-center items-center border rounded-md font-semibold transition duration-300",
+        disabledClass.value,
+        colorClass.value,
+        {
+          "focus:ring focus:ring-offset-2 focus:outline-none": !props.noRing,
+          [ringVariants[props.color]]: !props.noRing,
+          "rounded-full": props.rounded,
+          "rounded-none": props.tile,
+          shadow: props.shadow,
+          "w-full": props.block,
+          "btn-loading": props.loading,
+          [sizeVariants[props.size]]: !props.icon,
+          [iconClass.value]: props.icon
+        }
+      ];
+    });
     return (_ctx, _cache) => {
@@ -373,5 +254,5 @@ return openBlock(), createBlock(resolveDynamicComponent(unref(computedComponent)), mergeProps({
           unref(loading) ? renderSlot(_ctx.$slots, "loading", { key: 0 }, () => [
-            createVNode(unref(_sfc_main$1), { color: unref(spinnerColor) }, null, 8, ["color"]),
+            createVNode(unref(VSpinner), { color: unref(spinnerColor) }, null, 8, ["color"]),
             unref(loadingText) ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(unref(loadingText)), 1)) : createCommentVNode("", true)
-          ], true) : renderSlot(_ctx.$slots, "default", { key: 1 }, void 0, true)
+          ]) : renderSlot(_ctx.$slots, "default", { key: 1 })
         ]),
@@ -383,6 +264,3 @@ _: 3
 });
-var VBtn = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5bcf54b5"]]);
 
-var tailwind = '';
-
-export { VBtn, VBtn as default };
+export { _sfc_main as VBtn, _sfc_main as default };

dist/button.iife.js

@@ -1,1 +0,1 @@
-var VBtn=function(s,e){"use strict";const b=[e.createElementVNode("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"4"},null,-1),e.createElementVNode("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"},null,-1)],g={props:{xLarge:{type:Boolean,default:!1},large:{type:Boolean,default:!1},small:{type:Boolean,default:!1},xSmall:{type:Boolean,default:!1},color:{type:String,default:""}},emits:[],setup(o,{emit:r}){const t=o,n=e.computed(()=>t.large?"h-8 w-8":t.small?"h-4 w-4":t.xLarge?"h-10 w-10":t.xSmall?"h-3 w-3":"h-5 w-5"),i=e.computed(()=>{switch(t.color){case"primary":return"text-primary-600";case"info":return"text-info-600";case"warning":return"text-warning-600";case"error":return"text-error-600";case"success":return"text-success-600";case"white":return"text-white-600";default:return t.color||"text-gray-600"}});return(f,y)=>(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["animate-spin inline",[e.unref(n),e.unref(i)]]),xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},b,2))}};var v="",u=(o,r)=>{const t=o.__vccOpts||o;for(const[n,i]of r)t[n]=i;return t};const p={key:0,class:"ml-2"};var c=u(e.defineComponent({props:{size:{type:String,default:""},color:{type:String,default:""},to:{type:[String,Object],default:""},href:{type:String,default:""},text:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},ring:{type:Boolean,default:!0},tile:{type:Boolean,default:!1},icon:{type:Boolean,default:!1},block:{type:Boolean,default:!1},type:{type:String,default:"button"},solid:{type:Boolean,default:!1},noRing:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},loadingText:{type:String,default:""},newTab:{type:Boolean,default:!1},shadow:{type:Boolean,default:!1}},setup(o){const r=o,{disabled:t,ring:n,block:i,solid:f,noRing:y,loading:l,loadingText:d}=e.toRefs(r),h=e.computed(()=>r.to?"router-link":r.href?"a":"button");e.computed(()=>{if(r.icon)switch(r.size){case"xs":return"text-xs p-[6px] w-[30px] h-[30px]";case"sm":return"text-sm p-[6px] w-[36] h-[36]";case"lg":return"text-base p-2 w-[50px] h-[50px]";case"xl":return"text-lg p-2 w-[60px] h-[60px]";case"md":case"base":default:return"text-xs p-2 w-[40px] h-[40px]"}else switch(r.size){case"xs":return"text-xs px-2 py-1 h-[30px]";case"sm":return"text-sm px-3 py-1 h-9";case"lg":return"text-base px-6 py-3 h-[50px]";case"xl":return"text-lg px-8 py-4 h-[60px]";case"md":case"base":default:return"text-sm px-4 py-2 h-10"}}),e.computed(()=>{if(r.text)switch(r.color){case"primary":return"text-primary-600";case"secondary":return"text-secondary-600";case"info":return"text-info-600";case"warning":return"text-warning-600";case"error":return"text-error-600";case"success":return"text-success-600";case"gray-light":return"text-gray-3";default:return"text-gray-800"}else if(r.outlined)switch(r.color){case"primary":return"text-primary-600 border-primary-600 hover:bg-primary-600 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";case"secondary":return"text-secondary-600 border-secondary-600 hover:bg-secondary-600 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";case"info":return"text-info-600 border-info-600 hover:bg-info-600 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";case"warning":return"text-warning-600 border-warning-600 hover:bg-warning-600 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";case"error":return"text-error-600 border-error-600 hover:bg-error-600 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";case"success":return"text-success-600 border-success-600 hover:bg-success-600 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";case"gray-light":return"text-gray-3 border-gray-3 hover:bg-gray-300 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";default:return"text-gray-600 border-gray-600 hover:bg-gray-400 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent"}else switch(r.color){case"primary":return"text-white border-primary-600 bg-primary-600 hover:bg-primary-700 hover:border-primary-700";case"secondary":return"text-white border-secondary-600 bg-secondary-600 hover:border-secondary-700 hover:bg-secondary-700";case"info":return"text-white border-info-600 bg-info-600 hover:border-info-700 hover:bg-info-700";case"warning":return"text-white border-warning-600 bg-warning-600 hover:border-warning-700 hover:bg-warning-700";case"error":return"text-white border-error-600 bg-error-600 hover:border-error-700 hover:bg-error-700 focus:ring-error-600";case"success":return"text-white border-success-600 bg-success-600 hover:border-success-700 hover:bg-success-700";case"gray-light":return"text-gray-3 hover:text-gray-200 hover:bg-gray-50 bg-white border-gray-300 focus:border-gray-400 hover:border-gray-400";default:return"text-gray-800 hover:text-gray-900 hover:bg-gray-50 bg-white border-gray-300 focus:border-gray-400 hover:border-gray-400"}}),e.computed(()=>t?"disabled:cursor-not-allowed disabled:text-gray-400 disabled:bg-gray-200 disabled:border-gray-200 disabled:shadow-none":""),e.computed(()=>{switch(r.color){case"primary":return"focus:ring focus:ring-offset-2 focus:ring-primary-600 focus:ring-opacity-50";case"secondary":return"focus:ring focus:ring-offset-2 focus:ring-secondary-600 focus:ring-opacity-50";case"info":return"focus:ring focus:ring-offset-2 focus:ring-info-600 focus:ring-opacity-50";case"warning":return"focus:ring focus:ring-offset-2 focus:ring-warning-600 focus:ring-opacity-50";case"error":return"focus:ring focus:ring-offset-2 focus:ring-error-600 focus:ring-opacity-50";case"success":return"focus:ring focus:ring-offset-2 focus:ring-success-600 focus:ring-opacity-50";default:return"focus:ring focus:ring-offset-2 focus:ring-gray-400 focus:ring-opacity-50"}});const x=e.computed(()=>["btn",`btn-${r.color||"default"}`,`btn-${r.size||"md"}`,{"btn-outlined":r.outlined,[`btn-outlined-${r.color}`]:r.outlined,"btn-text":r.text,[`btn-text-${r.color}`]:r.text,"btn-rounded":r.rounded&&!r.tile,"btn-tile":r.tile&&!r.rounded,"w-full":r.block,shadow:r.shadow,"btn-icon":r.icon,"btn-loading":r.loading}]),w=e.computed(()=>{const a={};return r.to?a.to=r.to:r.href?a.href=r.href:a.type=r.type,a}),m=e.computed(()=>{switch(r.color){case"primary":case"info":case"warning":case"error":case"success":return"white";case"white":return"black";default:return r.color}});return(a,C)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(h)),e.mergeProps({class:e.unref(x),rel:o.newTab?"noopener":"",target:o.newTab?"_blank":"",disabled:e.unref(t)||e.unref(l)},{...e.unref(w),...a.$attrs}),{default:e.withCtx(()=>[e.unref(l)?e.renderSlot(a.$slots,"loading",{key:0},()=>[e.createVNode(e.unref(g),{color:e.unref(m)},null,8,["color"]),e.unref(d)?(e.openBlock(),e.createElementBlock("span",p,e.toDisplayString(e.unref(d)),1)):e.createCommentVNode("",!0)],!0):e.renderSlot(a.$slots,"default",{key:1},void 0,!0)]),_:3},16,["class","rel","target","disabled"]))}}),[["__scopeId","data-v-5bcf54b5"]]),S="";return s.VBtn=c,s.default=c,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),s}({},Vue);
+var VBtn=function(o,r,c){"use strict";function l(a){return a&&typeof a=="object"&&"default"in a?a:{default:a}}var b=l(c);const g={key:0,class:"ml-2"},s=r.defineComponent({props:{size:{type:String,default:"md",validator:a=>["xs","sm","md","lg","xl"].includes(a)},color:{type:String,default:"default"},to:{type:[String,Object],default:""},href:{type:String,default:""},text:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},ring:{type:Boolean,default:!0},tile:{type:Boolean,default:!1},icon:{type:Boolean,default:!1},block:{type:Boolean,default:!1},type:{type:String,default:"button"},solid:{type:Boolean,default:!1},noRing:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},loadingText:{type:String,default:""},newTab:{type:Boolean,default:!1},shadow:{type:Boolean,default:!1}},setup(a){const e=a,{disabled:y,loading:i,loadingText:d}=r.toRefs(e),p=r.computed(()=>e.to?"router-link":e.href?"a":"button"),f=r.computed(()=>{const t={};return e.to?t.to=e.to:e.href?t.href=e.href:t.type=e.type,t}),u=r.computed(()=>{switch(e.color){case"primary":case"info":case"warning":case"error":case"success":return"white";case"white":return"black";default:return e.color}}),h={default:"border-gray-500 text-gray-800 bg-white hover:bg-gray-100 active:bg-gray-50 active:border-gray-600 active:text-gray-600",primary:"border-primary-500 bg-primary-500 text-white hover:bg-primary-600 hover:border-primary-600 active:bg-primary-400 active:border-primary-400",secondary:"border-secondary-500 bg-secondary-500 text-white hover:bg-secondary-600 hover:border-secondary-600 active:bg-secondary-400 active:border-secondary-400",info:"border-info-500 bg-info-500 text-white hover:bg-info-600 hover:border-info-600 active:bg-info-400 active:border-info-400",warning:"border-warning-500 bg-warning-500 text-white hover:bg-warning-600 hover:border-warning-600 active:bg-warning-400 active:border-warning-400",success:"border-success-500 bg-success-500 text-white hover:bg-success-600 hover:border-success-600 active:bg-success-400 active:border-success-400",error:"border-error-500 bg-error-500 text-white hover:bg-error-600 hover:border-error-600 active:bg-error-400 active:border-error-400",dark:"border-gray-800 bg-gray-800 text-white hover:bg-gray-900 hover:border-gray-900 active:bg-gray-700 active:border-gray-700"},v={default:"border-gray-500 text-gray-800 hover:bg-gray-700 hover:border-gray-700 hover:text-white active:bg-gray-50 active:border-gray-600 active:text-gray-600",primary:"border-primary-500 bg-transparent text-primary-500 hover:bg-primary-600 hover:border-primary-600 hover:text-white active:bg-primary-400 active:border-primary-400",secondary:"border-secondary-500 bg-transparent text-secondary-500 hover:bg-secondary-600 hover:border-secondary-600 hover:text-white active:bg-secondary-400 active:border-secondary-400",info:"border-info-500 bg-transparent text-info-500 hover:bg-info-600 hover:border-info-600 hover:text-white active:bg-info-400 active:border-info-400",warning:"border-warning-500 bg-transparent text-warning-500 hover:bg-warning-600 hover:border-warning-600 hover:text-white active:bg-warning-400 active:border-warning-400",success:"border-success-500 bg-transparent text-success-500 hover:bg-success-600 hover:border-success-600 hover:text-white active:bg-success-400 active:border-success-400",error:"border-error-500 bg-transparent text-error-500 hover:bg-error-600 hover:border-error-600 hover:text-white active:bg-error-400 active:border-error-400",dark:"border-gray-800 bg-transparent text-gray-800 hover:bg-gray-900 hover:border-gray-900 hover:text-white active:bg-gray-700 active:border-gray-700"},x={default:"border-transparent bg-transparent text-gray-800 hover:text-gray-900 active:text-gray-600",primary:"border-transparent bg-transparent text-primary-500 hover:text-primary-600 active:text-primary-400",secondary:"border-transparent bg-transparent text-secondary-500 hover:text-secondary-600 active:text-secondary-400",info:"border-transparent bg-transparent text-info-500 hover:text-info-600 active:text-info-400",warning:"border-transparent bg-transparent text-warning-500 hover:text-warning-600 active:text-warning-400",success:"border-transparent bg-transparent text-success-500 hover:text-success-600 active:text-success-400",error:"border-transparent bg-transparent text-error-500 hover:text-error-600 active:text-error-400",dark:"border-transparent bg-transparent text-gray-800 hover:text-gray-900 active:text-gray-600"},w={xs:"px-1.5 py-1 text-xs",sm:"px-2 py-1.5 text-sm",md:"px-4 py-2 text-base",lg:"px-5 py-3 text-lg",xl:"px-8 py-4 text-xl"},m={default:"",primary:"focus:ring-primary-300",secondary:"focus:ring-secondary-300",info:"focus:ring-info-300",warning:"focus:ring-warning-300",success:"focus:ring-success-300",error:"focus:ring-error-300",dark:"focus:ring-gray-300"},B=r.computed(()=>{let t=h[e.color];return e.outlined?t=v[e.color]:e.text&&(t=x[e.color]),t}),k=r.computed(()=>{let t="disabled:cursor-not-allowed disabled:shadow-none disabled:text-gray-400";e.outlined?t+=" disabled:border-gray-300 disabled:hover:bg-transparent disabled:hover:text-gray-400":t+=" disabled:bg-gray-300 disabled:border-gray-300";const n={default:"disabled:hover:bg-transparent disabled:active:bg-transparent",primary:"disabled:hover:bg-primary-500 disabled:hover:border-primary-500 disabled:active:bg-primary-500",secondary:"disabled:hover:bg-secondary-500 disabled:hover:border-secondary-500 disabled:active:bg-secondary-500",info:"disabled:hover:bg-info-500 disabled:hover:border-info-500 disabled:active:bg-info-500",warning:"disabled:hover:bg-warning-500 disabled:hover:border-warning-500 disabled:active:bg-warning-500",error:"disabled:hover:bg-error-500 disabled:hover:border-error-500 disabled:active:bg-error-500",success:"disabled:hover:bg-success-500 disabled:hover:border-success-500 disabled:active:bg-success-500",dark:"disabled:hover:bg-gray-800 disabled:hover:border-gray-800 disabled:active:bg-gray-800"};return e.loading?["disabled:cursor-not-allowed disabled:shadow-none",n[e.color]]:t}),S=r.computed(()=>{const t={xs:"w-[26px] h-[26px]",sm:"w-[34px] h-[34px]",md:"w-[42px] h-[42px]",lg:"w-[54px] h-[54px]",xl:"w-[62px] h-[62px]"},n={xs:"px-1",sm:"px-1.5",md:"px-2",lg:"px-2.5",xl:"px-3"};return[t[e.size],e.text?"p-0":n[e.size]].join(" ")}),V=r.computed(()=>["inline-flex justify-center items-center border rounded-md font-semibold transition duration-300",k.value,B.value,{"focus:ring focus:ring-offset-2 focus:outline-none":!e.noRing,[m[e.color]]:!e.noRing,"rounded-full":e.rounded,"rounded-none":e.tile,shadow:e.shadow,"w-full":e.block,"btn-loading":e.loading,[w[e.size]]:!e.icon,[S.value]:e.icon}]);return(t,n)=>(r.openBlock(),r.createBlock(r.resolveDynamicComponent(r.unref(p)),r.mergeProps({class:r.unref(V),rel:a.newTab?"noopener":"",target:a.newTab?"_blank":"",disabled:r.unref(y)||r.unref(i)},{...r.unref(f),...t.$attrs}),{default:r.withCtx(()=>[r.unref(i)?r.renderSlot(t.$slots,"loading",{key:0},()=>[r.createVNode(r.unref(b.default),{color:r.unref(u)},null,8,["color"]),r.unref(d)?(r.openBlock(),r.createElementBlock("span",g,r.toDisplayString(r.unref(d)),1)):r.createCommentVNode("",!0)]):r.renderSlot(t.$slots,"default",{key:1})]),_:3},16,["class","rel","target","disabled"]))}});return o.VBtn=s,o.default=s,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),o}({},Vue,VSpinner);

dist/button.umd.js

@@ -1,1 +0,1 @@
-(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o.VBtn={},o.Vue))})(this,function(o,e){"use strict";const u=[e.createElementVNode("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"4"},null,-1),e.createElementVNode("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"},null,-1)],b={props:{xLarge:{type:Boolean,default:!1},large:{type:Boolean,default:!1},small:{type:Boolean,default:!1},xSmall:{type:Boolean,default:!1},color:{type:String,default:""}},emits:[],setup(a,{emit:r}){const t=a,n=e.computed(()=>t.large?"h-8 w-8":t.small?"h-4 w-4":t.xLarge?"h-10 w-10":t.xSmall?"h-3 w-3":"h-5 w-5"),i=e.computed(()=>{switch(t.color){case"primary":return"text-primary-600";case"info":return"text-info-600";case"warning":return"text-warning-600";case"error":return"text-error-600";case"success":return"text-success-600";case"white":return"text-white-600";default:return t.color||"text-gray-600"}});return(f,y)=>(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["animate-spin inline",[e.unref(n),e.unref(i)]]),xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},u,2))}};var v="",p=(a,r)=>{const t=a.__vccOpts||a;for(const[n,i]of r)t[n]=i;return t};const g={key:0,class:"ml-2"};var c=p(e.defineComponent({props:{size:{type:String,default:""},color:{type:String,default:""},to:{type:[String,Object],default:""},href:{type:String,default:""},text:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},ring:{type:Boolean,default:!0},tile:{type:Boolean,default:!1},icon:{type:Boolean,default:!1},block:{type:Boolean,default:!1},type:{type:String,default:"button"},solid:{type:Boolean,default:!1},noRing:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},loadingText:{type:String,default:""},newTab:{type:Boolean,default:!1},shadow:{type:Boolean,default:!1}},setup(a){const r=a,{disabled:t,ring:n,block:i,solid:f,noRing:y,loading:d,loadingText:l}=e.toRefs(r),h=e.computed(()=>r.to?"router-link":r.href?"a":"button");e.computed(()=>{if(r.icon)switch(r.size){case"xs":return"text-xs p-[6px] w-[30px] h-[30px]";case"sm":return"text-sm p-[6px] w-[36] h-[36]";case"lg":return"text-base p-2 w-[50px] h-[50px]";case"xl":return"text-lg p-2 w-[60px] h-[60px]";case"md":case"base":default:return"text-xs p-2 w-[40px] h-[40px]"}else switch(r.size){case"xs":return"text-xs px-2 py-1 h-[30px]";case"sm":return"text-sm px-3 py-1 h-9";case"lg":return"text-base px-6 py-3 h-[50px]";case"xl":return"text-lg px-8 py-4 h-[60px]";case"md":case"base":default:return"text-sm px-4 py-2 h-10"}}),e.computed(()=>{if(r.text)switch(r.color){case"primary":return"text-primary-600";case"secondary":return"text-secondary-600";case"info":return"text-info-600";case"warning":return"text-warning-600";case"error":return"text-error-600";case"success":return"text-success-600";case"gray-light":return"text-gray-3";default:return"text-gray-800"}else if(r.outlined)switch(r.color){case"primary":return"text-primary-600 border-primary-600 hover:bg-primary-600 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";case"secondary":return"text-secondary-600 border-secondary-600 hover:bg-secondary-600 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";case"info":return"text-info-600 border-info-600 hover:bg-info-600 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";case"warning":return"text-warning-600 border-warning-600 hover:bg-warning-600 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";case"error":return"text-error-600 border-error-600 hover:bg-error-600 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";case"success":return"text-success-600 border-success-600 hover:bg-success-600 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";case"gray-light":return"text-gray-3 border-gray-3 hover:bg-gray-300 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent";default:return"text-gray-600 border-gray-600 hover:bg-gray-400 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent"}else switch(r.color){case"primary":return"text-white border-primary-600 bg-primary-600 hover:bg-primary-700 hover:border-primary-700";case"secondary":return"text-white border-secondary-600 bg-secondary-600 hover:border-secondary-700 hover:bg-secondary-700";case"info":return"text-white border-info-600 bg-info-600 hover:border-info-700 hover:bg-info-700";case"warning":return"text-white border-warning-600 bg-warning-600 hover:border-warning-700 hover:bg-warning-700";case"error":return"text-white border-error-600 bg-error-600 hover:border-error-700 hover:bg-error-700 focus:ring-error-600";case"success":return"text-white border-success-600 bg-success-600 hover:border-success-700 hover:bg-success-700";case"gray-light":return"text-gray-3 hover:text-gray-200 hover:bg-gray-50 bg-white border-gray-300 focus:border-gray-400 hover:border-gray-400";default:return"text-gray-800 hover:text-gray-900 hover:bg-gray-50 bg-white border-gray-300 focus:border-gray-400 hover:border-gray-400"}}),e.computed(()=>t?"disabled:cursor-not-allowed disabled:text-gray-400 disabled:bg-gray-200 disabled:border-gray-200 disabled:shadow-none":""),e.computed(()=>{switch(r.color){case"primary":return"focus:ring focus:ring-offset-2 focus:ring-primary-600 focus:ring-opacity-50";case"secondary":return"focus:ring focus:ring-offset-2 focus:ring-secondary-600 focus:ring-opacity-50";case"info":return"focus:ring focus:ring-offset-2 focus:ring-info-600 focus:ring-opacity-50";case"warning":return"focus:ring focus:ring-offset-2 focus:ring-warning-600 focus:ring-opacity-50";case"error":return"focus:ring focus:ring-offset-2 focus:ring-error-600 focus:ring-opacity-50";case"success":return"focus:ring focus:ring-offset-2 focus:ring-success-600 focus:ring-opacity-50";default:return"focus:ring focus:ring-offset-2 focus:ring-gray-400 focus:ring-opacity-50"}});const x=e.computed(()=>["btn",`btn-${r.color||"default"}`,`btn-${r.size||"md"}`,{"btn-outlined":r.outlined,[`btn-outlined-${r.color}`]:r.outlined,"btn-text":r.text,[`btn-text-${r.color}`]:r.text,"btn-rounded":r.rounded&&!r.tile,"btn-tile":r.tile&&!r.rounded,"w-full":r.block,shadow:r.shadow,"btn-icon":r.icon,"btn-loading":r.loading}]),m=e.computed(()=>{const s={};return r.to?s.to=r.to:r.href?s.href=r.href:s.type=r.type,s}),w=e.computed(()=>{switch(r.color){case"primary":case"info":case"warning":case"error":case"success":return"white";case"white":return"black";default:return r.color}});return(s,C)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(h)),e.mergeProps({class:e.unref(x),rel:a.newTab?"noopener":"",target:a.newTab?"_blank":"",disabled:e.unref(t)||e.unref(d)},{...e.unref(m),...s.$attrs}),{default:e.withCtx(()=>[e.unref(d)?e.renderSlot(s.$slots,"loading",{key:0},()=>[e.createVNode(e.unref(b),{color:e.unref(w)},null,8,["color"]),e.unref(l)?(e.openBlock(),e.createElementBlock("span",g,e.toDisplayString(e.unref(l)),1)):e.createCommentVNode("",!0)],!0):e.renderSlot(s.$slots,"default",{key:1},void 0,!0)]),_:3},16,["class","rel","target","disabled"]))}}),[["__scopeId","data-v-5bcf54b5"]]),S="";o.VBtn=c,o.default=c,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@gits-id/spinner")):typeof define=="function"&&define.amd?define(["exports","vue","@gits-id/spinner"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a.VBtn={},a.Vue,a.VSpinner))})(this,function(a,e,c){"use strict";function l(o){return o&&typeof o=="object"&&"default"in o?o:{default:o}}var b=l(c);const g={key:0,class:"ml-2"},s=e.defineComponent({props:{size:{type:String,default:"md",validator:o=>["xs","sm","md","lg","xl"].includes(o)},color:{type:String,default:"default"},to:{type:[String,Object],default:""},href:{type:String,default:""},text:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},ring:{type:Boolean,default:!0},tile:{type:Boolean,default:!1},icon:{type:Boolean,default:!1},block:{type:Boolean,default:!1},type:{type:String,default:"button"},solid:{type:Boolean,default:!1},noRing:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},loadingText:{type:String,default:""},newTab:{type:Boolean,default:!1},shadow:{type:Boolean,default:!1}},setup(o){const r=o,{disabled:p,loading:i,loadingText:d}=e.toRefs(r),f=e.computed(()=>r.to?"router-link":r.href?"a":"button"),y=e.computed(()=>{const t={};return r.to?t.to=r.to:r.href?t.href=r.href:t.type=r.type,t}),u=e.computed(()=>{switch(r.color){case"primary":case"info":case"warning":case"error":case"success":return"white";case"white":return"black";default:return r.color}}),h={default:"border-gray-500 text-gray-800 bg-white hover:bg-gray-100 active:bg-gray-50 active:border-gray-600 active:text-gray-600",primary:"border-primary-500 bg-primary-500 text-white hover:bg-primary-600 hover:border-primary-600 active:bg-primary-400 active:border-primary-400",secondary:"border-secondary-500 bg-secondary-500 text-white hover:bg-secondary-600 hover:border-secondary-600 active:bg-secondary-400 active:border-secondary-400",info:"border-info-500 bg-info-500 text-white hover:bg-info-600 hover:border-info-600 active:bg-info-400 active:border-info-400",warning:"border-warning-500 bg-warning-500 text-white hover:bg-warning-600 hover:border-warning-600 active:bg-warning-400 active:border-warning-400",success:"border-success-500 bg-success-500 text-white hover:bg-success-600 hover:border-success-600 active:bg-success-400 active:border-success-400",error:"border-error-500 bg-error-500 text-white hover:bg-error-600 hover:border-error-600 active:bg-error-400 active:border-error-400",dark:"border-gray-800 bg-gray-800 text-white hover:bg-gray-900 hover:border-gray-900 active:bg-gray-700 active:border-gray-700"},v={default:"border-gray-500 text-gray-800 hover:bg-gray-700 hover:border-gray-700 hover:text-white active:bg-gray-50 active:border-gray-600 active:text-gray-600",primary:"border-primary-500 bg-transparent text-primary-500 hover:bg-primary-600 hover:border-primary-600 hover:text-white active:bg-primary-400 active:border-primary-400",secondary:"border-secondary-500 bg-transparent text-secondary-500 hover:bg-secondary-600 hover:border-secondary-600 hover:text-white active:bg-secondary-400 active:border-secondary-400",info:"border-info-500 bg-transparent text-info-500 hover:bg-info-600 hover:border-info-600 hover:text-white active:bg-info-400 active:border-info-400",warning:"border-warning-500 bg-transparent text-warning-500 hover:bg-warning-600 hover:border-warning-600 hover:text-white active:bg-warning-400 active:border-warning-400",success:"border-success-500 bg-transparent text-success-500 hover:bg-success-600 hover:border-success-600 hover:text-white active:bg-success-400 active:border-success-400",error:"border-error-500 bg-transparent text-error-500 hover:bg-error-600 hover:border-error-600 hover:text-white active:bg-error-400 active:border-error-400",dark:"border-gray-800 bg-transparent text-gray-800 hover:bg-gray-900 hover:border-gray-900 hover:text-white active:bg-gray-700 active:border-gray-700"},x={default:"border-transparent bg-transparent text-gray-800 hover:text-gray-900 active:text-gray-600",primary:"border-transparent bg-transparent text-primary-500 hover:text-primary-600 active:text-primary-400",secondary:"border-transparent bg-transparent text-secondary-500 hover:text-secondary-600 active:text-secondary-400",info:"border-transparent bg-transparent text-info-500 hover:text-info-600 active:text-info-400",warning:"border-transparent bg-transparent text-warning-500 hover:text-warning-600 active:text-warning-400",success:"border-transparent bg-transparent text-success-500 hover:text-success-600 active:text-success-400",error:"border-transparent bg-transparent text-error-500 hover:text-error-600 active:text-error-400",dark:"border-transparent bg-transparent text-gray-800 hover:text-gray-900 active:text-gray-600"},w={xs:"px-1.5 py-1 text-xs",sm:"px-2 py-1.5 text-sm",md:"px-4 py-2 text-base",lg:"px-5 py-3 text-lg",xl:"px-8 py-4 text-xl"},m={default:"",primary:"focus:ring-primary-300",secondary:"focus:ring-secondary-300",info:"focus:ring-info-300",warning:"focus:ring-warning-300",success:"focus:ring-success-300",error:"focus:ring-error-300",dark:"focus:ring-gray-300"},B=e.computed(()=>{let t=h[r.color];return r.outlined?t=v[r.color]:r.text&&(t=x[r.color]),t}),k=e.computed(()=>{let t="disabled:cursor-not-allowed disabled:shadow-none disabled:text-gray-400";r.outlined?t+=" disabled:border-gray-300 disabled:hover:bg-transparent disabled:hover:text-gray-400":t+=" disabled:bg-gray-300 disabled:border-gray-300";const n={default:"disabled:hover:bg-transparent disabled:active:bg-transparent",primary:"disabled:hover:bg-primary-500 disabled:hover:border-primary-500 disabled:active:bg-primary-500",secondary:"disabled:hover:bg-secondary-500 disabled:hover:border-secondary-500 disabled:active:bg-secondary-500",info:"disabled:hover:bg-info-500 disabled:hover:border-info-500 disabled:active:bg-info-500",warning:"disabled:hover:bg-warning-500 disabled:hover:border-warning-500 disabled:active:bg-warning-500",error:"disabled:hover:bg-error-500 disabled:hover:border-error-500 disabled:active:bg-error-500",success:"disabled:hover:bg-success-500 disabled:hover:border-success-500 disabled:active:bg-success-500",dark:"disabled:hover:bg-gray-800 disabled:hover:border-gray-800 disabled:active:bg-gray-800"};return r.loading?["disabled:cursor-not-allowed disabled:shadow-none",n[r.color]]:t}),S=e.computed(()=>{const t={xs:"w-[26px] h-[26px]",sm:"w-[34px] h-[34px]",md:"w-[42px] h-[42px]",lg:"w-[54px] h-[54px]",xl:"w-[62px] h-[62px]"},n={xs:"px-1",sm:"px-1.5",md:"px-2",lg:"px-2.5",xl:"px-3"};return[t[r.size],r.text?"p-0":n[r.size]].join(" ")}),V=e.computed(()=>["inline-flex justify-center items-center border rounded-md font-semibold transition duration-300",k.value,B.value,{"focus:ring focus:ring-offset-2 focus:outline-none":!r.noRing,[m[r.color]]:!r.noRing,"rounded-full":r.rounded,"rounded-none":r.tile,shadow:r.shadow,"w-full":r.block,"btn-loading":r.loading,[w[r.size]]:!r.icon,[S.value]:r.icon}]);return(t,n)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(f)),e.mergeProps({class:e.unref(V),rel:o.newTab?"noopener":"",target:o.newTab?"_blank":"",disabled:e.unref(p)||e.unref(i)},{...e.unref(y),...t.$attrs}),{default:e.withCtx(()=>[e.unref(i)?e.renderSlot(t.$slots,"loading",{key:0},()=>[e.createVNode(e.unref(b.default),{color:e.unref(u)},null,8,["color"]),e.unref(d)?(e.openBlock(),e.createElementBlock("span",g,e.toDisplayString(e.unref(d)),1)):e.createCommentVNode("",!0)]):e.renderSlot(t.$slots,"default",{key:1})]),_:3},16,["class","rel","target","disabled"]))}});a.VBtn=s,a.default=s,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

dist/types/index.d.ts

 import VBtn from './VBtn.vue';
-import './tailwind.css';
 export { VBtn };
 export * from './types';
 export default VBtn;

package.json

 {
   "name": "@gits-id/button",
-  "version": "0.1.17-alpha.0",
+  "version": "0.1.17-alpha.32+4a1b6a4",
   "description": "GITS Button Component",
@@ -14,10 +14,11 @@ "keywords": [
   "dependencies": {
-    "@gits-id/spinner": "^0.1.17-alpha.0",
-    "@gits-id/theme": "^0.1.17-alpha.0",
-    "@gits-id/utils": "^0.1.17-alpha.0"
+    "@gits-id/spinner": "^0.1.17-alpha.32+4a1b6a4",
+    "@gits-id/theme": "^0.1.17-alpha.32+4a1b6a4",
+    "@gits-id/utils": "^0.1.17-alpha.32+4a1b6a4"
   },
   "devDependencies": {
-    "@gits-id/tailwind-components": "^0.1.17-alpha.0",
-    "@gits-id/tailwind-config": "^0.1.17-alpha.0",
+    "@gits-id/tailwind-components": "^0.1.17-alpha.32+4a1b6a4",
+    "@gits-id/tailwind-config": "^0.1.17-alpha.32+4a1b6a4",
     "@vitejs/plugin-vue": "^2.2.4",
+    "@vue/test-utils": "^2.0.0-rc.17",
     "autoprefixer": "^10.4.2",
@@ -28,2 +29,3 @@ "postcss": "^8.4.8",
     "vite": "^2.8.6",
+    "vitest": "^0.7.10",
     "vue": "^3.2.31"
@@ -36,6 +38,8 @@ },
   "types": "./dist/types/index.d.ts",
+  "gitHead": "4a1b6a4a542fd8bd952d23549ac5389fe8917e38",
   "scripts": {
     "build": "vite build && tsc --emitDeclarationOnly && mv dist/src dist/types",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  }
+    "test": "vitest"
+  },
+  "readme": "# GITS Button Component\n\n> Reusable Button Component\n\n## Installation\n\nvia npm\n\n```\nnpm i @gits-id/button\n```\n\nvia yarn\n\n```\nyarn add @gits-id/button\n```\n\nvia pnpm\n\n```\npnpm i @gits-id/button\n```\n\n## Usage\n\nImport button styles in your `main.ts`:\n\n```js\n// main.ts\nimport '@gits-id/button/dist/style.css';\n```\n\n```html\n<script setup lang=\"ts\">\n  import Button from '@gits-id/button';\n</script>\n\n<button color=\"primary\">Click Me</button>\n```\n\n## Documentation\n\nView `Button` documentation [here](https://gits-ui.web.app/?path=/story/components-button--default).\n\n## Licence\n\nISC\n"
 }

src/index.ts

 import VBtn from './VBtn.vue';
-import './tailwind.css';
 
@@ -4,0 +3,0 @@ export {VBtn};

src/VBtn.spec.ts

@@ -1,1 +0,12 @@
-// TODO: add unit test for VBtn
+import {mount} from '@vue/test-utils';
+import VBtn from './VBtn.vue';
+
+test('mount component', async () => {
+  expect(VBtn).toBeTruthy();
+
+  const wrapper = mount(VBtn, {
+    props: {},
+  });
+
+  // expect(wrapper.text()).toContain('Step 1');
+});

src/VBtn.stories.ts

@@ -39,3 +39,3 @@ import {Meta, Story} from '@storybook/vue3';
     text: false,
-    size: '',
+    size: 'md',
     tile: false,
@@ -78,62 +78,2 @@ icon: false,
 
-// export const Primary = Template.bind({});
-// Primary.args = {color: 'primary'};
-// Primary.parameters = {
-//   docs: {
-//     source: {
-//       code: '<v-btn color="primary">Button</v-btn>',
-//     },
-//   },
-// };
-
-// export const Secondary = Template.bind({});
-// Secondary.args = {color: 'secondary'};
-// Secondary.parameters = {
-//   docs: {
-//     source: {
-//       code: '<v-btn color="secondary">Button</v-btn>',
-//     },
-//   },
-// };
-
-// export const Info = Template.bind({});
-// Info.args = {color: 'info'};
-// Info.parameters = {
-//   docs: {
-//     source: {
-//       code: '<v-btn color="info">Button</v-btn>',
-//     },
-//   },
-// };
-
-// export const Success = Template.bind({});
-// Success.args = {color: 'success'};
-// Success.parameters = {
-//   docs: {
-//     source: {
-//       code: '<v-btn color="success">Button</v-btn>',
-//     },
-//   },
-// };
-
-// export const Error = Template.bind({});
-// Error.args = {color: 'error'};
-// Error.parameters = {
-//   docs: {
-//     source: {
-//       code: '<v-btn color="error">Button</v-btn>',
-//     },
-//   },
-// };
-
-// export const Warning = Template.bind({});
-// Warning.args = {color: 'warning'};
-// Warning.parameters = {
-//   docs: {
-//     source: {
-//       code: '<v-btn color="warning">Button</v-btn>',
-//     },
-//   },
-// };
-
 export const Outlined = Template.bind({});
@@ -249,2 +189,12 @@ Outlined.args = {color: 'primary', outlined: true};
 
+export const Block = Template.bind({});
+Block.args = {color: 'primary', block: true};
+Block.parameters = {
+  docs: {
+    source: {
+      code: '<v-btn color="primary" block>Button</v-btn>',
+    },
+  },
+};
+
 export const Shadow = Template.bind({});
@@ -260,19 +210,45 @@ Shadow.args = {color: 'primary', shadow: true};
 
+export const NoRingEffect = Template.bind({});
+NoRingEffect.args = {color: 'primary', noRing: true};
+NoRingEffect.parameters = {
+  docs: {
+    source: {
+      code: '<v-btn color="primary" no-ring>Button</v-btn>',
+    },
+  },
+};
+
 export const Icon: Story<VBtnProps> = (args) => ({
   components: {Button, HomeIcon},
   setup() {
-    return {args, sizes, themeColors};
+    return {
+      args,
+      sizes,
+      themeColors,
+      sizeClass: {
+        xs: 'w-4 h-4',
+        sm: 'w-5 h-5',
+        md: 'w-6 h-6',
+        lg: 'w-10 h-10',
+        xl: 'w-12 h-12',
+      },
+    };
   },
-  template: `<div v-for="color in themeColors" :key="color" class="mb-6">
-  <div>
-    <div class="font-bold text-lg mb-2">{{color}}</div>
-    <div class="flex items-end gap-2">
-      <Button v-for="size in sizes" :key="size" v-bind="args" :color="color" :size="size" icon>
-        <HomeIcon class="w-6 h-6"/>
-      </Button>
-    </div>
-  </div>
-  </div>`,
+  template: `
+<div class="flex items-end gap-2">
+  <Button v-for="size in sizes" :key="size" v-bind="args" color="primary" :size="size" icon>
+    <HomeIcon class="w-full"/>
+  </Button>
+</div>`,
 });
 
+export const RoundedIcon = Icon.bind({});
+RoundedIcon.args = {rounded: true};
+
+export const OutlinedIcon = Icon.bind({});
+OutlinedIcon.args = {outlined: true};
+
+export const TextIcon = Icon.bind({});
+TextIcon.args = {text: true};
+
 export const Sizes: Story<VBtnProps> = (args) => ({
@@ -285,3 +261,3 @@ components: {Button},
   <div>
-    <div class="font-bold text-lg mb-2">{{color}}</div>
+    <div class="font-semibold text-lg mb-2">{{color}}</div>
     <div class="flex items-end gap-2">
@@ -288,0 +264,0 @@ <Button v-for="size in sizes" :key="size" v-bind="args" :color="color" :size="size">

src/vue.d.ts

 declare module '*.vue' {
-  import type {DefineComponent} from 'src/vue';
+  import type {DefineComponent} from 'vue';
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }

vite.config.js

@@ -23,3 +23,3 @@ import {defineConfig} from 'vite';
       // into your library
-      external: ['vue'],
+      external: ['vue', '@gits-id/spinner', '@gits-id/utils'],
       output: {
@@ -26,0 +26,0 @@ // Provide global variables to use in the UMD build

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

4

-20%

Number of medium quality alerts

1

-50%

Number of lines in readme file

49

Infinity%

Worsened metrics

Total package byte prevSize

53700

-43.61%

Dev dependency count

11

22.22%

Number of package files

18

-18.18%

Lines of code

720

-51.84%

Number of medium supply chain risk alerts

2

100%

Dependency changes

• Updated

  @gits-id/spinner@^0.1.17-alpha.32+4a1b6a4

• Updated

  @gits-id/theme@^0.1.17-alpha.32+4a1b6a4

• Updated

  @gits-id/utils@^0.1.17-alpha.32+4a1b6a4