@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.5 → 1.0.7

package/src/ui/avatar-fallback.vue

@@ -1,38 +1,38 @@
-<template>
-  <AvatarFallback
-    data-slot="avatar-fallback"
-    :class="fallbackClass"
-    v-bind="$attrs"
-  >
-    <slot />
-  </AvatarFallback>
-</template>
-
-<script setup lang="ts">
-import { cn } from './utils';
-import { AvatarFallback } from '@/shadcn/avatar';
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-});
-const fallbackClass = cn(
-  'bg-muted flex size-full items-center justify-center rounded-full',
-  // Text sizing based on parent avatar size
-  '[.size-6_&]:text-xs', // xs avatar
-  '[.size-8_&]:text-xs', // sm avatar
-  '[.size-10_&]:text-sm', // md avatar (default)
-  '[.size-12_&]:text-base', // lg avatar
-  '[.size-16_&]:text-lg', // xl avatar
-  '[.size-20_&]:text-xl', // 2xl avatar
-  '[.size-6_&_svg]:size-3', // xs avatar - 12px icon
-  '[.size-8_&_svg]:size-3.5', // sm avatar - 14px icon
-  '[.size-10_&_svg]:size-4', // md avatar - 16px icon (default)
-  '[.size-12_&_svg]:size-5', // lg avatar - 20px icon
-  '[.size-16_&_svg]:size-6', // xl avatar - 24px icon
-  '[.size-20_&_svg]:size-8', // 2xl avatar - 32px icon
-  '[&_svg]:pointer-events-none [&_svg]:shrink-0',
-  props.class
-);
-</script>
+<template>
+  <AvatarFallback
+    data-slot="avatar-fallback"
+    :class="fallbackClass"
+    v-bind="$attrs"
+  >
+    <slot />
+  </AvatarFallback>
+</template>
+
+<script setup lang="ts">
+import { cn } from './utils';
+import { AvatarFallback } from '@/shadcn/avatar';
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+});
+const fallbackClass = cn(
+  'bg-muted flex size-full items-center justify-center rounded-full',
+  // Text sizing based on parent avatar size
+  '[.size-6_&]:text-xs', // xs avatar
+  '[.size-8_&]:text-xs', // sm avatar
+  '[.size-10_&]:text-sm', // md avatar (default)
+  '[.size-12_&]:text-base', // lg avatar
+  '[.size-16_&]:text-lg', // xl avatar
+  '[.size-20_&]:text-xl', // 2xl avatar
+  '[.size-6_&_svg]:size-3', // xs avatar - 12px icon
+  '[.size-8_&_svg]:size-3.5', // sm avatar - 14px icon
+  '[.size-10_&_svg]:size-4', // md avatar - 16px icon (default)
+  '[.size-12_&_svg]:size-5', // lg avatar - 20px icon
+  '[.size-16_&_svg]:size-6', // xl avatar - 24px icon
+  '[.size-20_&_svg]:size-8', // 2xl avatar - 32px icon
+  '[&_svg]:pointer-events-none [&_svg]:shrink-0',
+  props.class
+);
+</script>

package/src/ui/avatar-group.vue

@@ -1,32 +1,32 @@
-<template>
-  <div :class="groupClass" v-bind="$attrs">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { cn } from './utils';
-
-const props = defineProps({
-  spacing: {
-    type: String,
-    default: 'normal',
-    validator: (val: string) => ['tight', 'normal', 'loose'].includes(val),
-  },
-  class: {
-    type: String,
-    default: '',
-  },
-});
-
-const groupClass = computed(() =>
-  cn(
-    'flex',
-    props.spacing === 'tight' && '-space-x-1',
-    props.spacing === 'normal' && '-space-x-2',
-    props.spacing === 'loose' && '-space-x-3',
-    props.class
-  )
-);
-</script>
+<template>
+  <div :class="groupClass" v-bind="$attrs">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { cn } from './utils';
+
+const props = defineProps({
+  spacing: {
+    type: String,
+    default: 'normal',
+    validator: (val: string) => ['tight', 'normal', 'loose'].includes(val),
+  },
+  class: {
+    type: String,
+    default: '',
+  },
+});
+
+const groupClass = computed(() =>
+  cn(
+    'flex',
+    props.spacing === 'tight' && '-space-x-1',
+    props.spacing === 'normal' && '-space-x-2',
+    props.spacing === 'loose' && '-space-x-3',
+    props.class
+  )
+);
+</script>

