first commit

resources/js/components/ui/alert/Alert.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { cn } from '@/lib/utils';
+
+    type Variant = 'default' | 'destructive';
+
+    const base =
+        'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current';
+
+    const variantClasses: Record<Variant, string> = {
+        default: 'bg-card text-card-foreground',
+        destructive:
+            'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+    };
+
+    let {
+        variant = 'default',
+        class: className = '',
+        children,
+    }: {
+        variant?: Variant;
+        class?: string;
+        children?: Snippet;
+    } = $props();
+</script>
+
+<div data-slot="alert" class={cn(base, variantClasses[variant], className)} role="alert">
+    {@render children?.()}
+</div>

resources/js/components/ui/alert/AlertDescription.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { cn } from '@/lib/utils';
+
+    let {
+        class: className = '',
+        children,
+    }: {
+        class?: string;
+        children?: Snippet;
+    } = $props();
+</script>
+
+<div
+    data-slot="alert-description"
+    class={cn('text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', className)}
+>
+    {@render children?.()}
+</div>

resources/js/components/ui/alert/AlertTitle.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { cn } from '@/lib/utils';
+
+    let {
+        class: className = '',
+        children,
+    }: {
+        class?: string;
+        children?: Snippet;
+    } = $props();
+</script>
+
+<div data-slot="alert-title" class={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}>
+    {@render children?.()}
+</div>

resources/js/components/ui/alert/index.ts

@@ -0,0 +1,3 @@
+export { default as Alert } from './Alert.svelte';
+export { default as AlertDescription } from './AlertDescription.svelte';
+export { default as AlertTitle } from './AlertTitle.svelte';