first commit

2026-10-06 18:53:03 +02:00
commit e687b4437b
@@ -0,0 +1,18 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { setContext } from 'svelte';
+    import { SHEET_CONTEXT, type SheetContext } from './context';
+
+    let { open = $bindable(false), children }: { open?: boolean; children?: Snippet } = $props();
+
+    const context: SheetContext = {
+        open: () => open,
+        setOpen: (value: boolean) => {
+            open = value;
+        },
+    };
+
+    setContext(SHEET_CONTEXT, context);
+</script>
+
+{@render children?.()}
@@ -0,0 +1,19 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { getContext } from 'svelte';
+    import { SHEET_CONTEXT, type SheetContext } from './context';
+
+    let { asChild = false, children }: { asChild?: boolean; children?: Snippet<[Record<string, unknown>]> } = $props();
+
+    const { setOpen } = getContext<SheetContext>(SHEET_CONTEXT);
+
+    const handleClick = () => setOpen(false);
+</script>
+
+{#if asChild}
+    {@render children?.({ onClick: handleClick })}
+{:else}
+    <button type="button" onclick={handleClick}>
+        {@render children?.({})}
+    </button>
+{/if}
@@ -0,0 +1,81 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { getContext } from 'svelte';
+    import X from 'lucide-svelte/icons/x';
+    import { fly } from 'svelte/transition';
+    import { cn } from '@/lib/utils';
+    import { SHEET_CONTEXT, type SheetContext } from './context';
+
+    let {
+        side = 'right',
+        class: className = '',
+        children,
+    }: {
+        side?: 'right' | 'left' | 'top' | 'bottom';
+        class?: string;
+        children?: Snippet;
+    } = $props();
+
+    const { open, setOpen } = getContext<SheetContext>(SHEET_CONTEXT);
+
+    const sideClasses: Record<string, string> = {
+        right: 'inset-y-0 right-0',
+        left: 'inset-y-0 left-0',
+        top: 'inset-x-0 top-0',
+        bottom: 'inset-x-0 bottom-0',
+    };
+
+    const sizeClasses: Record<string, string> = {
+        right: 'h-full w-3/4 sm:max-w-sm',
+        left: 'h-full w-3/4 sm:max-w-sm',
+        top: 'h-auto',
+        bottom: 'h-auto',
+    };
+
+    const close = () => setOpen(false);
+
+    const panelTransition = () => {
+        const axis =
+            side === 'left'
+                ? { x: -320, y: 0 }
+                : side === 'right'
+                  ? { x: 320, y: 0 }
+                  : side === 'top'
+                    ? { x: 0, y: -320 }
+                    : { x: 0, y: 320 };
+
+        return { ...axis, duration: 260, opacity: 1 };
+    };
+</script>
+
+{#if open()}
+    <div class="fixed inset-0 z-50">
+        <button
+            type="button"
+            class="fixed inset-0 border-0 bg-black/50"
+            aria-label="Close"
+            onclick={close}
+        ></button>
+        <div
+            class={cn(
+                'fixed relative flex flex-col gap-4 overflow-y-auto border-none bg-background p-6 shadow-lg',
+                sideClasses[side] ?? sideClasses.right,
+                sizeClasses[side] ?? sizeClasses.right,
+                className,
+            )}
+            in:fly={panelTransition()}
+            out:fly={panelTransition()}
+        >
+            <button
+                type="button"
+                class="ring-offset-background focus-visible:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none"
+                aria-label="Close"
+                onclick={close}
+            >
+                <X class="size-4" />
+                <span class="sr-only">Close</span>
+            </button>
+            {@render children?.()}
+        </div>
+    </div>
+{/if}
@@ -0,0 +1,3 @@
+<p class="text-sm text-muted-foreground">
+    <slot />
+</p>
@@ -0,0 +1,3 @@
+<div class="mt-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+    <slot />
+</div>
@@ -0,0 +1,3 @@
+<div class="mb-4 flex flex-col gap-1.5">
+    <slot />
+</div>
@@ -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>
+
+<h2 class={cn('text-lg font-semibold text-foreground', className)}>
+    {@render children?.()}
+</h2>
@@ -0,0 +1,25 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { getContext } from 'svelte';
+    import { SHEET_CONTEXT, type SheetContext } from './context';
+
+    type TriggerProps = {
+        onclick?: (event: MouseEvent) => void;
+        'aria-expanded'?: boolean;
+        [key: string]: unknown;
+    };
+
+    let { asChild = false, children }: { asChild?: boolean; children?: Snippet<[TriggerProps]> } = $props();
+
+    const { setOpen, open } = getContext<SheetContext>(SHEET_CONTEXT);
+
+    const handleClick = () => setOpen(!open());
+</script>
+
+{#if asChild}
+    {@render children?.({ onclick: handleClick, 'aria-expanded': open() })}
+{:else}
+    <button type="button" onclick={handleClick} aria-expanded={open()}>
+        {@render children?.({})}
+    </button>
+{/if}
@@ -0,0 +1,6 @@
+export type SheetContext = {
+    open: () => boolean;
+    setOpen: (value: boolean) => void;
+};
+
+export const SHEET_CONTEXT = Symbol('sheet');
@@ -0,0 +1,8 @@
+export { default as Sheet } from './Sheet.svelte';
+export { default as SheetClose } from './SheetClose.svelte';
+export { default as SheetContent } from './SheetContent.svelte';
+export { default as SheetDescription } from './SheetDescription.svelte';
+export { default as SheetFooter } from './SheetFooter.svelte';
+export { default as SheetHeader } from './SheetHeader.svelte';
+export { default as SheetTitle } from './SheetTitle.svelte';
+export { default as SheetTrigger } from './SheetTrigger.svelte';