@vue-interface/btn-activity 3.0.0 → 4.0.0

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

@@ -0,0 +1,83 @@
+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: {
+    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(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");
+    });
+    function s() {
+      e.value = !e.value;
+    }
+    const d = {
+      status: e,
+      toggle: s
+    };
+    return (a, o) => (l(), b("button", {
+      type: "button",
+      disabled: t.disabled,
+      class: c([
+        "btn",
+        t.variant,
+        t.size,
+        {
+          "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));
+  }
+});
+export {
+  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

@@ -0,0 +1,2 @@
+(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

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

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

@@ -0,0 +1,48 @@
+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;
+    label: string;
+    indicatorSize: ActivityIndicatorSize;
+    orientation: "top" | "bottom" | "left" | "right";
+    variant: string;
+}, {}, {}, {}, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-interface/btn-activity",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "A Vue activity button component.",
   "type": "module",
   "main": "./dist/btn-activity.umd.cjs",
@@ -17,7 +17,7 @@
   "browserslist": "last 2 versions, > 0.5%, ie >= 11",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/vue-interface/btn-activity"
+    "url": "git+https://github.com/vue-interface/vue-interface.github.io"
   },
   "keywords": [
     "Form",
@@ -28,15 +28,22 @@
     "Bootstrap"
   ],
   "author": "Justin Kimbrell",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
-    "url": "https://github.com/vue-interface/btn-activity"
+    "url": "https://github.com/vue-interface/vue-interface.github.io"
   },
   "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.0",
-    "@vue-interface/btn": "4.0.0"
+    "@vue-interface/activity-indicator": "3.0.1",
+    "@vue-interface/btn": "5.0.0"
   },
   "scripts": {
     "dev": "vite",

package/CHANGELOG.md

@@ -1,7 +0,0 @@
-# @vue-interface/btn-activity
-
-## 3.0.0
-
-### Major Changes
-
-- 94f6f15: Add support for TailwindCSS v4

package/demo.css

@@ -1,4 +0,0 @@
-@import "tailwindcss";
-@import "./index.css";
-
-@source "../activity-indicator/src/**/*.vue";

package/docs/btn-activity.md

@@ -1,222 +0,0 @@
----
-title: Button Activity
----
-
-<script setup>
-import '../demo.css'
-import { ref, onMounted } from 'vue'
-import BtnActivity from '../src/BtnActivity.vue';
-import { Dots, Spinner, Pulse } from '@vue-interface/activity-indicator'
-
-const activity = ref(false)
-
-/* #region setup */
-const onClick = (event, { toggle }) => {
-    toggle()
-    
-    setTimeout(() => {
-        toggle()
-    }, 2000)
-}
-/* #endregion setup */
-
-/* #region activity */
-onMounted(() => {
-    const toggle = () => setTimeout(() => {
-        activity.value = !activity.value
-        toggle()
-    }, 1000)
-    
-    toggle()
-})
-/* #endregion activity */
-</script>
-
-# Button Activity
-
-The `btn-activity` component provides an interactive button with built-in activity indicators for async operations. It extends the standard [button](/packages/btn/docs/btn) and [activity-indicator](/packages/activity-indicator/docs/activity-indicator) components to create these buttons.
-
-## Basic Usage
-
-<div class="mb-5 flex gap-2">
-    <!-- #region basicUsage -->
-    <div><btn-activity :indicator="Dots" @click="onClick">Dots</btn-activity></div>
-    <div><btn-activity :indicator="Spinner" @click="onClick">Spinner</btn-activity></div>
-    <div><btn-activity :indicator="Pulse" @click="onClick">Pulse</btn-activity></div>
-    <!-- #endregion basicUsage -->
-</div>
-
-<<< @/packages/btn-activity/docs/btn-activity.md#basicUsage{html}
-<<< @/packages/btn-activity/docs/btn-activity.md#setup{js}
-
-## Dots
-
-<div class="mb-5 flex gap-2">
-    <!-- #region dots -->
-    <div><btn-activity :indicator="Dots" size="btn-sm" @click="onClick">Click Me!</btn-activity></div>
-    <div><btn-activity :indicator="Dots" size="btn-md" @click="onClick">Click Me!</btn-activity></div>
-    <div><btn-activity :indicator="Dots" size="btn-lg" @click="onClick">Click Me!</btn-activity></div>
-    <!-- #endregion dots -->
-</div>
-
-::: details Show Code
-<<< @/packages/btn-activity/docs/btn-activity.md#dots{html}
-:::
-
-## Spinner
-
-<div class="flex gap-2 mb-5">
-  <!-- #region spinner -->
-  <div><btn-activity :indicator="Spinner" size="btn-sm" @click="onClick">Click Me!</btn-activity></div>
-  <div><btn-activity :indicator="Spinner" size="btn-md" @click="onClick">Click Me!</btn-activity></div>
-  <div><btn-activity :indicator="Spinner" size="btn-lg" @click="onClick">Click Me!</btn-activity></div>
-  <!-- #endregion spinner -->
-</div>
-
-::: details Show Code
-<<< @/packages/btn-activity/docs/btn-activity.md#spinner{html}
-:::
-
-## Pulse
-
-<div class="flex gap-2 mb-5">
-  <!-- #region pulse -->
-  <div><btn-activity :indicator="Pulse" size="btn-sm" @click="onClick">Click Me!</btn-activity></div>
-  <div><btn-activity :indicator="Pulse" size="btn-md" @click="onClick">Click Me!</btn-activity></div>
-  <div><btn-activity :indicator="Pulse" size="btn-lg" @click="onClick">Click Me!</btn-activity></div>
-  <!-- #endregion pulse -->
-</div>
-
-::: details Show Code
-<<< @/packages/btn-activity/docs/btn-activity.md#pulse{html}
-:::
-
-## Orientation
-
-Control the position of the activity indicator relative to the button label using the `orientation` prop.
-
-<div class="flex gap-2 mb-5">
-  <!-- #region orientation -->
-  <div><btn-activity :indicator="Spinner" orientation="top" @click="onClick">Orientate Top</btn-activity></div>
-  <div><btn-activity :indicator="Spinner" orientation="bottom" @click="onClick">Orientate Bottom</btn-activity></div>
-  <div><btn-activity :indicator="Spinner" orientation="left" @click="onClick">Orientate Left</btn-activity></div>
-  <div><btn-activity :indicator="Spinner" orientation="right" @click="onClick">Orientate Right</btn-activity></div>
-  <!-- #endregion orientation -->
-</div>
-
-::: details Show Code
-<<< @/packages/btn-activity/docs/btn-activity.md#orientation{html}
-:::
-
-## Block Activity Buttons
-
-Full-width buttons with different indicator orientations using the `block` prop.
-
-<div class="flex flex-col gap-4">
-  <!-- #region block -->
-  <btn-activity :indicator="Spinner" block orientation="top" @click="onClick">Spinner Top</btn-activity>
-  <btn-activity :indicator="Spinner" block orientation="bottom" @click="onClick">Spinner Bottom</btn-activity>
-  <btn-activity :indicator="Spinner" block orientation="left" @click="onClick">Spinner Left</btn-activity>
-  <btn-activity :indicator="Spinner" block orientation="right" @click="onClick">Spinner Right</btn-activity>
-  <!-- #endregion block -->
-</div>
-
-::: details Show Code
-<<< @/packages/btn-activity/docs/btn-activity.md#block{html}
-:::
-
-## Variants
-
-Button activity supports all standard button color variants.
-
-<div class="flex flex-wrap gap-2 mb-5">
-  <!-- #region variants -->
-  <btn-activity :indicator="Spinner" variant="btn-secondary" @click="onClick">btn-secondary</btn-activity>
-  <btn-activity :indicator="Spinner" variant="btn-warning" @click="onClick">btn-warning</btn-activity>
-  <btn-activity :indicator="Spinner" variant="btn-danger" @click="onClick">btn-danger</btn-activity>
-  <btn-activity :indicator="Spinner" variant="btn-success" @click="onClick">btn-success</btn-activity>
-  <!-- #endregion variants -->
-</div>
-
-::: details Show Code
-<<< @/packages/btn-activity/docs/btn-activity.md#variants{html}
-:::
-
-## Activity Attribute
-
-Control the activity state programmatically using the `activity` prop.
-
-<div class="flex gap-2 mb-5">
-  <!-- #region activityAttribute -->
-  <btn-activity :indicator="Spinner" :activity="activity">
-    {{ activity ? 'On' : 'Off' }}
-  </btn-activity>
-  <btn-activity :indicator="Spinner" :activity="activity" :disabled="true">
-    {{ activity ? 'On' : 'Off' }}
-  </btn-activity>
-  <!-- #endregion activityAttribute -->
-</div>
-
-::: details Show Code
-<<< @/packages/btn-activity/docs/btn-activity.md#activityAttribute{html}
-:::
-
-<<< @/packages/btn-activity/docs/btn-activity.md#activity{js}
-
-## Disabled State
-
-Buttons can be disabled to prevent user interaction.
-
-<div class="mb-5">
-  <!-- #region disabled -->
-  <btn-activity :indicator="Spinner" disabled @click="onClick">Spinner</btn-activity>
-  <!-- #endregion disabled -->
-</div>
-
-::: details Show Code
-<<< @/packages/btn-activity/docs/btn-activity.md#disabled{html}
-:::
-
-## Label Attribute
-
-Use the `label` prop to set button text without using the default slot.
-
-<div class="mb-5">
-  <!-- #region labelAttribute -->
-  <btn-activity :indicator="Spinner" label="Some Text Here" @click="onClick"></btn-activity>
-  <!-- #endregion labelAttribute -->
-</div>
-
-::: details Show Code
-<<< @/packages/btn-activity/docs/btn-activity.md#labelAttribute{html}
-:::
-
-## Custom Element
-
-Combine slot content with the label attribute and disabled states.
-
-<div class="flex gap-2 mb-5">
-  <!-- #region customElement -->
-  <btn-activity :indicator="Spinner" @click="onClick">Label</btn-activity>
-  <btn-activity :indicator="Spinner" label="Some Text Here" disabled @click="onClick"></btn-activity>
-  <!-- #endregion customElement -->
-</div>
-
-::: details Show Code
-<<< @/packages/btn-activity/docs/btn-activity.md#customElement{html}
-:::
-
-## Click Event
-
-The click event handler receives a toggle function to control the activity state.
-
-<div class="flex gap-2 mb-5">
-  <!-- #region clickEvent -->
-  <btn-activity :indicator="Spinner" class="btn-primary" @click="onClick">Enabled</btn-activity>
-  <btn-activity :indicator="Spinner" disabled @click="onClick">Disabled</btn-activity>
-  <!-- #endregion clickEvent -->
-</div>
-
-::: details Show Code
-<<< @/packages/btn-activity/docs/btn-activity.md#clickEvent{html}
-:::

package/index.html

@@ -1,143 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <title>BtnActivity</title>
-    </head>
-    <body>
-        <div id="app" class="container mx-auto">
-            <h1 class="text-5xl mb-5">btn-activity</h1>
-            
-            <div class="mb-5 flex gap-2">
-                <div><btn-activity :indicator="Dots()" @click="onClick">Dots</btn-activity></div>
-                <div><btn-activity :indicator="Spinner()" @click="onClick">Spinner</btn-activity></div>
-                <div><btn-activity :indicator="Pulse()" @click="onClick">Pulse</btn-activity></div>
-            </div>
-
-            <h3 class="text-2xl mt-6 mb-3">Dots</h3>
-
-            <div class="mb-5 flex gap-2">
-                <div><btn-activity :indicator="Dots()" size="btn-sm" @click="onClick">Click Me!</btn-activity></div>
-                <div><btn-activity :indicator="Dots()" size="btn-md" @click="onClick">Click Me!</btn-activity></div>
-                <div><btn-activity :indicator="Dots()" size="btn-lg" @click="onClick">Click Me!</btn-activity></div>
-            </div>
-
-            <h3 class="text-2xl mt-6 mb-3">Spinner</h3>
-
-            <div class="mb-5 flex gap-2">
-                <div><btn-activity :indicator="Spinner()" size="btn-sm" @click="onClick">Click Me!</btn-activity></div>
-                <div><btn-activity :indicator="Spinner()" size="btn-md" @click="onClick">Click Me!</btn-activity></div>
-                <div><btn-activity :indicator="Spinner()" size="btn-lg" @click="onClick">Click Me!</btn-activity></div>
-            </div>
-
-            <h3 class="text-2xl mt-6 mb-3">Pulse</h3>
-
-            <div class="mb-5 flex gap-2">
-                <div><btn-activity :indicator="Pulse()" size="btn-sm" @click="onClick">Click Me!</btn-activity></div>
-                <div><btn-activity :indicator="Pulse()" size="btn-md" @click="onClick">Click Me!</btn-activity></div>
-                <div><btn-activity :indicator="Pulse()" size="btn-lg" @click="onClick">Click Me!</btn-activity></div>
-            </div>
-
-            <h2 class="text-2xl mt-6 mb-3">Orientation</h2>
-
-            <div class="mb-5 flex gap-2">
-                <div><btn-activity :indicator="Spinner()" orientation="top" @click="onClick">Orientate Top</btn-activity></div>
-                <div><btn-activity :indicator="Spinner()" orientation="bottom" @click="onClick">Orientate Bottom</btn-activity></div>
-                <div><btn-activity :indicator="Spinner()" orientation="left" @click="onClick">Orientate Left</btn-activity></div>
-                <div><btn-activity :indicator="Spinner()" orientation="right" @click="onClick">Orientate Right</btn-activity></div>
-            </div>
-
-            <h2 class="text-2xl mt-6 mb-3">Block</h2>
-
-            <div class="mb-5 flex-col gap-4">
-                <btn-activity :indicator="Spinner()" block orientation="top" @click="onClick">Spinner Top</btn-activity>
-                <btn-activity :indicator="Spinner()" block orientation="bottom" @click="onClick">Spinner Bottom</btn-activity>
-                <btn-activity :indicator="Spinner()" block orientation="left" @click="onClick">Spinner Left</btn-activity>
-                <btn-activity :indicator="Spinner()" block orientation="right" @click="onClick">Spinner Right</btn-activity>
-            </div>
-
-            <h2 class="text-2xl mt-6 mb-3">Variants</h2>
-
-            <div class="mb-5 flex gap-2">
-                <btn-activity :indicator="Spinner()" variant="btn-secondary" @click="onClick">btn-success</btn-activity>
-                <btn-activity :indicator="Spinner()" variant="btn-warning" @click="onClick">btn-warning</btn-activity>
-                <btn-activity :indicator="Spinner()" variant="btn-danger" @click="onClick">btn-danger</btn-activity>
-                <btn-activity :indicator="Spinner()" variant="btn-success" @click="onClick">btn-success</btn-activity>
-            </div>
-
-            <h2 class="text-2xl mt-6 mb-3">Activity Attribute</h2>
-
-            <div class="flex gap-2">
-                <btn-activity :indicator="Spinner()" :activity="activity">
-                    {{ activity ? 'On' : 'Off' }}
-                </btn-activity>
-
-                <btn-activity :indicator="Spinner()" :activity="activity" :disabled="true">
-                    {{ activity ? 'On' : 'Off' }}
-                </btn-activity>
-            </div>
-
-            <h2 class="text-2xl mt-6 mb-3">Disabled</h2>
-
-            <btn-activity :indicator="Spinner()" disabled @click="onClick">Spinner Top</btn-activity>
-
-            <h2 class="text-2xl mt-6 mb-3">Label Attribute</h2>
-
-            <btn-activity :indicator="Spinner()" label="Some Text Here" @click="onClick"></btn-activity>
-
-            <h3 class="text-2xl mt-6 mb-3">Custom Element</h3>
-
-            <div class="flex gap-2">
-                <btn-activity :indicator="Spinner()" @click="onClick">Label</btn-activity>
-                <btn-activity :indicator="Spinner()" label="Some Text Here" disabled @click="onClick"></btn-activity>
-            </div>
-
-            <h3 class="text-2xl mt-6 mb-3">Click Event</h3>
-
-            <btn-activity :indicator="Spinner()" class="btn-primary mr-1" @click="onClick">Enabled</btn-activity>
-            <btn-activity :indicator="Spinner()" disabled @click="onClick">Disabled</btn-activity>
-
-        </div>
-
-        <script type="module">
-            import './demo.css';
-            import { createApp } from 'vue/dist/vue.esm-bundler';
-            import { BtnActivity } from './index.ts';
-            import { Dots, Spinner, Pulse } from '@vue-interface/activity-indicator';
-
-            const vue = createApp({
-                components: {
-                    BtnActivity
-                },
-                methods: {
-                    onClick(event, { toggle }) {
-                        toggle();
-
-                        setTimeout(() => {
-                            toggle();
-                        }, 2000);
-                    }
-                },
-                data() {
-                    return {
-                        Dots: () => Dots,
-                        Spinner: () => Spinner,
-                        Pulse: () => Pulse,
-                        activity: false
-                    }
-                },
-                mounted() {
-                    const toggle = () => setTimeout(() => {
-                        this.activity = !this.activity;
-
-                        toggle();
-                    }, 1000);
-
-                    toggle()
-                }
-            })
-            .mount('#app');
-        </script>
-    </body>
-</html>

package/index.ts

@@ -1,5 +0,0 @@
-import BtnActivity from './src/BtnActivity.vue';
-
-export {
-    BtnActivity
-};

package/src/BtnActivity.vue

@@ -1,102 +0,0 @@
-<script lang="ts" setup>
-import { ActivityIndicator } from '@vue-interface/activity-indicator';
-import { ref, watch, watchEffect, type Component, type 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;
-};
-
-const props = withDefaults(defineProps<BtnActivityProps>(), {
-    indicatorSize: 'xs',
-    label: undefined,
-    orientation: 'right',
-    variant: 'btn-primary',
-    size: 'btn-md'
-});
-
-export type BtnActivityContext = {
-    status: Ref<boolean>;
-    toggle: () => void;
-}
-
-const emit = defineEmits<{
-    click: [event: MouseEvent, context: BtnActivityContext];
-    'hide-activity': [];
-    'show-activity': [];
-}>();
-
-const status = ref(props.activity);
-
-watchEffect(() => {
-    status.value = props.activity;
-});
-
-watch(status, (value) => {
-    if(value) {
-        emit('show-activity');
-    } 
-    else {
-        emit('hide-activity');
-    }
-});
-
-function toggle() {
-    status.value = !status.value;
-}
-
-const context = {
-    status,
-    toggle,
-};
-</script>
-
-<template>
-    <button
-        type="button"
-        :disabled="disabled"
-        :class="[
-            'btn',
-            variant,
-            size,
-            {
-                'w-full': block,
-                'gap-1': ['xs', 'sm'].includes(indicatorSize),
-                'gap-2': ['md', 'lg', 'xl'].includes(indicatorSize),
-                'flex-col-reverse': orientation === 'top',
-                'flex-col': orientation === 'bottom',
-                'flex-row-reverse': orientation === 'left',
-                'inline-flex items-center justify-center': true,
-                'opacity-50 cursor-not-allowed': disabled,
-            }
-        ]"
-        @click="emit('click', $event, context)"> 
-        <slot>{{ label }}</slot>
-        <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">
-            <ActivityIndicator
-                v-if="status"
-                :type="indicator"
-                :size="indicatorSize"
-                :class="{
-                    'pt-1': orientation === 'top',
-                    'pb-1': orientation === 'bottom',
-                    'pr-1': orientation === 'left',
-                    'pl-1': orientation === 'right',
-                }" />
-        </Transition>
-    </button>
-</template>

