badge

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/badge/Badge.astro directly.
3/**
4 * @component Badge
5 * @description A small label for status, categories, or counts.
6 * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2537-3522&t=YFStJ3V8fXEO8QD8-4
7 *
8 * @preview
9 *
10 * <div class="flex flex-col items-center gap-3">
11 *   <div class="flex w-full flex-wrap gap-3">
12 *     <Badge>Badge</Badge>
13 *     <Badge variant="secondary">Secondary</Badge>
14 *     <Badge variant="destructive">Destructive</Badge>
15 *     <Badge variant="outline">Outline</Badge>
16 *   </div>
17 *  <div class="flex w-full flex-wrap gap-3">
18 *     <Badge shape="pill">Pill</Badge>
19 *     <Badge shape="pill" variant="secondary">Secondary</Badge>
20 *     <Badge shape="pill" variant="destructive">Destructive</Badge>
21 *     <Badge shape="pill" variant="outline">Outline <XIcon class="size-6" /></Badge>
22 *   </div>
23 *   <div class="flex w-full flex-wrap gap-3">
24 *     <Badge
25 *       variant="secondary"
26 *       class="bg-blue-500 text-white dark:bg-blue-600 border-blue-600"
27 *     >
28 *       <BadgeCheckIcon class="size-3" />
29 *       Verified
30 *     </Badge>
31 *     <Badge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">
32 *         8
33 *     </Badge>
34 *     <Badge
35 *       class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
36 *       variant="destructive"
37 *     >
38 *       99
39 *     </Badge>
40 *     <Badge
41 *       class="h-5 min-w-5 rounded-full px-1.5 text-xs font-mono tabular-nums"
42 *       variant="outline"
43 *     >
44 *       20000+
45 *     </Badge>
46 *   </div>
47 * </div>
48 *
49 * @usage
50 *
51 * ```astro nocollapse
52 * ---
53 * import { Badge } from '@bejamas/ui/components/badge';
54 * ---
55 *
56 * <Badge>Badge</Badge>
57 * <Badge variant="secondary">Secondary</Badge>
58 * ```
59 */
60 
61import type { HTMLTag } from "astro/types";
62import { cva } from "class-variance-authority";
63import { cn } from "@/lib/utils";
64 
65interface Props {
66  as?: HTMLTag;
67  variant?: "default" | "secondary" | "destructive" | "outline";
68  class?: string;
69  shape?: "default" | "pill";
70  size?: "default" | "sm";
71}
72 
73const {
74  as = "span",
75  variant = "default",
76  class: className = "",
77  shape = "default",
78  size = "default",
79  ...props
80} = Astro.props as Props;
81 
82const badgeVariants = cva(
83  [
84    "inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap overflow-hidden transition-[color,box-shadow]",
85    "gap-1 [&>svg]:pointer-events-none",
86  ],
87  {
88// … truncated