@vue-interface/btn-activity 2.0.0-beta.9 → 3.0.1

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 Justin Kimbrell
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,30 @@
+# Button Activity
+
+The `btn-activity` component provides an interactive button with built-in activity indicators for async operations. It extends the standard button and combines activity indicators.
+
+## Installation
+
+```bash
+pnpm i @vue-interface/btn-activity
+```
+
+```bash
+yarn add @vue-interface/btn-activity
+```
+
+```bash
+npm i @vue-interface/btn-activity
+```
+
+```bash
+bun i @vue-interface/btn-activity
+```
+
+## Basic Usage
+
+```vue
+<BtnActivity :indicator="Dots" @click="onClick">Dots</BtnActivity>
+```
+
+For more comprehensive documentation and examples, please visit the [online documentation](https://vue-interface.github.io/packages/btn-activity/).
+

package/dist/btn-activity.js

@@ -1,397 +1,83 @@
-import { defineComponent as b, inject as O, openBlock as a, createElementBlock as g, normalizeClass as j, normalizeStyle as N, createElementVNode as E, createBlock as y, resolveDynamicComponent as x, createCommentVNode as $, toDisplayString as f, mergeProps as w, withCtx as A, renderSlot as C, createTextVNode as k, resolveComponent as P, createVNode as _, normalizeProps as H, guardReactiveProps as R } from "vue";
-function r(t, i = "px") {
-  return t != null && t !== !1 && isFinite(t) ? `${t}${i}` : t;
-}
-const V = b({
+import { defineComponent as f, ref as y, watchEffect as v, watch as m, createElementBlock as b, openBlock as l, normalizeClass as c, renderSlot as x, createVNode as h, createTextVNode as k, toDisplayString as z, Transition as g, withCtx as w, createBlock as B, createCommentVNode as S, unref as C } from "vue";
+import { ActivityIndicator as A } from "@vue-interface/activity-indicator";
+const N = ["disabled"], T = /* @__PURE__ */ f({
+  __name: "BtnActivity",
   props: {
-    absolute: Boolean,
-    center: Boolean,
-    label: String,
-    size: {
-      type: String,
-      default: "md"
-    },
-    registry: {
-      type: String,
-      default: "indicators"
-    },
-    type: {
-      type: String,
-      required: !0
-    },
-    height: [String, Number],
-    maxHeight: [String, Number],
-    minHeight: [String, Number],
-    width: [String, Number],
-    maxWidth: [String, Number],
-    minWidth: [String, Number]
+    activity: { type: Boolean },
+    indicator: {},
+    indicatorSize: { default: "xs" },
+    label: { default: void 0 },
+    orientation: { default: "right" },
+    variant: { default: "btn-primary" },
+    size: { default: "btn-md" },
+    block: { type: Boolean },
+    disabled: { type: Boolean }
   },
-  data: () => ({
-    is: null
-  }),
-  setup(t) {
-    return {
-      registryInstance: O(t.registry || "indicators")
-    };
-  },
-  computed: {
-    classes() {
-      return {
-        "activity-indicator-center": this.center,
-        "activity-indicator-absolute": this.absolute,
-        [this.size && `activity-indicator-${this.size}`]: !!this.size
-      };
-    },
-    style() {
-      return {
-        width: r(this.width),
-        maxWidth: r(this.maxWidth),
-        minWidth: r(this.minWidth),
-        height: r(this.height),
-        maxHeight: r(this.maxHeight),
-        minHeight: r(this.minHeight)
-      };
-    }
-  },
-  async mounted() {
-    const t = await this.component();
-    this.is = () => t;
-  },
-  methods: {
-    async component() {
-      let t = this.registryInstance.get(this.type);
-      return t instanceof Promise ? t : (typeof t == "function" && (t = await t()), t.default ? t.default : t);
-    }
-  }
-}), W = (t, i) => {
-  const e = t.__vccOpts || t;
-  for (const [n, s] of i)
-    e[n] = s;
-  return e;
-}, D = { class: "activity-indicator-content" }, L = {
-  key: 1,
-  class: "activity-indicator-label"
-};
-function I(t, i, e, n, s, o) {
-  return a(), g("div", {
-    class: j(["activity-indicator", t.classes]),
-    style: N(t.style)
-  }, [
-    E("div", D, [
-      t.is ? (a(), y(x(t.is()), {
-        key: 0,
-        class: "mx-auto"
-      })) : $("", !0),
-      t.label ? (a(), g("div", L, f(t.label), 1)) : $("", !0)
-    ])
-  ], 6);
-}
-const Z = /* @__PURE__ */ W(V, [["render", I]]);
-var F = Object.defineProperty, M = (t, i, e) => i in t ? F(t, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[i] = e, T = (t, i, e) => (M(t, typeof i != "symbol" ? i + "" : i, e), e), u = function() {
-  return u = Object.assign || function(t) {
-    for (var i, e = 1, n = arguments.length; e < n; e++) {
-      i = arguments[e];
-      for (var s in i)
-        Object.prototype.hasOwnProperty.call(i, s) && (t[s] = i[s]);
-    }
-    return t;
-  }, u.apply(this, arguments);
-};
-function q(t) {
-  return t.toLowerCase();
-}
-var G = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g], J = /[^A-Z0-9]+/gi;
-function K(t, i) {
-  i === void 0 && (i = {});
-  for (var e = i.splitRegexp, n = e === void 0 ? G : e, s = i.stripRegexp, o = s === void 0 ? J : s, c = i.transform, v = c === void 0 ? q : c, l = i.delimiter, B = l === void 0 ? " " : l, h = S(S(t, n, "$1\0$2"), o, "\0"), p = 0, m = h.length; h.charAt(p) === "\0"; )
-    p++;
-  for (; h.charAt(m - 1) === "\0"; )
-    m--;
-  return h.slice(p, m).split("\0").map(v).join(B);
-}
-function S(t, i, e) {
-  return i instanceof RegExp ? t.replace(i, e) : i.reduce(function(n, s) {
-    return n.replace(s, e);
-  }, t);
-}
-function Q(t, i) {
-  return i === void 0 && (i = {}), K(t, u({ delimiter: "." }, i));
-}
-function d(t, i) {
-  return i === void 0 && (i = {}), Q(t, u({ delimiter: "-" }, i));
-}
-class U {
-  constructor(i = {}) {
-    T(this, "components"), this.components = /* @__PURE__ */ new Map(), Object.entries(i).forEach(([e, n]) => {
-      this.register(e, n);
+  emits: ["click", "hide-activity", "show-activity"],
+  setup(t, { emit: r }) {
+    const n = t, i = r, e = y(n.activity);
+    v(() => {
+      e.value = n.activity;
+    }), m(e, (a) => {
+      i(a ? "show-activity" : "hide-activity");
     });
-  }
-  get(i) {
-    const e = this.components.get(
-      i = d(i)
-    );
-    if (e)
-      return e;
-    throw new Error(`"${i}" has not been registered yet!`);
-  }
-  register(i, e) {
-    return typeof i == "object" ? (Object.entries(i).forEach(([n, s]) => {
-      this.register(d(n), s);
-    }), this) : (this.components.set(d(i), e), this);
-  }
-  remove(i) {
-    return this.components.delete(d(i)), this;
-  }
-  reset() {
-    return this.components = /* @__PURE__ */ new Map(), this;
-  }
-}
-function X(t = {}) {
-  return new U(t);
-}
-X();
-const Y = {
-  props: {
-    componentPrefix: String,
-    size: String,
-    sizePrefix: String
-  },
-  computed: {
-    sizeableClassPrefix() {
-      return this.sizePrefix || this.componentPrefix;
-    },
-    hasSizeablePrefix() {
-      return this.size === void 0 ? !1 : !!this.size.match(new RegExp(`^${this.sizeableClassPrefix}`));
-    },
-    sizeableClass() {
-      return this.size ? !this.sizeableClassPrefix || this.hasSizeablePrefix ? this.size : `${this.sizeableClassPrefix}-${this.size}` : "";
-    }
-  }
-}, tt = {
-  props: {
-    componentPrefix: String,
-    variant: String,
-    variantPrefix: String
-  },
-  computed: {
-    variantClassPrefix() {
-      return this.variantPrefix || this.componentPrefix;
-    },
-    hasVariantPrefix() {
-      return this.variant === void 0 ? !1 : !!this.variant.match(new RegExp(`^${this.variantClassPrefix}`));
-    },
-    variantClass() {
-      return this.variant ? !this.variantClassPrefix || this.hasVariantPrefix ? this.variant : `${this.variantClassPrefix}-${this.variant}` : "";
-    }
-  }
-}, it = b({
-  mixins: [
-    Y,
-    tt
-  ],
-  props: {
-    active: Boolean,
-    block: Boolean,
-    componentPrefix: {
-      type: String,
-      default: "btn"
-    },
-    disabled: Boolean,
-    label: String,
-    outline: Boolean,
-    tag: String,
-    variant: {
-      type: String,
-      default: "primary"
-    }
-  },
-  computed: {
-    classes() {
-      return [
-        "btn",
-        this.variantClass,
-        this.sizeableClass,
-        this.active && "active",
-        this.block && "btn-block",
-        this.disabled && "disabled"
-      ];
-    },
-    component() {
-      return this.tag ? this.tag : this.$attrs.href ? "a" : "button";
-    },
-    variantClassPrefix() {
-      return (this.variantPrefix || this.componentPrefix) + (this.outline ? "-outline" : "");
-    }
-  }
-}), et = (t, i) => {
-  const e = t.__vccOpts || t;
-  for (const [n, s] of i)
-    e[n] = s;
-  return e;
-};
-function st(t, i, e, n, s, o) {
-  return a(), y(x(t.component), w(t.$attrs, {
-    disabled: t.disabled,
-    class: t.classes,
-    role: "button"
-  }), {
-    default: A(() => [
-      C(t.$slots, "default", {}, () => [
-        k(f(t.label), 1)
-      ])
-    ]),
-    _: 3
-  }, 16, ["disabled", "class"]);
-}
-const nt = /* @__PURE__ */ et(it, [["render", st]]), rt = function(t) {
-  const i = parseFloat(t || 0), e = t && t.match(/m?s/), n = e ? e[0] : !1;
-  let s;
-  switch (n) {
-    case "s":
-      s = i * 1e3;
-      break;
-    case "ms":
-    default:
-      s = i;
-      break;
-  }
-  return s || 0;
-}, z = function(t, i) {
-  const e = (t.ownerDocument || document).defaultView;
-  setTimeout(
-    i,
-    rt(
-      e == null ? void 0 : e.getComputedStyle(t).animationDuration
-    )
-  );
-}, at = b({
-  components: {
-    ActivityIndicator: Z,
-    Btn: nt
-  },
-  inheritAttrs: !1,
-  props: {
-    active: Boolean,
-    activity: Boolean,
-    block: Boolean,
-    disabled: Boolean,
-    indicator: {
-      type: [Object, String],
-      default: "spinner"
-    },
-    label: {
-      type: String,
-      default: void 0
-    },
-    orientation: {
-      type: String,
-      default: "right"
-    },
-    size: {
-      type: String,
-      default: "md"
-    },
-    tag: {
-      type: String,
-      default: void 0
-    },
-    variant: {
-      type: String,
-      default: "primary"
+    function s() {
+      e.value = !e.value;
     }
-  },
-  emits: ["click", "hide-activity", "show-activity"],
-  data() {
-    return {
-      currentActivity: this.activity
+    const d = {
+      status: e,
+      toggle: s
     };
-  },
-  computed: {
-    classes() {
-      return {
-        disabled: this.disabled,
-        active: this.active,
-        "btn-activity": this.activity,
-        [`btn-activity-${this.orientation.replace("btn-activity-", "")}`]: !!this.orientation,
-        [`btn-activity-indicator-${this.indicatorProps.type.replace("btn-activity-indicator-", "")}`]: !!this.indicatorProps.type
-      };
-    },
-    indicatorProps() {
-      return Object.assign(
+    return (a, o) => (l(), b("button", {
+      type: "button",
+      disabled: t.disabled,
+      class: c([
+        "btn",
+        t.variant,
+        t.size,
         {
-          type: "spinner"
-        },
-        (typeof this.indicator == "string" ? {
-          type: this.indicator
-        } : this.indicator) || {}
-      );
-    }
-  },
-  watch: {
-    activity(t) {
-      t ? this.showActivity() : this.hideActivity();
-    }
-  },
-  mounted() {
-    this.activity && this.showActivity();
-  },
-  methods: {
-    disable() {
-      this.$el.disabled = !0, this.$el.classList.add("disabled");
-    },
-    enable() {
-      this.$el.disabled = !1, this.$el.classList.remove("disabled");
-    },
-    hideActivity() {
-      this.$el.classList.add("btn-hide-activity"), z(this.$el, () => {
-        this.disabled || this.enable(), this.currentActivity = !1, this.$el.classList.remove("btn-activity", "btn-hide-activity"), this.$emit("hide-activity");
-      });
-    },
-    showActivity() {
-      this.currentActivity = !0, this.disable(), z(this.$el, () => {
-        this.$el.classList.add("btn-activity"), this.$emit("show-activity");
-      });
-    },
-    toggle() {
-      this.currentActivity ? this.hideActivity() : this.showActivity();
-    }
+          "w-full": t.block,
+          "gap-1": ["xs", "sm"].includes(t.indicatorSize),
+          "gap-2": ["md", "lg", "xl"].includes(t.indicatorSize),
+          "flex-col-reverse": t.orientation === "top",
+          "flex-col": t.orientation === "bottom",
+          "flex-row-reverse": t.orientation === "left",
+          "inline-flex items-center justify-center": !0,
+          "opacity-50 cursor-not-allowed": t.disabled
+        }
+      ]),
+      onClick: o[0] || (o[0] = (u) => i("click", u, d))
+    }, [
+      x(a.$slots, "default", {}, () => [
+        k(z(t.label), 1)
+      ]),
+      h(g, {
+        "enter-active-class": "transition-all ease-out duration-250",
+        "enter-from-class": "opacity-0",
+        "enter-to-class": "opacity-100",
+        "leave-active-class": "transition-all ease-in duration-250",
+        "leave-from-class": "opacity-100",
+        "leave-to-class": "opacity-0"
+      }, {
+        default: w(() => [
+          e.value ? (l(), B(C(A), {
+            key: 0,
+            type: t.indicator,
+            size: t.indicatorSize,
+            class: c({
+              "pt-1": t.orientation === "top",
+              "pb-1": t.orientation === "bottom",
+              "pr-1": t.orientation === "left",
+              "pl-1": t.orientation === "right"
+            })
+          }, null, 8, ["type", "size", "class"])) : S("", !0)
+        ]),
+        _: 1
+      })
+    ], 10, N));
   }
 });
-const ot = (t, i) => {
-  const e = t.__vccOpts || t;
-  for (const [n, s] of i)
-    e[n] = s;
-  return e;
-};
-function ct(t, i, e, n, s, o) {
-  const c = P("activity-indicator"), v = P("btn");
-  return a(), y(v, w({
-    active: t.active,
-    block: t.block,
-    disabled: t.disabled,
-    size: t.size,
-    tag: t.tag,
-    variant: t.variant,
-    class: t.classes
-  }, Object.assign({}, t.$attrs, { onClick: void 0 }), {
-    onClick: i[0] || (i[0] = (l) => !t.disabled && t.$emit("click", l, {
-      disable: t.disable,
-      enable: t.enable,
-      toggle: t.toggle,
-      showActivity: t.showActivity,
-      hideActivity: t.hideActivity
-    }))
-  }), {
-    default: A(() => [
-      C(t.$slots, "default", {}, () => [
-        k(f(t.label), 1)
-      ]),
-      _(c, H(R(t.indicatorProps)), null, 16)
-    ]),
-    _: 3
-  }, 16, ["active", "block", "disabled", "size", "tag", "variant", "class"]);
-}
-const ht = /* @__PURE__ */ ot(at, [["render", ct]]);
 export {
-  ht as BtnActivity
+  T as BtnActivity
 };
+//# sourceMappingURL=btn-activity.js.map

package/dist/btn-activity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"btn-activity.js","sources":["../src/BtnActivity.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport { ref, watch, watchEffect, type Component, type Ref } from 'vue';\nimport { ActivityIndicatorSize } from '../../activity-indicator/src/ActivityIndicator.vue';\n\nexport type BtnActivityProps = {\n    activity?: boolean;\n    indicator: Component;\n    indicatorSize?: ActivityIndicatorSize;\n    label?: string;\n    orientation?: 'top' | 'bottom' | 'left' | 'right';\n    variant?: string;\n    size?: string;\n    block?: boolean;  \n    disabled?: boolean;\n};\n\nconst props = withDefaults(defineProps<BtnActivityProps>(), {\n    indicatorSize: 'xs',\n    label: undefined,\n    orientation: 'right',\n    variant: 'btn-primary',\n    size: 'btn-md'\n});\n\nexport type BtnActivityContext = {\n    status: Ref<boolean>;\n    toggle: () => void;\n}\n\nconst emit = defineEmits<{\n    click: [event: MouseEvent, context: BtnActivityContext];\n    'hide-activity': [];\n    'show-activity': [];\n}>();\n\nconst status = ref(props.activity);\n\nwatchEffect(() => {\n    status.value = props.activity;\n});\n\nwatch(status, (value) => {\n    if(value) {\n        emit('show-activity');\n    } \n    else {\n        emit('hide-activity');\n    }\n});\n\nfunction toggle() {\n    status.value = !status.value;\n}\n\nconst context = {\n    status,\n    toggle,\n};\n</script>\n\n<template>\n    <button\n        type=\"button\"\n        :disabled=\"disabled\"\n        :class=\"[\n            'btn',\n            variant,\n            size,\n            {\n                'w-full': block,\n                'gap-1': ['xs', 'sm'].includes(indicatorSize),\n                'gap-2': ['md', 'lg', 'xl'].includes(indicatorSize),\n                'flex-col-reverse': orientation === 'top',\n                'flex-col': orientation === 'bottom',\n                'flex-row-reverse': orientation === 'left',\n                'inline-flex items-center justify-center': true,\n                'opacity-50 cursor-not-allowed': disabled,\n            }\n        ]\"\n        @click=\"emit('click', $event, context)\"> \n        <slot>{{ label }}</slot>\n        <Transition\n            enter-active-class=\"transition-all ease-out duration-250\"\n            enter-from-class=\"opacity-0\"\n            enter-to-class=\"opacity-100\"\n            leave-active-class=\"transition-all ease-in duration-250\"\n            leave-from-class=\"opacity-100\"\n            leave-to-class=\"opacity-0\">\n            <ActivityIndicator\n                v-if=\"status\"\n                :type=\"indicator\"\n                :size=\"indicatorSize\"\n                :class=\"{\n                    'pt-1': orientation === 'top',\n                    'pb-1': orientation === 'bottom',\n                    'pr-1': orientation === 'left',\n                    'pl-1': orientation === 'right',\n                }\" />\n        </Transition>\n    </button>\n</template>"],"names":["props","__props","emit","__emit","status","ref","watchEffect","watch","value","toggle","context","_createElementBlock","_normalizeClass","_cache","$event","_renderSlot","_ctx","_createVNode","_Transition","_createBlock","_unref","ActivityIndicator"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,UAAMA,IAAQC,GAaRC,IAAOC,GAMPC,IAASC,EAAIL,EAAM,QAAQ;AAEjC,IAAAM,EAAY,MAAM;AACd,MAAAF,EAAO,QAAQJ,EAAM;AAAA,IACzB,CAAC,GAEDO,EAAMH,GAAQ,CAACI,MAAU;AACrB,MACIN,EADDM,IACM,kBAGA,eAHe;AAAA,IAK5B,CAAC;AAED,aAASC,IAAS;AACd,MAAAL,EAAO,QAAQ,CAACA,EAAO;AAAA,IAC3B;AAEA,UAAMM,IAAU;AAAA,MACZ,QAAAN;AAAA,MACA,QAAAK;AAAA,IAAA;2BAKAE,EAsCS,UAAA;AAAA,MArCL,MAAK;AAAA,MACJ,UAAUV,EAAA;AAAA,MACV,OAAKW,EAAA;AAAA;QAAmCX,EAAA;AAAA,QAAqBA,EAAA;AAAA;oBAA8CA,EAAA;AAAA,UAA6C,SAAA,CAAA,MAAA,IAAA,EAAA,SAASA,EAAA,aAAa;AAAA,UAA+C,SAAA,CAAA,MAAA,MAAA,IAAA,EAAA,SAASA,EAAA,aAAa;AAAA,8BAAuCA,EAAA,gBAAW;AAAA,sBAAwCA,EAAA,gBAAW;AAAA,8BAAmDA,EAAA,gBAAW;AAAA;2CAA+HA,EAAA;AAAA,QAAA;AAAA;MAerhB,SAAKY,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAEZ,EAAI,SAAUY,GAAQJ,CAAO;AAAA,IAAA;MACrCK,EAAwBC,yBAAxB,MAAwB;AAAA,YAAff,EAAA,KAAK,GAAA,CAAA;AAAA,MAAA;MACdgB,EAiBaC,GAAA;AAAA,QAhBT,sBAAmB;AAAA,QACnB,oBAAiB;AAAA,QACjB,kBAAe;AAAA,QACf,sBAAmB;AAAA,QACnB,oBAAiB;AAAA,QACjB,kBAAe;AAAA,MAAA;;UAELd,EAAA,cADVe,EASSC,EAAAC,CAAA,GAAA;AAAA;YAPJ,MAAMpB,EAAA;AAAA,YACN,MAAMA,EAAA;AAAA,YACN,OAAKW,EAAA;AAAA,sBAAgCX,EAAA,gBAAW;AAAA,sBAAwCA,EAAA,gBAAW;AAAA,sBAA2CA,EAAA,gBAAW;AAAA,sBAAyCA,EAAA,gBAAW;AAAA,YAAA;;;;;;;;"}

package/dist/btn-activity.umd.cjs

@@ -1 +1,2 @@
-(function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a.BtnActivity={},a.Vue))})(this,function(a,e){"use strict";function o(t,i="px"){return t!=null&&t!==!1&&isFinite(t)?`${t}${i}`:t}const v=e.defineComponent({props:{absolute:Boolean,center:Boolean,label:String,size:{type:String,default:"md"},registry:{type:String,default:"indicators"},type:{type:String,required:!0},height:[String,Number],maxHeight:[String,Number],minHeight:[String,Number],width:[String,Number],maxWidth:[String,Number],minWidth:[String,Number]},data:()=>({is:null}),setup(t){return{registryInstance:e.inject(t.registry||"indicators")}},computed:{classes(){return{"activity-indicator-center":this.center,"activity-indicator-absolute":this.absolute,[this.size&&`activity-indicator-${this.size}`]:!!this.size}},style(){return{width:o(this.width),maxWidth:o(this.maxWidth),minWidth:o(this.minWidth),height:o(this.height),maxHeight:o(this.maxHeight),minHeight:o(this.minHeight)}}},async mounted(){const t=await this.component();this.is=()=>t},methods:{async component(){let t=this.registryInstance.get(this.type);return t instanceof Promise?t:(typeof t=="function"&&(t=await t()),t.default?t.default:t)}}}),$=(t,i)=>{const s=t.__vccOpts||t;for(const[r,n]of i)s[r]=n;return s},P={class:"activity-indicator-content"},S={key:1,class:"activity-indicator-label"};function x(t,i,s,r,n,d){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["activity-indicator",t.classes]),style:e.normalizeStyle(t.style)},[e.createElementVNode("div",P,[t.is?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.is()),{key:0,class:"mx-auto"})):e.createCommentVNode("",!0),t.label?(e.openBlock(),e.createElementBlock("div",S,e.toDisplayString(t.label),1)):e.createCommentVNode("",!0)])],6)}const z=$(v,[["render",x]]);var C=Object.defineProperty,w=(t,i,s)=>i in t?C(t,i,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[i]=s,A=(t,i,s)=>(w(t,typeof i!="symbol"?i+"":i,s),s),c=function(){return c=Object.assign||function(t){for(var i,s=1,r=arguments.length;s<r;s++){i=arguments[s];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(t[n]=i[n])}return t},c.apply(this,arguments)};function k(t){return t.toLowerCase()}var B=[/([a-z0-9])([A-Z])/g,/([A-Z])([A-Z][a-z])/g],j=/[^A-Z0-9]+/gi;function O(t,i){i===void 0&&(i={});for(var s=i.splitRegexp,r=s===void 0?B:s,n=i.stripRegexp,d=n===void 0?j:n,h=i.transform,f=h===void 0?k:h,p=i.delimiter,q=p===void 0?" ":p,m=b(b(t,r,"$1\0$2"),d,"\0"),u=0,y=m.length;m.charAt(u)==="\0";)u++;for(;m.charAt(y-1)==="\0";)y--;return m.slice(u,y).split("\0").map(f).join(q)}function b(t,i,s){return i instanceof RegExp?t.replace(i,s):i.reduce(function(r,n){return r.replace(n,s)},t)}function N(t,i){return i===void 0&&(i={}),O(t,c({delimiter:"."},i))}function l(t,i){return i===void 0&&(i={}),N(t,c({delimiter:"-"},i))}class _{constructor(i={}){A(this,"components"),this.components=new Map,Object.entries(i).forEach(([s,r])=>{this.register(s,r)})}get(i){const s=this.components.get(i=l(i));if(s)return s;throw new Error(`"${i}" has not been registered yet!`)}register(i,s){return typeof i=="object"?(Object.entries(i).forEach(([r,n])=>{this.register(l(r),n)}),this):(this.components.set(l(i),s),this)}remove(i){return this.components.delete(l(i)),this}reset(){return this.components=new Map,this}}function E(t={}){return new _(t)}E();const V={props:{componentPrefix:String,size:String,sizePrefix:String},computed:{sizeableClassPrefix(){return this.sizePrefix||this.componentPrefix},hasSizeablePrefix(){return this.size===void 0?!1:!!this.size.match(new RegExp(`^${this.sizeableClassPrefix}`))},sizeableClass(){return this.size?!this.sizeableClassPrefix||this.hasSizeablePrefix?this.size:`${this.sizeableClassPrefix}-${this.size}`:""}}},D={props:{componentPrefix:String,variant:String,variantPrefix:String},computed:{variantClassPrefix(){return this.variantPrefix||this.componentPrefix},hasVariantPrefix(){return this.variant===void 0?!1:!!this.variant.match(new RegExp(`^${this.variantClassPrefix}`))},variantClass(){return this.variant?!this.variantClassPrefix||this.hasVariantPrefix?this.variant:`${this.variantClassPrefix}-${this.variant}`:""}}},H=e.defineComponent({mixins:[V,D],props:{active:Boolean,block:Boolean,componentPrefix:{type:String,default:"btn"},disabled:Boolean,label:String,outline:Boolean,tag:String,variant:{type:String,default:"primary"}},computed:{classes(){return["btn",this.variantClass,this.sizeableClass,this.active&&"active",this.block&&"btn-block",this.disabled&&"disabled"]},component(){return this.tag?this.tag:this.$attrs.href?"a":"button"},variantClassPrefix(){return(this.variantPrefix||this.componentPrefix)+(this.outline?"-outline":"")}}}),R=(t,i)=>{const s=t.__vccOpts||t;for(const[r,n]of i)s[r]=n;return s};function T(t,i,s,r,n,d){return e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.component),e.mergeProps(t.$attrs,{disabled:t.disabled,class:t.classes,role:"button"}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])]),_:3},16,["disabled","class"])}const W=R(H,[["render",T]]),L=function(t){const i=parseFloat(t||0),s=t&&t.match(/m?s/),r=s?s[0]:!1;let n;switch(r){case"s":n=i*1e3;break;case"ms":default:n=i;break}return n||0},g=function(t,i){const s=(t.ownerDocument||document).defaultView;setTimeout(i,L(s==null?void 0:s.getComputedStyle(t).animationDuration))},I=e.defineComponent({components:{ActivityIndicator:z,Btn:W},inheritAttrs:!1,props:{active:Boolean,activity:Boolean,block:Boolean,disabled:Boolean,indicator:{type:[Object,String],default:"spinner"},label:{type:String,default:void 0},orientation:{type:String,default:"right"},size:{type:String,default:"md"},tag:{type:String,default:void 0},variant:{type:String,default:"primary"}},emits:["click","hide-activity","show-activity"],data(){return{currentActivity:this.activity}},computed:{classes(){return{disabled:this.disabled,active:this.active,"btn-activity":this.activity,[`btn-activity-${this.orientation.replace("btn-activity-","")}`]:!!this.orientation,[`btn-activity-indicator-${this.indicatorProps.type.replace("btn-activity-indicator-","")}`]:!!this.indicatorProps.type}},indicatorProps(){return Object.assign({type:"spinner"},(typeof this.indicator=="string"?{type:this.indicator}:this.indicator)||{})}},watch:{activity(t){t?this.showActivity():this.hideActivity()}},mounted(){this.activity&&this.showActivity()},methods:{disable(){this.$el.disabled=!0,this.$el.classList.add("disabled")},enable(){this.$el.disabled=!1,this.$el.classList.remove("disabled")},hideActivity(){this.$el.classList.add("btn-hide-activity"),g(this.$el,()=>{this.disabled||this.enable(),this.currentActivity=!1,this.$el.classList.remove("btn-activity","btn-hide-activity"),this.$emit("hide-activity")})},showActivity(){this.currentActivity=!0,this.disable(),g(this.$el,()=>{this.$el.classList.add("btn-activity"),this.$emit("show-activity")})},toggle(){this.currentActivity?this.hideActivity():this.showActivity()}}}),G="",M=(t,i)=>{const s=t.__vccOpts||t;for(const[r,n]of i)s[r]=n;return s};function Z(t,i,s,r,n,d){const h=e.resolveComponent("activity-indicator"),f=e.resolveComponent("btn");return e.openBlock(),e.createBlock(f,e.mergeProps({active:t.active,block:t.block,disabled:t.disabled,size:t.size,tag:t.tag,variant:t.variant,class:t.classes},Object.assign({},t.$attrs,{onClick:void 0}),{onClick:i[0]||(i[0]=p=>!t.disabled&&t.$emit("click",p,{disable:t.disable,enable:t.enable,toggle:t.toggle,showActivity:t.showActivity,hideActivity:t.hideActivity}))}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)]),e.createVNode(h,e.normalizeProps(e.guardReactiveProps(t.indicatorProps)),null,16)]),_:3},16,["active","block","disabled","size","tag","variant","class"])}const F=M(I,[["render",Z]]);a.BtnActivity=F,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(i,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@vue-interface/activity-indicator")):typeof define=="function"&&define.amd?define(["exports","vue","@vue-interface/activity-indicator"],t):(i=typeof globalThis<"u"?globalThis:i||self,t(i.BtnActivity={},i.Vue,i.VueInterfaceActivityIndicator))})(this,(function(i,t,r){"use strict";const s=["disabled"],d=t.defineComponent({__name:"BtnActivity",props:{activity:{type:Boolean},indicator:{},indicatorSize:{default:"xs"},label:{default:void 0},orientation:{default:"right"},variant:{default:"btn-primary"},size:{default:"btn-md"},block:{type:Boolean},disabled:{type:Boolean}},emits:["click","hide-activity","show-activity"],setup(e,{emit:f}){const c=e,a=f,n=t.ref(c.activity);t.watchEffect(()=>{n.value=c.activity}),t.watch(n,o=>{a(o?"show-activity":"hide-activity")});function y(){n.value=!n.value}const u={status:n,toggle:y};return(o,l)=>(t.openBlock(),t.createElementBlock("button",{type:"button",disabled:e.disabled,class:t.normalizeClass(["btn",e.variant,e.size,{"w-full":e.block,"gap-1":["xs","sm"].includes(e.indicatorSize),"gap-2":["md","lg","xl"].includes(e.indicatorSize),"flex-col-reverse":e.orientation==="top","flex-col":e.orientation==="bottom","flex-row-reverse":e.orientation==="left","inline-flex items-center justify-center":!0,"opacity-50 cursor-not-allowed":e.disabled}]),onClick:l[0]||(l[0]=m=>a("click",m,u))},[t.renderSlot(o.$slots,"default",{},()=>[t.createTextVNode(t.toDisplayString(e.label),1)]),t.createVNode(t.Transition,{"enter-active-class":"transition-all ease-out duration-250","enter-from-class":"opacity-0","enter-to-class":"opacity-100","leave-active-class":"transition-all ease-in duration-250","leave-from-class":"opacity-100","leave-to-class":"opacity-0"},{default:t.withCtx(()=>[n.value?(t.openBlock(),t.createBlock(t.unref(r.ActivityIndicator),{key:0,type:e.indicator,size:e.indicatorSize,class:t.normalizeClass({"pt-1":e.orientation==="top","pb-1":e.orientation==="bottom","pr-1":e.orientation==="left","pl-1":e.orientation==="right"})},null,8,["type","size","class"])):t.createCommentVNode("",!0)]),_:1})],10,s))}});i.BtnActivity=d,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));
+//# sourceMappingURL=btn-activity.umd.cjs.map

package/dist/btn-activity.umd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"btn-activity.umd.cjs","sources":["../src/BtnActivity.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport { ref, watch, watchEffect, type Component, type Ref } from 'vue';\nimport { ActivityIndicatorSize } from '../../activity-indicator/src/ActivityIndicator.vue';\n\nexport type BtnActivityProps = {\n    activity?: boolean;\n    indicator: Component;\n    indicatorSize?: ActivityIndicatorSize;\n    label?: string;\n    orientation?: 'top' | 'bottom' | 'left' | 'right';\n    variant?: string;\n    size?: string;\n    block?: boolean;  \n    disabled?: boolean;\n};\n\nconst props = withDefaults(defineProps<BtnActivityProps>(), {\n    indicatorSize: 'xs',\n    label: undefined,\n    orientation: 'right',\n    variant: 'btn-primary',\n    size: 'btn-md'\n});\n\nexport type BtnActivityContext = {\n    status: Ref<boolean>;\n    toggle: () => void;\n}\n\nconst emit = defineEmits<{\n    click: [event: MouseEvent, context: BtnActivityContext];\n    'hide-activity': [];\n    'show-activity': [];\n}>();\n\nconst status = ref(props.activity);\n\nwatchEffect(() => {\n    status.value = props.activity;\n});\n\nwatch(status, (value) => {\n    if(value) {\n        emit('show-activity');\n    } \n    else {\n        emit('hide-activity');\n    }\n});\n\nfunction toggle() {\n    status.value = !status.value;\n}\n\nconst context = {\n    status,\n    toggle,\n};\n</script>\n\n<template>\n    <button\n        type=\"button\"\n        :disabled=\"disabled\"\n        :class=\"[\n            'btn',\n            variant,\n            size,\n            {\n                'w-full': block,\n                'gap-1': ['xs', 'sm'].includes(indicatorSize),\n                'gap-2': ['md', 'lg', 'xl'].includes(indicatorSize),\n                'flex-col-reverse': orientation === 'top',\n                'flex-col': orientation === 'bottom',\n                'flex-row-reverse': orientation === 'left',\n                'inline-flex items-center justify-center': true,\n                'opacity-50 cursor-not-allowed': disabled,\n            }\n        ]\"\n        @click=\"emit('click', $event, context)\"> \n        <slot>{{ label }}</slot>\n        <Transition\n            enter-active-class=\"transition-all ease-out duration-250\"\n            enter-from-class=\"opacity-0\"\n            enter-to-class=\"opacity-100\"\n            leave-active-class=\"transition-all ease-in duration-250\"\n            leave-from-class=\"opacity-100\"\n            leave-to-class=\"opacity-0\">\n            <ActivityIndicator\n                v-if=\"status\"\n                :type=\"indicator\"\n                :size=\"indicatorSize\"\n                :class=\"{\n                    'pt-1': orientation === 'top',\n                    'pb-1': orientation === 'bottom',\n                    'pr-1': orientation === 'left',\n                    'pl-1': orientation === 'right',\n                }\" />\n        </Transition>\n    </button>\n</template>"],"names":["props","__props","emit","__emit","status","ref","watchEffect","watch","value","toggle","context","_createElementBlock","_normalizeClass","_cache","$event","_renderSlot","_ctx","_createVNode","_Transition","_createBlock","_unref","ActivityIndicator"],"mappings":"ytBAiBA,MAAMA,EAAQC,EAaRC,EAAOC,EAMPC,EAASC,EAAAA,IAAIL,EAAM,QAAQ,EAEjCM,EAAAA,YAAY,IAAM,CACdF,EAAO,MAAQJ,EAAM,QACzB,CAAC,EAEDO,QAAMH,EAASI,GAAU,CAEjBN,EADDM,EACM,gBAGA,eAHe,CAK5B,CAAC,EAED,SAASC,GAAS,CACdL,EAAO,MAAQ,CAACA,EAAO,KAC3B,CAEA,MAAMM,EAAU,CACZ,OAAAN,EACA,OAAAK,CAAA,8BAKAE,EAAAA,mBAsCS,SAAA,CArCL,KAAK,SACJ,SAAUV,EAAA,SACV,MAAKW,EAAAA,eAAA,OAAmCX,EAAA,QAAqBA,EAAA,eAA8CA,EAAA,MAA6C,QAAA,CAAA,KAAA,IAAA,EAAA,SAASA,EAAA,aAAa,EAA+C,QAAA,CAAA,KAAA,KAAA,IAAA,EAAA,SAASA,EAAA,aAAa,qBAAuCA,EAAA,cAAW,iBAAwCA,EAAA,cAAW,4BAAmDA,EAAA,cAAW,oFAA+HA,EAAA,QAAA,IAerhB,QAAKY,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAEZ,EAAI,QAAUY,EAAQJ,CAAO,EAAA,GACrCK,EAAAA,WAAwBC,sBAAxB,IAAwB,qCAAff,EAAA,KAAK,EAAA,CAAA,CAAA,GACdgB,EAAAA,YAiBaC,EAAAA,WAAA,CAhBT,qBAAmB,uCACnB,mBAAiB,YACjB,iBAAe,cACf,qBAAmB,sCACnB,mBAAiB,cACjB,iBAAe,WAAA,0BAELd,EAAA,qBADVe,EAAAA,YASSC,EAAAA,MAAAC,EAAAA,iBAAA,EAAA,OAPJ,KAAMpB,EAAA,UACN,KAAMA,EAAA,cACN,MAAKW,EAAAA,eAAA,QAAgCX,EAAA,cAAW,aAAwCA,EAAA,cAAW,gBAA2CA,EAAA,cAAW,cAAyCA,EAAA,cAAW,OAAA"}

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-import BtnActivity from './src/BtnActivity.vue';
+import { default as BtnActivity } from './src/BtnActivity.vue';
 export { BtnActivity };

