@kayord/ui 2.1.13 → 3.0.0

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

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

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

@@ -1,13 +1,12 @@
 <script lang="ts">
-	import CircleCheckIcon from "@lucide/svelte/icons/circle-check";
-	import InfoIcon from "@lucide/svelte/icons/info";
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
+	import { mode } from "mode-watcher";
 	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";
 
-	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
-	import { mode } from "mode-watcher";
-
 	let { ...restProps }: SonnerProps = $props();
 </script>
 
@@ -16,7 +15,8 @@
 	class="toaster group"
 	style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
 	{...restProps}
-	>{#snippet loadingIcon()}
+>
+	{#snippet loadingIcon()}
 		<Loader2Icon class="size-4 animate-spin" />
 	{/snippet}
 	{#snippet successIcon()}

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

@@ -1,9 +1,23 @@
 <script lang="ts">
 	import { cn } from "../../../utils.js";
 	import Loader2Icon from "@lucide/svelte/icons/loader-2";
-	import type { ComponentProps } from "svelte";
-
-	let { class: className, ...restProps }: ComponentProps<typeof Loader2Icon> = $props();
+	import type { SVGAttributes } from "svelte/elements";
+	let {
+		class: className,
+		role = "status",
+		// we add color and stroke for compatibility with different icon libraries props
+		color,
+		stroke,
+		"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}
+	color={color === null ? undefined : color}
+	stroke={stroke === null ? undefined : stroke}
+	aria-label={ariaLabel}
+	class={cn("size-4 animate-spin", className)}
+	{...restProps as any}
+/>

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

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

package/dist/components/ui/stepper/ctx.d.ts

@@ -0,0 +1,8 @@
+type StepperContext = {
+    activeStep: () => number;
+    setStep: (step: number) => void;
+    orientation: () => "horizontal" | "vertical";
+};
+export declare function setStepperContext(props: StepperContext): void;
+export declare function getStepperContext(): StepperContext;
+export {};

package/dist/components/ui/stepper/ctx.js

@@ -0,0 +1,8 @@
+import { getContext, setContext } from "svelte";
+const STEPPER_KEY = Symbol("stepper");
+export function setStepperContext(props) {
+    setContext(STEPPER_KEY, props);
+}
+export function getStepperContext() {
+    return getContext(STEPPER_KEY);
+}

package/dist/components/ui/stepper/index.d.ts

@@ -0,0 +1,8 @@
+import Stepper from "./stepper.svelte";
+import StepperItem from "./stepper-item.svelte";
+import StepperTrigger from "./stepper-trigger.svelte";
+import StepperIndicator from "./stepper-indicator.svelte";
+import StepperSeparator from "./stepper-separator.svelte";
+import StepperTitle from "./stepper-title.svelte";
+import StepperDescription from "./stepper-description.svelte";
+export { Stepper as Root, StepperItem as Item, StepperTrigger as Trigger, StepperIndicator as Indicator, StepperSeparator as Separator, StepperTitle as Title, StepperDescription as Description, };

package/dist/components/ui/stepper/index.js

@@ -0,0 +1,8 @@
+import Stepper from "./stepper.svelte";
+import StepperItem from "./stepper-item.svelte";
+import StepperTrigger from "./stepper-trigger.svelte";
+import StepperIndicator from "./stepper-indicator.svelte";
+import StepperSeparator from "./stepper-separator.svelte";
+import StepperTitle from "./stepper-title.svelte";
+import StepperDescription from "./stepper-description.svelte";
+export { Stepper as Root, StepperItem as Item, StepperTrigger as Trigger, StepperIndicator as Indicator, StepperSeparator as Separator, StepperTitle as Title, StepperDescription as Description, };

package/dist/components/ui/stepper/stepper-description.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { cn } from "../../../utils";
+	import type { Snippet } from "svelte";
+	let { class: className, children }: { class?: string; children: Snippet } = $props();
+</script>
+
+<p class={cn("text-muted-foreground text-xs", className)}>{@render children()}</p>

package/dist/components/ui/stepper/stepper-description.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    class?: string;
+    children: Snippet;
+};
+declare const StepperDescription: import("svelte").Component<$$ComponentProps, {}, "">;
+type StepperDescription = ReturnType<typeof StepperDescription>;
+export default StepperDescription;

package/dist/components/ui/stepper/stepper-indicator.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { cn } from "../../../utils";
+	import { Check } from "@lucide/svelte";
+	import { getStepperContext } from "./ctx";
+	import type { Snippet } from "svelte";
+
+	let {
+		step,
+		class: className,
+		children,
+		success,
+	}: {
+		step: number;
+		class?: string;
+		children?: Snippet;
+		success?: Snippet;
+	} = $props();
+
+	const ctx = getStepperContext();
+
+	let isCompleted = $derived(step < ctx.activeStep());
+	let isActive = $derived(step === ctx.activeStep());
+</script>
+
+<div
+	class={cn(
+		"relative flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-semibold transition-colors duration-200",
+		isActive && "border-primary text-primary ring-primary/20 ring-2 ring-offset-2",
+		isCompleted && "border-primary bg-primary text-primary-foreground",
+		!isActive && !isCompleted && "border-muted-foreground/25 text-muted-foreground",
+		className
+	)}
+>
+	{#if isCompleted}
+		{#if success}
+			{@render success()}
+		{:else}
+			<Check class="h-5 w-5" />
+		{/if}
+	{:else if children}
+		{@render children()}
+	{:else}
+		{step + 1}
+	{/if}
+</div>

package/dist/components/ui/stepper/stepper-indicator.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    step: number;
+    class?: string;
+    children?: Snippet;
+    success?: Snippet;
+};
+declare const StepperIndicator: import("svelte").Component<$$ComponentProps, {}, "">;
+type StepperIndicator = ReturnType<typeof StepperIndicator>;
+export default StepperIndicator;

package/dist/components/ui/stepper/stepper-item.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { cn } from "../../../utils";
+	import { getStepperContext } from "./ctx";
+	import type { Snippet } from "svelte";
+
+	let {
+		step,
+		class: className,
+		children,
+	}: {
+		step: number;
+		class?: string;
+		children: Snippet;
+	} = $props();
+
+	const ctx = getStepperContext();
+
+	let isCompleted = $derived(step < ctx.activeStep());
+	let isActive = $derived(step === ctx.activeStep());
+	let isVertical = $derived(ctx.orientation() === "vertical");
+</script>
+
+<div
+	data-state={isActive ? "active" : isCompleted ? "completed" : "inactive"}
+	class={cn(
+		"group flex items-center",
+		!isVertical && "flex-1 gap-4 last:flex-none",
+		isVertical && "relative flex-col items-start gap-0",
+		className
+	)}
+>
+	{@render children()}
+</div>

package/dist/components/ui/stepper/stepper-item.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    step: number;
+    class?: string;
+    children: Snippet;
+};
+declare const StepperItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type StepperItem = ReturnType<typeof StepperItem>;
+export default StepperItem;

package/dist/components/ui/stepper/stepper-separator.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { cn } from "../../../utils";
+	import { getStepperContext } from "./ctx";
+
+	let { class: className }: { class?: string } = $props();
+	const ctx = getStepperContext();
+	let isVertical = $derived(ctx.orientation() === "vertical");
+</script>
+
+<div
+	class={cn(
+		"bg-muted flex-1",
+
+		!isVertical && "-mt-8 mr-4 ml-4 h-[2px]",
+
+		isVertical && "absolute top-14 -bottom-4 left-[27px] w-[2px]",
+
+		className
+	)}
+>
+	<div
+		class={cn(
+			"bg-primary transition-all duration-200 ease-in-out",
+			!isVertical && "h-full w-full origin-left scale-x-0 group-data-[state=completed]:scale-x-100",
+			isVertical && "h-full w-full origin-top scale-y-0 group-data-[state=completed]:scale-y-100"
+		)}
+	/>
+</div>

package/dist/components/ui/stepper/stepper-separator.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    class?: string;
+};
+declare const StepperSeparator: import("svelte").Component<$$ComponentProps, {}, "">;
+type StepperSeparator = ReturnType<typeof StepperSeparator>;
+export default StepperSeparator;

package/dist/components/ui/stepper/stepper-title.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { cn } from "../../../utils";
+	import type { Snippet } from "svelte";
+	let { class: className, children }: { class?: string; children: Snippet } = $props();
+</script>
+
+<h3 class={cn("text-sm leading-none font-medium", className)}>{@render children()}</h3>

package/dist/components/ui/stepper/stepper-title.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    class?: string;
+    children: Snippet;
+};
+declare const StepperTitle: import("svelte").Component<$$ComponentProps, {}, "">;
+type StepperTitle = ReturnType<typeof StepperTitle>;
+export default StepperTitle;

package/dist/components/ui/stepper/stepper-trigger.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { cn } from "../../../utils";
+	import { Button } from "../button";
+	import { getStepperContext } from "./ctx";
+	import type { Snippet } from "svelte";
+
+	let {
+		step,
+		class: className,
+		children,
+		...rest
+	}: {
+		step: number;
+		class?: string;
+		children: Snippet;
+		[key: string]: any;
+	} = $props();
+
+	const ctx = getStepperContext();
+	let isVertical = $derived(ctx.orientation() === "vertical");
+</script>
+
+<Button
+	variant="ghost"
+	onclick={() => ctx.setStep(step)}
+	class={cn(
+		"flex h-auto items-center justify-center gap-3 p-2 hover:bg-transparent",
+		!isVertical && "flex-col",
+		isVertical && "flex-row justify-start",
+		className
+	)}
+	{...rest}
+>
+	{@render children()}
+</Button>

package/dist/components/ui/stepper/stepper-trigger.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    step: number;
+    class?: string;
+    children: Snippet;
+    [key: string]: any;
+};
+declare const StepperTrigger: import("svelte").Component<$$ComponentProps, {}, "">;
+type StepperTrigger = ReturnType<typeof StepperTrigger>;
+export default StepperTrigger;