package/src/ui/avatar-image.vue

@@ -1,19 +1,19 @@
-<template>
-  <AvatarImage
-    as="img"
-    data-slot="avatar-image"
-    :src="src"
-    :alt="alt"
-    :class="cn('aspect-square size-full', $attrs.class)"
-    v-bind="$attrs"
-  />
-</template>
-
-<script setup lang="ts">
-import { cn } from './utils';
-import { AvatarImage } from '@/shadcn/avatar';
-const props = defineProps({
-  src: String,
-  alt: String,
-});
-</script>
+<template>
+  <AvatarImage
+    as="img"
+    data-slot="avatar-image"
+    :src="src"
+    :alt="alt"
+    :class="cn('aspect-square size-full', $attrs.class)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script setup lang="ts">
+import { cn } from './utils';
+import { AvatarImage } from '@/shadcn/avatar';
+const props = defineProps({
+  src: String,
+  alt: String,
+});
+</script>

package/src/ui/avatar.vue

@@ -1,32 +1,32 @@
-<template>
-  <Avatar
-    data-slot="avatar"
-    :class="[
-      'relative flex shrink-0 overflow-hidden rounded-full',
-      size === 'xs' ? 'size-6' : '',
-      size === 'sm' ? 'size-8' : '',
-      size === 'md' ? 'size-10' : '',
-      size === 'lg' ? 'size-12' : '',
-      size === 'xl' ? 'size-16' : '',
-      size === '2xl' ? 'size-20' : '',
-      $attrs.class || ''
-    ]"
-    v-bind="$attrs"
-  >
-    <slot />
-  </Avatar>
-</template>
-
-<script setup>
-import { defineProps, useAttrs } from 'vue';
-import { Avatar } from '@/shadcn/avatar';
-
-const { size } = defineProps({
-  size: {
-    type: String,
-    default: 'md',
-    validator: v => ['xs','sm','md','lg','xl','2xl'].includes(v)
-  }
-});
-const $attrs = useAttrs();
-</script>
+<template>
+  <Avatar
+    data-slot="avatar"
+    :class="[
+      'relative flex shrink-0 overflow-hidden rounded-full',
+      size === 'xs' ? 'size-6' : '',
+      size === 'sm' ? 'size-8' : '',
+      size === 'md' ? 'size-10' : '',
+      size === 'lg' ? 'size-12' : '',
+      size === 'xl' ? 'size-16' : '',
+      size === '2xl' ? 'size-20' : '',
+      $attrs.class || ''
+    ]"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Avatar>
+</template>
+
+<script setup>
+import { defineProps, useAttrs } from 'vue';
+import { Avatar } from '@/shadcn/avatar';
+
+const { size } = defineProps({
+  size: {
+    type: String,
+    default: 'md',
+    validator: v => ['xs','sm','md','lg','xl','2xl'].includes(v)
+  }
+});
+const $attrs = useAttrs();
+</script>

package/src/ui/badge.vue