package/dist/src/BtnActivity.vue.d.ts

@@ -1,169 +1,48 @@
-declare const _sfc_main: import("vue").DefineComponent<{
-    /**
-     * Make the button appear with the active state.
-     */
-    active: BooleanConstructor;
-    /**
-     * Show the activity indicator inside the button.
-     */
-    activity: BooleanConstructor;
-    /**
-     * Display the button as block width.
-     */
-    block: BooleanConstructor;
-    /**
-     * Disable the button.
-     */
-    disabled: BooleanConstructor;
-    /**
-     * The type of activity indicator inside the button.
-     */
-    indicator: {
-        type: (StringConstructor | ObjectConstructor)[];
-        default: string;
-    };
-    /**
-     * The button label.
-     */
-    label: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    /**
-     * The orientation of the activity button inside the button.
-     */
-    orientation: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * The size of the button.
-     */
-    size: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * The HTML tag.
-     */
-    tag: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    /**
-     * The variant of the button.
-     */
-    variant: {
-        type: StringConstructor;
-        default: string;
-    };
-}, unknown, {
-    currentActivity: boolean;
-}, {
-    /**
-     * An object of classes to append to the button.
-     */
-    classes(): {
-        [x: string]: any;
-        disabled: any;
-        active: any;
-        'btn-activity': any;
-    };
-    indicatorProps(): any;
-}, {
-    /**
-     * Disable the button.
-     */
-    disable(): void;
-    /**
-     * Enable the button.
-     */
-    enable(): void;
-    /**
-     * Hide the activity indicator inside the button.
-     */
-    hideActivity(): void;
-    /**
-     * Show the activity indicator inside the button.
-     */
-    showActivity(): void;
-    /**
-     * Show the activity indicator inside the button.
-     */
-    toggle(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "hide-activity" | "show-activity")[], "click" | "hide-activity" | "show-activity", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * Make the button appear with the active state.
-     */
-    active: BooleanConstructor;
-    /**
-     * Show the activity indicator inside the button.
-     */
-    activity: BooleanConstructor;
-    /**
-     * Display the button as block width.
-     */
-    block: BooleanConstructor;
-    /**
-     * Disable the button.
-     */
-    disabled: BooleanConstructor;
-    /**
-     * The type of activity indicator inside the button.
-     */
-    indicator: {
-        type: (StringConstructor | ObjectConstructor)[];
-        default: string;
-    };
-    /**
-     * The button label.
-     */
-    label: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    /**
-     * The orientation of the activity button inside the button.
-     */
-    orientation: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * The size of the button.
-     */
-    size: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * The HTML tag.
-     */
-    tag: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    /**
-     * The variant of the button.
-     */
-    variant: {
-        type: StringConstructor;
-        default: string;
-    };
-}>> & {
-    onClick?: ((...args: any[]) => any) | undefined;
-    "onHide-activity"?: ((...args: any[]) => any) | undefined;
-    "onShow-activity"?: ((...args: any[]) => any) | undefined;
-}, {
-    label: string;
+import { Component, Ref } from 'vue';
+import { ActivityIndicatorSize } from '../../activity-indicator/src/ActivityIndicator.vue';
+export type BtnActivityProps = {
+    activity?: boolean;
+    indicator: Component;
+    indicatorSize?: ActivityIndicatorSize;
+    label?: string;
+    orientation?: 'top' | 'bottom' | 'left' | 'right';
+    variant?: string;
+    size?: string;
+    block?: boolean;
+    disabled?: boolean;
+};
+export type BtnActivityContext = {
+    status: Ref<boolean>;
+    toggle: () => void;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLButtonElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<BtnActivityProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (event: MouseEvent, context: BtnActivityContext) => any;
+    "hide-activity": () => any;
+    "show-activity": () => any;
+}, string, import('vue').PublicProps, Readonly<BtnActivityProps> & Readonly<{
+    onClick?: ((event: MouseEvent, context: BtnActivityContext) => any) | undefined;
+    "onHide-activity"?: (() => any) | undefined;
+    "onShow-activity"?: (() => any) | undefined;
+}>, {
     size: string;
-    active: boolean;
-    block: boolean;
-    disabled: boolean;
-    tag: string;
+    label: string;
+    indicatorSize: ActivityIndicatorSize;
+    orientation: "top" | "bottom" | "left" | "right";
     variant: string;
-    activity: boolean;
-    indicator: string | Record<string, any>;
-    orientation: string;
-}>;
-export default _sfc_main;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/index.css

@@ -0,0 +1,3 @@
+@import "tailwindcss";
+@import "@vue-interface/btn";
+@import "@vue-interface/activity-indicator/css";

package/package.json

@@ -1,37 +1,23 @@
 {
   "name": "@vue-interface/btn-activity",
-  "version": "2.0.0-beta.9",
+  "version": "3.0.1",
   "description": "A Vue activity button component.",
   "type": "module",
-  "files": [
-    "dist"
-  ],
   "main": "./dist/btn-activity.umd.cjs",
   "module": "./dist/btn-activity.js",
-  "style": "./dist/style.css",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/btn-activity.js",
-      "require": "./dist/btn-activity.umd.cjs",
-      "types": "./dist/index.d.ts"
-    },
-    "./dist/style.css": "./dist/style.css"
+      "source": "./index.ts",
+      "types": "./dist/index.d.ts",
+      "require": "./dist/btn-activity.umd.js",
+      "import": "./dist/btn-activity.js"
+    }
   },
   "browserslist": "last 2 versions, > 0.5%, ie >= 11",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "pre-release": "npm run build; git add . -A; git commit -m 'pre-release commit'",
