@dryui/ui 0.3.0 → 0.4.1

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

@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	step: number;
+    step: number;
 }
-declare const StepperSeparator: import('svelte').Component<Props, {}, ''>;
+declare const StepperSeparator: import("svelte").Component<Props, {}, "">;
 type StepperSeparator = ReturnType<typeof StepperSeparator>;
 export default StepperSeparator;

package/dist/stepper/{stepper-step.svelte → stepper-step-button.svelte}

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
 	import { getStepperCtx } from './context.svelte.js';
 
 	interface Props extends Omit<HTMLAttributes<HTMLLIElement>, 'onclick'> {
@@ -44,14 +45,9 @@
 	{...rest}
 >
 	{#if clickable}
-		<button
-			type="button"
-			data-part="indicator-button"
-			onclick={handleClick}
-			aria-label="Go to step {step + 1}"
-		>
+		<Button variant="bare" type="button" aria-label="Go to step {step + 1}" onclick={handleClick}>
 			{@render children()}
-		</button>
+		</Button>
 	{:else}
 		{@render children()}
 	{/if}
@@ -114,25 +110,4 @@
 	[data-orientation='vertical'] {
 		padding: var(--dry-space-1) 0;
 	}
-
-	[data-part='step'] [data-part='indicator-button'] {
-		all: unset;
-		display: inline-grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
-		align-items: center;
-		gap: var(--dry-stepper-gap, var(--dry-space-2));
-		cursor: pointer;
-		border-radius: var(--dry-radius-sm, 0.25rem);
-	}
-
-	[data-part='step'] [data-part='indicator-button']:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 2px;
-	}
-
-	[data-part='step'] [data-part='indicator-button']:disabled {
-		cursor: not-allowed;
-		color: var(--dry-color-text-disabled);
-	}
 </style>

package/dist/stepper/stepper-step-button.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLLIElement>, 'onclick'> {
+    step: number;
+    clickable?: boolean;
+    error?: boolean;
+    onclick?: (index: number) => void;
+    children: Snippet;
+}
+declare const StepperStepButton: import("svelte").Component<Props, {}, "">;
+type StepperStepButton = ReturnType<typeof StepperStepButton>;
+export default StepperStepButton;

package/dist/svg/svg.svelte.d.ts

@@ -1,11 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { SVGAttributes } from 'svelte/elements';
 interface Props extends SVGAttributes<SVGSVGElement> {
-	children?: Snippet;
-	viewBox?: string;
-	'aria-label'?: string;
-	class?: string;
+    children?: Snippet;
+    viewBox?: string;
+    'aria-label'?: string;
 }
-declare const Svg: import('svelte').Component<Props, {}, ''>;
+declare const Svg: import("svelte").Component<Props, {}, "">;
 type Svg = ReturnType<typeof Svg>;
 export default Svg;

package/dist/table/table-body.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLTableSectionElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const TableBody: import('svelte').Component<Props, {}, ''>;
+declare const TableBody: import("svelte").Component<Props, {}, "">;
 type TableBody = ReturnType<typeof TableBody>;
 export default TableBody;

package/dist/table/table-caption.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const TableCaption: import('svelte').Component<Props, {}, ''>;
+declare const TableCaption: import("svelte").Component<Props, {}, "">;
 type TableCaption = ReturnType<typeof TableCaption>;
 export default TableCaption;

package/dist/table/table-cell.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLTableCellElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const TableCell: import('svelte').Component<Props, {}, ''>;
+declare const TableCell: import("svelte").Component<Props, {}, "">;
 type TableCell = ReturnType<typeof TableCell>;
 export default TableCell;

package/dist/table/table-footer.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLTableSectionElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const TableFooter: import('svelte').Component<Props, {}, ''>;
+declare const TableFooter: import("svelte").Component<Props, {}, "">;
 type TableFooter = ReturnType<typeof TableFooter>;
 export default TableFooter;

package/dist/table/table-head.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLTableCellElement> {
-	scope?: 'col' | 'row';
-	children: Snippet;
+    scope?: 'col' | 'row';
+    children: Snippet;
 }
-declare const TableHead: import('svelte').Component<Props, {}, ''>;
+declare const TableHead: import("svelte").Component<Props, {}, "">;
 type TableHead = ReturnType<typeof TableHead>;
 export default TableHead;

package/dist/table/table-header.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLTableSectionElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const TableHeader: import('svelte').Component<Props, {}, ''>;
+declare const TableHeader: import("svelte").Component<Props, {}, "">;
 type TableHeader = ReturnType<typeof TableHeader>;
 export default TableHeader;

package/dist/table/table-root.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLTableElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const TableRoot: import('svelte').Component<Props, {}, ''>;
+declare const TableRoot: import("svelte").Component<Props, {}, "">;
 type TableRoot = ReturnType<typeof TableRoot>;
 export default TableRoot;

package/dist/table/table-row.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLTableRowElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const TableRow: import('svelte').Component<Props, {}, ''>;
+declare const TableRow: import("svelte").Component<Props, {}, "">;
 type TableRow = ReturnType<typeof TableRow>;
 export default TableRow;

package/dist/table-of-contents/table-of-contents-item.svelte

@@ -38,11 +38,14 @@
 		display: block;
 		padding: var(--dry-toc-item-padding-y, var(--dry-space-1_5))
 			var(--dry-toc-item-padding-x, var(--dry-space-2));
+		border-inline-start: 2px solid transparent;
 		border-radius: var(--dry-radius-md);
+		box-sizing: border-box;
 		color: inherit;
 		text-decoration: none;
 		transition:
 			background var(--dry-duration-fast) var(--dry-ease-default),
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
 			color var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
@@ -56,8 +59,10 @@
 
 	[data-part='item'][data-active] > a {
 		background: var(--dry-color-fill-brand-weak);
+		border-end-start-radius: 0;
+		border-inline-start-color: var(--dry-color-stroke-selected);
+		border-start-start-radius: 0;
 		color: var(--dry-toc-active-color, var(--dry-color-text-brand));
-		box-shadow: inset 2px 0 0 var(--dry-color-stroke-selected);
 		font-weight: 600;
 	}
 

package/dist/table-of-contents/table-of-contents-item.svelte.d.ts

@@ -1,14 +1,13 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type TocHeading } from '@dryui/primitives';
-type ItemSnippetProps = {
-	heading: TocHeading;
-	active: boolean;
-};
+import { type TocHeading } from './context.svelte.js';
 interface Props extends Omit<HTMLAttributes<HTMLLIElement>, 'children'> {
-	heading: TocHeading;
-	children?: Snippet<[ItemSnippetProps]>;
+    heading: TocHeading;
+    children?: Snippet<[{
+        heading: TocHeading;
+        active: boolean;
+    }]>;
 }