package/tsconfig.json

@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "customConditions": ["source"],
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "jsx": "preserve",
-    "jsxImportSource": "vue"
-  },
-  "include": [
-    "index.ts",
-    "src/*.ts",
-    "src/*.vue",
-  ],
-  "exclude": ["node_modules"]
-}

package/vite.config.js

@@ -1,47 +0,0 @@
-import tailwindcss from '@tailwindcss/vite';
-import vue from '@vitejs/plugin-vue';
-import { pascalCase } from 'change-case';
-import path from 'path';
-import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
-import pkg from './package.json';
-
-const fileName = pkg.name.split('/')[1];
-
-const external = [
-    ...(pkg.dependencies ? Object.keys(pkg.dependencies) : []),
-    ...(pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [])
-];
-
-export default ({ command }) => defineConfig({
-    build: {
-        sourcemap: command === 'build',
-        lib: {
-            entry: path.resolve(__dirname, 'index.ts'),
-            name: pascalCase(fileName),
-            fileName,
-        },
-        rollupOptions: {
-            external,
-            output: {
-                globals: external.reduce((carry, dep) => {
-                    return Object.assign(carry, {
-                        [dep]: pascalCase(dep)
-                    });
-                }, {}),
-            }
-        },
-        watch: !process.env.NODE_ENV && {
-            include: [
-                './tailwindcss/**/*.js'
-            ]
-        }
-    },
-    plugins: [
-        vue(),
-        dts({
-            entryRoot: path.resolve(__dirname, './'),
-        }),
-        tailwindcss()
-    ],
-});