🎨 Add badge UI component

src/components/ui/badge/badge.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" module>
+  import type { VariantProps } from "tailwind-variants";
+  import { badgeVariants } from "@/components/ui/badge";
+
+  export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+</script>
+
+<script lang="ts">
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+  import type { WithElementRef } from "@/types/components";
+
+  import { cn } from "@/utils/cn";
+
+  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/components/ui/badge/badge.variants.ts

@@ -0,0 +1,34 @@
+import { tv } from "tailwind-variants";
+
+const badgeVariants = tv({
+  base: "inline-flex items-center cursor-default gap-1.5 font-medium rounded-full border transition-colors hover:text-black dark:hover:text-white ease-in-out",
+  variants: {
+    variant: {
+      default:
+        "bg-neutral-100 text-neutral-800 border-neutral-200 dark:bg-neutral-800 dark:text-neutral-100 dark:border-neutral-700",
+      primary:
+        "bg-neutral-800 text-neutral-50 border-neutral-700 dark:bg-neutral-700 dark:text-neutral-50 dark:border-neutral-600",
+      secondary:
+        "bg-neutral-200 text-neutral-700 border-neutral-300 dark:bg-neutral-700 dark:text-neutral-200 dark:border-neutral-600",
+      success:
+        "bg-green-100 text-green-800 border-green-200 dark:bg-green-900 dark:text-green-100 dark:border-green-800",
+      warning:
+        "bg-amber-100 text-amber-800 border-amber-200 dark:bg-amber-900 dark:text-amber-100 dark:border-amber-800",
+      danger:
+        "bg-red-100 text-red-800 border-red-200 dark:bg-red-900 dark:text-red-100 dark:border-red-800",
+      outline:
+        "bg-transparent border border-neutral-300 text-neutral-700 dark:border-neutral-700 dark:text-neutral-400",
+    },
+    size: {
+      sm: "text-xs px-2 py-0.5",
+      md: "text-sm px-2.5 py-0.5",
+      lg: "text-base px-3 py-1",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "sm",
+  },
+});
+
+export { badgeVariants };

src/components/ui/badge/index.ts

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