-    "release-patch": "npm run pre-release && npm version patch -m \"%s\" && npm run release;",
-    "release-minor": "npm run pre-release && npm version minor -m \"%s\" && npm run release;",
-    "release-major": "npm run pre-release && npm version major -m \"%s\" && npm run release;",
-    "release": "git add . -A; git commit; git push --tags origin; npm publish;"
-  },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/vue-interface/btn-activity.git"
+    "url": "git+https://github.com/vue-interface/vue-interface.github.io"
   },
   "keywords": [
     "Form",
@@ -42,29 +28,26 @@
     "Bootstrap"
   ],
   "author": "Justin Kimbrell",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
-    "url": "https://github.com/vue-interface/btn-activity/issues"
+    "url": "https://github.com/vue-interface/vue-interface.github.io"
   },
-  "homepage": "https://github.com/vue-interface/btn-activity/docs#readme",
-  "dependencies": {
-    "@vue-interface/activity-indicator": "^2.0.0-beta.7",
-    "@vue-interface/btn": "^3.0.0-beta.4"
+  "homepage": "https://github.com/vue-interface/vue-interface",
+  "readme": "README.md",
+  "files": [
+    "dist",
+    "index.css",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "vue": "^3.3.4",
+    "@vue-interface/activity-indicator": "3.0.1",
+    "@vue-interface/btn": "4.0.1"
   },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^3.1.2",
-    "@vue/eslint-config-typescript": "^11.0.2",
-    "autoprefixer": "^10.4.2",
-    "babel-eslint": "^10.1.0",
-    "babel-preset-vue": "^2.0.2",
-    "change-case": "^4.1.2",
-    "eslint": "^8.25.0",
-    "eslint-plugin-vue": "^9.6.0",
-    "pascalcase": "^2.0.0",
-    "postcss": "^8.4.6",
-    "tailwindcss": "^3.0.18",
-    "vite": "^3.1.7",
-    "vite-plugin-dts": "^1.7.1",
-    "vue": "^3.2.40"
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
   }
