@brickflow/ui 0.0.48 → 0.0.49

package/dist/module.json

@@ -4,7 +4,7 @@
   },
   "configKey": "brickflowUi",
   "name": "@brickflow/ui",
-  "version": "0.0.48",
+  "version": "0.0.49",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"

package/dist/runtime/components/Button/index.vue

@@ -3,6 +3,7 @@
     colorClasses: Record<string, Record<string, string>>
     colorDefault: string
     loadingIconName: string
+    loadingIconTransition: string
     sizeClasses: Record<string, string>
     sizeDefault: string
     sizeIconClasses: Record<string, string>
@@ -15,6 +16,7 @@
 <script setup lang="ts">
   import type { RouteLocationRaw } from 'vue-router'
 
+  import { twMerge } from 'tailwind-merge'
   import { computed, shallowRef } from 'vue'
 
   import Icon from '../Icon/index.vue'
@@ -58,10 +60,9 @@
   const isButton = computed(() => props.to === undefined)
   const classes = computed(() => [
     UI_STYLE.base,
-    sizeClasses[props.size],
+    twMerge(sizeClasses[props.size], props.square && UI_STYLE.state.square),
     colorClasses[props.color][props.variant],
     props.block && UI_STYLE.state.block,
-    props.square && UI_STYLE.state.square,
     disabled.value && UI_STYLE.state.disabled,
   ])
 
@@ -93,25 +94,30 @@
     }"
     @contextmenu.prevent
   >
-    <span
-      v-if="$slots.leading || props.icon || props.loading"
-      :class="UI_STYLE.slot.leading"
+    <Transition
+      name="poof"
+      mode="out-in"
     >
-      <slot name="leading">
+      <span v-if="props.loading">
         <Icon
-          v-if="props.loading"
           :name="UI_CONFIG.loadingIconName"
-          :class="UI_STYLE.state.loading"
+          :class="[UI_STYLE.state.loading, sizeIconClasses[props.size]]"
           aria-hidden="true"
         />
-        <Icon
-          v-else
-          :name="props.icon!"
-          :class="sizeIconClasses[props.size]"
-          aria-hidden="true"
-        />
-      </slot>
-    </span>
+      </span>
+      <span
+        v-else-if="$slots.leading || props.icon"
+        :class="UI_STYLE.slot.leading"
+      >
+        <slot name="leading">
+          <Icon
+            :name="props.icon!"
+            :class="sizeIconClasses[props.size]"
+            aria-hidden="true"
+          />
+        </slot>
+      </span>
+    </Transition>
 
     <span
       v-if="$slots.default"

package/dist/runtime/components/Button/size.demo.vue

@@ -43,5 +43,19 @@
         </Button>
       </div>
     </div>
+    <div class="flex flex-wrap items-center gap-3">
+      <div
+        v-for="(_, size) in buttonConfig.sizeClasses"
+        :key="size"
+        class="flex flex-col items-center gap-1"
+      >
+        <span class="text-xs text-zinc-500">{{ size }}</span>
+        <Button
+          :icon="firstIconName"
+          :size="size"
+          square
+        ></Button>
+      </div>
+    </div>
   </div>
 </template>

package/dist/runtime/components/Button/state.demo.vue

@@ -5,15 +5,26 @@
 </script>
 
 <script lang="ts" setup>
-  import { buttonConfig } from '#brickflow-ui-icons'
+  import { ref } from 'vue'
+
+  import { buttonConfig, firstIconName } from '#brickflow-ui-icons'
 
   import Button from './index.vue'
 
   const firstColorClasses = Object.values(buttonConfig.colorClasses)[0] ?? {}
+
+  const stateActive = ref(true)
 </script>
 
 <template>
   <div class="flex flex-wrap items-center gap-3">
+    <button
+      type="button"
+      class="cursor-pointer rounded-xl bg-blue-500 px-3 py-2"
+      @click="stateActive = !stateActive"
+    >
+      {{ stateActive ? 'On' : 'Off' }}
+    </button>
     <div class="basis-full">
       <div class="relative flex w-fit flex-col items-start gap-3 pl-13">
         <div class="absolute top-0 left-0 z-0 size-full object-cover pt-7 pl-13">
@@ -44,14 +55,15 @@
             class="flex flex-col items-stretch gap-2"
           >
             <Button
-              disabled
+              :disabled="stateActive"
               :color="color"
               :variant="variant"
             >
               Disabled
             </Button>
             <Button
-              loading
+              :loading="stateActive"
+              :icon="firstIconName"
               :color="color"
               :variant="variant"
             >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickflow/ui",
-  "version": "0.0.48",
+  "version": "0.0.49",
   "type": "module",
   "description": "brickflow UI Nuxt module.",
   "files": [
@@ -36,6 +36,7 @@
     "@tailwindcss/vite": "4.3.3",
     "fantasticon": "4.1.0",
     "jiti": "2.7.0",
+    "tailwind-merge": "3.6.0",
     "tailwindcss": "4.3.3"
   },
   "devDependencies": {