sv5ui-plus 5.0.4 → 5.0.6

package/README.md

@@ -12,7 +12,7 @@ bun add sv5ui sv5ui-plus
 
 ```css
 /* src/routes/layout.css */
-@import 'sv5ui/theme.css';
+@import "sv5ui/theme.css";
 @source '../../node_modules/sv5ui-plus/dist';
 ```
 
@@ -20,15 +20,15 @@ Import core UI from SV5UI and addons from SV5UI Plus:
 
 ```svelte
 <script lang="ts">
-  import { Button, Icon } from 'sv5ui'
-  import { ColorPicker, ConfirmDialog, Search } from 'sv5ui-plus'
+	import { Button, Icon } from "sv5ui";
+	import { ConfirmDialog, Search } from "sv5ui-plus";
 </script>
 ```
 
 For an incremental migration from Svelora, `sv5ui-plus/compat` re-exports SV5UI together with SV5UI Plus addons:
 
 ```ts
-import { Button, ColorPicker } from 'sv5ui-plus/compat'
+import { Button, ConfirmDialog } from "sv5ui-plus/compat";
 ```
 
 New code should use the explicit `sv5ui` and `sv5ui-plus` imports.
@@ -36,8 +36,8 @@ New code should use the explicit `sv5ui` and `sv5ui-plus` imports.
 ## Addons
 
 - Content and display: `BentoGrid`, `Chart`, `Chat`, `CodeBlock`, `Fonts`, `List`, `Marquee`, `NumberTicker`, `Prose`, `Spotlight`
-- Forms and overlays: `ColorPicker`, `ConfirmDialog`, `LocaleButton`, `PasswordInput`, `Search`
-- Layout and data: `Resizable`, `ScrollArea`, `SafeTable`, `TableBulkActionBar`, `TreeView`
+- Forms and overlays: `ConfirmDialog`, `LocaleButton`, `PasswordInput`, `Search`
+- Layout and data: `ResizeContainer`, `SafeTable`, `TableBulkActionBar`, `TreeView`
 - Forms: `FormSelect`, `DatePickerField`, `DateRangePickerField`, `PasswordInput`
 - Drag and drop: `SortableGroup`, `SortableList`, `useDragDrop`, `useSortable`
 - SvelteKit adapter: `SvelteKitNavigationMenu`

package/dist/adapters/notify.d.ts

