Alert Dialog

1<script lang="ts">
2  import { AlertDialog as AlertDialogPrimitive } from "@sprawlify/svelte/alert-dialog"
3  import { Button } from "@/components/ui/button"
4  import { cn } from "@/lib/utils"
5  import type { ComponentProps } from "svelte"
6
7  interface Props extends ComponentProps<typeof AlertDialogPrimitive.CloseTrigger>, Pick<ComponentProps<typeof Button>, "variant" | "size"> {}
8
9  let { class: className, variant = "default", size = "default", children, ...rest }: Props = $props()
10</script>
11
12<Button {variant} {size}>
13  {#snippet asChild(props)}
14    <AlertDialogPrimitive.CloseTrigger
15      data-slot="alert-dialog-cancel"
16      class={cn(className)}
17      {...props()}
18      {...rest}
19    >
20      {@render children?.()}
21    </AlertDialogPrimitive.CloseTrigger>
22  {/snippet}
23</Button>

1<script lang="ts">
2  import { AlertDialog as AlertDialogPrimitive } from "@sprawlify/svelte/alert-dialog"
3  import { cn } from "@/lib/utils"
4  import type { ComponentProps } from "svelte";
5
6  interface Props extends ComponentProps<typeof AlertDialogPrimitive.Backdrop> {}
7
8  let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<AlertDialogPrimitive.Backdrop
12  data-slot="alert-dialog-backdrop"
13  class={cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
14  {...rest}
15>
16  {@render children?.()}
17</AlertDialogPrimitive.Backdrop>

1<script lang="ts">
2  import { AlertDialog as AlertDialogPrimitive } from "@sprawlify/svelte/alert-dialog"
3  import { Button } from "@/components/ui/button"
4  import { cn } from "@/lib/utils"
5  import type { ComponentProps } from "svelte"
6
7  interface Props extends ComponentProps<typeof AlertDialogPrimitive.CloseTrigger>, Pick<ComponentProps<typeof Button>, "variant" | "size"> {}
8
9  let { class: className, variant = "outline", size = "default", value = "cancel", children, ...rest }: Props = $props()
10</script>
11
12<Button {variant} {size}>
13  {#snippet asChild(props)}
14    <AlertDialogPrimitive.CloseTrigger
15      data-slot="alert-dialog-cancel"
16      class={cn(className)}
17      value={value}
18      {...props()}
19      {...rest}
20    >
21      {@render children?.()}
22    </AlertDialogPrimitive.CloseTrigger>
23  {/snippet}
24</Button>

1<script lang="ts">
2  import { AlertDialog as AlertDialogPrimitive } from "@sprawlify/svelte/alert-dialog"
3  import { cn } from "@/lib/utils"
4  import AlertDialogPortal from "./alert-dialog-portal.svelte"
5  import AlertDialogBackdrop from "./alert-dialog-backdrop.svelte"
6  import type { ComponentProps } from "svelte";
7
8  interface Props extends ComponentProps<typeof AlertDialogPrimitive.Content> {
9    size?: "default" | "sm"
10  }
11
12  let { class: className, size = "default", children, ...rest }: Props = $props()
13</script>
14
15<AlertDialogPortal>
16  <AlertDialogBackdrop />
17  <AlertDialogPrimitive.Positioner>
18    <AlertDialogPrimitive.Content
19      data-slot="alert-dialog-content"
20      data-size={size}
21      class={cn(
22        "data-[state=open]:animate-in 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 bg-background ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",
23        className
24      )}
25      {...rest}
26    >
27      {@render children?.()}
28    </AlertDialogPrimitive.Content>
29  </AlertDialogPrimitive.Positioner>
30</AlertDialogPortal>

1<script lang="ts">
2  import { AlertDialog as AlertDialogPrimitive } from "@sprawlify/svelte/alert-dialog"
3  import { cn } from "@/lib/utils"
4  import type { ComponentProps } from "svelte";
5
6  interface Props extends ComponentProps<typeof AlertDialogPrimitive.Description> {}
7
8  let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<AlertDialogPrimitive.Description
12  data-slot="alert-dialog-description"
13  class={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3", className)}
14  {...rest}
15>
16  {@render children?.()}
17</AlertDialogPrimitive.Description>

1<script lang="ts">
2  import { cn } from "@/lib/utils"
3  import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
4  import type { HTMLAttributes } from "svelte/elements"
5
6  interface Props extends HTMLAttributes<HTMLDivElement>, PolymorphicProps<"div"> {}
7
8  let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<Sprawlify
12  as="div"
13  data-slot="alert-dialog-footer"
14  class={cn(
15    "bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
16    className
17  )}
18  {...rest}
19>
20  {@render children?.()}
21</Sprawlify>

1<script lang="ts">
2  import { cn } from "@/lib/utils"
3  import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
4  import type { HTMLAttributes } from "svelte/elements"
5
6  interface Props extends HTMLAttributes<HTMLDivElement>, PolymorphicProps<"div"> {}
7
8  let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<Sprawlify
12  as="div"
13  data-slot="alert-dialog-header"
14  class={cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className)}
15  {...rest}
16>
17  {@render children?.()}
18</Sprawlify>

1<script lang="ts">
2  import { cn } from "@/lib/utils"
3  import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
4  import type { HTMLAttributes } from "svelte/elements"
5
6  interface Props extends HTMLAttributes<HTMLDivElement>, PolymorphicProps<"div"> {}
7
8  let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<Sprawlify
12  as="div"
13  data-slot="alert-dialog-media"
14  class={cn("bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className)}
15  {...rest}
16>
17  {@render children?.()}
18</Sprawlify>

1<script lang="ts">
2  import { Portal } from "@sprawlify/svelte/portal"
3  import type { ComponentProps } from "svelte"
4
5  interface Props extends ComponentProps<typeof Portal> {
6    "data-slot"?: string
7  }
8
9  let { children, ...rest }: Props = $props()
10</script>
11
12<Portal data-slot="alert-dialog-portal" {...rest}>
13  {@render children?.()}
14</Portal>

1<script lang="ts">
2  import { AlertDialog as AlertDialogPrimitive } from "@sprawlify/svelte/alert-dialog"
3  import { cn } from "@/lib/utils"
4  import type { ComponentProps } from "svelte"
5
6  interface Props extends ComponentProps<typeof AlertDialogPrimitive.Title> {}
7
8  let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<AlertDialogPrimitive.Title
12  data-slot="alert-dialog-title"
13  class={cn("text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2 cn-font-heading", className)}
14  {...rest}
15>
16  {@render children?.()}
17</AlertDialogPrimitive.Title>

1<script lang="ts">
2  import { AlertDialog as AlertDialogPrimitive } from "@sprawlify/svelte/alert-dialog"
3  import type { ComponentProps } from "svelte"
4
5  interface Props extends ComponentProps<typeof AlertDialogPrimitive.Trigger> {}
6
7  let { children, ...rest }: Props = $props()
8</script>
9
10<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...rest}>
11  {@render children?.()}
12</AlertDialogPrimitive.Trigger>

1<script lang="ts">
2  import { AlertDialog as AlertDialogPrimitive } from "@sprawlify/svelte/alert-dialog"
3  import type { ComponentProps } from "svelte"
4
5  interface Props extends ComponentProps<typeof AlertDialogPrimitive.Root> {
6    "data-slot"?: string
7  }
8
9  let { children, ...rest }: Props = $props()
10</script>
11
12<AlertDialogPrimitive.Root data-slot="alert-dialog" {...rest}>
13  {@render children?.()}
14</AlertDialogPrimitive.Root>

1export { default as AlertDialog } from "./alert-dialog.svelte";2export { default as AlertDialogTrigger } from "./alert-dialog-trigger.svelte";3export { default as AlertDialogPortal } from "./alert-dialog-portal.svelte";4export { default as AlertDialogBackdrop } from "./alert-dialog-backdrop.svelte";5export { default as AlertDialogContent } from "./alert-dialog-content.svelte";6export { default as AlertDialogHeader } from "./alert-dialog-header.svelte";7export { default as AlertDialogFooter } from "./alert-dialog-footer.svelte";8export { default as AlertDialogMedia } from "./alert-dialog-media.svelte";9export { default as AlertDialogTitle } from "./alert-dialog-title.svelte";10export { default as AlertDialogDescription } from "./alert-dialog-description.svelte";11export { default as AlertDialogCancel } from "./alert-dialog-cancel.svelte";12export { default as AlertDialogAction } from "./alert-dialog-action.svelte";13