-declare const TableOfContentsItem: import('svelte').Component<Props, {}, ''>;
+declare const TableOfContentsItem: import("svelte").Component<Props, {}, "">;
 type TableOfContentsItem = ReturnType<typeof TableOfContentsItem>;
 export default TableOfContentsItem;

package/dist/table-of-contents/table-of-contents-list.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <ol data-part="list" class={className} {...rest}>
-	{#each ctx.headings as heading}
+	{#each ctx.headings as heading (heading.id)}
 		<li
 			data-part="item"
 			data-level={heading.level}
@@ -39,11 +39,14 @@
 		display: block;
 		padding: var(--dry-toc-item-padding-y, var(--dry-space-1_5))
 			var(--dry-toc-item-padding-x, var(--dry-space-2));
+		border-inline-start: 2px solid transparent;
 		border-radius: var(--dry-radius-md);
+		box-sizing: border-box;
 		color: inherit;
 		text-decoration: none;
 		transition:
 			background var(--dry-duration-fast) var(--dry-ease-default),
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
 			color var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
@@ -57,8 +60,10 @@
 
 	[data-part='item'][data-active] > a {
 		background: var(--dry-color-fill-brand-weak);
+		border-end-start-radius: 0;
+		border-inline-start-color: var(--dry-color-stroke-selected);
+		border-start-start-radius: 0;
 		color: var(--dry-toc-active-color, var(--dry-color-text-brand));
-		box-shadow: inset 2px 0 0 var(--dry-color-stroke-selected);
 		font-weight: 600;
 	}
 

package/dist/table-of-contents/table-of-contents-list.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLOListElement> {}
-declare const TableOfContentsList: import('svelte').Component<Props, {}, ''>;
+interface Props extends HTMLAttributes<HTMLOListElement> {
+}
+declare const TableOfContentsList: import("svelte").Component<Props, {}, "">;
 type TableOfContentsList = ReturnType<typeof TableOfContentsList>;
 export default TableOfContentsList;

package/dist/table-of-contents/table-of-contents-root.svelte.d.ts

@@ -1,12 +1,12 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLElement> {
-	selector?: string;
-	headingSelector?: string;
-	rootMargin?: string;
-	autoId?: boolean;
-	children: Snippet;
+    selector?: string;
+    headingSelector?: string;
+    rootMargin?: string;
+    autoId?: boolean;
+    children: Snippet;
 }
-declare const TableOfContentsRoot: import('svelte').Component<Props, {}, ''>;
+declare const TableOfContentsRoot: import("svelte").Component<Props, {}, "">;
 type TableOfContentsRoot = ReturnType<typeof TableOfContentsRoot>;
 export default TableOfContentsRoot;

package/dist/tabs/index.d.ts

@@ -22,7 +22,7 @@ export interface TabsContentProps extends HTMLAttributes<HTMLDivElement> {
 }
 import TabsRoot from './tabs-root.svelte';
 import TabsList from './tabs-list.svelte';
-import TabsTrigger from './tabs-trigger.svelte';
+import TabsTrigger from './tabs-trigger-button.svelte';
 import TabsContent from './tabs-content.svelte';
 export declare const Tabs: {
     Root: typeof TabsRoot;

package/dist/tabs/index.js

@@ -1,6 +1,6 @@
 import TabsRoot from './tabs-root.svelte';
 import TabsList from './tabs-list.svelte';
-import TabsTrigger from './tabs-trigger.svelte';
+import TabsTrigger from './tabs-trigger-button.svelte';
 import TabsContent from './tabs-content.svelte';
 export const Tabs = {
     Root: TabsRoot,

package/dist/tabs/tabs-content.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	value: string;
-	children: Snippet;
+    value: string;
+    children: Snippet;
 }
-declare const TabsContent: import('svelte').Component<Props, {}, ''>;
+declare const TabsContent: import("svelte").Component<Props, {}, "">;
 type TabsContent = ReturnType<typeof TabsContent>;
 export default TabsContent;

package/dist/tabs/tabs-list.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const TabsList: import('svelte').Component<Props, {}, ''>;
+declare const TabsList: import("svelte").Component<Props, {}, "">;
 type TabsList = ReturnType<typeof TabsList>;
 export default TabsList;

package/dist/tabs/tabs-root.svelte.d.ts

@@ -1,11 +1,11 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	value?: string;
-	orientation?: 'horizontal' | 'vertical';
-	activationMode?: 'automatic' | 'manual';
-	children: Snippet;
+    value?: string;
+    orientation?: 'horizontal' | 'vertical';
+    activationMode?: 'automatic' | 'manual';
+    children: Snippet;
 }
-declare const TabsRoot: import('svelte').Component<Props, {}, 'value'>;
+declare const TabsRoot: import("svelte").Component<Props, {}, "value">;
 type TabsRoot = ReturnType<typeof TabsRoot>;
 export default TabsRoot;

package/dist/tabs/tabs-trigger-button.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { getTabsCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		value: string;
+		disabled?: boolean;
+		size?: 'sm' | 'md' | 'lg';
+		children: Snippet;
+	}
+
+	let { value, disabled = false, size = 'md', children, ...rest }: Props = $props();
+
+	const ctx = getTabsCtx();
+
+	const isSelected = $derived(ctx.value === value);
+</script>
+
+<Button
+	variant="tab"
+	type="button"
+	{size}
+	role="tab"
+	aria-selected={isSelected}
+	aria-controls="{ctx.id}-panel-{value}"
+	id="{ctx.id}-tab-{value}"
+	tabindex={isSelected ? 0 : -1}
+	data-state={isSelected ? 'active' : 'inactive'}
+	{disabled}
+	{...rest}
+	onclick={() => {
+		if (!disabled) ctx.select(value);
+	}}
+	onfocus={() => {
+		if (ctx.activationMode === 'automatic' && !disabled) ctx.select(value);
+	}}
+>
+	{@render children()}
+</Button>

package/dist/tabs/tabs-trigger-button.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
+    value: string;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    children: Snippet;
+}
+declare const TabsTriggerButton: import("svelte").Component<Props, {}, "">;
+type TabsTriggerButton = ReturnType<typeof TabsTriggerButton>;
+export default TabsTriggerButton;

package/dist/tag/index.d.ts

@@ -6,4 +6,4 @@ export interface TagProps extends PrimitiveTagProps {
     color?: TagColor;
     size?: 'sm' | 'md';
 }
-export { default as Tag } from './tag.svelte';
+export { default as Tag } from './tag-button.svelte';

package/dist/tag/index.js

@@ -1 +1 @@
-export { default as Tag } from './tag.svelte';
+export { default as Tag } from './tag-button.svelte';

package/dist/tag/{tag.svelte → tag-button.svelte}

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
 	import { resolveAlias } from '../internal/color-aliases.js';
 	import type { TagColor } from './index.js';
 
@@ -37,7 +38,7 @@
 	>
 		{@render children()}
 		{#if dismissible}
-			<button type="button" aria-label="Dismiss" onclick={onDismiss}>
+			<Button variant="bare" type="button" aria-label="Dismiss" onclick={onDismiss}>
 				<svg
 					width="14"
 					height="14"
@@ -54,7 +55,7 @@
 						stroke-linejoin="round"
 					/>
 				</svg>
-			</button>
+			</Button>
 		{/if}
 	</span>
 </span>
@@ -62,6 +63,7 @@
 <style>
 	[data-wrapper] {
 		display: inline-grid;
+		justify-self: start;
 	}
 
 	[data-tag] {
@@ -72,10 +74,10 @@
 		gap: var(--dry-space-1);
 		padding: var(--dry-tag-padding-y, var(--dry-space-1))
 			var(--dry-tag-padding-x, var(--dry-space-2_5));
-		font-size: var(--dry-tag-font-size, var(--dry-type-tiny-size, var(--dry-text-xs-size)));
+		font-size: var(--dry-tag-font-size, var(--dry-type-tiny-size));
 		font-family: var(--dry-font-sans);
 		font-weight: 500;
-		line-height: var(--dry-type-tiny-leading, var(--dry-text-xs-leading));
+		line-height: var(--dry-type-tiny-leading);
 		color: var(--dry-tag-color, var(--dry-color-text-weak));
 		background: var(--dry-tag-bg, var(--dry-color-fill));
 		border: 1px solid var(--dry-tag-border, transparent);
@@ -85,56 +87,21 @@
 		transition: background var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
-	[data-tag] button {
-		display: inline-grid;
-		place-items: center;
-		box-sizing: border-box;
-		height: var(--dry-tag-dismiss-size, var(--dry-space-12));
-		aspect-ratio: 1;
-		padding: 0;
-		border: none;
-		background: transparent;
-		color: inherit;
-		cursor: pointer;
-		border-radius: var(--dry-radius-sm);
-		opacity: 0.7;
-		transition:
-			opacity var(--dry-duration-fast) var(--dry-ease-default),
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			transform var(--dry-duration-fast) var(--dry-ease-default);
-		margin-right: calc(-1 * var(--dry-space-1));
-	}
-
-	[data-tag] button:hover {
-		opacity: 1;
-		background: color-mix(in srgb, currentColor 12%, transparent);
-	}
-
-	[data-tag] button:active {
-		transform: scale(0.94);
-	}
-
-	[data-tag] button:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: -1px;
-		opacity: 1;
-	}
-
 	/* ── Sizes ────────────────────────────────────────────────────────────────── */
 
 	[data-size='sm'] {
-		--dry-tag-font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+		--dry-tag-font-size: var(--dry-type-tiny-size);
 		--dry-tag-padding-x: var(--dry-space-2_5);
 		--dry-tag-padding-y: var(--dry-space-1);
 		min-height: var(--dry-space-6);
 	}
 
 	[data-size='md'] {
-		--dry-tag-font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		--dry-tag-font-size: var(--dry-type-small-size);
 		--dry-tag-padding-x: var(--dry-space-3);
 		--dry-tag-padding-y: var(--dry-space-1_5);
 		min-height: var(--dry-space-8);
-		line-height: var(--dry-type-tiny-leading, var(--dry-text-xs-leading));
+		line-height: var(--dry-type-tiny-leading);
 	}
 
 	/* ── Variant: solid ───────────────────────────────────────────────────────── */

package/dist/tag/tag-button.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { TagColor } from './index.js';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    variant?: 'solid' | 'outline' | 'soft';
+    color?: TagColor;
+    size?: 'sm' | 'md';
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    children: Snippet;
+}
+declare const TagButton: import("svelte").Component<Props, {}, "">;
+type TagButton = ReturnType<typeof TagButton>;
+export default TagButton;

package/dist/tags-input/index.d.ts

@@ -6,7 +6,7 @@ export interface TagsInputRootProps extends PrimitiveTagsInputRootProps {
 import Root from './tags-input-root.svelte';
 import Input from './tags-input-input.svelte';
 import TagItem from './tags-input-tag.svelte';
-import TagDelete from './tags-input-tag-delete.svelte';
+import TagDelete from './tags-input-tag-delete-button.svelte';
 import List from './tags-input-list.svelte';
 export declare const TagsInput: {
     Root: typeof Root;

package/dist/tags-input/index.js

@@ -1,7 +1,7 @@
 import Root from './tags-input-root.svelte';
 import Input from './tags-input-input.svelte';
 import TagItem from './tags-input-tag.svelte';
-import TagDelete from './tags-input-tag-delete.svelte';
+import TagDelete from './tags-input-tag-delete-button.svelte';
 import List from './tags-input-list.svelte';
 export const TagsInput = {
     Root,

package/dist/tags-input/tags-input-input.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 interface Props extends HTMLInputAttributes {
-	placeholder?: string;
+    placeholder?: string;
 }
-declare const TagsInputInput: import('svelte').Component<Props, {}, ''>;
+declare const TagsInputInput: import("svelte").Component<Props, {}, "">;
 type TagsInputInput = ReturnType<typeof TagsInputInput>;
 export default TagsInputInput;

package/dist/tags-input/tags-input-list.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const TagsInputList: import('svelte').Component<Props, {}, ''>;
+declare const TagsInputList: import("svelte").Component<Props, {}, "">;
 type TagsInputList = ReturnType<typeof TagsInputList>;
 export default TagsInputList;

package/dist/tags-input/tags-input-root.svelte.d.ts

@@ -1,14 +1,14 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	value?: string[];
-	maxTags?: number;
-	allowDuplicates?: boolean;
-	disabled?: boolean;
-	size?: 'sm' | 'md' | 'lg';
-	onValueChange?: (value: string[]) => void;
-	children: Snippet;
+    value?: string[];
+    maxTags?: number;
+    allowDuplicates?: boolean;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    onValueChange?: (value: string[]) => void;
+    children: Snippet;
 }
-declare const TagsInputRoot: import('svelte').Component<Props, {}, 'value'>;
+declare const TagsInputRoot: import("svelte").Component<Props, {}, "value">;
 type TagsInputRoot = ReturnType<typeof TagsInputRoot>;
 export default TagsInputRoot;