birus-ui 0.0.0-stage → 0.3.0

package/dist/tailwind-preset.js

@@ -0,0 +1,70 @@
+/**
+ * Preset Tailwind compartilhável para qualquer projeto Vue ou React que adote o birusUI.
+ */
+export const birusTailwindPreset = {
+  darkMode: ['class', '[data-birus-mode="dark"]'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['var(--birus-font-sans, Inter, system-ui, sans-serif)'],
+        mono: ['var(--birus-font-mono, "JetBrains Mono", ui-monospace, monospace)'],
+      },
+      colors: {
+        bg: 'hsl(var(--birus-bg) / <alpha-value>)',
+        fg: 'hsl(var(--birus-fg) / <alpha-value>)',
+        surface: {
+          DEFAULT: 'hsl(var(--birus-surface) / <alpha-value>)',
+          hover: 'hsl(var(--birus-surface-hover) / <alpha-value>)',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--birus-card) / <alpha-value>)',
+          fg: 'hsl(var(--birus-card-fg) / <alpha-value>)',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--birus-popover) / <alpha-value>)',
+          fg: 'hsl(var(--birus-popover-fg) / <alpha-value>)',
+        },
+        primary: {
+          DEFAULT: 'hsl(var(--birus-primary) / <alpha-value>)',
+          fg: 'hsl(var(--birus-primary-fg) / <alpha-value>)',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--birus-secondary) / <alpha-value>)',
+          fg: 'hsl(var(--birus-secondary-fg) / <alpha-value>)',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--birus-muted) / <alpha-value>)',
+          fg: 'hsl(var(--birus-muted-fg) / <alpha-value>)',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--birus-accent) / <alpha-value>)',
+          fg: 'hsl(var(--birus-accent-fg) / <alpha-value>)',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--birus-destructive) / <alpha-value>)',
+          fg: 'hsl(var(--birus-destructive-fg) / <alpha-value>)',
+        },
+        success: {
+          DEFAULT: 'hsl(var(--birus-success) / <alpha-value>)',
+          fg: 'hsl(var(--birus-success-fg) / <alpha-value>)',
+        },
+        warning: {
+          DEFAULT: 'hsl(var(--birus-warning) / <alpha-value>)',
+          fg: 'hsl(var(--birus-warning-fg) / <alpha-value>)',
+        },
+        info: {
+          DEFAULT: 'hsl(var(--birus-info) / <alpha-value>)',
+          fg: 'hsl(var(--birus-info-fg) / <alpha-value>)',
+        },
+        border: 'hsl(var(--birus-border) / <alpha-value>)',
+        input: 'hsl(var(--birus-input) / <alpha-value>)',
+        ring: 'hsl(var(--birus-ring) / <alpha-value>)',
+      },
+      borderRadius: {
+        birus: 'var(--birus-radius)',
+        'birus-sm': 'calc(var(--birus-radius) * 0.65)',
+        'birus-lg': 'calc(var(--birus-radius) * 1.4)',
+      },
+    },
+  },
+};

package/dist/themes.css

