feat(KAN-18): redesign foundational UI components

resources/js/components/ui/button/Button.vue

@@ -1,29 +1,47 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { ButtonVariants } from "."
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "."
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import type { ButtonVariants } from ".";
+import { Primitive } from "reka-ui";
+import { computed } from "vue";
+import { Spinner } from "@/components/ui/spinner";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from ".";
 
 interface Props extends PrimitiveProps {
-  variant?: ButtonVariants["variant"]
-  size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
+    variant?: ButtonVariants["variant"];
+    size?: ButtonVariants["size"];
+    class?: HTMLAttributes["class"];
+    disabled?: boolean;
+    loading?: boolean;
+    loadingLabel?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  as: "button",
-})
+    as: "button",
+    disabled: false,
+    loading: false,
+});
+
+const isDisabled = computed(() => props.disabled || props.loading);
 </script>
 
 <template>
-  <Primitive
-    data-slot="button"
-    :as="as"
-    :as-child="asChild"
-    :class="cn(buttonVariants({ variant, size }), props.class)"
-  >
-    <slot />
-  </Primitive>
+    <Primitive
+        data-slot="button"
+        :data-loading="loading ? '' : undefined"
+        :as="as"
+        :as-child="asChild"
+        :disabled="isDisabled"
+        :aria-disabled="isDisabled ? 'true' : undefined"
+        :aria-busy="loading ? 'true' : undefined"
+        :class="cn(buttonVariants({ variant, size }), props.class)"
+    >
+        <Spinner
+            v-if="loading"
+            data-slot="button-spinner"
+            :label="loadingLabel"
+        />
+        <slot />
+    </Primitive>
 </template>