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

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

@@ -1,16 +1,16 @@
 <script lang="ts" module>
 	import { type VariantProps, tv } from "tailwind-variants";
+
 	export const badgeVariants = tv({
-		base: "focus:ring-ring inline-flex select-none items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+		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 hover:bg-primary/80 border-transparent shadow",
-				secondary:
-					"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
-				destructive:
-					"bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent shadow",
-				outline: "text-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: {
@@ -22,9 +22,8 @@
 </script>
 
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "../../utils.js";
 	import type { HTMLAnchorAttributes } from "svelte/elements";
-	import { cn } from "../../../utils";
 
 	let {
 		ref = $bindable(null),
@@ -41,6 +40,7 @@
 <svelte:element
 	this={href ? "a" : "span"}
 	bind:this={ref}
+	data-slot="badge"
 	{href}
 	class={cn(badgeVariants({ variant }), className)}
 	{...restProps}

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

@@ -1,28 +1,34 @@
 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:ring-ring inline-flex select-none items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2", {
+}, 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:ring-ring inline-flex select-none items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2", unknown, unknown, undefined>>;
+}, undefined>>;
 export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
-import type { WithElementRef } from "bits-ui";
+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,8 +1,7 @@
 <script lang="ts">
-	import Ellipsis from "@lucide/svelte/icons/ellipsis";
-	import type { WithElementRef, WithoutChildren } from "bits-ui";
+	import MoreHorizontalIcon from '@lucide/svelte/icons/more-horizontal';
+	import { cn, type WithElementRef, type WithoutChildren } from "../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils";
 
 	let {
 		ref = $bindable(null),
@@ -13,11 +12,12 @@
 
 <span
 	bind:this={ref}
+	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}
 >
-	<Ellipsis class="size-4" />
+	<MoreHorizontalIcon  />
 	<span class="sr-only">More</span>
 </span>

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

@@ -1,4 +1,4 @@
-import type { WithElementRef } from "bits-ui";
+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>;

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

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

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

@@ -1,4 +1,4 @@
-import type { WithElementRef } from "bits-ui";
+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>;

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

@@ -1,8 +1,7 @@
 <script lang="ts">
-	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "../../utils.js";
 	import type { Snippet } from "svelte";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils";
+	import type { HTMLAnchorAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -16,6 +15,7 @@
 	} = $props();
 
 	const attrs = $derived({
+		"data-slot": "breadcrumb-link",
 		class: cn("hover:text-foreground transition-colors", className),
 		href,
 		...restProps,

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

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

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

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

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

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils";
 
 	let {
 		ref = $bindable(null),
@@ -13,6 +12,7 @@
 
 <span
 	bind:this={ref}
+	data-slot="breadcrumb-page"
 	role="link"
 	aria-disabled="true"
 	aria-current="page"

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

@@ -1,4 +1,4 @@
-import type { WithElementRef } from "bits-ui";
+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>;

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

@@ -1,8 +1,7 @@
 <script lang="ts">
-	import ChevronRight from "@lucide/svelte/icons/chevron-right";
-	import type { WithElementRef } from "bits-ui";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import { cn, type WithElementRef } from "../../utils.js";
 	import type { HTMLLiAttributes } from "svelte/elements";
-	import { cn } from "../../../utils";
 
 	let {
 		ref = $bindable(null),
@@ -13,15 +12,16 @@
 </script>
 
 <li
+	bind:this={ref}
+	data-slot="breadcrumb-separator"
 	role="presentation"
 	aria-hidden="true"
 	class={cn("[&>svg]:size-3.5", className)}
-	bind:this={ref}
 	{...restProps}
 >
 	{#if children}
 		{@render children?.()}
 	{:else}
-		<ChevronRight />
+		<ChevronRightIcon class="cn-rtl-flip" />
 	{/if}
 </li>

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

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

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

@@ -1,15 +1,22 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
+	import type { WithElementRef } from "../../utils.js";
+	import { cn } from "../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
-		ref = $bindable(),
+		ref = $bindable(null),
 		class: className,
 		children,
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
 </script>
 
-<nav class={className} bind:this={ref} aria-label="breadcrumb" {...restProps}>
+<nav
+	bind:this={ref}
+	data-slot="breadcrumb"
+	aria-label="breadcrumb"
+	class={cn(className)}
+	{...restProps}
+>
 	{@render children?.()}
 </nav>

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

@@ -1,4 +1,4 @@
-import type { WithElementRef } from "bits-ui";
+import type { WithElementRef } from "../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 declare const Breadcrumb: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLElement>>, {}, "ref">;
 type Breadcrumb = ReturnType<typeof Breadcrumb>;

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>

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

@@ -0,0 +1,40 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const bubbleReactionsVariants: import("tailwind-variants").TVReturnType<{
+    side: {
+        top: "top-0 -translate-y-3/4";
+        bottom: "bottom-0 translate-y-3/4";
+    };
+    align: {
+        start: "left-3";
+        end: "right-3";
+    };
+}, undefined, "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", {
+    side: {
+        top: "top-0 -translate-y-3/4";
+        bottom: "bottom-0 translate-y-3/4";
+    };
+    align: {
+        start: "left-3";
+        end: "right-3";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    side: {
+        top: "top-0 -translate-y-3/4";
+        bottom: "bottom-0 translate-y-3/4";
+    };
+    align: {
+        start: "left-3";
+        end: "right-3";
+    };
+}, undefined>>;
+export type BubbleReactionsSide = VariantProps<typeof bubbleReactionsVariants>["side"];
+export type BubbleReactionsAlign = VariantProps<typeof bubbleReactionsVariants>["align"];
+import { type WithElementRef } from "../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    side?: BubbleReactionsSide;
+    align?: BubbleReactionsAlign;
+};
+declare const BubbleReactions: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type BubbleReactions = ReturnType<typeof BubbleReactions>;
+export default BubbleReactions;

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

@@ -0,0 +1,51 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const bubbleVariants = tv({
+		base: "gap-1 data-[align=end]:self-end max-w-[80%] data-[variant=ghost]:max-w-full group-data-[align=end]/message:self-end group/bubble relative flex w-fit min-w-0 flex-col",
+		variants: {
+			variant: {
+				default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
+				secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+				muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
+				tinted: "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
+				outline: "*:data-[slot=bubble-content]:bg-background *:data-[slot=bubble-content]:border-border [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+				ghost: "*:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50 border-none",
+				destructive: "*:data-[slot=bubble-content]:bg-destructive/10 dark:*:data-[slot=bubble-content]:bg-destructive/20 *:data-[slot=bubble-content]:text-destructive [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type BubbleVariant = VariantProps<typeof bubbleVariants>["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 = "default",
+		align = "start",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: BubbleVariant;
+		align?: "start" | "end";
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="bubble"
+	data-variant={variant}
+	data-align={align}
+	class={cn(bubbleVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,42 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const bubbleVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80";
+        secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]";
+        muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]";
+        tinted: "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]";
+        outline: "*:data-[slot=bubble-content]:bg-background *:data-[slot=bubble-content]:border-border [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30";
+        ghost: "*:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50 border-none";
+        destructive: "*:data-[slot=bubble-content]:bg-destructive/10 dark:*:data-[slot=bubble-content]:bg-destructive/20 *:data-[slot=bubble-content]:text-destructive [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30";
+    };
+}, undefined, "gap-1 data-[align=end]:self-end max-w-[80%] data-[variant=ghost]:max-w-full group-data-[align=end]/message:self-end group/bubble relative flex w-fit min-w-0 flex-col", {
+    variant: {
+        default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80";
+        secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]";
+        muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]";
+        tinted: "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]";
+        outline: "*:data-[slot=bubble-content]:bg-background *:data-[slot=bubble-content]:border-border [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30";
+        ghost: "*:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50 border-none";
+        destructive: "*:data-[slot=bubble-content]:bg-destructive/10 dark:*:data-[slot=bubble-content]:bg-destructive/20 *:data-[slot=bubble-content]:text-destructive [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80";
+        secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]";
+        muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]";
+        tinted: "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]";
+        outline: "*:data-[slot=bubble-content]:bg-background *:data-[slot=bubble-content]:border-border [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30";
+        ghost: "*:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50 border-none";
+        destructive: "*:data-[slot=bubble-content]:bg-destructive/10 dark:*:data-[slot=bubble-content]:bg-destructive/20 *:data-[slot=bubble-content]:text-destructive [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30";
+    };
+}, undefined>>;
+export type BubbleVariant = VariantProps<typeof bubbleVariants>["variant"];
+import { type WithElementRef } from "../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    variant?: BubbleVariant;
+    align?: "start" | "end";
+};
+declare const Bubble: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Bubble = ReturnType<typeof Bubble>;
+export default Bubble;

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

@@ -0,0 +1,5 @@
+import Content from "./bubble-content.svelte";
+import Group from "./bubble-group.svelte";
+import Reactions, { bubbleReactionsVariants, type BubbleReactionsAlign, type BubbleReactionsSide } from "./bubble-reactions.svelte";
+import Root, { bubbleVariants, type BubbleVariant } from "./bubble.svelte";
+export { Root, Group, Content, Reactions, bubbleVariants, bubbleReactionsVariants, type BubbleVariant, type BubbleReactionsSide, type BubbleReactionsAlign, Root as Bubble, Group as BubbleGroup, Content as BubbleContent, Reactions as BubbleReactions, };

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

@@ -0,0 +1,7 @@
+import Content from "./bubble-content.svelte";
+import Group from "./bubble-group.svelte";
+import Reactions, { bubbleReactionsVariants, } from "./bubble-reactions.svelte";
+import Root, { bubbleVariants } from "./bubble.svelte";
+export { Root, Group, Content, Reactions, bubbleVariants, bubbleReactionsVariants, 
+//
+Root as Bubble, Group as BubbleGroup, Content as BubbleContent, Reactions as BubbleReactions, };