@brumaombra/ui-vintage 0.6.8 → 0.7.3

package/src/components/theme-selector/ThemeSelector.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ComputerIcon, GibbousMoonIcon, Sun01Icon, Tick02Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { Button } from '../ui/button';
+import { Command, CommandGroup, CommandItem, CommandList } from '../ui/command';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
+
+const { t } = useI18n();
+const isOpen = ref(false);
+const currentTheme = ref('auto');
+let mediaQueryList: MediaQueryList | undefined;
+let handleSystemThemeChange: (() => void) | undefined;
+
+// Resolve the icon for each theme mode
+const getThemeIcon = (theme: string) => {
+    if (theme === 'light') {
+        return Sun01Icon;
+    } else if (theme === 'dark') {
+        return GibbousMoonIcon;
+    } else {
+        return ComputerIcon;
+    }
+};
+
+// Available themes
+const themes = computed(() => [
+    { id: 'light', label: t('uiVintage.theme.light') },
+    { id: 'dark', label: t('uiVintage.theme.dark') },
+    { id: 'auto', label: t('uiVintage.theme.auto') }
+]);
+
+// Check if system prefers dark mode
+const isSystemDarkPreferred = () => {
+    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+};
+
+// Apply the selected theme to the document
+const applyTheme = (theme: string) => {
+    document.documentElement.classList.remove('light', 'dark');
+
+    // If auto is selected, apply the theme based on system preference
+    if (theme === 'auto') {
+        if (isSystemDarkPreferred()) {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.add('light');
+        }
+    } else {
+        document.documentElement.classList.add(theme);
+    }
+
+    // Persist the selected theme in localStorage
+    localStorage.setItem('theme', theme);
+};
+
+// Handle theme selection from the menu
+const handleSelectTheme = (theme: string) => {
+    currentTheme.value = theme;
+    applyTheme(theme);
+    isOpen.value = false;
+};
+
+// Compute the icon for the currently selected theme
+const currentThemeIcon = computed(() => {
+    return getThemeIcon(currentTheme.value);
+});
+
+// Theme options for the menu
+const themeOptions = computed(() => {
+    return themes.value.map(theme => ({
+        key: theme.id,
+        label: theme.label,
+        icon: getThemeIcon(theme.id)
+    }));
+});
+
+// On component mounted
+onMounted(() => {
+    const savedTheme = localStorage.getItem('theme') || 'auto';
+    currentTheme.value = savedTheme;
+    applyTheme(savedTheme);
+    mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
+
+    // Handler to update the theme
+    handleSystemThemeChange = () => {
+        if (currentTheme.value === 'auto') {
+            applyTheme('auto');
+        }
+    };
+
+    // Listen for changes in system theme preference
+    mediaQueryList.addEventListener('change', handleSystemThemeChange);
+});
+
+// Cleanup system preference listener
+onUnmounted(() => {
+    if (mediaQueryList && handleSystemThemeChange) {
+        mediaQueryList.removeEventListener('change', handleSystemThemeChange);
+    }
+});
+</script>
+
+<template>
+    <Popover v-model:open="isOpen">
+        <!-- Trigger button showing the current theme icon -->
+        <PopoverTrigger as-child>
+            <Button variant="secondary" size="icon" :aria-label="t('uiVintage.theme.ariaLabel')">
+                <HugeiconsIcon :icon="currentThemeIcon" class="h-5 w-5" />
+            </Button>
+        </PopoverTrigger>
+
+        <!-- Theme options -->
+        <PopoverContent side="bottom" align="end" :side-offset="8" class="w-44 !p-0">
+            <Command :model-value="currentTheme">
+                <CommandList>
+                    <CommandGroup :heading="t('uiVintage.theme.title')">
+                        <CommandItem v-for="option in themeOptions" :key="option.key" :value="option.key" @select="handleSelectTheme(option.key)">
+                            <HugeiconsIcon :icon="option.icon" class="size-4" />
+                            <span class="flex-1">{{ option.label }}</span>
+                            <HugeiconsIcon :icon="Tick02Icon" class="ml-auto size-4 shrink-0" :class="currentTheme === option.key ? 'opacity-100' : 'opacity-0'" />
+                        </CommandItem>
+                    </CommandGroup>
+                </CommandList>
+            </Command>
+        </PopoverContent>
+    </Popover>
+</template>