@@ -1,90 +1,90 @@
-
-<script setup lang="ts">
-import { computed, defineProps, useAttrs } from 'vue';
-import { cn } from './utils';
-import { X } from 'lucide-vue-next';
-
-const props = defineProps({
-  variant: {
-    type: String,
-    default: 'default',
-    validator: v => [
-      'default', 'secondary', 'destructive', 'outline',
-      'soft-primary', 'soft-secondary', 'soft-success', 'soft-warning', 'soft-danger', 'soft-info', 'soft-purple', 'soft-pink', 'soft-indigo', 'soft-orange', 'soft-teal', 'soft-neutral'
-    ].includes(v),
-  },
-  size: {
-    type: String,
-    default: 'md',
-    validator: v => ['sm', 'md', 'lg'].includes(v),
-  },
-  dismissible: Boolean,
-  onDismiss: Function,
-});
-
-const $attrs = useAttrs();
-
-const variantClasses: Record<string, string> = {
-  default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/90',
-  secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/90',
-  destructive: 'border-transparent bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-  outline: 'text-foreground hover:bg-accent hover:text-accent-foreground',
-  'soft-primary': 'border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-100 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-300 dark:hover:bg-blue-900',
-  'soft-secondary': 'border-gray-200 bg-gray-50 text-gray-700 hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800',
-  'soft-success': 'border-green-200 bg-green-50 text-green-700 hover:bg-green-100 dark:border-green-800 dark:bg-green-950 dark:text-green-300 dark:hover:bg-green-900',
-  'soft-warning': 'border-yellow-200 bg-yellow-50 text-yellow-700 hover:bg-yellow-100 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-300 dark:hover:bg-yellow-900',
-  'soft-danger': 'border-red-200 bg-red-50 text-red-700 hover:bg-red-100 dark:border-red-800 dark:bg-red-950 dark:text-red-300 dark:hover:bg-red-900',
-  'soft-info': 'border-cyan-200 bg-cyan-50 text-cyan-700 hover:bg-cyan-100 dark:border-cyan-800 dark:bg-cyan-950 dark:text-cyan-300 dark:hover:bg-cyan-900',
-  'soft-purple': 'border-purple-200 bg-purple-50 text-purple-700 hover:bg-purple-100 dark:border-purple-800 dark:bg-purple-950 dark:text-purple-300 dark:hover:bg-purple-900',
-  'soft-pink': 'border-pink-200 bg-pink-50 text-pink-700 hover:bg-pink-100 dark:border-pink-800 dark:bg-pink-950 dark:text-pink-300 dark:hover:bg-pink-900',
-  'soft-indigo': 'border-indigo-200 bg-indigo-50 text-indigo-700 hover:bg-indigo-100 dark:border-indigo-800 dark:bg-indigo-950 dark:text-indigo-300 dark:hover:bg-indigo-900',
-  'soft-orange': 'border-orange-200 bg-orange-50 text-orange-700 hover:bg-orange-100 dark:border-orange-800 dark:bg-orange-950 dark:text-orange-300 dark:hover:bg-orange-900',
-  'soft-teal': 'border-teal-200 bg-teal-50 text-teal-700 hover:bg-teal-100 dark:border-teal-800 dark:bg-teal-950 dark:text-teal-300 dark:hover:bg-teal-900',
-  'soft-neutral': 'border-stone-200 bg-stone-50 text-stone-700 hover:bg-stone-100 dark:border-stone-700 dark:bg-stone-900 dark:text-stone-300 dark:hover:bg-stone-800',
-};
-
-const sizeClasses: Record<string, string> = {
-  sm: 'text-[12px] px-[4px] py-[2px] rounded-[4px] [&>svg:not(.dismiss-icon)]:size-[10px] gap-1',
-  md: 'text-[14px] px-[6px] py-[2px] rounded-[4px] [&>svg:not(.dismiss-icon)]:size-[12px] gap-1',
-  lg: 'text-[16px] px-[8px] py-[4px] rounded-[6px] [&>svg:not(.dismiss-icon)]:size-[14px] gap-1',
-};
-
-function getDismissIconClasses(size: string) {
-  switch (size) {
-    case 'sm':
-      return { iconClass: 'h-3 w-3', buttonClass: 'p-0.5' };
-    case 'lg':
-      return { iconClass: 'h-4 w-4', buttonClass: 'p-1' };
-    default:
-      return { iconClass: 'h-3.5 w-3.5', buttonClass: 'p-0.5' };
-  }
-}
-
-const { iconClass, buttonClass } = getDismissIconClasses(props.size);
-</script>
-
-<template>
-  <span
-    data-slot="badge"
-    :class="cn(
-      'inline-flex items-center justify-center border font-medium w-fit whitespace-nowrap shrink-0 [&>svg:not(.dismiss-icon)]:pointer-events-none [&>svg:not(.dismiss-icon)]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
-      variantClasses[props.variant],
-      sizeClasses[props.size],
-      props.dismissible ? 'pr-0.5 mr-0' : '',
-      $attrs.class,
-    )"
-    v-bind="$attrs"
-  >
-    <slot />
-    <template v-if="props.dismissible && props.onDismiss">
-      <button
-        type="button"
-        @click.stop="props.onDismiss()"
-        :class="cn('dismiss-icon rounded-sm opacity-70 hover:opacity-100 focus:opacity-100 focus:outline-none focus:ring-1 focus:ring-ring transition-opacity', buttonClass)"
-        aria-label="Remove"
-      >
-        <X :class="iconClass" />
-      </button>
-    </template>
-  </span>
-</template>
+
+<script setup lang="ts">
+import { computed, defineProps, useAttrs } from 'vue';
+import { cn } from './utils';
+import { X } from 'lucide-vue-next';
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'default',
+    validator: v => [
+      'default', 'secondary', 'destructive', 'outline',
+      'soft-primary', 'soft-secondary', 'soft-success', 'soft-warning', 'soft-danger', 'soft-info', 'soft-purple', 'soft-pink', 'soft-indigo', 'soft-orange', 'soft-teal', 'soft-neutral'
+    ].includes(v),
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: v => ['sm', 'md', 'lg'].includes(v),
+  },
+  dismissible: Boolean,
+  onDismiss: Function,
+});
+
+const $attrs = useAttrs();
+
+const variantClasses: Record<string, string> = {
+  default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/90',
+  secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/90',
+  destructive: 'border-transparent bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+  outline: 'text-foreground hover:bg-accent hover:text-accent-foreground',
+  'soft-primary': 'border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-100 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-300 dark:hover:bg-blue-900',
+  'soft-secondary': 'border-gray-200 bg-gray-50 text-gray-700 hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800',
+  'soft-success': 'border-green-200 bg-green-50 text-green-700 hover:bg-green-100 dark:border-green-800 dark:bg-green-950 dark:text-green-300 dark:hover:bg-green-900',
+  'soft-warning': 'border-yellow-200 bg-yellow-50 text-yellow-700 hover:bg-yellow-100 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-300 dark:hover:bg-yellow-900',
+  'soft-danger': 'border-red-200 bg-red-50 text-red-700 hover:bg-red-100 dark:border-red-800 dark:bg-red-950 dark:text-red-300 dark:hover:bg-red-900',
+  'soft-info': 'border-cyan-200 bg-cyan-50 text-cyan-700 hover:bg-cyan-100 dark:border-cyan-800 dark:bg-cyan-950 dark:text-cyan-300 dark:hover:bg-cyan-900',
+  'soft-purple': 'border-purple-200 bg-purple-50 text-purple-700 hover:bg-purple-100 dark:border-purple-800 dark:bg-purple-950 dark:text-purple-300 dark:hover:bg-purple-900',
+  'soft-pink': 'border-pink-200 bg-pink-50 text-pink-700 hover:bg-pink-100 dark:border-pink-800 dark:bg-pink-950 dark:text-pink-300 dark:hover:bg-pink-900',
+  'soft-indigo': 'border-indigo-200 bg-indigo-50 text-indigo-700 hover:bg-indigo-100 dark:border-indigo-800 dark:bg-indigo-950 dark:text-indigo-300 dark:hover:bg-indigo-900',
+  'soft-orange': 'border-orange-200 bg-orange-50 text-orange-700 hover:bg-orange-100 dark:border-orange-800 dark:bg-orange-950 dark:text-orange-300 dark:hover:bg-orange-900',
+  'soft-teal': 'border-teal-200 bg-teal-50 text-teal-700 hover:bg-teal-100 dark:border-teal-800 dark:bg-teal-950 dark:text-teal-300 dark:hover:bg-teal-900',
+  'soft-neutral': 'border-stone-200 bg-stone-50 text-stone-700 hover:bg-stone-100 dark:border-stone-700 dark:bg-stone-900 dark:text-stone-300 dark:hover:bg-stone-800',
+};
+
+const sizeClasses: Record<string, string> = {
+  sm: 'text-[12px] px-[4px] py-[2px] rounded-[4px] [&>svg:not(.dismiss-icon)]:size-[10px] gap-1',
+  md: 'text-[14px] px-[6px] py-[2px] rounded-[4px] [&>svg:not(.dismiss-icon)]:size-[12px] gap-1',
+  lg: 'text-[16px] px-[8px] py-[4px] rounded-[6px] [&>svg:not(.dismiss-icon)]:size-[14px] gap-1',
+};
+
+function getDismissIconClasses(size: string) {
+  switch (size) {
+    case 'sm':
+      return { iconClass: 'h-3 w-3', buttonClass: 'p-0.5' };
+    case 'lg':
+      return { iconClass: 'h-4 w-4', buttonClass: 'p-1' };
+    default:
+      return { iconClass: 'h-3.5 w-3.5', buttonClass: 'p-0.5' };
+  }
+}
+
+const { iconClass, buttonClass } = getDismissIconClasses(props.size);
+</script>
+
+<template>
+  <span
+    data-slot="badge"
+    :class="cn(
+      'inline-flex items-center justify-center border font-medium w-fit whitespace-nowrap shrink-0 [&>svg:not(.dismiss-icon)]:pointer-events-none [&>svg:not(.dismiss-icon)]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+      variantClasses[props.variant],
+      sizeClasses[props.size],
+      props.dismissible ? 'pr-0.5 mr-0' : '',
+      $attrs.class,
+    )"
+    v-bind="$attrs"
+  >
+    <slot />
+    <template v-if="props.dismissible && props.onDismiss">
+      <button
+        type="button"
+        @click.stop="props.onDismiss()"
+        :class="cn('dismiss-icon rounded-sm opacity-70 hover:opacity-100 focus:opacity-100 focus:outline-none focus:ring-1 focus:ring-ring transition-opacity', buttonClass)"
+        aria-label="Remove"
+      >
+        <X :class="iconClass" />
+      </button>
+    </template>
+  </span>
+</template>

