your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts" module>
2 import { Dialog, type WithoutChild } from 'bits-ui';
3 import { cn } from '@foxui/core';
4
5 export type ModalProps = Dialog.RootProps & {
6 interactOutsideBehavior?: 'close' | 'ignore';
7 closeButton?: boolean;
8 contentProps?: WithoutChild<Dialog.ContentProps>;
9
10 class?: string;
11
12 onOpenAutoFocus?: (event: Event) => void;
13 };
14</script>
15
16<script lang="ts">
17 let {
18 open = $bindable(false),
19 children,
20 contentProps,
21 interactOutsideBehavior = 'close',
22 closeButton = true,
23 class: className,
24 onOpenAutoFocus,
25 ...restProps
26 }: ModalProps = $props();
27</script>
28
29<Dialog.Root bind:open {...restProps}>
30 <Dialog.Portal>
31 <Dialog.Overlay
32 class="motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-base-200/10 dark:bg-base-900/10 fixed inset-0 z-50 backdrop-blur-sm"
33 />
34 <Dialog.Content
35 {onOpenAutoFocus}
36 {interactOutsideBehavior}
37 {...contentProps}
38 class={cn(
39 'motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-bottom-1/2 data-[state=open]:slide-in-from-bottom-1/2',
40 'fixed top-[50%] left-[50%] z-50 grid w-[calc(100%-1rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] shadow-lg',
41 'border-base-200 bg-base-100 dark:border-base-700 dark:bg-base-800 gap-4 rounded-2xl border p-6 backdrop-blur-xl',
42 className
43 )}
44 >
45 {@render children?.()}
46
47 {#if closeButton}
48 <Dialog.Close
49 class="text-base-900 dark:text-base-500 hover:text-base-800 dark:hover:text-base-200 hover:bg-base-200 dark:hover:bg-base-800 focus:outline-base-900 dark:focus:outline-base-50 focus:bg-base-200 dark:focus:bg-base-800 focus:text-base-800 dark:focus:text-base-200 absolute top-2 right-2 cursor-pointer rounded-xl p-1 transition-colors focus:outline-2 focus:outline-offset-2"
50 >
51 <svg
52 xmlns="http://www.w3.org/2000/svg"
53 viewBox="0 0 24 24"
54 fill="currentColor"
55 class="size-4"
56 >
57 <path
58 fill-rule="evenodd"
59 d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z"
60 clip-rule="evenodd"
61 />
62 </svg>
63
64 <span class="sr-only">Close</span>
65 </Dialog.Close>
66 {/if}
67 </Dialog.Content>
68 </Dialog.Portal>
69</Dialog.Root>