package/src/components/theme-selector/index.ts

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

package/src/components/ui/alert/Alert.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { getSurfaceToneClasses } from "../../../lib/color-tokens"
+import { cn } from "../../../lib/utils"
+import { alertClasses, type AlertColors } from "."
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  color?: AlertColors["color"]
+}>()
+</script>
+
+<template>
+  <div data-slot="alert" role="alert" :class="cn(alertClasses(), getSurfaceToneClasses(props.color ?? 'gray'), props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/ui/alert/AlertDescription.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div data-slot="alert-description" :class="cn('col-start-2 grid justify-items-start gap-1 [&_p]:leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/ui/alert/AlertTitle.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div data-slot="alert-title" :class="cn('col-start-2 line-clamp-1 min-h-4 font-bold tracking-tight text-current', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/ui/alert/index.ts

@@ -0,0 +1,15 @@
+import type { ClassProp } from "class-variance-authority/types"
+import { cva } from "class-variance-authority"
+import type { ToneColor } from "../../../lib/color-tokens"
+
+export { default as Alert } from "./Alert.vue"
+export { default as AlertDescription } from "./AlertDescription.vue"
+export { default as AlertTitle } from "./AlertTitle.vue"
+
+export type AlertColors = {
+  color?: ToneColor | null | undefined
+}
+
+export const alertClasses: (props?: ClassProp) => string = cva(
+  "relative w-full rounded px-3 py-2 text-xs transition-colors duration-300 ease-in-out grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current sm:px-4 sm:py-3 sm:text-sm",
+)

package/src/components/ui/alert-dialog/AlertDialog.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { AlertDialogEmits, AlertDialogProps } from "reka-ui"
+import { AlertDialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<AlertDialogProps>()
+const emits = defineEmits<AlertDialogEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AlertDialogRoot v-slot="slotProps" data-slot="alert-dialog" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </AlertDialogRoot>
+</template>

package/src/components/ui/alert-dialog/AlertDialogAction.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { AlertDialogActionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogAction } from "reka-ui"
+import { cn } from "../../../lib/utils"
+import { buttonVariants } from '../button'
+
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+    <slot />
+  </AlertDialogAction>
+</template>

package/src/components/ui/alert-dialog/AlertDialogCancel.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { AlertDialogCancelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogCancel } from "reka-ui"
+import { cn } from "../../../lib/utils"
+import { buttonVariants } from '../button'
+
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogCancel v-bind="delegatedProps" :class="cn(
+    buttonVariants({ variant: 'secondary' }),
+    'mt-2 sm:mt-0',
+    props.class,
+  )">
+    <slot />
+  </AlertDialogCancel>
+</template>

package/src/components/ui/alert-dialog/AlertDialogContent.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { AlertDialogContentEmits, AlertDialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  AlertDialogContent,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "../../../lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<AlertDialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay data-slot="alert-dialog-overlay" class="fixed inset-0 z-50 bg-black/45 backdrop-blur-[2px] transition-[opacity,backdrop-filter] ease-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+    <AlertDialogContent data-slot="alert-dialog-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
+      'bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-[95%] max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-0 overflow-hidden rounded border border-border shadow-2xl duration-200 sm:max-w-lg',
+      props.class,
+    )
+      ">
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>

package/src/components/ui/alert-dialog/AlertDialogDescription.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { AlertDialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  AlertDialogDescription,
+} from "reka-ui"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogDescription data-slot="alert-dialog-description" v-bind="delegatedProps" :class="cn('text-xs leading-6 text-muted-foreground sm:text-sm', props.class)">
+    <slot />
+  </AlertDialogDescription>
+</template>

package/src/components/ui/alert-dialog/AlertDialogFooter.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div data-slot="alert-dialog-footer" :class="cn(
+    'flex flex-col-reverse gap-3 border-t border-border px-5 py-4 sm:flex-row-reverse sm:px-6',
+    props.class,
+  )
+    ">
+    <slot />
+  </div>
+</template>

