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

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

@@ -21,31 +21,31 @@ get along, so we shut typescript up by casting `value` to `never`.
 	data-slot="slider"
 	{orientation}
 	class={cn(
-		"relative flex w-full touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[disabled]:opacity-50",
+		"data-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col",
 		className
 	)}
 	{...restProps}
 >
-	{#snippet children({ thumbs })}
+	{#snippet children({ thumbItems })}
 		<span
-			data-orientation={orientation}
 			data-slot="slider-track"
+			data-orientation={orientation}
 			class={cn(
-				"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1.5"
+				"bg-muted rounded-full data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1 relative grow overflow-hidden data-horizontal:w-full data-vertical:h-full"
 			)}
 		>
 			<SliderPrimitive.Range
 				data-slot="slider-range"
 				class={cn(
-					"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+					"bg-primary absolute select-none data-horizontal:h-full data-vertical:w-full"
 				)}
 			/>
 		</span>
-		{#each thumbs as thumb (thumb)}
+		{#each thumbItems as thumb (thumb.index)}
 			<SliderPrimitive.Thumb
 				data-slot="slider-thumb"
-				index={thumb}
-				class="border-primary bg-background ring-ring/50 focus-visible:outline-hidden block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50"
+				index={thumb.index}
+				class="border-ring ring-ring/50 relative size-3 rounded-full border bg-white transition-[color,box-shadow] after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 block shrink-0 select-none disabled:pointer-events-none disabled:opacity-50"
 			/>
 		{/each}
 	{/snippet}

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

@@ -1,5 +1,5 @@
 import { Slider as SliderPrimitive } from "bits-ui";
 import { type WithoutChildrenOrChild } from "../../utils.js";
-declare const Slider: import("svelte").Component<WithoutChildrenOrChild<SliderPrimitive.RootProps>, {}, "value" | "ref">;
+declare const Slider: import("svelte").Component<WithoutChildrenOrChild<SliderPrimitive.RootProps>, {}, "ref" | "value">;
 type Slider = ReturnType<typeof Slider>;
 export default Slider;

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

@@ -1,6 +1,11 @@
 <script lang="ts">
-	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
 	import { mode } from "mode-watcher";
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
+	import Loader2Icon from '@lucide/svelte/icons/loader-2';
+	import CircleCheckIcon from '@lucide/svelte/icons/circle-check';
+	import OctagonXIcon from '@lucide/svelte/icons/octagon-x';
+	import InfoIcon from '@lucide/svelte/icons/info';
+	import TriangleAlertIcon from '@lucide/svelte/icons/triangle-alert';
 
 	let { ...restProps }: SonnerProps = $props();
 </script>
@@ -9,5 +14,26 @@
 	theme={mode.current}
 	class="toaster group"
 	style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
+	toastOptions={{
+		classes: {
+			toast: "cn-toast",
+		},
+	}}
 	{...restProps}
-/>
+>
+	{#snippet loadingIcon()}
+		<Loader2Icon class="size-4 animate-spin" />
+	{/snippet}
+	{#snippet successIcon()}
+		<CircleCheckIcon class="size-4" />
+	{/snippet}
+	{#snippet errorIcon()}
+		<OctagonXIcon class="size-4" />
+	{/snippet}
+	{#snippet infoIcon()}
+		<InfoIcon class="size-4" />
+	{/snippet}
+	{#snippet warningIcon()}
+		<TriangleAlertIcon class="size-4" />
+	{/snippet}
+</Sonner>

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

@@ -1,14 +1,20 @@
 <script lang="ts">
+	import Loader2Icon from '@lucide/svelte/icons/loader-2';
 	import { cn } from "../../utils.js";
-	import Loader2Icon from "@lucide/svelte/icons/loader-2";
-	import type { ComponentProps } from "svelte";
+	import type { SVGAttributes } from "svelte/elements";
 
-	let { class: className, ...restProps }: ComponentProps<typeof Loader2Icon> = $props();
+	let {
+		class: className,
+		role = "status",
+		// we add name, color, and stroke for compatibility with different icon libraries props.
+		// only forward them when set, otherwise `stroke: undefined` overrides the icon's `currentColor`
+		name,
+		color,
+		stroke,
+		className: legacyClassName,
+		"aria-label": ariaLabel = "Loading",
+		...restProps
+	}: SVGAttributes<SVGSVGElement> = $props();
 </script>
 
-<Loader2Icon
-	role="status"
-	aria-label="Loading"
-	class={cn("size-4 animate-spin", className)}
-	{...restProps}
-/>
+<Loader2Icon {role} {...name != null ? { name } : {}} {...color != null ? { color } : {}} {...stroke != null ? { stroke } : {}} {...legacyClassName != null ? { className: legacyClassName } : {}} aria-label={ariaLabel} class={cn("size-4 animate-spin", className)} {...restProps} />

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

@@ -0,0 +1,4 @@
+import type { SVGAttributes } from "svelte/elements";
+declare const Spinner: import("svelte").Component<SVGAttributes<SVGSVGElement>, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/lib/components/ui/spinner/spinner.svelte.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/components/ui/spinner/spinner.svelte.test.js

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest';
+import { render } from '@testing-library/svelte';
+import Spinner from './spinner.svelte';
+/**
+ * Regression: CB-3897 — a `<Spinner />` without a `stroke` prop rendered invisible.
+ *
+ * The previous registry version always passed `stroke={undefined}` to the lucide icon. Lucide
+ * applies caller props after its defaults, so that `undefined` replaced the default
+ * `stroke="currentColor"` and the icon drew nothing.
+ */
+describe('Spinner — stroke (CB-3897)', () => {
+    it('keeps the icon stroke at currentColor when no stroke is given', () => {
+        const { getByRole } = render(Spinner);
+        expect(getByRole('status')).toHaveAttribute('stroke', 'currentColor');
+    });
+    it('uses the stroke the caller passes', () => {
+        const { getByRole } = render(Spinner, { props: { stroke: 'red' } });
+        expect(getByRole('status')).toHaveAttribute('stroke', 'red');
+    });
+});

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

@@ -6,16 +6,20 @@
 		ref = $bindable(null),
 		class: className,
 		checked = $bindable(false),
+		size = "default",
 		...restProps
-	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> & {
+		size?: "sm" | "default";
+	} = $props();
 </script>
 
 <SwitchPrimitive.Root
 	bind:ref
 	bind:checked
 	data-slot="switch"
+	data-size={size}
 	class={cn(
-		"data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 shadow-xs peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent outline-none transition-all focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-3 aria-invalid:ring-3 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:border-transparent data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
 		className
 	)}
 	{...restProps}
@@ -23,7 +27,8 @@
 	<SwitchPrimitive.Thumb
 		data-slot="switch-thumb"
 		class={cn(
-			"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+			"bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%_-_2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%_-_2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform",
+			"rtl:data-[state=checked]:translate-x-[calc(-100%)]"
 		)}
 	/>
 </SwitchPrimitive.Root>

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

@@ -1,4 +1,8 @@
 import { Switch as SwitchPrimitive } from "bits-ui";
-declare const Switch: import("svelte").Component<Omit<Omit<SwitchPrimitive.RootProps, "child">, "children">, {}, "ref" | "checked">;
+import { type WithoutChildrenOrChild } from "../../utils.js";
+type $$ComponentProps = WithoutChildrenOrChild<SwitchPrimitive.RootProps> & {
+    size?: "sm" | "default";
+};
+declare const Switch: import("svelte").Component<$$ComponentProps, {}, "ref" | "checked">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;

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

@@ -1,4 +1,3 @@
-import Root from "./table.svelte";
 import Body from "./table-body.svelte";
 import Caption from "./table-caption.svelte";
 import Cell from "./table-cell.svelte";
@@ -6,4 +5,5 @@ import Footer from "./table-footer.svelte";
 import Head from "./table-head.svelte";
 import Header from "./table-header.svelte";
 import Row from "./table-row.svelte";
+import Root from "./table.svelte";
 export { Root, Body, Caption, Cell, Footer, Head, Header, Row, Root as Table, Body as TableBody, Caption as TableCaption, Cell as TableCell, Footer as TableFooter, Head as TableHead, Header as TableHeader, Row as TableRow, };

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

@@ -1,4 +1,3 @@
-import Root from "./table.svelte";
 import Body from "./table-body.svelte";
 import Caption from "./table-caption.svelte";
 import Cell from "./table-cell.svelte";
@@ -6,6 +5,7 @@ import Footer from "./table-footer.svelte";
 import Head from "./table-head.svelte";
 import Header from "./table-header.svelte";
 import Row from "./table-row.svelte";
+import Root from "./table.svelte";
 export { Root, Body, Caption, Cell, Footer, Head, Header, Row, 
 //
 Root as Table, Body as TableBody, Caption as TableCaption, Cell as TableCell, Footer as TableFooter, Head as TableHead, Header as TableHeader, Row as TableRow, };

package/dist/lib/components/ui/table/table-body.svelte

@@ -10,11 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
 </script>
 
-<tbody
-	bind:this={ref}
-	data-slot="table-body"
-	class={cn("[&_tr:last-child]:border-0", className)}
-	{...restProps}
->
+<tbody bind:this={ref} data-slot="table-body" class={cn("[&_tr:last-child]:border-0", className)} {...restProps}>
 	{@render children?.()}
 </tbody>

package/dist/lib/components/ui/table/table-cell.svelte

@@ -10,14 +10,6 @@
 	}: WithElementRef<HTMLTdAttributes> = $props();
 </script>
 
-<td
-	bind:this={ref}
-	data-slot="table-cell"
-	class={cn(
-		"whitespace-nowrap bg-clip-padding p-2 align-middle [&:has([role=checkbox])]:pe-0",
-		className
-	)}
-	{...restProps}
->
+<td bind:this={ref} data-slot="table-cell" class={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)} {...restProps}>
 	{@render children?.()}
 </td>

package/dist/lib/components/ui/table/table-head.svelte

@@ -10,14 +10,6 @@
 	}: WithElementRef<HTMLThAttributes> = $props();
 </script>
 
-<th
-	bind:this={ref}
-	data-slot="table-head"
-	class={cn(
-		"text-foreground h-10 whitespace-nowrap bg-clip-padding px-2 text-start align-middle font-medium [&:has([role=checkbox])]:pe-0",
-		className
-	)}
-	{...restProps}
->
+<th bind:this={ref} data-slot="table-head" class={cn("text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)} {...restProps}>
 	{@render children?.()}
 </th>

package/dist/lib/components/ui/table/table-row.svelte

@@ -13,10 +13,7 @@
 <tr
 	bind:this={ref}
 	data-slot="table-row"
-	class={cn(
-		"hover:[&,&>svelte-css-wrapper]:[&>th,td]:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
-		className
-	)}
+	class={cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors has-aria-expanded:bg-muted/50", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLTableAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLTableAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -11,12 +11,7 @@
 </script>
 
 <div data-slot="table-container" class="relative w-full overflow-x-auto">
-	<table
-		bind:this={ref}
-		data-slot="table"
-		class={cn("w-full caption-bottom text-sm", className)}
-		{...restProps}
-	>
+	<table bind:this={ref} data-slot="table" class={cn("w-full caption-bottom text-sm", className)} {...restProps}>
 		{@render children?.()}
 	</table>
 </div>

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

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

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

@@ -1,5 +1,5 @@
-import Root from "./tabs.svelte";
 import Content from "./tabs-content.svelte";
-import List from "./tabs-list.svelte";
 import Trigger from "./tabs-trigger.svelte";
-export { Root, Content, List, Trigger, Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger, };
+import Root from "./tabs.svelte";
+import List, { tabsListVariants, type TabsListVariant } from "./tabs-list.svelte";
+export { Root, Content, List, Trigger, tabsListVariants, type TabsListVariant, Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger, };

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

@@ -1,7 +1,7 @@
-import Root from "./tabs.svelte";
 import Content from "./tabs-content.svelte";
-import List from "./tabs-list.svelte";
 import Trigger from "./tabs-trigger.svelte";
-export { Root, Content, List, Trigger, 
+import Root from "./tabs.svelte";
+import List, { tabsListVariants } from "./tabs-list.svelte";
+export { Root, Content, List, Trigger, tabsListVariants, 
 //
 Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger, };

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

@@ -12,6 +12,6 @@
 <TabsPrimitive.Content
 	bind:ref
 	data-slot="tabs-content"
-	class={cn("flex-1 outline-none", className)}
+	class={cn("text-sm flex-1 outline-none", className)}
 	{...restProps}
 />

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

@@ -1,20 +1,40 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const tabsListVariants = tv({
+		base: "rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list inline-flex w-fit items-center justify-center text-muted-foreground group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
+		variants: {
+			variant: {
+				default: "bg-muted",
+				line: "gap-1 bg-transparent",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type TabsListVariant = VariantProps<typeof tabsListVariants>["variant"];
+</script>
+
 <script lang="ts">
 	import { Tabs as TabsPrimitive } from "bits-ui";
 	import { cn } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
+		variant = "default",
 		class: className,
 		...restProps
-	}: TabsPrimitive.ListProps = $props();
+	}: TabsPrimitive.ListProps & {
+		variant?: TabsListVariant;
+	} = $props();
 </script>
 
 <TabsPrimitive.List
 	bind:ref
 	data-slot="tabs-list"
-	class={cn(
-		"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
-		className
-	)}
+	data-variant={variant}
+	class={cn(tabsListVariants({ variant }), className)}
 	{...restProps}
 />

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

@@ -1,4 +1,25 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const tabsListVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: "bg-muted";
+        line: "gap-1 bg-transparent";
+    };
+}, undefined, "rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list inline-flex w-fit items-center justify-center text-muted-foreground group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col", {
+    variant: {
+        default: "bg-muted";
+        line: "gap-1 bg-transparent";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        default: "bg-muted";
+        line: "gap-1 bg-transparent";
+    };
+}, undefined>>;
+export type TabsListVariant = VariantProps<typeof tabsListVariants>["variant"];
 import { Tabs as TabsPrimitive } from "bits-ui";
-declare const TabsList: import("svelte").Component<TabsPrimitive.ListProps, {}, "ref">;
+type $$ComponentProps = TabsPrimitive.ListProps & {
+    variant?: TabsListVariant;
+};
+declare const TabsList: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type TabsList = ReturnType<typeof TabsList>;
 export default TabsList;

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

@@ -13,7 +13,10 @@
 	bind:ref
 	data-slot="tabs-trigger"
 	class={cn(
-		"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 relative inline-flex h-[calc(100%_-_1px)] flex-1 items-center justify-center whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+		"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+		"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
 		className
 	)}
 	{...restProps}

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

@@ -14,6 +14,6 @@
 	bind:ref
 	bind:value
 	data-slot="tabs"
-	class={cn("flex flex-col gap-2", className)}
+	class={cn("gap-2 group/tabs flex data-horizontal:flex-col", className)}
 	{...restProps}
 />

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

@@ -1,4 +1,4 @@
 import { Tabs as TabsPrimitive } from "bits-ui";
-declare const Tabs: import("svelte").Component<TabsPrimitive.RootProps, {}, "value" | "ref">;
+declare const Tabs: import("svelte").Component<TabsPrimitive.RootProps, {}, "ref" | "value">;
 type Tabs = ReturnType<typeof Tabs>;
 export default Tabs;

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

@@ -15,9 +15,8 @@
 	bind:this={ref}
 	data-slot={dataSlot}
 	class={cn(
-		"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 field-sizing-content shadow-xs flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+		"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm flex field-sizing-content min-h-16 w-full outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	bind:value
-	{...restProps}
-></textarea>
+	{...restProps}></textarea>

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

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

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

@@ -2,17 +2,16 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const toggleVariants = tv({
-		base: "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground 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 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		base: "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			variant: {
 				default: "bg-transparent",
-				outline:
-					"border-input shadow-xs hover:bg-accent hover:text-accent-foreground border bg-transparent",
+				outline: "border-input hover:bg-muted border bg-transparent",
 			},
 			size: {
-				default: "h-9 min-w-9 px-2",
-				sm: "h-8 min-w-8 px-1.5",
-				lg: "h-10 min-w-10 px-2.5",
+				default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+				sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+				lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
 			},
 		},
 		defaultVariants: {

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

@@ -1,35 +1,35 @@
 import { type VariantProps } from "tailwind-variants";
 export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        outline: string;
+        default: "bg-transparent";
+        outline: "border-input hover:bg-muted border bg-transparent";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5";
+        lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
     };
-}, undefined, "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground 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 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+}, undefined, "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
     variant: {
-        default: string;
-        outline: string;
+        default: "bg-transparent";
+        outline: "border-input hover:bg-muted border bg-transparent";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5";
+        lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        outline: string;
+        default: "bg-transparent";
+        outline: "border-input hover:bg-muted border bg-transparent";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5";
+        lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
     };
-}, undefined, "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground 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 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", unknown, unknown, undefined>>;
+}, undefined>>;
 export type ToggleVariant = VariantProps<typeof toggleVariants>["variant"];
 export type ToggleSize = VariantProps<typeof toggleVariants>["size"];
 export type ToggleVariants = VariantProps<typeof toggleVariants>;

package/dist/lib/components/ui/toggle-group/index.d.ts

@@ -1,3 +1,3 @@
-import Root from "./toggle-group.svelte";
 import Item from "./toggle-group-item.svelte";
+import Root from "./toggle-group.svelte";
 export { Root, Item, Root as ToggleGroup, Item as ToggleGroupItem, };

package/dist/lib/components/ui/toggle-group/index.js

@@ -1,5 +1,5 @@
-import Root from "./toggle-group.svelte";
 import Item from "./toggle-group-item.svelte";
+import Root from "./toggle-group.svelte";
 export { Root, Item, 
 //
 Root as ToggleGroup, Item as ToggleGroupItem, };

package/dist/lib/components/ui/toggle-group/toggle-group-item.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
-	import { getToggleGroupCtx } from "./toggle-group.svelte";
-	import { cn } from "../../utils.js";
 	import { type ToggleVariants, toggleVariants } from "../toggle/index.js";
+	import { cn } from "../../utils.js";
+	import { getToggleGroupCtx } from "./toggle-group.svelte";
 
 	let {
 		ref = $bindable(null),
@@ -21,12 +21,13 @@
 	data-slot="toggle-group-item"
 	data-variant={ctx.variant || variant}
 	data-size={ctx.size || size}
+	data-spacing={ctx.spacing}
 	class={cn(
+		"group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
 		toggleVariants({
 			variant: ctx.variant || variant,
 			size: ctx.size || size,
 		}),
-		"min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-s-0 data-[variant=outline]:first:border-s",
 		className
 	)}
 	{value}

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

@@ -1,6 +1,6 @@
 import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
 import { type ToggleVariants } from "../toggle/index.js";
 type $$ComponentProps = ToggleGroupPrimitive.ItemProps & ToggleVariants;
-declare const ToggleGroupItem: import("svelte").Component<$$ComponentProps, {}, "value" | "ref">;
+declare const ToggleGroupItem: import("svelte").Component<$$ComponentProps, {}, "ref" | "value">;
 type ToggleGroupItem = ReturnType<typeof ToggleGroupItem>;
 export default ToggleGroupItem;