@sveda-ai/vue 0.1.0

package/src/plugin.ts

@@ -0,0 +1,164 @@
+import { SvedaClient } from '@sveda-ai/core';
+import { inject, type App, type InjectionKey } from 'vue';
+import { applySvedaAppearance, type SvedaAppearance } from './appearance';
+import {
+  createSvedaI18n,
+  installSvedaI18n,
+  type SvedaI18n,
+  type SvedaMessages,
+} from './i18n/index';
+import en from './i18n/locales/en';
+import ru from './i18n/locales/ru';
+import { chatComponentI18nKeys } from './lib/chatI18nKeys';
+
+export interface SvedaModelOption {
+  id: string;
+  label: string;
+  supportsThinking?: boolean;
+}
+
+export interface SvedaQuickPrompt {
+  label: string;
+  prompt: string;
+}
+
+export interface SvedaBrand {
+  name?: string;
+  logoUrl?: string;
+}
+
+export interface SvedaPluginOptions {
+  endpoints: {
+    stream: string;
+    message?: string;
+    histories?: string;
+    documentsExtract?: string;
+  };
+  protocolMode?: 'sveda' | 'vercel';
+  headers?: Record<string, string> | (() => Record<string, string>);
+  credentials?: RequestCredentials;
+  locale?: string;
+  messages?: Record<string, Record<string, string>>;
+  brand?: SvedaBrand;
+  models?: SvedaModelOption[];
+  quickPrompts?: SvedaQuickPrompt[];
+  appearance?: SvedaAppearance | null;
+  theme?: 'light' | 'dark';
+  hostEmbed?: boolean;
+  hideLauncher?: boolean;
+}
+
+export interface SvedaConfig {
+  brand: {
+    name: string;
+    logoUrl: string | null;
+  };
+  models: SvedaModelOption[];
+  quickPrompts: SvedaQuickPrompt[];
+}
+
+export interface SvedaPlugin {
+  client: SvedaClient;
+  i18n: SvedaI18n;
+  config: SvedaConfig;
+  install(app: App): void;
+}
+
+export const SvedaClientKey: InjectionKey<SvedaClient> = Symbol('sveda-client');
+
+export const SvedaConfigKey: InjectionKey<SvedaConfig> = Symbol('sveda-config');
+
+export const SvedaHostEmbedKey: InjectionKey<boolean> = Symbol('sveda-host-embed');
+
+export const SvedaFillHostKey: InjectionKey<boolean> = Symbol('sveda-fill-host');
+
+export const SvedaHideLauncherKey: InjectionKey<boolean> = Symbol('sveda-hide-launcher');
+
+const DEFAULT_CONFIG: SvedaConfig = {
+  brand: { name: 'Sveda', logoUrl: null },
+  models: [],
+  quickPrompts: [],
+};
+
+export function createSveda(options: SvedaPluginOptions): SvedaPlugin {
+  const client = new SvedaClient({
+    endpoints: options.endpoints,
+    protocolMode: options.protocolMode,
+    headers: options.headers,
+    credentials: options.credentials,
+  });
+
+  const messages: Record<string, SvedaMessages> = {};
+  const mergeMessages = (locale: string, localeMessages: SvedaMessages) => {
+    messages[locale] = { ...(messages[locale] ?? {}), ...localeMessages };
+  };
+
+  for (const [locale, localeMessages] of Object.entries({ en, ru })) {
+    mergeMessages(locale, localeMessages);
+  }
+  for (const [locale, localeMessages] of Object.entries(chatComponentI18nKeys)) {
+    mergeMessages(locale, localeMessages);
+  }
+  for (const [locale, localeMessages] of Object.entries(options.messages ?? {})) {
+    mergeMessages(locale, localeMessages);
+  }
+
+  const i18n = createSvedaI18n({
+    locale: options.locale ?? 'en',
+    messages,
+  });
+
+  const config: SvedaConfig = {
+    brand: {
+      name: options.brand?.name ?? 'Sveda',
+      logoUrl: options.brand?.logoUrl ?? null,
+    },
+    models: options.models ?? [],
+    quickPrompts: options.quickPrompts ?? [],
+  };
+
+  if (options.appearance !== undefined || options.theme !== undefined) {
+    if (options.appearance === null && options.theme === undefined) {
+      applySvedaAppearance(null);
+    } else {
+      applySvedaAppearance({
+        ...(options.appearance && typeof options.appearance === 'object' ? options.appearance : {}),
+        ...(options.theme ? { theme: options.theme } : {}),
+      });
+    }
+  }
+
+  return {
+    client,
+    i18n,
+    config,
+    install(app: App) {
+      app.provide(SvedaClientKey, client);
+      app.provide(SvedaConfigKey, config);
+      app.provide(SvedaHostEmbedKey, Boolean(options.hostEmbed));
+      app.provide(SvedaHideLauncherKey, Boolean(options.hideLauncher));
+      installSvedaI18n(app, i18n);
+    },
+  };
+}
+
+export function useSvedaClient(): SvedaClient {
+  const client = inject(SvedaClientKey, null);
+  if (!client) {
+    throw new Error('[sveda] Sveda plugin is not installed. Call app.use(createSveda(...)) first.');
+  }
+
+  return client;
+}
+
+export function useSvedaConfig(): SvedaConfig {
+  return inject(SvedaConfigKey, DEFAULT_CONFIG);
+}
+
+const svedaPlugin = {
+  install(app: App, options: SvedaPluginOptions) {
+    createSveda(options).install(app);
+  },
+};
+
+export default svedaPlugin;