@@ -0,0 +1,217 @@
+/* birusUI Design System Tokens - CSS Variables (Light/Dark + 6 Paletas + Radius) */
+
+:root {
+  --birus-bg: 0 0% 100%;
+  --birus-fg: 240 10% 4%;
+  --birus-surface: 260 25% 98%;
+  --birus-surface-hover: 260 25% 94%;
+  --birus-card: 0 0% 100%;
+  --birus-card-fg: 240 10% 4%;
+  --birus-popover: 0 0% 100%;
+  --birus-popover-fg: 240 10% 4%;
+  --birus-primary: 262 83% 58%;
+  --birus-primary-fg: 0 0% 100%;
+  --birus-secondary: 260 25% 94%;
+  --birus-secondary-fg: 262 45% 24%;
+  --birus-muted: 260 15% 95%;
+  --birus-muted-fg: 240 5% 44%;
+  --birus-accent: 262 80% 94%;
+  --birus-accent-fg: 262 83% 42%;
+  --birus-destructive: 0 84% 60%;
+  --birus-destructive-fg: 0 0% 100%;
+  --birus-success: 142 71% 45%;
+  --birus-success-fg: 0 0% 100%;
+  --birus-warning: 38 92% 50%;
+  --birus-warning-fg: 24 10% 10%;
+  --birus-info: 199 89% 48%;
+  --birus-info-fg: 0 0% 100%;
+  --birus-border: 260 16% 89%;
+  --birus-input: 260 16% 86%;
+  --birus-ring: 262 83% 58%;
+  --birus-radius: 0.5rem;
+}
+
+.dark,
+[data-birus-mode='dark'] {
+  --birus-bg: 240 16% 6%;
+  --birus-fg: 250 20% 96%;
+  --birus-surface: 244 16% 9%;
+  --birus-surface-hover: 244 18% 13%;
+  --birus-card: 244 16% 9%;
+  --birus-card-fg: 250 20% 96%;
+  --birus-popover: 244 18% 11%;
+  --birus-popover-fg: 250 20% 96%;
+  --birus-primary: 263 86% 66%;
+  --birus-primary-fg: 0 0% 100%;
+  --birus-secondary: 246 18% 16%;
+  --birus-secondary-fg: 250 25% 92%;
+  --birus-muted: 246 14% 15%;
+  --birus-muted-fg: 245 10% 64%;
+  --birus-accent: 262 45% 20%;
+  --birus-accent-fg: 263 90% 82%;
+  --birus-destructive: 0 72% 51%;
+  --birus-destructive-fg: 0 0% 100%;
+  --birus-success: 142 69% 48%;
+  --birus-success-fg: 144 61% 8%;
+  --birus-warning: 38 92% 55%;
+  --birus-warning-fg: 24 10% 8%;
+  --birus-info: 199 89% 54%;
+  --birus-info-fg: 204 80% 8%;
+  --birus-border: 246 16% 18%;
+  --birus-input: 246 16% 22%;
+  --birus-ring: 263 86% 66%;
+}
+
+/* Radius Presets */
+[data-birus-radius='none'] { --birus-radius: 0px; }
+[data-birus-radius='sm'] { --birus-radius: 0.25rem; }
+[data-birus-radius='md'] { --birus-radius: 0.5rem; }
+[data-birus-radius='lg'] { --birus-radius: 0.75rem; }
+[data-birus-radius='full'] { --birus-radius: 1rem; }
+
+/* Emerald Palette */
+[data-birus-theme='emerald'] {
+  --birus-surface: 155 25% 98%;
+  --birus-surface-hover: 155 24% 94%;
+  --birus-primary: 158 74% 39%;
+  --birus-secondary: 155 22% 93%;
+  --birus-secondary-fg: 160 40% 20%;
+  --birus-accent: 158 65% 92%;
+  --birus-accent-fg: 158 75% 28%;
+  --birus-border: 155 16% 88%;
+  --birus-input: 155 16% 84%;
+  --birus-ring: 158 74% 39%;
+}
+[data-birus-theme='emerald'][data-birus-mode='dark'] {
+  --birus-bg: 162 24% 5%;
+  --birus-surface: 162 20% 8%;
+  --birus-surface-hover: 162 20% 12%;
+  --birus-card: 162 20% 8%;
+  --birus-popover: 162 22% 10%;
+  --birus-primary: 158 72% 48%;
+  --birus-primary-fg: 162 40% 7%;
+  --birus-secondary: 160 18% 15%;
+  --birus-accent: 158 45% 17%;
+  --birus-accent-fg: 158 80% 75%;
+  --birus-border: 160 16% 17%;
+  --birus-input: 160 16% 21%;
+  --birus-ring: 158 72% 48%;
+}
+
+/* Ocean Palette */
+[data-birus-theme='ocean'] {
+  --birus-surface: 205 35% 98%;
+  --birus-surface-hover: 205 32% 94%;
+  --birus-primary: 204 88% 48%;
+  --birus-secondary: 205 30% 93%;
+  --birus-secondary-fg: 210 45% 22%;
+  --birus-accent: 204 85% 93%;
+  --birus-accent-fg: 204 88% 34%;
+  --birus-border: 210 20% 89%;
+  --birus-input: 210 20% 85%;
+  --birus-ring: 204 88% 48%;
+}
+[data-birus-theme='ocean'][data-birus-mode='dark'] {
+  --birus-bg: 216 32% 6%;
+  --birus-surface: 216 28% 9%;
+  --birus-surface-hover: 216 26% 13%;
+  --birus-card: 216 28% 9%;
+  --birus-popover: 216 28% 11%;
+  --birus-primary: 201 92% 55%;
+  --birus-primary-fg: 216 40% 7%;
+  --birus-secondary: 215 22% 16%;
+  --birus-accent: 204 55% 18%;
+  --birus-accent-fg: 201 92% 78%;
+  --birus-border: 215 20% 18%;
+  --birus-input: 215 20% 22%;
+  --birus-ring: 201 92% 55%;
+}
+
+/* Rose Palette */
+[data-birus-theme='rose'] {
+  --birus-surface: 345 30% 98%;
+  --birus-surface-hover: 345 28% 94%;
+  --birus-primary: 346 84% 58%;
+  --birus-secondary: 345 24% 94%;
+  --birus-secondary-fg: 345 45% 24%;
+  --birus-accent: 346 80% 94%;
+  --birus-accent-fg: 346 84% 40%;
+  --birus-border: 345 18% 89%;
+  --birus-input: 345 18% 85%;
+  --birus-ring: 346 84% 58%;
+}
+[data-birus-theme='rose'][data-birus-mode='dark'] {
+  --birus-bg: 346 22% 6%;
+  --birus-surface: 346 18% 9%;
+  --birus-surface-hover: 346 18% 13%;
+  --birus-card: 346 18% 9%;
+  --birus-popover: 346 20% 11%;
+  --birus-primary: 346 86% 62%;
+  --birus-primary-fg: 0 0% 100%;
+  --birus-secondary: 346 16% 16%;
+  --birus-accent: 346 48% 19%;
+  --birus-accent-fg: 346 90% 80%;
+  --birus-border: 346 16% 18%;
+  --birus-input: 346 16% 22%;
+  --birus-ring: 346 86% 62%;
+}
+
+/* Amber Palette */
+[data-birus-theme='amber'] {
+  --birus-surface: 38 40% 98%;
+  --birus-surface-hover: 38 35% 94%;
+  --birus-primary: 36 92% 48%;
+  --birus-primary-fg: 28 30% 8%;
+  --birus-secondary: 38 30% 93%;
+  --birus-secondary-fg: 30 45% 20%;
+  --birus-accent: 38 88% 92%;
+  --birus-accent-fg: 32 90% 30%;
+  --birus-border: 36 20% 88%;
+  --birus-input: 36 20% 84%;
+  --birus-ring: 36 92% 48%;
+}
+[data-birus-theme='amber'][data-birus-mode='dark'] {
+  --birus-bg: 28 22% 5%;
+  --birus-surface: 28 18% 8%;
+  --birus-surface-hover: 28 18% 12%;
+  --birus-card: 28 18% 8%;
+  --birus-popover: 28 20% 10%;
+  --birus-primary: 38 94% 54%;
+  --birus-primary-fg: 28 35% 7%;
+  --birus-secondary: 28 16% 15%;
+  --birus-accent: 36 48% 17%;
+  --birus-accent-fg: 38 92% 76%;
+  --birus-border: 28 16% 17%;
+  --birus-input: 28 16% 21%;
+  --birus-ring: 38 94% 54%;
+}
+
+/* Zinc Minimal Palette */
+[data-birus-theme='zinc'] {
+  --birus-surface: 240 5% 98%;
+  --birus-surface-hover: 240 5% 94%;
+  --birus-primary: 240 6% 10%;
+  --birus-primary-fg: 0 0% 98%;
+  --birus-secondary: 240 5% 94%;
+  --birus-secondary-fg: 240 6% 10%;
+  --birus-accent: 240 5% 93%;
+  --birus-accent-fg: 240 6% 10%;
+  --birus-border: 240 6% 89%;
+  --birus-input: 240 6% 85%;
+  --birus-ring: 240 6% 10%;
+}
+[data-birus-theme='zinc'][data-birus-mode='dark'] {
+  --birus-bg: 240 10% 4%;
+  --birus-surface: 240 8% 7%;
+  --birus-surface-hover: 240 7% 11%;
+  --birus-card: 240 8% 7%;
+  --birus-popover: 240 8% 9%;
+  --birus-primary: 0 0% 98%;
+  --birus-primary-fg: 240 6% 10%;
+  --birus-secondary: 240 5% 15%;
+  --birus-accent: 240 5% 18%;
+  --birus-accent-fg: 0 0% 98%;
+  --birus-border: 240 5% 17%;
+  --birus-input: 240 5% 21%;
+  --birus-ring: 240 5% 84%;
+}

