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

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Slider as SliderPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { Slider as SliderPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -18,26 +18,34 @@ get along, so we shut typescript up by casting `value` to `never`.
 <SliderPrimitive.Root
 	bind:ref
 	bind:value={value as never}
+	data-slot="slider"
 	{orientation}
 	class={cn(
-		"relative flex touch-none select-none items-center data-[orientation='vertical']:h-full data-[orientation='vertical']:min-h-44 data-[orientation='horizontal']:w-full data-[orientation='vertical']:w-auto data-[orientation='vertical']:flex-col",
+		"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-slot="slider-track"
 			data-orientation={orientation}
-			class="bg-primary/20 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"
+			class={cn(
+				"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
-				class="bg-primary absolute data-[orientation='horizontal']:h-full data-[orientation='vertical']:w-full"
+				data-slot="slider-range"
+				class={cn(
+					"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
-				index={thumb}
-				class="border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50"
+				data-slot="slider-thumb"
+				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/src/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>
@@ -8,13 +13,27 @@
 <Sonner
 	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: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-			description: "group-[.toast]:text-muted-foreground",
-			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+			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/src/lib/components/ui/spinner/index.ts

@@ -0,0 +1 @@
+export { default as Spinner } from "./spinner.svelte";

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import Loader2Icon from '@lucide/svelte/icons/loader-2';
+	import { cn } from "$lib/components/utils.js";
+	import type { SVGAttributes } from "svelte/elements";
+
+	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} {...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/src/lib/components/ui/spinner/spinner.svelte.test.ts

@@ -0,0 +1,25 @@
+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/src/lib/components/ui/switch/switch.svelte

@@ -1,27 +1,34 @@
 <script lang="ts">
-	import { Switch as SwitchPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { Switch as SwitchPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
-		checked = $bindable(false),
 		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(
-		"focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 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}
 >
 	<SwitchPrimitive.Thumb
+		data-slot="switch-thumb"
 		class={cn(
-			"bg-background pointer-events-none block size-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 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/src/lib/components/ui/table/index.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,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,

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

@@ -1,7 +1,6 @@
 <script lang="ts">
+	import { cn, type WithElementRef } from "$lib/components/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
 </script>
 
-<tbody bind:this={ref} 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/src/lib/components/ui/table/table-caption.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
+	import { cn, type WithElementRef } from "$lib/components/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
 </script>
 
-<caption bind:this={ref} class={cn("text-muted-foreground mt-4 text-sm", className)} {...restProps}>
+<caption
+	bind:this={ref}
+	data-slot="table-caption"
+	class={cn("text-muted-foreground mt-4 text-sm", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </caption>

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

@@ -1,7 +1,6 @@
 <script lang="ts">
+	import { cn, type WithElementRef } from "$lib/components/utils.js";
 	import type { HTMLTdAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils";
 
 	let {
 		ref = $bindable(null),
@@ -11,13 +10,6 @@
 	}: WithElementRef<HTMLTdAttributes> = $props();
 </script>
 
-<td
-	bind:this={ref}
-	class={cn(
-		"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-		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/src/lib/components/ui/table/table-footer.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
+	import { cn, type WithElementRef } from "$lib/components/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
 </script>
 
-<tfoot bind:this={ref} class={cn("bg-muted/50 font-medium", className)} {...restProps}>
+<tfoot
+	bind:this={ref}
+	data-slot="table-footer"
+	class={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </tfoot>

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

@@ -1,7 +1,6 @@
 <script lang="ts">
+	import { cn, type WithElementRef } from "$lib/components/utils.js";
 	import type { HTMLThAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils";
 
 	let {
 		ref = $bindable(null),
@@ -11,13 +10,6 @@
 	}: WithElementRef<HTMLThAttributes> = $props();
 </script>
 
-<th
-	bind:this={ref}
-	class={cn(
-		"text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-		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/src/lib/components/ui/table/table-header.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
+	import { cn, type WithElementRef } from "$lib/components/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
 </script>
 
-<thead bind:this={ref} class={cn("[&_tr]:border-b", className)} {...restProps}>
+<thead
+	bind:this={ref}
+	data-slot="table-header"
+	class={cn("[&_tr]:border-b", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </thead>

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

@@ -1,7 +1,6 @@
 <script lang="ts">
+	import { cn, type WithElementRef } from "$lib/components/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils";
 
 	let {
 		ref = $bindable(null),
@@ -13,10 +12,8 @@
 
 <tr
 	bind:this={ref}
-	class={cn(
-		"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
-		className
-	)}
+	data-slot="table-row"
+	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/src/lib/components/ui/table/table.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
+	import { cn, type WithElementRef } from "$lib/components/utils.js";
 	import type { HTMLTableAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils";
 
 	let {
 		ref = $bindable(null),
@@ -11,8 +10,8 @@
 	}: WithElementRef<HTMLTableAttributes> = $props();
 </script>
 
-<div class="relative w-full overflow-auto">
-	<table bind:this={ref} class={cn("w-full caption-bottom text-sm", className)} {...restProps}>
+<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}>
 		{@render children?.()}
 	</table>
 </div>

package/src/lib/components/ui/tabs/index.ts

@@ -1,15 +1,15 @@
-import { Tabs as TabsPrimitive } from "bits-ui";
 import Content from "./tabs-content.svelte";
-import List from "./tabs-list.svelte";
 import Trigger from "./tabs-trigger.svelte";
-
-const Root = TabsPrimitive.Root;
+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,

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

@@ -1,21 +1,17 @@
 <script lang="ts">
 	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		value,
 		...restProps
 	}: TabsPrimitive.ContentProps = $props();
 </script>
 
 <TabsPrimitive.Content
 	bind:ref
-	class={cn(
-		"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-		className
-	)}
-	{value}
+	data-slot="tabs-content"
+	class={cn("text-sm flex-1 outline-none", className)}
 	{...restProps}
 />

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

@@ -1,19 +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";
+	import { cn } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
+		variant = "default",
 		class: className,
 		...restProps
-	}: TabsPrimitive.ListProps = $props();
+	}: TabsPrimitive.ListProps & {
+		variant?: TabsListVariant;
+	} = $props();
 </script>
 
 <TabsPrimitive.List
 	bind:ref
-	class={cn(
-		"bg-muted text-muted-foreground inline-flex h-9 items-center justify-center rounded-lg p-1",
-		className
-	)}
+	data-slot="tabs-list"
+	data-variant={variant}
+	class={cn(tabsListVariants({ variant }), className)}
 	{...restProps}
 />

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

@@ -1,21 +1,23 @@
 <script lang="ts">
 	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		value,
 		...restProps
 	}: TabsPrimitive.TriggerProps = $props();
 </script>
 
 <TabsPrimitive.Trigger
 	bind:ref
+	data-slot="tabs-trigger"
 	class={cn(
-		"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow",
+		"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
 	)}
-	{value}
 	{...restProps}
 />

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/components/utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		class: className,
+		...restProps
+	}: TabsPrimitive.RootProps = $props();
+</script>
+
+<TabsPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="tabs"
+	class={cn("gap-2 group/tabs flex data-horizontal:flex-col", className)}
+	{...restProps}
+/>

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

@@ -1,22 +1,22 @@
 <script lang="ts">
-	import type { WithElementRef, WithoutChildren } from "bits-ui";
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/components/utils.js";
 	import type { HTMLTextareaAttributes } from "svelte/elements";
-	import { cn } from "../../../utils";
 
 	let {
 		ref = $bindable(null),
 		value = $bindable(),
 		class: className,
+		"data-slot": dataSlot = "textarea",
 		...restProps
 	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
 </script>
 
 <textarea
 	bind:this={ref}
-	bind:value
+	data-slot={dataSlot}
 	class={cn(
-		"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-sm focus-visible:outline-none focus-visible:ring-1 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
 	)}
-	{...restProps}
-></textarea>
+	bind:value
+	{...restProps}></textarea>

package/src/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 focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_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 hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-sm",
+				outline: "border-input hover:bg-muted border bg-transparent",
 			},
 			size: {
-				default: "h-9 min-w-9 px-3",
-				sm: "h-8 min-w-8 px-2",
-				lg: "h-10 min-w-10 px-3",
+				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: {
@@ -28,7 +27,7 @@
 
 <script lang="ts">
 	import { Toggle as TogglePrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -46,6 +45,7 @@
 <TogglePrimitive.Root
 	bind:ref
 	bind:pressed
+	data-slot="toggle"
 	class={cn(toggleVariants({ variant, size }), className)}
 	{...restProps}
 />

package/src/lib/components/ui/toggle-group/index.ts

@@ -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,

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

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
+	import { type ToggleVariants, toggleVariants } from "$lib/components/ui/toggle/index.js";
+	import { cn } from "$lib/components/utils.js";
 	import { getToggleGroupCtx } from "./toggle-group.svelte";
-	import { cn } from "../../../utils";
-	import { type ToggleVariants, toggleVariants } from "../toggle/index.js";
 
 	let {
 		ref = $bindable(null),
@@ -18,7 +18,12 @@
 
 <ToggleGroupPrimitive.Item
 	bind:ref
+	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,