svelte-docsmith 0.2.0 → 0.4.0

package/dist/ui/shadcn/dialog/dialog-trigger.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		type = 'button',
+		...restProps
+	}: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {type} {...restProps} />

package/dist/ui/shadcn/dialog/dialog-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Dialog as DialogPrimitive } from 'bits-ui';
+declare const DialogTrigger: import("svelte").Component<DialogPrimitive.TriggerProps, {}, "ref">;
+type DialogTrigger = ReturnType<typeof DialogTrigger>;
+export default DialogTrigger;

package/dist/ui/shadcn/dialog/dialog.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let { open = $bindable(false), ...restProps }: DialogPrimitive.RootProps = $props();
+</script>
+
+<DialogPrimitive.Root bind:open {...restProps} />

package/dist/ui/shadcn/dialog/dialog.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Dialog: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/ui/shadcn/dialog/index.d.ts

@@ -0,0 +1,11 @@
+import Root from './dialog.svelte';
+import Portal from './dialog-portal.svelte';
+import Title from './dialog-title.svelte';
+import Footer from './dialog-footer.svelte';
+import Header from './dialog-header.svelte';
+import Overlay from './dialog-overlay.svelte';
+import Content from './dialog-content.svelte';
+import Description from './dialog-description.svelte';
+import Trigger from './dialog-trigger.svelte';
+import Close from './dialog-close.svelte';
+export { Root, Title, Portal, Footer, Header, Trigger, Overlay, Content, Description, Close, Root as Dialog, Title as DialogTitle, Portal as DialogPortal, Footer as DialogFooter, Header as DialogHeader, Trigger as DialogTrigger, Overlay as DialogOverlay, Content as DialogContent, Description as DialogDescription, Close as DialogClose };

package/dist/ui/shadcn/dialog/index.js

@@ -0,0 +1,13 @@
+import Root from './dialog.svelte';
+import Portal from './dialog-portal.svelte';
+import Title from './dialog-title.svelte';
+import Footer from './dialog-footer.svelte';
+import Header from './dialog-header.svelte';
+import Overlay from './dialog-overlay.svelte';
+import Content from './dialog-content.svelte';
+import Description from './dialog-description.svelte';
+import Trigger from './dialog-trigger.svelte';
+import Close from './dialog-close.svelte';
+export { Root, Title, Portal, Footer, Header, Trigger, Overlay, Content, Description, Close, 
+//
+Root as Dialog, Title as DialogTitle, Portal as DialogPortal, Footer as DialogFooter, Header as DialogHeader, Trigger as DialogTrigger, Overlay as DialogOverlay, Content as DialogContent, Description as DialogDescription, Close as DialogClose };

package/dist/ui/shadcn/input/index.d.ts

@@ -0,0 +1,2 @@
+import Root from './input.svelte';
+export { Root, Root as Input };

package/dist/ui/shadcn/input/index.js

@@ -0,0 +1,4 @@
+import Root from './input.svelte';
+export { Root, 
+//
+Root as Input };