package/package.json

@@ -1,6 +1,43 @@
 {
   "name": "birus-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.3.0",
+  "description": "birusUI — Design System & Biblioteca de 32 Componentes Acessíveis para Vue 3 em JavaScript Puro, com temas reativos e fácil customização.",
+  "type": "module",
+  "main": "./dist/birus-ui.umd.cjs",
+  "module": "./dist/birus-ui.js",
+  "style": "./dist/style.css",
+  "exports": {
+    ".": {
+      "import": "./dist/birus-ui.js",
+      "require": "./dist/birus-ui.umd.cjs"
+    },
+    "./style.css": "./dist/style.css",
+    "./themes.css": "./dist/themes.css",
+    "./tailwind-preset": "./dist/tailwind-preset.js"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "prepublishOnly": "vite build"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "design-system",
+    "ui-library",
+    "components",
+    "tailwindcss",
+    "cva",
+    "shadcn",
+    "birus-ui"
+  ],
+  "author": "Gabriel Reis",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  }
+}

package/src/components/BirusAccordion.vue

@@ -0,0 +1,112 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+import { accordionRootVariants, accordionItemVariants, cn } from '@birus-ui/core';
+
+const props = defineProps({
+  items: { type: Array, default: () => [] },
+  type: { type: String, default: 'single' },
+  variant: { type: String, default: 'default' },
+  modelValue: { type: [String, Array], default: undefined },
+  defaultOpen: { type: [String, Array], default: undefined },
+  class: { type: String, default: '' },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+function normalizeIds(val) {
+  if (!val) return [];
+  return Array.isArray(val) ? val : [val];
+}
+
+const internalOpenIds = ref(normalizeIds(props.modelValue ?? props.defaultOpen));
+
+watch(
+  () => props.modelValue,
+  (next) => {
+    if (next !== undefined) {
+      internalOpenIds.value = normalizeIds(next);
+    }
+  },
+);
+
+const rootClasses = computed(() =>
+  cn(accordionRootVariants({ variant: props.variant }), props.class),
+);
+
+function isOpen(id) {
+  return internalOpenIds.value.includes(id);
+}
+
+function toggleItem(item) {
+  if (item.disabled) return;
+  if (props.type === 'multiple') {
+    const nextIds = isOpen(item.id)
+      ? internalOpenIds.value.filter((x) => x !== item.id)
+      : [...internalOpenIds.value, item.id];
+    internalOpenIds.value = nextIds;
+    emit('update:modelValue', nextIds);
+  } else {
+    const nextSingle = isOpen(item.id) ? '' : item.id;
+    internalOpenIds.value = nextSingle ? [nextSingle] : [];
+    emit('update:modelValue', nextSingle);
+  }
+}
+</script>
+
+<template>
+  <div :class="rootClasses">
+    <div
+      v-for="item in items"
+      :key="item.id"
+      :class="accordionItemVariants({ variant })"
+    >
+      <button
+        type="button"
+        :aria-expanded="isOpen(item.id) ? 'true' : 'false'"
+        :disabled="item.disabled"
+        :class="[
+          'flex w-full items-center justify-between gap-4 px-4 py-3.5 text-left transition-colors',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset',
+          item.disabled
+            ? 'opacity-50 cursor-not-allowed'
+            : 'hover:bg-surface-hover/70 cursor-pointer',
+        ]"
+        @click="toggleItem(item)"
+      >
+        <div class="min-w-0">
+          <div class="text-sm font-medium text-fg">{{ item.title }}</div>
+          <div v-if="item.subtitle" class="text-xs text-muted-fg mt-0.5">
+            {{ item.subtitle }}
+          </div>
+        </div>
+        <svg
+          :class="[
+            'h-4 w-4 shrink-0 text-muted-fg transition-transform duration-200',
+            isOpen(item.id) && 'rotate-180 text-primary',
+          ]"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" />
+        </svg>
+      </button>
+
+      <div
+        :class="[
+          'grid transition-all duration-200 ease-out',
+          isOpen(item.id) ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0',
+        ]"
+      >
+        <div class="overflow-hidden">
+          <div class="px-4 pb-4 pt-1 text-sm text-muted-fg leading-relaxed">
+            <slot :name="`item-${item.id}`" :item="item">
+              {{ item.content }}
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/BirusAlert.vue