-}
+}

package/dist/style.css

@@ -1 +0,0 @@
-@-webkit-keyframes btn-activity-in{0%,to{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scale(.98);transform:scale(.98)}}@keyframes btn-activity-in{0%,to{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scale(.98);transform:scale(.98)}}@-webkit-keyframes btn-activity-out{0%,to{-webkit-transform:scale(1);transform:scale(1)}70%{-webkit-transform:scale(.98);transform:scale(.98)}}@keyframes btn-activity-out{0%,to{-webkit-transform:scale(1);transform:scale(1)}70%{-webkit-transform:scale(.98);transform:scale(.98)}}.btn-activity-top,.btn.btn-activity-top,.btn-activity-bottom,.btn.btn-activity-bottom,.btn-activity-left,.btn.btn-activity-left,.btn-activity-right,.btn.btn-activity-right{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-transition:all 166.5ms ease-in;transition:all 166.5ms ease-in}.btn-activity-top .activity-indicator,.btn-activity-bottom .activity-indicator,.btn-activity-left .activity-indicator,.btn-activity-right .activity-indicator{opacity:0;position:absolute;visibility:hidden;-webkit-transition:opacity 333ms ease-in;transition:opacity 333ms ease-in}.btn-activity-top,.btn-activity-bottom{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.btn-activity-top .activity-indicator,.btn-activity-bottom .activity-indicator{margin-left:auto;margin-right:auto}.btn-activity-top{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.btn-activity-top .activity-indicator{padding-bottom:1em}.btn-activity-bottom .activity-indicator{padding-top:1em}.btn-activity-left,.btn-activity-right{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.btn-activity-left{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.btn-activity-left .activity-indicator{padding-right:1em}.btn-activity-right .activity-indicator{padding-left:1em}.btn-activity:not(.btn-link){-webkit-animation:btn-activity-in 333ms;animation:btn-activity-in 333ms}.btn-hide-activity:not(.btn-link){-webkit-animation:btn-activity-out 333ms;animation:btn-activity-out 333ms}.btn-activity.btn-hide-activity .activity-indicator{opacity:0}.btn-activity .activity-indicator{opacity:1;visibility:visible;position:relative;font-size:.55em}