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

package/dist/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 "../../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/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

@@ -1,7 +1,6 @@
 <script lang="ts">
+	import { cn, type WithElementRef } from "../../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/dist/lib/components/ui/table/table-body.svelte.d.ts

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

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

@@ -1,7 +1,6 @@
 <script lang="ts">
+	import { cn, type WithElementRef } from "../../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/dist/lib/components/ui/table/table-caption.svelte.d.ts

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

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

@@ -1,7 +1,6 @@
 <script lang="ts">
+	import { cn, type WithElementRef } from "../../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/dist/lib/components/ui/table/table-cell.svelte.d.ts

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

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

@@ -1,7 +1,6 @@
 <script lang="ts">
+	import { cn, type WithElementRef } from "../../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/dist/lib/components/ui/table/table-footer.svelte.d.ts

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

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

@@ -1,7 +1,6 @@
 <script lang="ts">
+	import { cn, type WithElementRef } from "../../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/dist/lib/components/ui/table/table-head.svelte.d.ts

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

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

@@ -1,7 +1,6 @@
 <script lang="ts">
+	import { cn, type WithElementRef } from "../../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/dist/lib/components/ui/table/table-header.svelte.d.ts

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

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

@@ -1,7 +1,6 @@
 <script lang="ts">
+	import { cn, type WithElementRef } from "../../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/dist/lib/components/ui/table/table-row.svelte.d.ts

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

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

@@ -1,7 +1,6 @@
 <script lang="ts">
+	import { cn, type WithElementRef } from "../../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/dist/lib/components/ui/table/table.svelte.d.ts

@@ -1,5 +1,5 @@
+import { type WithElementRef } from "../../utils.js";
 import type { HTMLTableAttributes } from "svelte/elements";
-import type { WithElementRef } from "bits-ui";
 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,6 +1,5 @@
-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";
-declare const Root: import("svelte").Component<TabsPrimitive.RootProps, {}, "ref" | "value">;
-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,8 +1,7 @@
-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;
-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

@@ -1,21 +1,17 @@
 <script lang="ts">
 	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "../../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/dist/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 "../../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/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

@@ -1,21 +1,23 @@
 <script lang="ts">
 	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "../../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/dist/lib/components/ui/tabs/tabs.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "../../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/dist/lib/components/ui/tabs/tabs.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tabs as TabsPrimitive } from "bits-ui";
+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

@@ -1,22 +1,22 @@
 <script lang="ts">
-	import type { WithElementRef, WithoutChildren } from "bits-ui";
+	import { cn, type WithElementRef, type WithoutChildren } from "../../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/dist/lib/components/ui/textarea/textarea.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { WithElementRef } from "bits-ui";
+import { type WithElementRef } from "../../utils.js";
 import type { HTMLTextareaAttributes } from "svelte/elements";
 declare const Textarea: import("svelte").Component<Omit<WithElementRef<HTMLTextareaAttributes>, "children">, {}, "ref" | "value">;
 type Textarea = ReturnType<typeof 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 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 "../../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}
 />