@@ -0,0 +1,114 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { alertVariants, cn } from '@birus-ui/core';
+
+const props = defineProps({
+  variant: { type: String, default: 'default' },
+  title: { type: String, default: '' },
+  description: { type: String, default: '' },
+  dismissible: { type: Boolean, default: false },
+  class: { type: String, default: '' },
+});
+
+const emit = defineEmits(['dismiss']);
+
+const visible = ref(true);
+
+const classes = computed(() =>
+  cn(alertVariants({ variant: props.variant }), props.class),
+);
+
+function handleDismiss() {
+  visible.value = false;
+  emit('dismiss');
+}
+</script>
+
+<template>
+  <Transition
+    enter-active-class="transition duration-200 ease-out"
+    enter-from-class="opacity-0 -translate-y-1"
+    enter-to-class="opacity-100 translate-y-0"
+    leave-active-class="transition duration-150 ease-in"
+    leave-from-class="opacity-100 scale-100"
+    leave-to-class="opacity-0 scale-95"
+  >
+    <div v-if="visible" role="alert" :class="classes">
+      <div class="birus-alert-icon mt-0.5 shrink-0 text-primary">
+        <slot name="icon">
+          <svg
+            v-if="variant === 'success'"
+            class="h-5 w-5"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4" />
+          </svg>
+          <svg
+            v-else-if="variant === 'warning'"
+            class="h-5 w-5"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
+            />
+          </svg>
+          <svg
+            v-else-if="variant === 'destructive'"
+            class="h-5 w-5"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15 9l-6 6m0-6l6 6" />
+          </svg>
+          <svg
+            v-else
+            class="h-5 w-5"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 16v-4m0-4h.01" />
+          </svg>
+        </slot>
+      </div>
+
+      <div class="flex-1 min-w-0 space-y-1">
+        <h5 v-if="title" class="text-sm font-semibold leading-tight tracking-tight text-fg">
+          {{ title }}
+        </h5>
+        <div v-if="description || $slots.default" class="text-sm text-muted-fg leading-relaxed">
+          <slot>{{ description }}</slot>
+        </div>
+        <div v-if="$slots.actions" class="pt-2 flex flex-wrap items-center gap-2">
+          <slot name="actions" />
+        </div>
+      </div>
+
+      <button
+        v-if="dismissible"
+        type="button"
+        class="shrink-0 rounded-birus-sm p-1 text-muted-fg hover:text-fg hover:bg-surface-hover transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        aria-label="Fechar alerta"
+        @click="handleDismiss"
+      >
+        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M18 6L6 18M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+  </Transition>
+</template>