package/dist/ui/shadcn/input/input.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../shadcn.js';
+
+	type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
+
+	type Props = WithElementRef<
+		Omit<HTMLInputAttributes, 'type'> &
+			({ type: 'file'; files?: FileList } | { type?: InputType; files?: undefined })
+	>;
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		type,
+		files = $bindable(),
+		class: className,
+		'data-slot': dataSlot = 'input',
+		...restProps
+	}: Props = $props();
+</script>
+
+{#if type === 'file'}
+	<input
+		bind:this={ref}
+		data-slot={dataSlot}
+		class={cn(
+			'dark:bg-input/30 border-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 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+			className
+		)}
+		type="file"
+		bind:files
+		bind:value
+		{...restProps}
+	/>
+{:else}
+	<input
+		bind:this={ref}
+		data-slot={dataSlot}
+		class={cn(
+			'dark:bg-input/30 border-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 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+			className
+		)}
+		{type}
+		bind:value
+		{...restProps}
+	/>
+{/if}

package/dist/ui/shadcn/input/input.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+import { type WithElementRef } from '../../../shadcn.js';
+type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
+type Props = WithElementRef<Omit<HTMLInputAttributes, 'type'> & ({
+    type: 'file';
+    files?: FileList;
+} | {
+    type?: InputType;
+    files?: undefined;
+})>;
+declare const Input: import("svelte").Component<Props, {}, "value" | "ref" | "files">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/ui/shadcn/input-group/index.d.ts

@@ -0,0 +1,7 @@
+import Root from './input-group.svelte';
+import Addon from './input-group-addon.svelte';
+import Button from './input-group-button.svelte';
+import Input from './input-group-input.svelte';
+import Text from './input-group-text.svelte';
+import Textarea from './input-group-textarea.svelte';
+export { Root, Addon, Button, Input, Text, Textarea, Root as InputGroup, Addon as InputGroupAddon, Button as InputGroupButton, Input as InputGroupInput, Text as InputGroupText, Textarea as InputGroupTextarea };

package/dist/ui/shadcn/input-group/index.js

@@ -0,0 +1,9 @@
+import Root from './input-group.svelte';
+import Addon from './input-group-addon.svelte';
+import Button from './input-group-button.svelte';
+import Input from './input-group-input.svelte';
+import Text from './input-group-text.svelte';
+import Textarea from './input-group-textarea.svelte';
+export { Root, Addon, Button, Input, Text, Textarea, 
+//
+Root as InputGroup, Addon as InputGroupAddon, Button as InputGroupButton, Input as InputGroupInput, Text as InputGroupText, Textarea as InputGroupTextarea };

package/dist/ui/shadcn/input-group/input-group-addon.svelte

@@ -0,0 +1,53 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+	export const inputGroupAddonVariants = tv({
+		base: "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+		variants: {
+			align: {
+				'inline-start': 'pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem] order-first',
+				'inline-end': 'pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem] order-last',
+				'block-start':
+					'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
+				'block-end':
+					'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start'
+			}
+		},
+		defaultVariants: {
+			align: 'inline-start'
+		}
+	});
+
+	export type InputGroupAddonAlign = VariantProps<typeof inputGroupAddonVariants>['align'];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../shadcn.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		align = 'inline-start',
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		align?: InputGroupAddonAlign;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	role="group"
+	data-slot="input-group-addon"
+	data-align={align}
+	class={cn(inputGroupAddonVariants({ align }), className)}
+	onclick={(e) => {
+		if ((e.target as HTMLElement).closest('button')) {
+			return;
+		}
+		e.currentTarget.parentElement?.querySelector('input')?.focus();
+	}}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/ui/shadcn/input-group/input-group-addon.svelte.d.ts

@@ -0,0 +1,32 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const inputGroupAddonVariants: import("tailwind-variants").TVReturnType<{
+    align: {
+        'inline-start': string;
+        'inline-end': string;
+        'block-start': string;
+        'block-end': string;
+    };
+}, undefined, "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none", {
+    align: {
+        'inline-start': string;
+        'inline-end': string;
+        'block-start': string;
+        'block-end': string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    align: {
+        'inline-start': string;
+        'inline-end': string;
+        'block-start': string;
+        'block-end': string;
+    };
+}, undefined, "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none", unknown, unknown, undefined>>;
+export type InputGroupAddonAlign = VariantProps<typeof inputGroupAddonVariants>['align'];
+import { type WithElementRef } from '../../../shadcn.js';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    align?: InputGroupAddonAlign;
+};
+declare const InputGroupAddon: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type InputGroupAddon = ReturnType<typeof InputGroupAddon>;
+export default InputGroupAddon;

