Empty

1<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
4import type { HTMLAttributes } from "svelte/elements"
5
6interface Props extends HTMLAttributes<HTMLDivElement>, PolymorphicProps<"div"> {}
7
8let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<Sprawlify
12  as="div"
13  data-slot="empty-content"
14  class={cn(
15    "gap-2.5 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance",
16    className
17  )}
18  {...rest}
19>
20  {@render children?.()}
21</Sprawlify>

1<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
4import type { HTMLAttributes } from "svelte/elements"
5
6interface Props extends HTMLAttributes<HTMLParagraphElement>, PolymorphicProps<"p"> {}
7
8let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<Sprawlify
12  as="p"
13  data-slot="empty-description"
14  class={cn(
15    "text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
16    className
17  )}
18  {...rest}
19>
20  {@render children?.()}
21</Sprawlify>

1<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
4import type { HTMLAttributes } from "svelte/elements"
5
6interface Props extends HTMLAttributes<HTMLDivElement>, PolymorphicProps<"div"> {}
7
8let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<Sprawlify
12  as="div"
13  data-slot="empty-header"
14  class={cn(
15    "gap-2 flex max-w-sm flex-col items-center",
16    className
17  )}
18  {...rest}
19>
20  {@render children?.()}
21</Sprawlify>

1<script module lang="ts">
2import { cva, type VariantProps } from "class-variance-authority"
3
4export const emptyMediaVariants = cva(
5  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
6  {
7    variants: {
8      variant: {
9        default: "bg-transparent",
10        icon: "bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4",
11      },
12    },
13    defaultVariants: {
14      variant: "default",
15    },
16  }
17)
18</script>
19
20<script lang="ts">
21import { cn } from "@/lib/utils"
22import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
23import type { HTMLAttributes } from "svelte/elements"
24
25interface Props extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof emptyMediaVariants>, PolymorphicProps<"div"> {}
26
27let { class: className, variant = "default", children, ...rest }: Props = $props()
28</script>
29
30<Sprawlify
31  as="div"
32  data-slot="empty-icon"
33  data-variant={variant}
34  class={cn(emptyMediaVariants({ variant, className }))}
35  {...rest}
36>
37  {@render children?.()}
38</Sprawlify>

1<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
4import type { HTMLAttributes } from "svelte/elements"
5
6interface Props extends HTMLAttributes<HTMLDivElement>, PolymorphicProps<"div"> {}
7
8let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<Sprawlify
12  as="div"
13  data-slot="empty-title"
14  class={cn("text-sm font-medium tracking-tight", className)}
15  {...rest}
16>
17  {@render children?.()}
18</Sprawlify>

1<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
4import type { HTMLAttributes } from "svelte/elements"
5
6interface Props extends HTMLAttributes<HTMLDivElement>, PolymorphicProps<"div"> {}
7
8let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<Sprawlify
12  as="div"
13  data-scope="empty"
14  data-part="root"
15  data-slot="empty"
16  class={cn(
17    "gap-4 rounded-xl border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance",
18    className
19  )}
20  {...rest}
21>
22  {@render children?.()}
23</Sprawlify>

1export { default as Empty } from "./empty.svelte";2export { default as EmptyHeader } from "./empty-header.svelte";3export { default as EmptyMedia } from "./empty-media.svelte";4export { default as EmptyTitle } from "./empty-title.svelte";5export { default as EmptyDescription } from "./empty-description.svelte";6export { default as EmptyContent } from "./empty-content.svelte";7