package/src/components/ui/alert-dialog/AlertDialogHeader.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div data-slot="alert-dialog-header" :class="cn('flex flex-col gap-1.5 text-center sm:text-left', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/ui/alert-dialog/AlertDialogTitle.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { AlertDialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogTitle } from "reka-ui"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogTitle data-slot="alert-dialog-title" v-bind="delegatedProps" :class="cn('text-base font-semibold', props.class)">
+    <slot />
+  </AlertDialogTitle>
+</template>

package/src/components/ui/alert-dialog/AlertDialogTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AlertDialogTriggerProps } from "reka-ui"
+import { AlertDialogTrigger } from "reka-ui"
+
+const props = defineProps<AlertDialogTriggerProps>()
+</script>
+
+<template>
+  <AlertDialogTrigger data-slot="alert-dialog-trigger" v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
+</template>

package/src/components/ui/alert-dialog/index.ts

@@ -0,0 +1,9 @@
+export { default as AlertDialog } from "./AlertDialog.vue"
+export { default as AlertDialogAction } from "./AlertDialogAction.vue"
+export { default as AlertDialogCancel } from "./AlertDialogCancel.vue"
+export { default as AlertDialogContent } from "./AlertDialogContent.vue"
+export { default as AlertDialogDescription } from "./AlertDialogDescription.vue"
+export { default as AlertDialogFooter } from "./AlertDialogFooter.vue"
+export { default as AlertDialogHeader } from "./AlertDialogHeader.vue"
+export { default as AlertDialogTitle } from "./AlertDialogTitle.vue"
+export { default as AlertDialogTrigger } from "./AlertDialogTrigger.vue"

package/src/components/ui/badge/Badge.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { HugeiconsIcon } from "@hugeicons/vue"
+import { getSurfaceToneClasses, type ToneColor } from "../../../lib/color-tokens"
+import { cn } from "../../../lib/utils"
+
+type HugeiconsIconDefinition = readonly (readonly [string, { readonly [key: string]: string | number }])[]
+
+// Props
+const props = withDefaults(defineProps<{
+    text: string
+    icon?: HugeiconsIconDefinition | null
+    color?: ToneColor
+    class?: HTMLAttributes["class"]
+}>(), {
+    icon: null,
+    color: "gray"
+})
+</script>
+
+<template>
+    <span data-slot="badge" :class="cn('inline-flex w-fit items-center justify-center gap-1.5 whitespace-nowrap rounded border px-2 py-0.5 text-xs font-semibold transition-colors duration-300 ease-in-out', getSurfaceToneClasses(props.color), props.class)">
+        <HugeiconsIcon v-if="props.icon" :icon="props.icon" class="size-3.5 shrink-0" :stroke-width="1.8" />
+        {{ props.text }}
+    </span>
+</template>

package/src/components/ui/badge/index.ts

@@ -0,0 +1 @@
+export { default as Badge } from "./Badge.vue"

package/src/components/ui/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <nav
+    aria-label="breadcrumb"
+    data-slot="breadcrumb"
+    :class="props.class"
+  >
+    <slot />
+  </nav>
+</template>