package/src/components/BirusAvatar.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+import { avatarVariants, avatarStatusVariants, cn } from '@birus-ui/core';
+
+const props = defineProps({
+  src: { type: String, default: '' },
+  alt: { type: String, default: '' },
+  name: { type: String, default: '' },
+  size: { type: String, default: 'md' },
+  shape: { type: String, default: 'circle' },
+  status: { type: String, default: undefined },
+  class: { type: String, default: '' },
+});
+
+const imageError = ref(false);
+
+watch(
+  () => props.src,
+  () => {
+    imageError.value = false;
+  },
+);
+
+const initials = computed(() => {
+  const source = (props.name || props.alt || 'BU').trim();
+  const parts = source.split(/\s+/).filter(Boolean);
+  if (parts.length === 1) {
+    return parts[0].slice(0, 2).toUpperCase();
+  }
+  return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+});
+
+const containerClasses = computed(() =>
+  cn(avatarVariants({ size: props.size, shape: props.shape }), props.class),
+);
+
+const statusClasses = computed(() =>
+  props.status
+    ? avatarStatusVariants({ status: props.status, size: props.size })
+    : '',
+);
+</script>
+
+<template>
+  <span class="relative inline-flex shrink-0">
+    <span :class="containerClasses">
+      <img
+        v-if="src && !imageError"
+        :src="src"
+        :alt="alt || name || 'Avatar'"
+        class="h-full w-full object-cover"
+        @error="imageError = true"
+      />
+      <span
+        v-else
+        class="bg-gradient-to-br from-primary/20 to-accent text-primary font-semibold h-full w-full flex items-center justify-center"
+      >
+        {{ initials }}
+      </span>
+    </span>
+    <span
+      v-if="status"
+      :class="statusClasses"
+      :aria-label="`Status: ${status}`"
+    />
+  </span>
+</template>