@@ -1,4 +1,4 @@
-import { type ToastOptions } from 'sv5ui';
+import { type ToastOptions } from "sv5ui";
 export interface NotifyOptions extends ToastOptions {
     /** Inline style values merged into the toast style string. */
     styles?: Record<string, string>;

package/dist/adapters/notify.js

@@ -1,18 +1,18 @@
-import { toast } from 'sv5ui';
+import { toast } from "sv5ui";
 function errorMessage(error) {
-    if (typeof error === 'string')
+    if (typeof error === "string")
         return error;
     if (error instanceof Error)
         return error.message;
-    if (error && typeof error === 'object') {
+    if (error && typeof error === "object") {
         const value = error;
-        if (typeof value.message === 'string')
+        if (typeof value.message === "string")
             return value.message;
-        if (typeof value.error === 'string')
+        if (typeof value.error === "string")
             return value.error;
         return JSON.stringify(error);
     }
-    return 'An unknown error occurred';
+    return "An unknown error occurred";
 }
 function resolveOptions(options) {
     if (!options)
@@ -21,13 +21,13 @@ function resolveOptions(options) {
     const style = styles
         ? Object.entries(styles)
             .map(([key, value]) => `${key}: ${value}`)
-            .join('; ')
+            .join("; ")
         : undefined;
-    const className = classes ? Object.values(classes).join(' ') : undefined;
+    const className = classes ? Object.values(classes).join(" ") : undefined;
     return {
         ...rest,
-        style: [rest.style, style].filter(Boolean).join('; ') || undefined,
-        class: [rest.class, className].filter(Boolean).join(' ') || undefined
+        style: [rest.style, style].filter(Boolean).join("; ") || undefined,
+        class: [rest.class, className].filter(Boolean).join(" ") || undefined,
     };
 }
 export const notify = {
@@ -46,14 +46,14 @@ export const notify = {
     loading(message, options) {
         return toast.loading(message, {
             duration: Number.POSITIVE_INFINITY,
-            ...resolveOptions(options)
+            ...resolveOptions(options),
         });
     },
     processing(message, options) {
         return toast.loading(message, {
             duration: Number.POSITIVE_INFINITY,
-            icon: 'lucide:loader-circle',
-            ...resolveOptions(options)
+            icon: "lucide:loader-circle",
+            ...resolveOptions(options),
         });
     },
     default(message, options) {
@@ -67,22 +67,22 @@ export const notify = {
             .then(([data]) => {
             if (checkSuccess && !checkSuccess(data))
                 throw data;
-            notify.success(typeof success === 'function' ? success(data) : success, {
+            notify.success(typeof success === "function" ? success(data) : success, {
                 ...shared,
                 ...successOptions,
-                id
+                id,
             });
         })
             .catch((reason) => {
-            notify.error(typeof error === 'function' ? error(reason) : error, {
+            notify.error(typeof error === "function" ? error(reason) : error, {
                 ...shared,
                 ...errorOptions,
-                id
+                id,
             });
         });
         return promise;
     },
     dismiss(id) {
         return toast.dismiss(id);
-    }
+    },
 };

package/dist/compat.d.ts

@@ -2,5 +2,5 @@
  * Transitional entrypoint for applications migrating from Svelora 3.
  * New code should import core UI from `sv5ui` and addons from `sv5ui-plus`.
  */
-export * from 'sv5ui';
-export * from './index.js';
+export * from "sv5ui";
+export * from "./index.js";

package/dist/compat.js

@@ -2,5 +2,5 @@
  * Transitional entrypoint for applications migrating from Svelora 3.
  * New code should import core UI from `sv5ui` and addons from `sv5ui-plus`.
  */
-export * from 'sv5ui';
-export * from './index.js';
+export * from "sv5ui";
+export * from "./index.js";

package/dist/components/BentoGrid/BentoCard.svelte

@@ -7,39 +7,39 @@ let styles = $derived(bentoGridVariants());
 </script>
 
 <div class={twMerge(styles.cardBase(), className)} {...restProps}>
-    <div class={styles.cardBackground()}>
-        {#if background}
-            {@render background()}
-        {/if}
-    </div>
+	<div class={styles.cardBackground()}>
+		{#if background}
+			{@render background()}
+		{/if}
+	</div>
 
-    <!-- Push content up slightly on hover by adjusting group styles or locally -->
-    <div class={twMerge(styles.cardContent(), href && 'group-hover:-translate-y-4')}>
-        {#if icon}
-            <div class={styles.cardIconWrapper()}>
-                <Icon {name} class="w-6 h-6" />
-            </div>
-        {/if}
-        
-        <h3 class={styles.cardTitle()}>{name}</h3>
-        
-        {#if description}
-            <p class={styles.cardDescription()}>{description}</p>
-        {/if}
-    </div>
+	<!-- Push content up slightly on hover by adjusting group styles or locally -->
+	<div class={twMerge(styles.cardContent(), href && "group-hover:-translate-y-4")}>
+		{#if icon}
+			<div class={styles.cardIconWrapper()}>
+				<Icon {name} class="w-6 h-6" />
+			</div>
+		{/if}
 
-    {#if href || actionSnippet}
-        <div class={twMerge(styles.cardAction(), !href && !actionSnippet && 'hidden')}>
-            {#if actionSnippet}
-                {@render actionSnippet()}
-            {:else if href}
-                <Button {href} variant="ghost" size="sm" class="pl-0 hover:bg-transparent">
-                    {cta}
-                    {#snippet trailingSlot()}
-                        <Icon name="lucide:arrow-right" class="w-4 h-4 ml-1" />
-                    {/snippet}
-                </Button>
-            {/if}
-        </div>
-    {/if}
+		<h3 class={styles.cardTitle()}>{name}</h3>
+
+		{#if description}
+			<p class={styles.cardDescription()}>{description}</p>
+		{/if}
+	</div>
+
+	{#if href || actionSnippet}
+		<div class={twMerge(styles.cardAction(), !href && !actionSnippet && "hidden")}>
+			{#if actionSnippet}
+				{@render actionSnippet()}
+			{:else if href}
+				<Button {href} variant="ghost" size="sm" class="pl-0 hover:bg-transparent">
+					{cta}
+					{#snippet trailingSlot()}
+						<Icon name="lucide:arrow-right" class="w-4 h-4 ml-1" />
+					{/snippet}
+				</Button>
+			{/if}
+		</div>
+	{/if}
 </div>

package/dist/components/BentoGrid/BentoCard.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { BentoCardProps } from './bento-grid.types.js';
+import type { BentoCardProps } from "./bento-grid.types.js";
 declare const BentoCard: import("svelte").Component<BentoCardProps, {}, "">;
 type BentoCard = ReturnType<typeof BentoCard>;
 export default BentoCard;

package/dist/components/BentoGrid/BentoGrid.svelte

@@ -5,5 +5,5 @@ let styles = $derived(bentoGridVariants());
 </script>
 
 <div class={twMerge(styles.gridBase(), className)} {...restProps}>
-    {@render children?.()}
+	{@render children?.()}
 </div>

package/dist/components/BentoGrid/BentoGrid.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { BentoGridProps } from './bento-grid.types.js';
+import type { BentoGridProps } from "./bento-grid.types.js";
 declare const BentoGrid: import("svelte").Component<BentoGridProps, {}, "">;
 type BentoGrid = ReturnType<typeof BentoGrid>;
 export default BentoGrid;

package/dist/components/BentoGrid/bento-grid.types.d.ts

@@ -1,5 +1,5 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 export interface BentoGridProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Additional CSS classes.

package/dist/components/BentoGrid/bento-grid.variants.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from "tailwind-variants";
 export declare const bentoGridVariants: import("tailwind-variants").TVReturnType<{}, {
     gridBase: string;
     cardBase: string;

package/dist/components/BentoGrid/bento-grid.variants.js

@@ -1,16 +1,16 @@
-import { tv } from 'tailwind-variants';
+import { tv } from "tailwind-variants";
 export const bentoGridVariants = tv({
     slots: {
-        gridBase: 'grid grid-cols-1 md:grid-cols-3 gap-4 max-w-7xl mx-auto w-full',
-        cardBase: 'group relative flex flex-col justify-between overflow-hidden rounded-xl bg-surface-50 dark:bg-surface-900 border border-outline-variant transition-all hover:shadow-md dark:hover:shadow-surface-800/50',
-        cardBackground: 'absolute inset-0 transition-all duration-300 pointer-events-none',
-        cardContent: 'pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300',
-        cardIconWrapper: 'mb-2 w-10 h-10 flex items-center justify-center rounded-lg bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400',
-        cardTitle: 'text-lg font-semibold text-surface-900 dark:text-surface-50',
-        cardDescription: 'text-sm text-surface-500 dark:text-surface-400',
-        cardAction: 'pointer-events-auto absolute bottom-0 left-0 w-full p-6 opacity-0 translate-y-4 transition-all duration-300 group-hover:opacity-100 group-hover:translate-y-0'
+        gridBase: "grid grid-cols-1 md:grid-cols-3 gap-4 max-w-7xl mx-auto w-full",
+        cardBase: "group relative flex flex-col justify-between overflow-hidden rounded-xl bg-surface-50 dark:bg-surface-900 border border-outline-variant transition-all hover:shadow-md dark:hover:shadow-surface-800/50",
+        cardBackground: "absolute inset-0 transition-all duration-300 pointer-events-none",
+        cardContent: "pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300",
+        cardIconWrapper: "mb-2 w-10 h-10 flex items-center justify-center rounded-lg bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400",
+        cardTitle: "text-lg font-semibold text-surface-900 dark:text-surface-50",
+        cardDescription: "text-sm text-surface-500 dark:text-surface-400",
+        cardAction: "pointer-events-auto absolute bottom-0 left-0 w-full p-6 opacity-0 translate-y-4 transition-all duration-300 group-hover:opacity-100 group-hover:translate-y-0",
     },
     variants: {
     // Variants can be added if we want different styles of grids
-    }
+    },
 });

package/dist/components/BentoGrid/index.d.ts

@@ -1,5 +1,5 @@
-import BentoGrid from './BentoGrid.svelte';
-import BentoCard from './BentoCard.svelte';
+import BentoGrid from "./BentoGrid.svelte";
+import BentoCard from "./BentoCard.svelte";
 export { BentoGrid, BentoCard };
-export * from './bento-grid.types.js';
-export * from './bento-grid.variants.js';
+export * from "./bento-grid.types.js";
+export * from "./bento-grid.variants.js";

package/dist/components/BentoGrid/index.js

@@ -1,5 +1,5 @@
-import BentoGrid from './BentoGrid.svelte';
-import BentoCard from './BentoCard.svelte';
+import BentoGrid from "./BentoGrid.svelte";
+import BentoCard from "./BentoCard.svelte";
 export { BentoGrid, BentoCard };
-export * from './bento-grid.types.js';
-export * from './bento-grid.variants.js';
+export * from "./bento-grid.types.js";
+export * from "./bento-grid.variants.js";

package/dist/components/Chart/Chart.svelte

@@ -59,4 +59,4 @@ $effect(() => {
 });
 </script>
 
-<div class={twMerge('w-full', className)} bind:this={chartContainer}></div>
+<div class={twMerge("w-full", className)} bind:this={chartContainer}></div>

package/dist/components/Chart/Chart.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ChartProps } from './chart.types.js';
+import type { ChartProps } from "./chart.types.js";
 declare const Chart: import("svelte").Component<ChartProps, {}, "">;
 type Chart = ReturnType<typeof Chart>;
 export default Chart;

package/dist/components/Chart/chart.types.d.ts

@@ -1,5 +1,5 @@
-import type { ApexOptions } from 'apexcharts';
-import type { ClassNameValue } from 'tailwind-merge';
+import type { ApexOptions } from "apexcharts";
+import type { ClassNameValue } from "tailwind-merge";
 export interface ChartProps {
     /**
      * Configuration options for ApexCharts.
@@ -8,7 +8,7 @@ export interface ChartProps {
     /**
      * Series data. If provided, overrides options.series.
      */
-    series?: ApexOptions['series'];
+    series?: ApexOptions["series"];
     /**
      * Tailwind class to apply to the chart container wrapper.
      */

package/dist/components/Chart/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Chart } from './Chart.svelte';
-export * from './chart.types.js';
+export { default as Chart } from "./Chart.svelte";
+export * from "./chart.types.js";

package/dist/components/Chart/index.js

@@ -1,2 +1,2 @@
-export { default as Chart } from './Chart.svelte';
-export * from './chart.types.js';
+export { default as Chart } from "./Chart.svelte";
+export * from "./chart.types.js";

package/dist/components/Chat/ChatBubble.svelte

@@ -8,23 +8,23 @@ setContext("chat-bubble-position", () => position);
 </script>
 
 <div class={twMerge(styles.bubbleBase() as string, className as string)} {...restProps}>
-    {#if avatar}
-        <div class={styles.bubbleAvatar()}>
-            {@render avatar()}
-        </div>
-    {/if}
-    
-    <div class={styles.bubbleContent()}>
-        {#if name || time}
-            <div class={styles.bubbleHeader()}>
-                {#if name}
-                    <span class={styles.bubbleName()}>{name}</span>
-                {/if}
-                {#if time}
-                    <span class={styles.bubbleTime()}>{time}</span>
-                {/if}
-            </div>
-        {/if}
-        {@render children?.()}
-    </div>
+	{#if avatar}
+		<div class={styles.bubbleAvatar()}>
+			{@render avatar()}
+		</div>
+	{/if}
+
+	<div class={styles.bubbleContent()}>
+		{#if name || time}
+			<div class={styles.bubbleHeader()}>
+				{#if name}
+					<span class={styles.bubbleName()}>{name}</span>
+				{/if}
+				{#if time}
+					<span class={styles.bubbleTime()}>{time}</span>
+				{/if}
+			</div>
+		{/if}
+		{@render children?.()}
+	</div>
 </div>

package/dist/components/Chat/ChatBubble.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ChatBubbleProps } from './chat.types.js';
+import type { ChatBubbleProps } from "./chat.types.js";
 declare const ChatBubble: import("svelte").Component<ChatBubbleProps, {}, "">;
 type ChatBubble = ReturnType<typeof ChatBubble>;
 export default ChatBubble;

package/dist/components/Chat/ChatInput.svelte

@@ -18,33 +18,32 @@ function autoResize(node) {
 </script>
 
 <div class={twMerge(styles.inputBase() as string, className as string)} {...restProps}>
-    {#if leading}
-        <div class={styles.inputActions()}>
-            {@render leading()}
-        </div>
-    {/if}
+	{#if leading}
+		<div class={styles.inputActions()}>
+			{@render leading()}
+		</div>
+	{/if}
 
-    <div class={styles.inputFieldWrapper()}>
-        <textarea
-            bind:value
-            {placeholder}
-            {disabled}
-            rows="1"
-            use:autoResize
-            class={styles.inputField()}
-            onkeydown={(e) => {
-                // If you want Shift+Enter for new line, and Enter to submit:
-                // if (e.key === 'Enter' && !e.shiftKey) {
-                //     e.preventDefault()
-                //     // Dispatch submit event
-                // }
-            }}
-        ></textarea>
-    </div>
+	<div class={styles.inputFieldWrapper()}>
+		<textarea
+			bind:value
+			{placeholder}
+			{disabled}
+			rows="1"
+			use:autoResize
+			class={styles.inputField()}
+			onkeydown={(e) => {
+				// If you want Shift+Enter for new line, and Enter to submit:
+				// if (e.key === 'Enter' && !e.shiftKey) {
+				//     e.preventDefault()
+				//     // Dispatch submit event
+				// }
+			}}></textarea>
+	</div>
 
-    {#if trailing}
-        <div class={styles.inputActions()}>
-            {@render trailing()}
-        </div>
-    {/if}
+	{#if trailing}
+		<div class={styles.inputActions()}>
+			{@render trailing()}
+		</div>
+	{/if}
 </div>

package/dist/components/Chat/ChatInput.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ChatInputProps } from './chat.types.js';
+import type { ChatInputProps } from "./chat.types.js";
 declare const ChatInput: import("svelte").Component<ChatInputProps, {}, "value">;
 type ChatInput = ReturnType<typeof ChatInput>;
 export default ChatInput;

package/dist/components/Chat/ChatMessage.svelte

@@ -11,5 +11,5 @@ let styles = $derived(chatVariants({
 </script>
 
 <div class={twMerge(styles.messageBase() as string, className as string)} {...restProps}>
-    {@render children?.()}
+	{@render children?.()}
 </div>

package/dist/components/Chat/ChatMessage.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ChatMessageProps } from './chat.types.js';
+import type { ChatMessageProps } from "./chat.types.js";
 declare const ChatMessage: import("svelte").Component<ChatMessageProps, {}, "">;
 type ChatMessage = ReturnType<typeof ChatMessage>;
 export default ChatMessage;

package/dist/components/Chat/chat.types.d.ts

@@ -1,12 +1,12 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-import type { ChatVariantProps } from './chat.variants.js';
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { ChatVariantProps } from "./chat.variants.js";
 export interface ChatBubbleProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Position of the chat bubble (start for receiver, end for sender).
      * @default 'start'
      */
-    position?: ChatVariantProps['position'];
+    position?: ChatVariantProps["position"];
     /**
      * Name of the sender.
      */
@@ -28,12 +28,12 @@ export interface ChatMessageProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Style variant of the message bubble.
      */
-    variant?: ChatVariantProps['variant'];
+    variant?: ChatVariantProps["variant"];
     /**
      * Position inheritance (used internally for rounded corners).
      * Automatically inherited from ChatBubble if used within it.
      */
-    position?: ChatVariantProps['position'];
+    position?: ChatVariantProps["position"];
     /**
      * The message text or content.
      */

package/dist/components/Chat/chat.variants.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from "tailwind-variants";
 export declare const chatVariants: import("tailwind-variants").TVReturnType<{
     position: {
         start: {

package/dist/components/Chat/chat.variants.js

@@ -1,47 +1,47 @@
-import { tv } from 'tailwind-variants';
+import { tv } from "tailwind-variants";
 export const chatVariants = tv({
     slots: {
-        bubbleBase: 'flex w-full gap-3 py-2',
-        bubbleAvatar: 'shrink-0 mt-1',
-        bubbleContent: 'flex flex-col gap-1 min-w-0 max-w-[80%]',
-        bubbleHeader: 'flex items-center gap-2 text-xs text-surface-500 dark:text-surface-400',
-        bubbleName: 'font-semibold text-surface-900 dark:text-surface-50',
-        bubbleTime: '',
-        messageBase: 'px-4 py-2.5 rounded-2xl text-sm break-words',
-        inputBase: 'flex items-end gap-2 p-3 bg-surface-50 dark:bg-surface-900 border-t border-outline-variant',
-        inputFieldWrapper: 'flex-1 relative bg-surface-100 dark:bg-surface-800 rounded-2xl border border-outline-variant focus-within:border-primary focus-within:ring-1 focus-within:ring-primary transition-colors',
-        inputField: 'w-full bg-transparent border-0 px-4 py-3 min-h-[44px] max-h-32 resize-none focus:ring-0 text-sm outline-none',
-        inputActions: 'shrink-0 flex items-center gap-1'
+        bubbleBase: "flex w-full gap-3 py-2",
+        bubbleAvatar: "shrink-0 mt-1",
+        bubbleContent: "flex flex-col gap-1 min-w-0 max-w-[80%]",
+        bubbleHeader: "flex items-center gap-2 text-xs text-surface-500 dark:text-surface-400",
+        bubbleName: "font-semibold text-surface-900 dark:text-surface-50",
+        bubbleTime: "",
+        messageBase: "px-4 py-2.5 rounded-2xl text-sm break-words",
+        inputBase: "flex items-end gap-2 p-3 bg-surface-50 dark:bg-surface-900 border-t border-outline-variant",
+        inputFieldWrapper: "flex-1 relative bg-surface-100 dark:bg-surface-800 rounded-2xl border border-outline-variant focus-within:border-primary focus-within:ring-1 focus-within:ring-primary transition-colors",
+        inputField: "w-full bg-transparent border-0 px-4 py-3 min-h-[44px] max-h-32 resize-none focus:ring-0 text-sm outline-none",
+        inputActions: "shrink-0 flex items-center gap-1",
     },
     variants: {
         position: {
             start: {
-                bubbleBase: 'justify-start',
-                bubbleContent: 'items-start',
-                bubbleHeader: 'flex-row',
-                messageBase: 'rounded-tl-sm'
+                bubbleBase: "justify-start",
+                bubbleContent: "items-start",
+                bubbleHeader: "flex-row",
+                messageBase: "rounded-tl-sm",
             },
             end: {
-                bubbleBase: 'justify-end flex-row-reverse',
-                bubbleContent: 'items-end',
-                bubbleHeader: 'flex-row-reverse',
-                messageBase: 'rounded-tr-sm'
-            }
+                bubbleBase: "justify-end flex-row-reverse",
+                bubbleContent: "items-end",
+                bubbleHeader: "flex-row-reverse",
+                messageBase: "rounded-tr-sm",
+            },
         },
         variant: {
             primary: {
-                messageBase: 'bg-primary text-on-primary'
+                messageBase: "bg-primary text-on-primary",
             },
             surface: {
-                messageBase: 'bg-surface-200 dark:bg-surface-800 text-surface-900 dark:text-surface-50'
+                messageBase: "bg-surface-200 dark:bg-surface-800 text-surface-900 dark:text-surface-50",
             },
             outline: {
-                messageBase: 'bg-transparent border border-outline-variant text-surface-900 dark:text-surface-50'
-            }
-        }
+                messageBase: "bg-transparent border border-outline-variant text-surface-900 dark:text-surface-50",
+            },
+        },
     },
     defaultVariants: {
-        position: 'start',
-        variant: 'surface'
-    }
+        position: "start",
+        variant: "surface",
+    },
 });

package/dist/components/Chat/index.d.ts

@@ -1,6 +1,6 @@
-import ChatBubble from './ChatBubble.svelte';
-import ChatMessage from './ChatMessage.svelte';
-import ChatInput from './ChatInput.svelte';
+import ChatBubble from "./ChatBubble.svelte";
+import ChatMessage from "./ChatMessage.svelte";
+import ChatInput from "./ChatInput.svelte";
 export { ChatBubble, ChatMessage, ChatInput };
-export * from './chat.types.js';
-export * from './chat.variants.js';
+export * from "./chat.types.js";
+export * from "./chat.variants.js";