package/dist/ui/shadcn/input-group/input-group-button.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+
+	const inputGroupButtonVariants = tv({
+		base: 'gap-2 text-sm flex items-center shadow-none',
+		variants: {
+			size: {
+				xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+				sm: 'cn-input-group-button-size-sm',
+				'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
+				'icon-sm': 'size-8 p-0 has-[>svg]:p-0'
+			}
+		},
+		defaultVariants: {
+			size: 'xs'
+		}
+	});
+
+	export type InputGroupButtonSize = VariantProps<typeof inputGroupButtonVariants>['size'];
+</script>
+
+<script lang="ts">
+	import { cn } from '../../../shadcn.js';
+	import type { ComponentProps } from 'svelte';
+	import { Button } from '../button/index.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		type = 'button',
+		variant = 'ghost',
+		size = 'xs',
+		...restProps
+	}: Omit<ComponentProps<typeof Button>, 'href' | 'size'> & {
+		size?: InputGroupButtonSize;
+	} = $props();
+</script>
+
+<Button
+	bind:ref
+	{type}
+	data-size={size}
+	{variant}
+	class={cn(inputGroupButtonVariants({ size }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</Button>

package/dist/ui/shadcn/input-group/input-group-button.svelte.d.ts

@@ -0,0 +1,32 @@
+import { type VariantProps } from 'tailwind-variants';
+declare const inputGroupButtonVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        'icon-xs': string;
+        'icon-sm': string;
+    };
+}, undefined, "gap-2 text-sm flex items-center shadow-none", {
+    size: {
+        xs: string;
+        sm: string;
+        'icon-xs': string;
+        'icon-sm': string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        'icon-xs': string;
+        'icon-sm': string;
+    };
+}, undefined, "gap-2 text-sm flex items-center shadow-none", unknown, unknown, undefined>>;
+export type InputGroupButtonSize = VariantProps<typeof inputGroupButtonVariants>['size'];
+import type { ComponentProps } from 'svelte';
+import { Button } from '../button/index.js';
+type $$ComponentProps = Omit<ComponentProps<typeof Button>, 'href' | 'size'> & {
+    size?: InputGroupButtonSize;
+};
+declare const InputGroupButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type InputGroupButton = ReturnType<typeof InputGroupButton>;
+export default InputGroupButton;

package/dist/ui/shadcn/input-group/input-group-input.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn } from '../../../shadcn.js';
+	import type { ComponentProps } from 'svelte';
+	import { Input } from '../input/index.js';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...props
+	}: ComponentProps<typeof Input> = $props();
+</script>
+
+<Input
+	bind:ref
+	data-slot="input-group-control"
+	class={cn(
+		'rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1',
+		className
+	)}
+	bind:value
+	{...props}
+/>

package/dist/ui/shadcn/input-group/input-group-input.svelte.d.ts

@@ -0,0 +1,11 @@
+declare const InputGroupInput: import("svelte").Component<(Omit<import("svelte/elements").HTMLInputAttributes, "type"> & ({
+    type: "file";
+    files?: FileList;
+} | {
+    type?: "number" | "time" | "url" | "search" | "text" | "button" | "image" | "hidden" | "color" | "submit" | "reset" | "checkbox" | "radio" | (string & {}) | "tel" | "email" | "date" | "datetime-local" | "month" | "password" | "range" | "week";
+    files?: undefined;
+})) & {
+    ref?: HTMLElement | null | undefined;
+}, {}, "value" | "ref">;
+type InputGroupInput = ReturnType<typeof InputGroupInput>;
+export default InputGroupInput;

package/dist/ui/shadcn/input-group/input-group-text.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../shadcn.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	class={cn(
+		"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/dist/ui/shadcn/input-group/input-group-text.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../shadcn.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const InputGroupText: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
+type InputGroupText = ReturnType<typeof InputGroupText>;
+export default InputGroupText;

package/dist/ui/shadcn/input-group/input-group-textarea.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn } from '../../../shadcn.js';
+	import { Textarea } from '../textarea/index.js';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...props
+	}: ComponentProps<typeof Textarea> = $props();
+</script>
+
+<Textarea
+	bind:ref
+	data-slot="input-group-control"
+	class={cn(
+		'rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none',
+		className
+	)}
+	bind:value
+	{...props}
+/>

package/dist/ui/shadcn/input-group/input-group-textarea.svelte.d.ts

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

package/dist/ui/shadcn/input-group/input-group.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../shadcn.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...props
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="input-group"
+	role="group"
+	class={cn(
+		'group/input-group border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-md border shadow-xs transition-[color,box-shadow] in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',
+		className
+	)}
+	{...props}
+>
+	{@render children?.()}
+</div>

package/dist/ui/shadcn/input-group/input-group.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../shadcn.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const InputGroup: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type InputGroup = ReturnType<typeof InputGroup>;
+export default InputGroup;

package/dist/ui/shadcn/tabs/tabs.svelte.d.ts

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

package/dist/ui/shadcn/textarea/index.d.ts

@@ -0,0 +1,2 @@
+import Root from './textarea.svelte';
+export { Root, Root as Textarea };

package/dist/ui/shadcn/textarea/index.js

@@ -0,0 +1,4 @@
+import Root from './textarea.svelte';
+export { Root, 
+//
+Root as Textarea };

