feat: add alert component

package.json

@@ -32,7 +32,7 @@
         "@vitest/coverage-v8": "^2.1.8",
         "@vitest/ui": "^2.1.5",
         "autoprefixer": "^10.4.20",
-        "bits-ui": "^1.0.0-next.69",
+        "bits-ui": "^1.0.0-next.71",
         "clsx": "^2.1.1",
         "eslint": "^9.17.0",
         "eslint-config-prettier": "^9.1.0",

src/lib/components/primitives/alert/alert-description.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import type { WithElementRef } from "bits-ui";
+    import type { HTMLAttributes } from "svelte/elements";
+    import { cn } from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} class={cn("text-sm [&_p]:leading-relaxed", className)} {...restProps}>
+    {@render children?.()}
+</div>

src/lib/components/primitives/alert/alert-title.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import type { HTMLAttributes } from "svelte/elements";
+    import type { WithElementRef } from "bits-ui";
+    import { cn } from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        level = 5,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+        level?: 1 | 2 | 3 | 4 | 5 | 6;
+    } = $props();
+</script>
+
+<div
+    role="heading"
+    aria-level={level}
+    bind:this={ref}
+    class={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

src/lib/components/primitives/alert/alert.svelte

@@ -0,0 +1,39 @@
+<script lang="ts" module>
+    import { type VariantProps, tv } from "tailwind-variants";
+
+    export const alertVariants = tv({
+        base: "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7",
+        variants: {
+            variant: {
+                default: "bg-background text-foreground",
+                destructive:
+                    "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    });
+
+    export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+</script>
+
+<script lang="ts">
+    import type { HTMLAttributes } from "svelte/elements";
+    import type { WithElementRef } from "bits-ui";
+    import { cn } from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        variant = "default",
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+        variant?: AlertVariant;
+    } = $props();
+</script>
+
+<div bind:this={ref} class={cn(alertVariants({ variant }), className)} {...restProps} role="alert">
+    {@render children?.()}
+</div>

src/lib/components/primitives/alert/index.ts

@@ -0,0 +1,14 @@
+import Root from "./alert.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+export { alertVariants, type AlertVariant } from "./alert.svelte";
+
+export {
+    Root,
+    Description,
+    Title,
+    //
+    Root as Alert,
+    Description as AlertDescription,
+    Title as AlertTitle,
+};