package/src/ui/breadcrumb-item.vue

@@ -1,11 +1,11 @@
-<template>
-  <li>
-    <span :class="['transition-colors hover:text-foreground', $attrs.class || '']" v-bind="$attrs">
-      <slot />
-    </span>
-  </li>
-</template>
-
-<script setup>
-// No props needed for base BreadcrumbItem
-</script>
+<template>
+  <li>
+    <span :class="['transition-colors hover:text-foreground', $attrs.class || '']" v-bind="$attrs">
+      <slot />
+    </span>
+  </li>
+</template>
+
+<script setup>
+// No props needed for base BreadcrumbItem
+</script>

package/src/ui/breadcrumb-separator.vue

@@ -1,9 +1,9 @@
-<template>
-  <li aria-hidden="true">
-    <span class="mx-1 select-none text-muted-foreground">/</span>
-  </li>
-</template>
-
-<script setup>
-// No props needed for base BreadcrumbSeparator
-</script>
+<template>
+  <li aria-hidden="true">
+    <span class="mx-1 select-none text-muted-foreground">/</span>
+  </li>
+</template>
+
+<script setup>
+// No props needed for base BreadcrumbSeparator
+</script>

package/src/ui/breadcrumb.vue

@@ -1,11 +1,11 @@
-<template>
-  <nav class="w-full" aria-label="breadcrumb">
-    <ol class="flex flex-wrap items-center gap-1 text-sm text-muted-foreground">
-      <slot />
-    </ol>
-  </nav>
-</template>
-
-<script setup>
-// No props needed for base Breadcrumb
-</script>
+<template>
+  <nav class="w-full" aria-label="breadcrumb">
+    <ol class="flex flex-wrap items-center gap-1 text-sm text-muted-foreground">
+      <slot />
+    </ol>
+  </nav>
+</template>
+
+<script setup>
+// No props needed for base Breadcrumb
+</script>