package/dist/ui/shadcn/textarea/textarea.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from '../../../shadcn.js';
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		'data-slot': dataSlot = 'textarea',
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+</script>
+
+<textarea
+	bind:this={ref}
+	data-slot={dataSlot}
+	class={cn(
+		'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 rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50',
+		className
+	)}
+	bind:value
+	{...restProps}
+></textarea>

package/dist/ui/shadcn/textarea/textarea.svelte.d.ts

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

package/dist/ui/tab-item.svelte

@@ -1,14 +1,40 @@
 <script lang="ts">
-	import * as Tabs from './shadcn/tabs/index.js';
-	import type { WithChildren } from '../types.js';
+	import { getContext, type Snippet } from 'svelte';
+	import * as TabsPrimitive from './shadcn/tabs/index.js';
+	import { TABS_PHASE, getTabsContext, type TabsPhase } from './tabs.svelte';
 
-	type TabsItemProps = {
-		value: string;
-	};
+	const {
+		label,
+		value: valueProp,
+		children
+	}: {
+		/** The trigger text for this tab. */
+		label: string;
+		/** Underlying value; defaults to `label` (only needed to disambiguate duplicate labels). */
+		value?: string;
+		children: Snippet;
+	} = $props();
 
-	const { children, value }: WithChildren<TabsItemProps> = $props();
+	const value = $derived(valueProp ?? label);
+	const phase = getContext<TabsPhase>(TABS_PHASE);
+
+	// Register once, during the collect pass, so <Tabs> can pick the default tab.
+	// svelte-ignore state_referenced_locally
+	if (phase === 'collect') getTabsContext()?.register(value);
 </script>
 
-<Tabs.Content {value}>
-	{@render children()}
-</Tabs.Content>
+{#if phase === 'list'}
+	<!-- bits-ui v2 emits data-state="active"; the vendored trigger styles the
+	     active state with data-active (a skew from the CLI's registry version),
+	     so paint the active state here to match what's actually emitted. -->
+	<TabsPrimitive.Trigger
+		{value}
+		class="data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
+	>
+		{label}
+	</TabsPrimitive.Trigger>
+{:else if phase === 'panel'}
+	<TabsPrimitive.Content {value}>
+		{@render children()}
+	</TabsPrimitive.Content>
+{/if}

package/dist/ui/tab-item.svelte.d.ts

@@ -1,6 +1,11 @@
-import type { WithChildren } from '../types.js';
-declare const TabItem: import("svelte").Component<WithChildren<{
-    value: string;
-}>, {}, "">;
+import { type Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** The trigger text for this tab. */
+    label: string;
+    /** Underlying value; defaults to `label` (only needed to disambiguate duplicate labels). */
+    value?: string;
+    children: Snippet;
+};
+declare const TabItem: import("svelte").Component<$$ComponentProps, {}, "">;
 type TabItem = ReturnType<typeof TabItem>;
 export default TabItem;

package/dist/ui/tabs-phase.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	// Internal to <Tabs>. bits-ui renders the trigger row (Tabs.List) and the
+	// panels (Tabs.Content) as separate subtrees, but authors write a single flat
+	// list of <TabItem>s. So <Tabs> renders that list three times through this
+	// wrapper — once per phase — and each <TabItem> reads the phase to decide what
+	// to emit: `collect` registers its value (no DOM), `list` renders a trigger,
+	// `panel` renders the content. Doing it in render (not an effect) keeps the
+	// first tab selected server-side, with no post-hydration pop-in.
+	import { setContext, type Snippet } from 'svelte';
+	import { TABS_PHASE, type TabsPhase } from './tabs.svelte';
+
+	const { phase, children }: { phase: TabsPhase; children: Snippet } = $props();
+
+	// phase is fixed for the lifetime of each scope instance.
+	// svelte-ignore state_referenced_locally
+	setContext<TabsPhase>(TABS_PHASE, phase);
+</script>
+
+{@render children()}

package/dist/ui/tabs-phase.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type Snippet } from 'svelte';
+import { type TabsPhase } from './tabs.svelte';
+type $$ComponentProps = {
+    phase: TabsPhase;
+    children: Snippet;
+};
+declare const TabsPhase: import("svelte").Component<$$ComponentProps, {}, "">;
+type TabsPhase = ReturnType<typeof TabsPhase>;
+export default TabsPhase;