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

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

@@ -12,6 +12,9 @@
 <AvatarPrimitive.Fallback
 	bind:ref
 	data-slot="avatar-fallback"
-	class={cn("bg-muted flex size-full items-center justify-center rounded-full", className)}
+	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

@@ -12,6 +12,6 @@
 <AvatarPrimitive.Image
 	bind:ref
 	data-slot="avatar-image"
-	class={cn("aspect-square size-full", className)}
+	class={cn("rounded-full aspect-square size-full object-cover", className)}
 	{...restProps}
 />

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

@@ -5,15 +5,22 @@
 	let {
 		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:ref
 	bind:loadingStatus
 	data-slot="avatar"
-	class={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
+	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, };

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

@@ -2,16 +2,15 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const badgeVariants = tv({
-		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-full border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
+		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/90 border-transparent",
-				secondary:
-					"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
-				destructive:
-					"bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white",
-				outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+				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: {
@@ -23,8 +22,8 @@
 </script>
 
 <script lang="ts">
-	import type { HTMLAnchorAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAnchorAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),

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

@@ -1,29 +1,35 @@
 import { type VariantProps } from "tailwind-variants";
 export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
+        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";
     };
-}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-full border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3", {
+}, undefined, "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", {
     variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
+        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";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
+        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";
     };
-}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-full border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3", unknown, unknown, undefined>>;
+}, undefined>>;
 export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
-import type { HTMLAnchorAttributes } from "svelte/elements";
 import { type WithElementRef } from "../../utils.js";
+import type { HTMLAnchorAttributes } from "svelte/elements";
 type $$ComponentProps = WithElementRef<HTMLAnchorAttributes> & {
     variant?: BadgeVariant;
 };

package/dist/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
-	import type { HTMLAttributes } from "svelte/elements";
+	import MoreHorizontalIcon from '@lucide/svelte/icons/more-horizontal';
 	import { cn, type WithElementRef, type WithoutChildren } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -15,9 +15,9 @@
 	data-slot="breadcrumb-ellipsis"
 	role="presentation"
 	aria-hidden="true"
-	class={cn("flex size-9 items-center justify-center", className)}
+	class={cn("size-5 [&>svg]:size-4 flex items-center justify-center", className)}
 	{...restProps}
 >
-	<EllipsisIcon class="size-4" />
+	<MoreHorizontalIcon  />
 	<span class="sr-only">More</span>
 </span>

package/dist/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte.d.ts

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

package/dist/lib/components/ui/breadcrumb/breadcrumb-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLLiAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLLiAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <li
 	bind:this={ref}
 	data-slot="breadcrumb-item"