package/src/styles.css

@@ -0,0 +1,5 @@
+@import './theme.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/theme.css

@@ -0,0 +1,95 @@
+:where(.sveda-chat, sveda-chat) {
+  --sveda-background: 210 20% 98%;
+  --sveda-foreground: 0 0% 3.9%;
+  --sveda-card: 0 0% 100%;
+  --sveda-card-foreground: 0 0% 3.9%;
+  --sveda-popover: 0 0% 100%;
+  --sveda-popover-foreground: 0 0% 3.9%;
+  --sveda-primary: 0 0% 9%;
+  --sveda-primary-foreground: 0 0% 98%;
+  --sveda-secondary: 0 0% 92.1%;
+  --sveda-secondary-foreground: 0 0% 9%;
+  --sveda-muted: 0 0% 96.1%;
+  --sveda-muted-foreground: 0 0% 45.1%;
+  --sveda-accent: 0 0% 96.1%;
+  --sveda-accent-foreground: 0 0% 9%;
+  --sveda-destructive: 0 84.2% 60.2%;
+  --sveda-destructive-foreground: 0 0% 98%;
+  --sveda-border: 220 13% 91%;
+  --sveda-input: 220 14% 96%;
+  --sveda-ring: 0 0% 3.9%;
+  --sveda-radius: 0;
+  --sveda-brand: 0 0% 9%;
+  --sveda-brand-foreground: 0 0% 98%;
+  --sveda-surface: color-mix(in hsl, hsl(var(--sveda-background)) 95%, hsl(0 0% 0%));
+}
+
+.sveda-chat,
+sveda-chat {
+  --color-background: hsl(var(--sveda-background));
+  --color-foreground: hsl(var(--sveda-foreground));
+  --color-card: hsl(var(--sveda-card));
+  --color-card-foreground: hsl(var(--sveda-card-foreground));
+  --color-popover: hsl(var(--sveda-popover));
+  --color-popover-foreground: hsl(var(--sveda-popover-foreground));
+  --color-primary: hsl(var(--sveda-primary));
+  --color-primary-foreground: hsl(var(--sveda-primary-foreground));
+  --color-secondary: hsl(var(--sveda-secondary));
+  --color-secondary-foreground: hsl(var(--sveda-secondary-foreground));
+  --color-muted: hsl(var(--sveda-muted));
+  --color-muted-foreground: hsl(var(--sveda-muted-foreground));
+  --color-accent: hsl(var(--sveda-accent));
+  --color-accent-foreground: hsl(var(--sveda-accent-foreground));
+  --color-destructive: hsl(var(--sveda-destructive));
+  --color-destructive-foreground: hsl(var(--sveda-destructive-foreground));
+  --color-border: hsl(var(--sveda-border));
+  --color-input: hsl(var(--sveda-input));
+  --color-ring: hsl(var(--sveda-ring));
+  --color-brand-primary-purple: hsl(var(--sveda-brand));
+  --color-brand-primary-purple-foreground: hsl(var(--sveda-brand-foreground));
+  --radius: var(--sveda-radius);
+  --radius-xs: var(--sveda-radius);
+  --radius-sm: var(--sveda-radius);
+  --radius-md: var(--sveda-radius);
+  --radius-lg: var(--sveda-radius);
+  --radius-xl: var(--sveda-radius);
+  --radius-2xl: var(--sveda-radius);
+  --radius-3xl: var(--sveda-radius);
+  --radius-4xl: var(--sveda-radius);
+}
+
+:where(.dark .sveda-chat, .dark sveda-chat, .sveda-chat.dark, sveda-chat.dark) {
+  --sveda-background: 222.2 47.4% 11.2%;
+  --sveda-foreground: 210 40% 98%;
+  --sveda-card: 222.2 47.4% 14%;
+  --sveda-card-foreground: 210 40% 98%;
+  --sveda-popover: 222.2 47.4% 14%;
+  --sveda-popover-foreground: 210 40% 98%;
+  --sveda-primary: 210 40% 98%;
+  --sveda-primary-foreground: 222.2 47.4% 11.2%;
+  --sveda-secondary: 217.2 32.6% 17.5%;
+  --sveda-secondary-foreground: 210 40% 98%;
+  --sveda-muted: 217.2 32.6% 17.5%;
+  --sveda-muted-foreground: 215 20.2% 65.1%;
+  --sveda-accent: 217.2 32.6% 17.5%;
+  --sveda-accent-foreground: 210 40% 98%;
+  --sveda-destructive: 0 62.8% 30.6%;
+  --sveda-destructive-foreground: 210 40% 98%;
+  --sveda-border: 217.2 32.6% 17.5%;
+  --sveda-input: 217.2 32.6% 17.5%;
+  --sveda-ring: 212.7 26.8% 83.9%;
+  --sveda-brand: 210 40% 98%;
+  --sveda-brand-foreground: 222.2 47.4% 11.2%;
+}
+
+.sveda-chat-surface {
+  background-color: var(
+    --sveda-surface,
+    color-mix(in hsl, hsl(var(--sveda-background)) 95%, hsl(0 0% 0%))
+  );
+}
+
+body.sveda-chat-immersive-mode {
+  overflow: hidden;
+  overscroll-behavior: none;
+}

