From 3825a83a066b10775f4936aa6b777b615ff5277d Mon Sep 17 00:00:00 2001
From: Felix Schlegel <felix.schlegel@gmx.de>
Date: Sat, 14 Dec 2024 12:24:36 +0100
Subject: [PATCH] feat: add alert component

---
 package-lock.json                             |  8 ++--
 package.json                                  |  2 +-
 .../primitives/alert/alert-description.svelte | 16 ++++++++
 .../primitives/alert/alert-title.svelte       | 25 ++++++++++++
 .../components/primitives/alert/alert.svelte  | 39 +++++++++++++++++++
 src/lib/components/primitives/alert/index.ts  | 14 +++++++
 6 files changed, 99 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/components/primitives/alert/alert-description.svelte
 create mode 100644 src/lib/components/primitives/alert/alert-title.svelte
 create mode 100644 src/lib/components/primitives/alert/alert.svelte
 create mode 100644 src/lib/components/primitives/alert/index.ts

diff --git a/package-lock.json b/package-lock.json
index ee234dcf..f960b710 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,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",
@@ -2264,9 +2264,9 @@
             }
         },
         "node_modules/bits-ui": {
-            "version": "1.0.0-next.69",
-            "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-1.0.0-next.69.tgz",
-            "integrity": "sha512-XN7Uso5gmI4GFtb/5zzce9sSzH/39gX3q6pxoSkV9bAa5mN9Lc+R6hZUDgx3cGY/quWBF/wFPqXgk27Nw2VkSw==",
+            "version": "1.0.0-next.71",
+            "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-1.0.0-next.71.tgz",
+            "integrity": "sha512-ncZ42GwVpa1Ldw41opdLqP/HSkhNGNBnmfvWduYGZ0cVzDnkPwsUWvdikTsFI31ZoAMcfcUVFSVgLGCcBatUXQ==",
             "dev": true,
             "dependencies": {
                 "@floating-ui/core": "^1.6.4",
diff --git a/package.json b/package.json
index fab28f69..3bcb17eb 100644
--- a/package.json
+++ b/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",
diff --git a/src/lib/components/primitives/alert/alert-description.svelte b/src/lib/components/primitives/alert/alert-description.svelte
new file mode 100644
index 00000000..bf250334
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/primitives/alert/alert-title.svelte b/src/lib/components/primitives/alert/alert-title.svelte
new file mode 100644
index 00000000..13418684
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/primitives/alert/alert.svelte b/src/lib/components/primitives/alert/alert.svelte
new file mode 100644
index 00000000..85f9fb9a
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/primitives/alert/index.ts b/src/lib/components/primitives/alert/index.ts
new file mode 100644
index 00000000..cd4c2ecb
--- /dev/null
+++ b/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,
+};