@tanglemedia/svelte-starter-ui-shadcn 0.0.6 → 0.2.0

package/dist/lib/components/ui/attachment/attachment-action.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type ButtonProps } from "../button/index.js";
+declare const AttachmentAction: import("svelte").Component<ButtonProps, {}, "ref">;
+type AttachmentAction = ReturnType<typeof AttachmentAction>;
+export default AttachmentAction;

package/dist/lib/components/ui/attachment/attachment-actions.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="attachment-actions"
+	class={cn("relative z-20 group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1 flex shrink-0 items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/attachment/attachment-actions.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const AttachmentActions: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type AttachmentActions = ReturnType<typeof AttachmentActions>;
+export default AttachmentActions;

package/dist/lib/components/ui/attachment/attachment-content.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="attachment-content"
+	class={cn("leading-tight group-data-[orientation=vertical]/attachment:px-1 max-w-full min-w-0 flex-1", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/attachment/attachment-content.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const AttachmentContent: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type AttachmentContent = ReturnType<typeof AttachmentContent>;
+export default AttachmentContent;

package/dist/lib/components/ui/attachment/attachment-description.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="attachment-description"
+	class={cn(
+		"mt-0.5 text-xs block min-w-0 truncate text-muted-foreground group-data-[state=error]/attachment:text-destructive/80",
+		"max-w-full",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/dist/lib/components/ui/attachment/attachment-description.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const AttachmentDescription: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
+type AttachmentDescription = ReturnType<typeof AttachmentDescription>;
+export default AttachmentDescription;

package/dist/lib/components/ui/attachment/attachment-group.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="attachment-group"
+	class={cn(
+		"scroll-px-1 gap-3 py-1 no-scrollbar flex min-w-0 scroll-fade-x snap-x snap-mandatory overflow-x-auto overscroll-x-contain *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/attachment/attachment-group.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const AttachmentGroup: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type AttachmentGroup = ReturnType<typeof AttachmentGroup>;
+export default AttachmentGroup;

package/dist/lib/components/ui/attachment/attachment-media.svelte

@@ -0,0 +1,44 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const attachmentMediaVariants = tv({
+		base: "w-10 rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5 relative flex aspect-square shrink-0 items-center justify-center overflow-hidden group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive [&_svg]:pointer-events-none",
+		variants: {
+			variant: {
+				icon: "cn-attachment-media-variant-icon",
+				image:
+					"opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover",
+			},
+		},
+		defaultVariants: {
+			variant: "icon",
+		},
+	});
+
+	export type AttachmentMediaVariant = VariantProps<typeof attachmentMediaVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "icon",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: AttachmentMediaVariant;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="attachment-media"
+	data-variant={variant}
+	class={cn(attachmentMediaVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/attachment/attachment-media.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const attachmentMediaVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        icon: "cn-attachment-media-variant-icon";
+        image: "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover";
+    };
+}, undefined, "w-10 rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5 relative flex aspect-square shrink-0 items-center justify-center overflow-hidden group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive [&_svg]:pointer-events-none", {
+    variant: {
+        icon: "cn-attachment-media-variant-icon";
+        image: "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        icon: "cn-attachment-media-variant-icon";
+        image: "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover";
+    };
+}, undefined>>;
+export type AttachmentMediaVariant = VariantProps<typeof attachmentMediaVariants>["variant"];
+import { type WithElementRef } from "../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    variant?: AttachmentMediaVariant;
+};
+declare const AttachmentMedia: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AttachmentMedia = ReturnType<typeof AttachmentMedia>;
+export default AttachmentMedia;

package/dist/lib/components/ui/attachment/attachment-title.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="attachment-title"
+	class={cn(
+		"font-medium block max-w-full min-w-0 truncate group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/dist/lib/components/ui/attachment/attachment-title.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const AttachmentTitle: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
+type AttachmentTitle = ReturnType<typeof AttachmentTitle>;
+export default AttachmentTitle;

package/dist/lib/components/ui/attachment/attachment-trigger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		type = "button",
+		child,
+		...restProps
+	}: WithElementRef<HTMLButtonAttributes> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn("absolute inset-0 z-10 outline-none absolute inset-0 z-10 outline-none", className),
+		"data-slot": "attachment-trigger",
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button bind:this={ref} {type} {...mergedProps}>
+		{@render mergedProps.children?.()}
+	</button>
+{/if}

package/dist/lib/components/ui/attachment/attachment-trigger.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type WithElementRef } from "../../utils.js";
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLButtonAttributes> & {
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+};
+declare const AttachmentTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AttachmentTrigger = ReturnType<typeof AttachmentTrigger>;
+export default AttachmentTrigger;

package/dist/lib/components/ui/attachment/attachment.svelte

@@ -0,0 +1,53 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const attachmentVariants = tv({
+		base: "w-fit rounded-xl focus-within:ring-1 focus-within:ring-ring/50 group/attachment relative flex max-w-full min-w-0 shrink-0 flex-wrap border bg-card text-card-foreground transition-colors has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed",
+		variants: {
+			size: {
+				default: "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
+				sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
+				xs: "gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1",
+			},
+			orientation: {
+				horizontal: "min-w-40 items-center",
+				vertical: "w-24 has-data-[slot=attachment-content]:w-30 flex-col",
+			},
+		},
+	});
+
+	export type AttachmentSize = VariantProps<typeof attachmentVariants>["size"];
+	export type AttachmentOrientation = VariantProps<typeof attachmentVariants>["orientation"];
+	export type AttachmentState = "idle" | "uploading" | "processing" | "error" | "done";
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		state = "done",
+		size = "default",
+		orientation = "horizontal",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		state?: AttachmentState;
+		size?: AttachmentSize;
+		orientation?: AttachmentOrientation;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="attachment"
+	data-state={state}
+	data-size={size}
+	data-orientation={orientation}
+	class={cn(attachmentVariants({ size, orientation }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/attachment/attachment.svelte.d.ts

@@ -0,0 +1,45 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const attachmentVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        default: "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2";
+        sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5";
+        xs: "gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1";
+    };
+    orientation: {
+        horizontal: "min-w-40 items-center";
+        vertical: "w-24 has-data-[slot=attachment-content]:w-30 flex-col";
+    };
+}, undefined, "w-fit rounded-xl focus-within:ring-1 focus-within:ring-ring/50 group/attachment relative flex max-w-full min-w-0 shrink-0 flex-wrap border bg-card text-card-foreground transition-colors has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed", {
+    size: {
+        default: "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2";
+        sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5";
+        xs: "gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1";
+    };
+    orientation: {
+        horizontal: "min-w-40 items-center";
+        vertical: "w-24 has-data-[slot=attachment-content]:w-30 flex-col";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        default: "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2";
+        sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5";
+        xs: "gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1";
+    };
+    orientation: {
+        horizontal: "min-w-40 items-center";
+        vertical: "w-24 has-data-[slot=attachment-content]:w-30 flex-col";
+    };
+}, undefined>>;
+export type AttachmentSize = VariantProps<typeof attachmentVariants>["size"];
+export type AttachmentOrientation = VariantProps<typeof attachmentVariants>["orientation"];
+export type AttachmentState = "idle" | "uploading" | "processing" | "error" | "done";
+import { type WithElementRef } from "../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    state?: AttachmentState;
+    size?: AttachmentSize;
+    orientation?: AttachmentOrientation;
+};
+declare const Attachment: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Attachment = ReturnType<typeof Attachment>;
+export default Attachment;

package/dist/lib/components/ui/attachment/index.d.ts

@@ -0,0 +1,10 @@
+import Action from "./attachment-action.svelte";
+import Actions from "./attachment-actions.svelte";
+import Content from "./attachment-content.svelte";
+import Description from "./attachment-description.svelte";
+import Group from "./attachment-group.svelte";
+import Media from "./attachment-media.svelte";
+import Title from "./attachment-title.svelte";
+import Trigger from "./attachment-trigger.svelte";
+import Root, { attachmentVariants, type AttachmentOrientation, type AttachmentSize, type AttachmentState } from "./attachment.svelte";
+export { Root, Group, Media, Content, Title, Description, Actions, Action, Trigger, attachmentVariants, type AttachmentSize, type AttachmentOrientation, type AttachmentState, Root as Attachment, Group as AttachmentGroup, Media as AttachmentMedia, Content as AttachmentContent, Title as AttachmentTitle, Description as AttachmentDescription, Actions as AttachmentActions, Action as AttachmentAction, Trigger as AttachmentTrigger, };

package/dist/lib/components/ui/attachment/index.js

@@ -0,0 +1,12 @@
+import Action from "./attachment-action.svelte";
+import Actions from "./attachment-actions.svelte";
+import Content from "./attachment-content.svelte";
+import Description from "./attachment-description.svelte";
+import Group from "./attachment-group.svelte";
+import Media from "./attachment-media.svelte";
+import Title from "./attachment-title.svelte";
+import Trigger from "./attachment-trigger.svelte";
+import Root, { attachmentVariants, } from "./attachment.svelte";
+export { Root, Group, Media, Content, Title, Description, Actions, Action, Trigger, attachmentVariants, 
+//
+Root as Attachment, Group as AttachmentGroup, Media as AttachmentMedia, Content as AttachmentContent, Title as AttachmentTitle, Description as AttachmentDescription, Actions as AttachmentActions, Action as AttachmentAction, Trigger as AttachmentTrigger, };

package/dist/lib/components/ui/avatar/avatar-badge.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="avatar-badge"
+	class={cn(
+		"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
+		"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+		"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+		"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/dist/lib/components/ui/avatar/avatar-badge.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const AvatarBadge: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
+type AvatarBadge = ReturnType<typeof AvatarBadge>;
+export default AvatarBadge;

package/dist/lib/components/ui/avatar/avatar-fallback.svelte

@@ -1,16 +1,20 @@
 <script lang="ts">
 	import { Avatar as AvatarPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "../../utils.js";
 
 	let {
-		class: className,
 		ref = $bindable(null),
+		class: className,
 		...restProps
 	}: AvatarPrimitive.FallbackProps = $props();
 </script>
 
 <AvatarPrimitive.Fallback
 	bind:ref
-	class={cn("bg-muted flex size-full items-center justify-center", className)}
+	data-slot="avatar-fallback"
+	class={cn(
+		"bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
+		className
+	)}
 	{...restProps}
 />

package/dist/lib/components/ui/avatar/avatar-group-count.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="avatar-group-count"
+	class={cn(
+		"bg-muted text-muted-foreground size-8 rounded-full text-sm 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 relative flex shrink-0 items-center justify-center ring-2 ring-background",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/avatar/avatar-group-count.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const AvatarGroupCount: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type AvatarGroupCount = ReturnType<typeof AvatarGroupCount>;
+export default AvatarGroupCount;

package/dist/lib/components/ui/avatar/avatar-group.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="avatar-group"
+	class={cn(
+		"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/avatar/avatar-group.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const AvatarGroup: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type AvatarGroup = ReturnType<typeof AvatarGroup>;
+export default AvatarGroup;

package/dist/lib/components/ui/avatar/avatar-image.svelte

@@ -1,20 +1,17 @@
 <script lang="ts">
 	import { Avatar as AvatarPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "../../utils.js";
 
 	let {
-		class: className,
-		src,
-		alt,
 		ref = $bindable(null),
+		class: className,
 		...restProps
 	}: AvatarPrimitive.ImageProps = $props();
 </script>
 
 <AvatarPrimitive.Image
 	bind:ref
-	{src}
-	{alt}
-	class={cn("aspect-square size-full", className)}
+	data-slot="avatar-image"
+	class={cn("rounded-full aspect-square size-full object-cover", className)}
 	{...restProps}
 />

package/dist/lib/components/ui/avatar/avatar.svelte

@@ -1,18 +1,26 @@
 <script lang="ts">
 	import { Avatar as AvatarPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "../../utils.js";
 
 	let {
-		class: className,
 		ref = $bindable(null),
 		loadingStatus = $bindable("loading"),
+		size = "default",
+		class: className,
 		...restProps
-	}: AvatarPrimitive.RootProps = $props();
+	}: AvatarPrimitive.RootProps & {
+		size?: "default" | "sm" | "lg";
+	} = $props();
 </script>
 
 <AvatarPrimitive.Root
-	bind:loadingStatus
 	bind:ref
-	class={cn("relative flex size-10 shrink-0 overflow-hidden rounded-full", className)}
+	bind:loadingStatus
+	data-slot="avatar"
+	data-size={size}
+	class={cn(
+		"size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten",
+		className
+	)}
 	{...restProps}
 />

package/dist/lib/components/ui/avatar/avatar.svelte.d.ts

@@ -1,4 +1,7 @@
 import { Avatar as AvatarPrimitive } from "bits-ui";
-declare const Avatar: import("svelte").Component<AvatarPrimitive.RootProps, {}, "ref" | "loadingStatus">;
+type $$ComponentProps = AvatarPrimitive.RootProps & {
+    size?: "default" | "sm" | "lg";
+};
+declare const Avatar: import("svelte").Component<$$ComponentProps, {}, "ref" | "loadingStatus">;
 type Avatar = ReturnType<typeof Avatar>;
 export default Avatar;

package/dist/lib/components/ui/avatar/index.d.ts

@@ -1,4 +1,7 @@
-import Root from "./avatar.svelte";
-import Image from "./avatar-image.svelte";
+import Badge from "./avatar-badge.svelte";
 import Fallback from "./avatar-fallback.svelte";
-export { Root, Image, Fallback, Root as Avatar, Image as AvatarImage, Fallback as AvatarFallback, };
+import GroupCount from "./avatar-group-count.svelte";
+import Group from "./avatar-group.svelte";
+import Image from "./avatar-image.svelte";
+import Root from "./avatar.svelte";
+export { Root, Image, Fallback, Badge, Group, GroupCount, Root as Avatar, Image as AvatarImage, Fallback as AvatarFallback, Badge as AvatarBadge, Group as AvatarGroup, GroupCount as AvatarGroupCount, };

package/dist/lib/components/ui/avatar/index.js

@@ -1,6 +1,9 @@
-import Root from "./avatar.svelte";
-import Image from "./avatar-image.svelte";
+import Badge from "./avatar-badge.svelte";
 import Fallback from "./avatar-fallback.svelte";
-export { Root, Image, Fallback, 
+import GroupCount from "./avatar-group-count.svelte";
+import Group from "./avatar-group.svelte";
+import Image from "./avatar-image.svelte";
+import Root from "./avatar.svelte";
+export { Root, Image, Fallback, Badge, Group, GroupCount, 
 //
-Root as Avatar, Image as AvatarImage, Fallback as AvatarFallback, };
+Root as Avatar, Image as AvatarImage, Fallback as AvatarFallback, Badge as AvatarBadge, Group as AvatarGroup, GroupCount as AvatarGroupCount, };