package/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { MoreHorizontalIcon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/vue"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="breadcrumb-ellipsis"
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('flex size-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <HugeiconsIcon :icon="MoreHorizontalIcon" class="size-4" />
+    </slot>
+    <span class="sr-only">More</span>
+  </span>
+</template>

package/src/components/ui/breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <li
+    data-slot="breadcrumb-item"
+    :class="cn('inline-flex items-center gap-1.5', props.class)"
+  >
+    <slot />
+  </li>
+</template>

package/src/components/ui/breadcrumb/BreadcrumbLink.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Primitive } from "reka-ui"
+import { cn } from "../../../lib/utils"
+
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(), {
+  as: "a",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="breadcrumb-link"
+    :as="as"
+    :as-child="asChild"
+    :class="cn('hover:text-foreground transition-colors', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/components/ui/breadcrumb/BreadcrumbList.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <ol
+    data-slot="breadcrumb-list"
+    :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)"
+  >
+    <slot />
+  </ol>
+</template>

package/src/components/ui/breadcrumb/BreadcrumbPage.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="breadcrumb-page"
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    :class="cn('text-foreground font-normal', props.class)"
+  >
+    <slot />
+  </span>
+</template>

package/src/components/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { ArrowRight01Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/vue"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <li
+    data-slot="breadcrumb-separator"
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('[&>svg]:size-3.5', props.class)"
+  >
+    <slot>
+      <HugeiconsIcon :icon="ArrowRight01Icon" class="size-3.5" />
+    </slot>
+  </li>
+</template>

package/src/components/ui/breadcrumb/index.ts

@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from "./Breadcrumb.vue"
+export { default as BreadcrumbEllipsis } from "./BreadcrumbEllipsis.vue"
+export { default as BreadcrumbItem } from "./BreadcrumbItem.vue"
+export { default as BreadcrumbLink } from "./BreadcrumbLink.vue"
+export { default as BreadcrumbList } from "./BreadcrumbList.vue"
+export { default as BreadcrumbPage } from "./BreadcrumbPage.vue"
+export { default as BreadcrumbSeparator } from "./BreadcrumbSeparator.vue"

package/src/components/ui/busy/Busy.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { Loading03Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/vue"
+import { cn } from "../../../lib/utils"
+
+interface BusyProps {
+  show?: boolean
+  label?: string
+  class?: HTMLAttributes["class"]
+  overlayClass?: HTMLAttributes["class"]
+}
+
+const props = withDefaults(defineProps<BusyProps>(), {
+  show: false,
+  label: "Loading...",
+})
+</script>
+
+<template>
+  <Transition name="busy-fade">
+    <div v-if="props.show" data-slot="busy-overlay" :class="cn('fixed inset-0 z-50 flex items-center justify-center bg-black/45 backdrop-blur-[2px] transition-[opacity,backdrop-filter] duration-300 ease-out', props.overlayClass)">
+      <div data-slot="busy-content" role="status" aria-live="polite" aria-busy="true" :class="cn('bg-card text-card-foreground flex w-72 flex-col items-center justify-center gap-4 rounded border border-border px-8 py-7 text-center shadow-2xl', props.class)">
+        <slot>
+          <HugeiconsIcon data-slot="busy-spinner" :icon="Loading03Icon" class="size-10 animate-spin text-primary" />
+          <span v-if="props.label" data-slot="busy-label" class="text-xs font-semibold text-foreground sm:text-sm">
+            {{ props.label }}
+          </span>
+        </slot>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.busy-fade-enter-active,
+.busy-fade-leave-active {
+  transition: opacity 0.3s ease-out;
+}
+
+.busy-fade-enter-from,
+.busy-fade-leave-to {
+  opacity: 0;
+}
+</style>

package/src/components/ui/busy/index.ts

@@ -0,0 +1 @@
+export { default as Busy } from "./Busy.vue"

package/src/components/ui/button/Button.vue

@@ -0,0 +1,24 @@
+<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 "."
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "button",
+})
+</script>
+
+<template>
+  <Primitive data-slot="button" :data-variant="variant" :data-size="size" :as="as" :as-child="asChild" :class="cn(buttonVariants({ variant, size }), props.class)">
+    <slot />
+  </Primitive>
+</template>