package/dist/components/ui/stepper/stepper.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { cn } from "../../../utils";
+	import { setStepperContext } from "./ctx";
+	import type { Snippet } from "svelte";
+
+	let {
+		value = $bindable(0),
+		orientation = "horizontal",
+		class: className,
+		children,
+	}: {
+		value: number;
+		orientation?: "horizontal" | "vertical";
+		class?: string;
+		children: Snippet;
+	} = $props();
+
+	setStepperContext({
+		activeStep: () => value,
+		setStep: (s: number) => {
+			value = s;
+		},
+		orientation: () => orientation,
+	});
+</script>
+
+<div
+	class={cn(
+		"flex w-full gap-4",
+		orientation === "vertical" ? "flex-col" : "flex-row items-start justify-between",
+		className
+	)}
+>
+	{@render children()}
+</div>

package/dist/components/ui/stepper/stepper.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    value: number;
+    orientation?: "horizontal" | "vertical";
+    class?: string;
+    children: Snippet;
+};
+declare const Stepper: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Stepper = ReturnType<typeof Stepper>;
+export default Stepper;

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

@@ -6,24 +6,26 @@
 		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 peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none 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 peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]",
 		className
 	)}
 	{...restProps}
 >
 	<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"
-		)}
+		class="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform 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 rtl:data-[state=checked]:translate-x-[calc(-100%)]"
 	/>
 </SwitchPrimitive.Root>

