first commit

resources/js/components/ui/dialog/Dialog.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { setContext } from 'svelte';
+    import { DIALOG_CONTEXT, type DialogContext } from './context';
+
+    let {
+        open = $bindable(false),
+        onOpenChange,
+        children,
+    }: { open?: boolean; onOpenChange?: (value: boolean) => void; children?: Snippet } = $props();
+
+    const context: DialogContext = {
+        open: () => open,
+        setOpen: (value: boolean) => {
+            open = value;
+            onOpenChange?.(value);
+        },
+    };
+
+    setContext(DIALOG_CONTEXT, context);
+</script>
+
+{@render children?.()}

resources/js/components/ui/dialog/DialogClose.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { getContext } from 'svelte';
+    import { DIALOG_CONTEXT, type DialogContext } from './context';
+
+    let { asChild = false, children }: { asChild?: boolean; children?: Snippet<[Record<string, unknown>]> } = $props();
+
+    const { setOpen } = getContext<DialogContext>(DIALOG_CONTEXT);
+
+    const handleClick = () => setOpen(false);
+</script>
+
+{#if asChild}
+    {@render children?.({ onClick: handleClick })}
+{:else}
+    <button type="button" onclick={handleClick}>
+        {@render children?.({})}
+    </button>
+{/if}

resources/js/components/ui/dialog/DialogContent.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { getContext } from 'svelte';
+    import { cn } from '@/lib/utils';
+    import { DIALOG_CONTEXT, type DialogContext } from './context';
+
+    let { class: className = '', children }: { class?: string; children?: Snippet } = $props();
+
+    const { open, setOpen } = getContext<DialogContext>(DIALOG_CONTEXT);
+
+    const close = () => setOpen(false);
+</script>
+
+{#if open()}
+    <div class="fixed inset-0 z-50 flex items-center justify-center">
+        <button
+            type="button"
+            class="fixed inset-0 bg-black/50"
+            aria-label="Close"
+            onclick={close}
+        ></button>
+        <div
+            class={cn(
+                'relative z-10 w-full max-w-lg rounded-lg border bg-background p-6 shadow-lg',
+                className,
+            )}
+            role="dialog"
+            aria-modal="true"
+        >
+            {@render children?.()}
+        </div>
+    </div>
+{/if}

resources/js/components/ui/dialog/DialogDescription.svelte

@@ -0,0 +1,3 @@
+<p class="text-sm text-muted-foreground">
+    <slot />
+</p>

resources/js/components/ui/dialog/DialogFooter.svelte

@@ -0,0 +1,3 @@
+<div class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+    <slot />
+</div>

resources/js/components/ui/dialog/DialogTitle.svelte

@@ -0,0 +1,3 @@
+<h2 class="text-lg font-semibold leading-none tracking-tight">
+    <slot />
+</h2>

resources/js/components/ui/dialog/DialogTrigger.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { getContext } from 'svelte';
+    import { DIALOG_CONTEXT, type DialogContext } from './context';
+
+    let { asChild = false, children }: { asChild?: boolean; children?: Snippet<[Record<string, unknown>]> } = $props();
+
+    const { setOpen, open } = getContext<DialogContext>(DIALOG_CONTEXT);
+
+    const handleClick = () => setOpen(true);
+</script>
+
+{#if asChild}
+    {@render children?.({ onClick: handleClick, 'aria-expanded': open() })}
+{:else}
+    <button type="button" onclick={handleClick} aria-expanded={open()}>
+        {@render children?.({})}
+    </button>
+{/if}

resources/js/components/ui/dialog/context.ts

@@ -0,0 +1,6 @@
+export type DialogContext = {
+    open: () => boolean;
+    setOpen: (value: boolean) => void;
+};
+
+export const DIALOG_CONTEXT = Symbol('dialog');

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

@@ -0,0 +1,7 @@
+export { default as Dialog } from './Dialog.svelte';
+export { default as DialogClose } from './DialogClose.svelte';
+export { default as DialogContent } from './DialogContent.svelte';
+export { default as DialogDescription } from './DialogDescription.svelte';
+export { default as DialogFooter } from './DialogFooter.svelte';
+export { default as DialogTitle } from './DialogTitle.svelte';
+export { default as DialogTrigger } from './DialogTrigger.svelte';