src/shared/shadcn/ui/badge/badge.svelte

@@ -0,0 +1,51 @@
+<script lang="ts" module>
+import { tv, type VariantProps } from 'tailwind-variants';
+
+export const badgeVariants = tv({
+    base:
+        'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3',
+    variants: {
+        variant: {
+            default:
+                'bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent',
+            secondary:
+                'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent',
+            destructive:
+                'bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white',
+            outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+
+export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+</script>
+
+<script lang="ts">
+import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    href,
+    class: className,
+    variant = 'default',
+    children,
+    ...restProps
+}: WithElementRef<HTMLAnchorAttributes> & {
+    variant?: BadgeVariant;
+} = $props();
+</script>
+
+<svelte:element
+    this={href ? 'a' : 'span'}
+    bind:this={ref}
+    data-slot="badge"
+    {href}
+    class={cn(badgeVariants({ variant }), className)}
+    {...restProps}
+>
+    {@render children?.()}
+</svelte:element>

src/shared/shadcn/ui/badge/index.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from './badge.svelte';
+export { type BadgeVariant, badgeVariants } from './badge.svelte';