@orochibraru/ui 0.0.0-stage → 0.0.0

package/dist/components/ui/alert-dialog/alert-dialog-cancel.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	import {
+		type ButtonSize,
+		type ButtonVariant,
+		buttonVariants,
+	} from "../button/index.js";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "outline",
+		size = "default",
+		...restProps
+	}: AlertDialogPrimitive.CancelProps & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+	} = $props();
+</script>
+
+<AlertDialogPrimitive.Cancel
+	bind:ref
+	data-slot="alert-dialog-cancel"
+	class={cn(buttonVariants({ variant, size }), "", className)}
+	{...restProps}
+/>

package/dist/components/ui/alert-dialog/alert-dialog-cancel.svelte.d.ts

@@ -0,0 +1,9 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import { type ButtonSize, type ButtonVariant } from "../button/index.js";
+type $$ComponentProps = AlertDialogPrimitive.CancelProps & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};
+declare const AlertDialogCancel: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AlertDialogCancel = ReturnType<typeof AlertDialogCancel>;
+export default AlertDialogCancel;

package/dist/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import type { ComponentProps } from "svelte";
+
+	import {
+		cn,
+		type WithoutChild,
+		type WithoutChildrenOrChild,
+	} from "../../../utils.js";
+
+	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
+	import AlertDialogPortal from "./alert-dialog-portal.svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		size = "default",
+		portalProps,
+		...restProps
+	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
+		size?: "default" | "sm";
+		portalProps?: WithoutChildrenOrChild<
+			ComponentProps<typeof AlertDialogPortal>
+		>;
+	} = $props();
+</script>
+
+<AlertDialogPortal {...portalProps}>
+	<AlertDialogOverlay />
+	<AlertDialogPrimitive.Content
+		bind:ref
+		data-slot="alert-dialog-content"
+		data-size={size}
+		class={cn(
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-popover text-popover-foreground ring-foreground/10 gap-6 rounded-xl p-6 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg 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",
+			className,
+		)}
+		{...restProps}
+	/>
+</AlertDialogPortal>

package/dist/components/ui/alert-dialog/alert-dialog-content.svelte.d.ts

@@ -0,0 +1,11 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import type { ComponentProps } from "svelte";
+import { type WithoutChild, type WithoutChildrenOrChild } from "../../../utils.js";
+import AlertDialogPortal from "./alert-dialog-portal.svelte";
+type $$ComponentProps = WithoutChild<AlertDialogPrimitive.ContentProps> & {
+    size?: "default" | "sm";
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof AlertDialogPortal>>;
+};
+declare const AlertDialogContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AlertDialogContent = ReturnType<typeof AlertDialogContent>;
+export default AlertDialogContent;

package/dist/components/ui/alert-dialog/alert-dialog-description.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.DescriptionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Description
+	bind:ref
+	data-slot="alert-dialog-description"
+	class={cn(
+		"text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3",
+		className,
+	)}
+	{...restProps}
+/>

package/dist/components/ui/alert-dialog/alert-dialog-description.svelte.d.ts

@@ -0,0 +1,4 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+declare const AlertDialogDescription: import("svelte").Component<AlertDialogPrimitive.DescriptionProps, {}, "ref">;
+type AlertDialogDescription = ReturnType<typeof AlertDialogDescription>;
+export default AlertDialogDescription;