package/dist/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/components/ui/table/table-cell.svelte

@@ -8,7 +8,7 @@
 <td
 	bind:this={ref}
 	data-slot="table-cell"
-	class={cn("bg-clip-padding p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0", className)}
+	class={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -9,7 +9,7 @@
 	bind:this={ref}
 	data-slot="table-head"
 	class={cn(
-		"text-foreground h-10 bg-clip-padding px-2 text-start align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pe-0",
+		"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0",
 		className
 	)}
 	{...restProps}

package/dist/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", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/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 List, { tabsListVariants, type TabsListVariant } 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, };
+export { Root, Content, List, Trigger, tabsListVariants, type TabsListVariant, Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger, };

package/dist/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 List, { tabsListVariants } from "./tabs-list.svelte";
 import Trigger from "./tabs-trigger.svelte";
-export { Root, Content, List, Trigger, 
+export { Root, Content, List, Trigger, tabsListVariants, 
 //
 Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger, };

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

@@ -5,4 +5,9 @@
 	let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ContentProps = $props();
 </script>
 
-<TabsPrimitive.Content bind:ref data-slot="tabs-content" class={cn("flex-1 outline-none", className)} {...restProps} />
+<TabsPrimitive.Content
+	bind:ref
+	data-slot="tabs-content"
+	class={cn("flex-1 text-sm outline-none", className)}
+	{...restProps}
+/>

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

@@ -1,16 +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 text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+		variants: {
+			variant: {
+				default: "cn-tabs-list-variant-default bg-muted",
+				line: "cn-tabs-list-variant-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), class: className, ...restProps }: TabsPrimitive.ListProps = $props();
+	let {
+		ref = $bindable(null),
+		variant = "default",
+		class: className,
+		...restProps
+	}: 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/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: string;
+        line: string;
+    };
+}, undefined, "rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col", {
+    variant: {
+        default: string;
+        line: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        line: string;
+    };
+}, undefined, "rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col", unknown, unknown, 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/components/ui/tabs/tabs-trigger.svelte

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

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

@@ -10,4 +10,10 @@
 	}: TabsPrimitive.RootProps = $props();
 </script>
 
-<TabsPrimitive.Root bind:ref bind:value data-slot="tabs" class={cn("flex flex-col gap-2", className)} {...restProps} />
+<TabsPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="tabs"
+	class={cn("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", className)}
+	{...restProps}
+/>

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

@@ -15,7 +15,7 @@
 	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 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none 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 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
 		className
 	)}
 	bind:value