package/src/ui/button.vue

@@ -1,76 +1,76 @@
-<template>
-  <component
-    :is="asChild ? 'span' : 'button'"
-    data-slot="button"
-    :class="cn(baseClass, variantClass, sizeClass, $attrs.class)"
-    v-bind="$attrs"
-    :type="asChild ? undefined : type"
-    :disabled="disabled"
-    @click="$emit('click', $event)"
-  >
-    <slot />
-  </component>
-</template>
-
-<script setup>
-import { computed, defineProps, useAttrs, defineEmits } from 'vue';
-import { cn } from '@/lib/utils';
-
-const props = defineProps({
-  variant: {
-    type: String,
-    default: 'default',
-  },
-  size: {
-    type: String,
-    default: 'default',
-  },
-  type: {
-    type: String,
-    default: 'button',
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  asChild: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const $attrs = useAttrs();
-const emit = defineEmits(['click']);
-
-const baseClass = 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive';
-
-const variantClass = computed(() => {
-  switch (props.variant) {
-    case 'destructive':
-      return 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60';
-    case 'outline':
-      return 'border border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground dark:bg-transparent dark:border-border dark:hover:bg-accent';
-    case 'secondary':
-      return 'bg-secondary text-secondary-foreground hover:bg-secondary/80';
-    case 'ghost':
-      return 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50';
-    case 'link':
-      return 'text-primary underline-offset-4 hover:underline';
-    default:
-      return 'bg-primary text-primary-foreground hover:bg-primary/90';
-  }
-});
-
-const sizeClass = computed(() => {
-  switch (props.size) {
-    case 'sm':
-      return 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5';
-    case 'lg':
-      return 'h-10 rounded-md px-6 has-[>svg]:px-4';
-    case 'icon':
-      return 'size-9 rounded-md';
-    default:
-      return 'h-9 px-4 py-2 has-[>svg]:px-3';
-  }
-});
-</script>
+<template>
+  <component
+    :is="asChild ? 'span' : 'button'"
+    data-slot="button"
+    :class="cn(baseClass, variantClass, sizeClass, $attrs.class)"
+    v-bind="$attrs"
+    :type="asChild ? undefined : type"
+    :disabled="disabled"
+    @click="$emit('click', $event)"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup>
+import { computed, defineProps, useAttrs, defineEmits } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'default',
+  },
+  size: {
+    type: String,
+    default: 'default',
+  },
+  type: {
+    type: String,
+    default: 'button',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  asChild: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const $attrs = useAttrs();
+const emit = defineEmits(['click']);
+
+const baseClass = 'cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive';
+
+const variantClass = computed(() => {
+  switch (props.variant) {
+    case 'destructive':
+      return 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60';
+    case 'outline':
+      return 'border border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground dark:bg-transparent dark:border-border dark:hover:bg-accent';
+    case 'secondary':
+      return 'bg-secondary text-secondary-foreground hover:bg-secondary/80';
+    case 'ghost':
+      return 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50';
+    case 'link':
+      return 'text-primary underline-offset-4 hover:underline';
+    default:
+      return 'bg-primary text-primary-foreground hover:bg-primary/90';
+  }
+});
+
+const sizeClass = computed(() => {
+  switch (props.size) {
+    case 'sm':
+      return 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5';
+    case 'lg':
+      return 'h-10 rounded-md px-6 has-[>svg]:px-4';
+    case 'icon':
+      return 'size-9 rounded-md';
+    default:
+      return 'h-9 px-4 py-2 has-[>svg]:px-3';
+  }
+});
+</script>