Avatar

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<HTMLSpanElement>, PolymorphicProps<"span"> {}
7
8let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<Sprawlify
12  as="span"
13  data-scope="avatar"
14  data-part="badge"
15  data-slot="avatar-badge"
16  class={cn(
17    "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none",
18    "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
19    "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
20    "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
21    className
22  )}
23  {...rest}
24>
25  {@render children?.()}
26</Sprawlify>

1<script lang="ts">
2import { Avatar as AvatarPrimitive } from "@sprawlify/svelte/avatar"
3import { cn } from "@/lib/utils"
4import type { ComponentProps } from "svelte"
5
6interface Props extends ComponentProps<typeof AvatarPrimitive.Fallback> {}
7
8let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<AvatarPrimitive.Fallback
12  data-slot="avatar-fallback"
13  class={cn(
14    "rounded-[inherit] overflow-hidden bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
15    className
16  )}
17  {...rest}
18>
19  {@render children?.()}
20</AvatarPrimitive.Fallback>

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="avatar"
14  data-part="group-count"
15  data-slot="avatar-group-count"
16  class={cn(
17    "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
18    className
19  )}
20  {...rest}
21>
22  {@render children?.()}
23</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="avatar"
14  data-part="group"
15  data-slot="avatar-group"
16  class={cn(
17    "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
18    className
19  )}
20  {...rest}
21>
22  {@render children?.()}
23</Sprawlify>

1<script lang="ts">
2import { Avatar as AvatarPrimitive } from "@sprawlify/svelte/avatar"
3import { cn } from "@/lib/utils"
4import type { ComponentProps } from "svelte"
5
6interface Props extends ComponentProps<typeof AvatarPrimitive.Image> {}
7
8let { class: className, ...rest }: Props = $props()
9</script>
10
11<AvatarPrimitive.Image
12  data-slot="avatar-image"
13  class={cn("aspect-square rounded-[inherit] size-full overflow-hidden", className)}
14  {...rest}
15/>

1<script lang="ts">
2import { Avatar as AvatarPrimitive } from "@sprawlify/svelte/avatar"
3import { cn } from "@/lib/utils"
4import type { ComponentProps } from "svelte"
5
6interface Props extends ComponentProps<typeof AvatarPrimitive.Root> {
7  size?: "default" | "sm" | "lg"
8}
9
10let { class: className, size = "default", children, ...rest }: Props = $props()
11</script>
12
13<AvatarPrimitive.Root
14  data-slot="avatar"
15  data-size={size}
16  class={cn(
17    "group/avatar relative flex size-8 shrink-0 rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
18    className
19  )}
20  {...rest}
21>
22  {@render children?.()}
23</AvatarPrimitive.Root>

1export { default as Avatar } from "./avatar.svelte";2export { default as AvatarImage } from "./avatar-image.svelte";3export { default as AvatarFallback } from "./avatar-fallback.svelte";4export { default as AvatarBadge } from "./avatar-badge.svelte";5export { default as AvatarGroup } from "./avatar-group.svelte";6export { default as AvatarGroupCount } from "./avatar-group-count.svelte";7