package/dist/components/ui/alert-dialog/alert-dialog-footer.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-footer"
+	class={cn(
+		"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",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/alert-dialog/alert-dialog-footer.svelte.d.ts

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

package/dist/components/ui/alert-dialog/alert-dialog-header.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-header"
+	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-6 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,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/alert-dialog/alert-dialog-header.svelte.d.ts

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

package/dist/components/ui/alert-dialog/alert-dialog-media.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-media"
+	class={cn(
+		"bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/alert-dialog/alert-dialog-media.svelte.d.ts

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

package/dist/components/ui/alert-dialog/alert-dialog-overlay.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.OverlayProps = $props();
+</script>
+
+<AlertDialogPrimitive.Overlay
+	bind:ref
+	data-slot="alert-dialog-overlay"
+	class={cn(
+		"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50",
+		className,
+	)}
+	{...restProps}
+/>

package/dist/components/ui/alert-dialog/alert-dialog-overlay.svelte.d.ts

@@ -0,0 +1,4 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+declare const AlertDialogOverlay: import("svelte").Component<AlertDialogPrimitive.OverlayProps, {}, "ref">;
+type AlertDialogOverlay = ReturnType<typeof AlertDialogOverlay>;
+export default AlertDialogOverlay;

package/dist/components/ui/alert-dialog/alert-dialog-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { ...restProps }: AlertDialogPrimitive.PortalProps = $props();
+</script>
+
+<AlertDialogPrimitive.Portal {...restProps} />

package/dist/components/ui/alert-dialog/alert-dialog-portal.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const AlertDialogPortal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+type AlertDialogPortal = ReturnType<typeof AlertDialogPortal>;
+export default AlertDialogPortal;

package/dist/components/ui/alert-dialog/alert-dialog-title.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.TitleProps = $props();
+</script>
+
+<AlertDialogPrimitive.Title
+	bind:ref
+	data-slot="alert-dialog-title"
+	class={cn(
+		"text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+		className,
+	)}
+	{...restProps}
+/>

package/dist/components/ui/alert-dialog/alert-dialog-title.svelte.d.ts

@@ -0,0 +1,4 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+declare const AlertDialogTitle: import("svelte").Component<AlertDialogPrimitive.TitleProps, {}, "ref">;
+type AlertDialogTitle = ReturnType<typeof AlertDialogTitle>;
+export default AlertDialogTitle;

package/dist/components/ui/alert-dialog/alert-dialog-trigger.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		...restProps
+	}: AlertDialogPrimitive.TriggerProps = $props();
+</script>
+
+<AlertDialogPrimitive.Trigger
+	bind:ref
+	data-slot="alert-dialog-trigger"
+	{...restProps}
+/>

package/dist/components/ui/alert-dialog/alert-dialog-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+declare const AlertDialogTrigger: import("svelte").Component<AlertDialogPrimitive.TriggerProps, {}, "ref">;
+type AlertDialogTrigger = ReturnType<typeof AlertDialogTrigger>;
+export default AlertDialogTrigger;

package/dist/components/ui/alert-dialog/alert-dialog.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let {
+		open = $bindable(false),
+		...restProps
+	}: AlertDialogPrimitive.RootProps = $props();
+</script>
+
+<AlertDialogPrimitive.Root bind:open {...restProps} />

package/dist/components/ui/alert-dialog/alert-dialog.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const AlertDialog: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
+type AlertDialog = ReturnType<typeof AlertDialog>;
+export default AlertDialog;

package/dist/components/ui/alert-dialog/index.d.ts

@@ -0,0 +1,13 @@
+import Action from "./alert-dialog-action.svelte";
+import Cancel from "./alert-dialog-cancel.svelte";
+import Content from "./alert-dialog-content.svelte";
+import Description from "./alert-dialog-description.svelte";
+import Footer from "./alert-dialog-footer.svelte";
+import Header from "./alert-dialog-header.svelte";
+import Media from "./alert-dialog-media.svelte";
+import Overlay from "./alert-dialog-overlay.svelte";
+import Portal from "./alert-dialog-portal.svelte";
+import Title from "./alert-dialog-title.svelte";
+import Trigger from "./alert-dialog-trigger.svelte";
+import Root from "./alert-dialog.svelte";
+export { Root, Title, Action, Cancel, Portal, Footer, Header, Trigger, Overlay, Content, Description, Media, Root as AlertDialog, Title as AlertDialogTitle, Action as AlertDialogAction, Cancel as AlertDialogCancel, Portal as AlertDialogPortal, Footer as AlertDialogFooter, Header as AlertDialogHeader, Trigger as AlertDialogTrigger, Overlay as AlertDialogOverlay, Content as AlertDialogContent, Description as AlertDialogDescription, Media as AlertDialogMedia, };

package/dist/components/ui/alert-dialog/index.js

@@ -0,0 +1,15 @@
+import Action from "./alert-dialog-action.svelte";
+import Cancel from "./alert-dialog-cancel.svelte";
+import Content from "./alert-dialog-content.svelte";
+import Description from "./alert-dialog-description.svelte";
+import Footer from "./alert-dialog-footer.svelte";
+import Header from "./alert-dialog-header.svelte";
+import Media from "./alert-dialog-media.svelte";
+import Overlay from "./alert-dialog-overlay.svelte";
+import Portal from "./alert-dialog-portal.svelte";
+import Title from "./alert-dialog-title.svelte";
+import Trigger from "./alert-dialog-trigger.svelte";
+import Root from "./alert-dialog.svelte";
+export { Root, Title, Action, Cancel, Portal, Footer, Header, Trigger, Overlay, Content, Description, Media, 
+//
+Root as AlertDialog, Title as AlertDialogTitle, Action as AlertDialogAction, Cancel as AlertDialogCancel, Portal as AlertDialogPortal, Footer as AlertDialogFooter, Header as AlertDialogHeader, Trigger as AlertDialogTrigger, Overlay as AlertDialogOverlay, Content as AlertDialogContent, Description as AlertDialogDescription, Media as AlertDialogMedia, };

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	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/components/ui/avatar/avatar-badge.svelte.d.ts

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

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.FallbackProps = $props();
+</script>
+
+<AvatarPrimitive.Fallback
+	bind:ref
+	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/components/ui/avatar/avatar-fallback.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Avatar as AvatarPrimitive } from "bits-ui";
+declare const AvatarFallback: import("svelte").Component<AvatarPrimitive.FallbackProps, {}, "ref">;
+type AvatarFallback = ReturnType<typeof AvatarFallback>;
+export default AvatarFallback;

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	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/components/ui/avatar/avatar-group-count.svelte.d.ts

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

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	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/components/ui/avatar/avatar-group.svelte.d.ts

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

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

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

package/dist/components/ui/avatar/avatar-image.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Avatar as AvatarPrimitive } from "bits-ui";
+declare const AvatarImage: import("svelte").Component<AvatarPrimitive.ImageProps, {}, "ref">;
+type AvatarImage = ReturnType<typeof AvatarImage>;
+export default AvatarImage;

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		loadingStatus = $bindable("loading"),
+		size = "default",
+		class: className,
+		...restProps
+	}: AvatarPrimitive.RootProps & {
+		size?: "default" | "sm" | "lg";
+	} = $props();
+</script>
+
+<AvatarPrimitive.Root
+	bind:ref
+	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/components/ui/avatar/avatar.svelte.d.ts

@@ -0,0 +1,7 @@
+import { Avatar as AvatarPrimitive } from "bits-ui";
+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/components/ui/avatar/index.d.ts

@@ -0,0 +1,7 @@
+import Badge from "./avatar-badge.svelte";
+import Fallback from "./avatar-fallback.svelte";
+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/components/ui/avatar/index.js

@@ -0,0 +1,9 @@
+import Badge from "./avatar-badge.svelte";
+import Fallback from "./avatar-fallback.svelte";
+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/components/ui/badge/badge.svelte

@@ -0,0 +1,54 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const badgeVariants = tv({
+		base: "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+				secondary:
+					"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+				destructive:
+					"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+				outline:
+					"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+				ghost:
+					"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	bind:this={ref}
+	data-slot="badge"
+	{href}
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>