package/src/components/BirusBadge.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { computed } from 'vue';
+import { badgeVariants, cn } from '@birus-ui/core';
+
+const props = defineProps({
+  variant: { type: String, default: 'default' },
+  size: { type: String, default: 'md' },
+  dot: { type: Boolean, default: false },
+  removable: { type: Boolean, default: false },
+  class: { type: String, default: '' },
+});
+
+const emit = defineEmits(['remove']);
+
+const classes = computed(() =>
+  cn(
+    badgeVariants({
+      variant: props.variant,
+      size: props.size,
+    }),
+    props.class,
+  ),
+);
+
+const dotColorClass = computed(() => {
+  switch (props.variant) {
+    case 'success':
+      return 'bg-success';
+    case 'warning':
+      return 'bg-warning';
+    case 'destructive':
+      return 'bg-destructive';
+    case 'info':
+      return 'bg-info';
+    case 'default':
+      return 'bg-primary-fg';
+    default:
+      return 'bg-primary';
+  }
+});
+</script>
+
+<template>
+  <span :class="classes">
+    <span v-if="dot" class="relative flex h-2 w-2 shrink-0" aria-hidden="true">
+      <span
+        :class="['animate-ping absolute inline-flex h-full w-full rounded-full opacity-75', dotColorClass]"
+      />
+      <span :class="['relative inline-flex rounded-full h-2 w-2', dotColorClass]" />
+    </span>
+    <slot />
+    <button
+      v-if="removable"
+      type="button"
+      class="ml-0.5 -mr-1 inline-flex h-4 w-4 items-center justify-center rounded-full opacity-70 hover:opacity-100 hover:bg-black/10 dark:hover:bg-white/15 transition-opacity focus:outline-none"
+      aria-label="Remover"
+      @click.stop="emit('remove')"
+    >
+      <svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M18 6L6 18M6 6l12 12" />
+      </svg>
+    </button>
+  </span>
+</template>