-	class={cn("inline-flex items-center gap-1.5", className)}
+	class={cn("gap-1 inline-flex items-center", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/lib/components/ui/breadcrumb/breadcrumb-item.svelte.d.ts

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

package/dist/lib/components/ui/breadcrumb/breadcrumb-link.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { HTMLAnchorAttributes } from "svelte/elements";
-	import type { Snippet } from "svelte";
 	import { cn, type WithElementRef } from "../../utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAnchorAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),

package/dist/lib/components/ui/breadcrumb/breadcrumb-link.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { HTMLAnchorAttributes } from "svelte/elements";
-import type { Snippet } from "svelte";
 import { type WithElementRef } from "../../utils.js";
+import type { Snippet } from "svelte";
+import type { HTMLAnchorAttributes } from "svelte/elements";
 type $$ComponentProps = WithElementRef<HTMLAnchorAttributes> & {
     child?: Snippet<[{
         props: HTMLAnchorAttributes;

package/dist/lib/components/ui/breadcrumb/breadcrumb-list.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLOlAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLOlAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,10 +13,7 @@
 <ol
 	bind:this={ref}
 	data-slot="breadcrumb-list"
-	class={cn(
-		"text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5",
-		className
-	)}
+	class={cn("text-muted-foreground gap-1.5 text-sm flex flex-wrap items-center wrap-break-word", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/lib/components/ui/breadcrumb/breadcrumb-list.svelte.d.ts

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

package/dist/lib/components/ui/breadcrumb/breadcrumb-page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),

package/dist/lib/components/ui/breadcrumb/breadcrumb-page.svelte.d.ts

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

package/dist/lib/components/ui/breadcrumb/breadcrumb-separator.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
 	import { cn, type WithElementRef } from "../../utils.js";
 	import type { HTMLLiAttributes } from "svelte/elements";
 
@@ -22,6 +22,6 @@
 	{#if children}
 		{@render children?.()}
 	{:else}
-		<ChevronRightIcon />
+		<ChevronRightIcon class="cn-rtl-flip" />
 	{/if}
 </li>

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { WithElementRef } from "../../utils.js";
+	import { cn } from "../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
@@ -13,8 +14,8 @@
 <nav
 	bind:this={ref}
 	data-slot="breadcrumb"
-	class={className}
 	aria-label="breadcrumb"
+	class={cn(className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -1,8 +1,8 @@
-import Root from "./breadcrumb.svelte";
 import Ellipsis from "./breadcrumb-ellipsis.svelte";
 import Item from "./breadcrumb-item.svelte";
-import Separator from "./breadcrumb-separator.svelte";
 import Link from "./breadcrumb-link.svelte";
 import List from "./breadcrumb-list.svelte";
 import Page from "./breadcrumb-page.svelte";
+import Separator from "./breadcrumb-separator.svelte";
+import Root from "./breadcrumb.svelte";
 export { Root, Ellipsis, Item, Separator, Link, List, Page, Root as Breadcrumb, Ellipsis as BreadcrumbEllipsis, Item as BreadcrumbItem, Separator as BreadcrumbSeparator, Link as BreadcrumbLink, List as BreadcrumbList, Page as BreadcrumbPage, };

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

@@ -1,10 +1,10 @@
-import Root from "./breadcrumb.svelte";
 import Ellipsis from "./breadcrumb-ellipsis.svelte";
 import Item from "./breadcrumb-item.svelte";
-import Separator from "./breadcrumb-separator.svelte";
 import Link from "./breadcrumb-link.svelte";
 import List from "./breadcrumb-list.svelte";
 import Page from "./breadcrumb-page.svelte";
+import Separator from "./breadcrumb-separator.svelte";
+import Root from "./breadcrumb.svelte";
 export { Root, Ellipsis, Item, Separator, Link, List, Page, 
 //
 Root as Breadcrumb, Ellipsis as BreadcrumbEllipsis, Item as BreadcrumbItem, Separator as BreadcrumbSeparator, Link as BreadcrumbLink, List as BreadcrumbList, Page as BreadcrumbPage, };

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		child,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(
+			"rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50 group-data-[align=end]/bubble:self-end w-fit max-w-full min-w-0 overflow-hidden wrap-break-word [button]:text-left [button,a]:transition-colors",
+			className
+		),
+		"data-slot": "bubble-content",
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div bind:this={ref} {...mergedProps}>
+		{@render mergedProps.children?.()}
+	</div>
+{/if}

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

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

package/dist/lib/components/ui/bubble/bubble-group.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="bubble-group"
+	class={cn("gap-2 flex min-w-0 flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

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

package/dist/lib/components/ui/bubble/bubble-reactions.svelte

@@ -0,0 +1,52 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const bubbleReactionsVariants = tv({
+		base: "rounded-full ring-3 ring-card bg-muted shrink-0 gap-1 px-1.5 py-0.5 has-[button]:p-0 text-sm absolute z-10 flex w-fit items-center justify-center",
+		variants: {
+			side: {
+				top: "top-0 -translate-y-3/4",
+				bottom: "bottom-0 translate-y-3/4",
+			},
+			align: {
+				start: "left-3",
+				end: "right-3",
+			},
+		},
+		defaultVariants: {
+			side: "bottom",
+			align: "end",
+		},
+	});
+
+	export type BubbleReactionsSide = VariantProps<typeof bubbleReactionsVariants>["side"];
+	export type BubbleReactionsAlign = VariantProps<typeof bubbleReactionsVariants>["align"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		side = "bottom",
+		align = "end",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		side?: BubbleReactionsSide;
+		align?: BubbleReactionsAlign;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="bubble-reactions"
+	data-align={align}
+	data-side={side}
+	class={cn(bubbleReactionsVariants({ side, align }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>