package/src/theme.test.mjs

@@ -0,0 +1,80 @@
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { test } from 'node:test';
+import { fileURLToPath } from 'node:url';
+
+const dir = dirname(fileURLToPath(import.meta.url));
+const theme = readFileSync(join(dir, 'theme.css'), 'utf8');
+const chat = readFileSync(join(dir, 'components/shell/SvedaChat.vue'), 'utf8');
+const appearance = readFileSync(join(dir, 'appearance.ts'), 'utf8');
+const trigger = readFileSync(join(dir, 'components/shell/SvedaMinimizedTrigger.vue'), 'utf8');
+const selectContent = readFileSync(join(dir, 'ui/select/SelectContent.vue'), 'utf8');
+const tooltipContent = readFileSync(join(dir, 'ui/tooltip/TooltipContent.vue'), 'utf8');
+const switchUi = readFileSync(join(dir, 'ui/switch/Switch.vue'), 'utf8');
+
+test('theme.css exposes zero-specificity public sveda tokens without cycling host variables', () => {
+  assert.match(theme, /:where\(\.sveda-chat, sveda-chat\)/);
+  assert.match(theme, /--sveda-background:/);
+  assert.match(theme, /--sveda-foreground:/);
+  assert.match(theme, /--sveda-brand:/);
+  assert.match(theme, /--sveda-radius:\s*0/);
+  assert.match(theme, /\.sveda-chat-surface/);
+  assert.match(theme, /body\.sveda-chat-immersive-mode/);
+  assert.doesNotMatch(theme, /--background:\s*var\(--sveda-background\)/);
+  assert.doesNotMatch(theme, /--foreground:\s*var\(--sveda-foreground\)/);
+  assert.match(chat, /'sveda-chat'/);
+});
+
+test('portaled select and tooltip keep sveda tokens and popover backgrounds', () => {
+  assert.match(selectContent, /sveda-chat/);
+  assert.match(selectContent, /bg-popover/);
+  assert.doesNotMatch(selectContent, /bg-input text-popover-foreground/);
+  assert.match(tooltipContent, /sveda-chat/);
+  assert.match(tooltipContent, /bg-popover/);
+});
+
+test('appearance helper injects radius and token declarations onto .sveda-chat', () => {
+  assert.match(appearance, /SVEDA_APPEARANCE_STYLE_ID = 'sveda-appearance'/);
+  assert.match(appearance, /export const applySvedaAppearance/);
+  assert.match(appearance, /export const resolveSvedaAppearance/);
+  assert.match(appearance, /SVEDA_APPEARANCE_PRESETS/);
+  assert.match(appearance, /preset: 'lms'/);
+  assert.match(appearance, /preset: 'ocean'/);
+  assert.match(appearance, /preset: 'forest'/);
+  assert.match(appearance, /preset: 'sunset'/);
+  assert.match(appearance, /preset: 'sand'/);
+  assert.match(appearance, /'166 72% 32%'/);
+  assert.match(appearance, /\.sveda-chat\{/);
+  assert.match(appearance, /\.dark \.sveda-chat,\.sveda-chat\.dark/);
+  assert.match(appearance, /sanitizeSvedaTheme/);
+  assert.match(appearance, /theme === 'dark'/);
+  assert.match(appearance, /theme === 'light'/);
+  assert.match(appearance, /SVEDA_LAUNCHER_ICON_IDS/);
+  assert.match(appearance, /useSvedaLauncher/);
+  assert.match(appearance, /sanitizeSvedaLauncher/);
+  assert.match(appearance, /sanitizeSvedaLauncherImage/);
+  assert.match(appearance, /SVEDA_LAUNCHER_IMAGE_MAX_BYTES/);
+});
+
+test('thinking switch stays a pill with a raised thumb', () => {
+  assert.match(switchUi, /rounded-full/);
+  assert.match(switchUi, /shadow-inner/);
+  assert.match(switchUi, /size === 'sm'/);
+  assert.doesNotMatch(switchUi, /rounded-\[var\(--sveda-radius\)\]/);
+});
+
+test('minimized trigger uses launcher label, icon, and image', () => {
+  assert.match(trigger, /svedaLauncherIconComponent/);
+  assert.match(chat, /chat.launcherLabel/);
+  assert.match(chat, /chat.launcherIcon/);
+  assert.match(chat, /chat.launcherImage/);
+});
+
+test('toast viewport stays inside the chat window', () => {
+  const viewport = readFileSync(join(dir, 'ui/toast/ToastViewport.vue'), 'utf8');
+  assert.match(viewport, /pointer-events-none/);
+  assert.match(viewport, /absolute inset-x-0 bottom-0/);
+  assert.match(viewport, /max-h-48/);
+  assert.doesNotMatch(viewport, /max-h-screen/);
+});

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

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

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

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'
+import { cn } from '../../lib/utils.js'
+import { buttonVariants } from '../button/index.js'
+
+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/ui/alert-dialog/AlertDialogCancel.vue

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

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

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import {
+  AlertDialogContent,
+  type AlertDialogContentEmits,
+  type AlertDialogContentProps,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { cn } from '../../lib/utils.js'
+
+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
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <AlertDialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'sveda-chat fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-card text-card-foreground p-6 shadow-lg duration-200 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] main-sm:rounded-[var(--sveda-radius)]',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>

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

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

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../lib/utils.js'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse main-sm:flex-row main-sm:justify-end main-sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

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

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

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

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

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

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

package/src/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/ui/badge/Badge.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../lib/utils.js'
+import { type BadgeVariants, badgeVariants } from './index.js'
+
+const props = defineProps<{
+  variant?: BadgeVariants['variant']
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn(badgeVariants({ variant }), props.class)">
+    <slot />
+  </div>
+</template>

package/src/ui/badge/index.ts

@@ -0,0 +1,27 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Badge } from './Badge.vue'
+
+export const badgeVariants = cva(
+  'inline-flex items-center rounded-[var(--sveda-radius)] border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        primary:
+          'border-transparent text-white bg-brand-primary-purple',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-card-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>

package/src/ui/button/Button.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { ref } from 'vue'
+import { cn } from '../../lib/utils.js'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
+import { type ButtonVariants, buttonVariants, buttonHoverStyles } from './index.js'
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+})
+
+const isHovered = ref<boolean>(false);
+
+const handleTouchStart = (): void => {
+  isHovered.value = true;
+};
+
+const handleTouchEnd = (): void => {
+  setTimeout(() => {
+    isHovered.value = false;
+  }, 150);
+};
+
+const handleMouseEnter = (): void => {
+  isHovered.value = true;
+};
+
+const handleMouseLeave = (): void => {
+  isHovered.value = false;
+};
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="
+        cn(
+            buttonVariants({ variant, size }),
+            { [buttonHoverStyles[variant ?? 'default']]: isHovered },
+            props.class
+        )"
+    @touchstart.passive="handleTouchStart"
+    @touchend.passive="handleTouchEnd"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
+    <slot />
+  </Primitive>
+</template>