ui-ingredients 0.0.8 → 0.0.9

package/dist/tags-input/clear-trigger.svelte

@@ -1,21 +1,21 @@
-<script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
-
-  export interface TagsInputClearTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useTagsInputContext} from './context.svelte.js';
-
-  let {children, ...props}: TagsInputClearTriggerProps = $props();
-
-  let context = useTagsInputContext();
-
-  let attrs = $derived(mergeProps(props, context.getClearTriggerProps()));
-</script>
-
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+<script lang="ts" context="module">
+  import type {SvelteHtmlProps} from '../types.js';
+
+  export interface TagsInputClearTriggerProps
+    extends SvelteHtmlProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useTagsInputContext} from './context.svelte.js';
+
+  let {children, ...props}: TagsInputClearTriggerProps = $props();
+
+  let context = useTagsInputContext();
+
+  let attrs = $derived(mergeProps(props, context.getClearTriggerProps()));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface TagsInputClearTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface TagsInputClearTriggerProps extends SvelteHtmlProps<'button'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/tags-input/control.svelte

@@ -1,21 +1,20 @@
-<script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
-
-  export interface TagsInputControlProps extends Assign<SvelteHTMLElements['div'], {}> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useTagsInputContext} from './context.svelte.js';
-
-  let {children, ...props}: TagsInputControlProps = $props();
-
-  let context = useTagsInputContext();
-
-  let attrs = $derived(mergeProps(props, context.getControlProps()));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {SvelteHtmlProps} from '../types.js';
+
+  export interface TagsInputControlProps extends SvelteHtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useTagsInputContext} from './context.svelte.js';
+
+  let {children, ...props}: TagsInputControlProps = $props();
+
+  let context = useTagsInputContext();
+
+  let attrs = $derived(mergeProps(props, context.getControlProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface TagsInputControlProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface TagsInputControlProps extends SvelteHtmlProps<'div'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/tags-input/hidden-input.svelte

@@ -1,19 +1,18 @@
-<script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
-
-  export interface TagsInputHiddenInputProps extends Assign<SvelteHTMLElements['input'], {}> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useTagsInputContext} from './context.svelte.js';
-
-  let {...props}: TagsInputHiddenInputProps = $props();
-
-  let context = useTagsInputContext();
-
-  let attrs = $derived(mergeProps(props, context.getHiddenInputProps()));
-</script>
-
-<input {...attrs} />
+<script lang="ts" context="module">
+  import type {SvelteHtmlProps} from '../types.js';
+
+  export interface TagsInputHiddenInputProps extends SvelteHtmlProps<'input'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useTagsInputContext} from './context.svelte.js';
+
+  let {...props}: TagsInputHiddenInputProps = $props();
+
+  let context = useTagsInputContext();
+
+  let attrs = $derived(mergeProps(props, context.getHiddenInputProps()));
+</script>
+
+<input {...attrs} />

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface TagsInputHiddenInputProps extends Assign<SvelteHTMLElements['input'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface TagsInputHiddenInputProps extends SvelteHtmlProps<'input'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

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

@@ -1,11 +1,11 @@
-export { default as ClearTrigger, type TagsInputClearTriggerProps } from './clear-trigger.svelte';
+export { default as ClearTrigger, type TagsInputClearTriggerProps, } from './clear-trigger.svelte';
 export { default as Control, type TagsInputControlProps } from './control.svelte';
-export { default as HiddenInput, type TagsInputHiddenInputProps } from './hidden-input.svelte';
+export { default as HiddenInput, type TagsInputHiddenInputProps, } from './hidden-input.svelte';
 export { default as Input, type TagsInputInputProps } from './input.svelte';
 export { default as ItemDeleteTrigger, type TagsInputItemDeleteTriggerProps, } from './item-delete-trigger.svelte';
-export { default as ItemInput, type TagsInputItemInputProps } from './item-input.svelte';
-export { default as ItemPreview, type TagsInputItemPreviewProps } from './item-preview.svelte';
-export { default as ItemText, type TagsInputItemTextProps } from './item-text.svelte';
+export { default as ItemInput, type TagsInputItemInputProps, } from './item-input.svelte';
+export { default as ItemPreview, type TagsInputItemPreviewProps, } from './item-preview.svelte';
+export { default as ItemText, type TagsInputItemTextProps, } from './item-text.svelte';
 export { default as Item, type TagsInputItemProps } from './item.svelte';
 export { default as Label, type TagsInputLabelProps } from './label.svelte';
 export { default as Root, type TagsInputProps } from './root.svelte';

package/dist/tags-input/index.js

@@ -1,11 +1,11 @@
-export { default as ClearTrigger } from './clear-trigger.svelte';
+export { default as ClearTrigger, } from './clear-trigger.svelte';
 export { default as Control } from './control.svelte';
-export { default as HiddenInput } from './hidden-input.svelte';
+export { default as HiddenInput, } from './hidden-input.svelte';
 export { default as Input } from './input.svelte';
 export { default as ItemDeleteTrigger, } from './item-delete-trigger.svelte';
-export { default as ItemInput } from './item-input.svelte';
-export { default as ItemPreview } from './item-preview.svelte';
-export { default as ItemText } from './item-text.svelte';
+export { default as ItemInput, } from './item-input.svelte';
+export { default as ItemPreview, } from './item-preview.svelte';
+export { default as ItemText, } from './item-text.svelte';
 export { default as Item } from './item.svelte';
 export { default as Label } from './label.svelte';
 export { default as Root } from './root.svelte';

package/dist/tags-input/input.svelte

@@ -1,19 +1,18 @@
-<script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
-
-  export interface TagsInputInputProps extends Assign<SvelteHTMLElements['input'], {}> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useTagsInputContext} from './context.svelte.js';
-
-  let {...props}: TagsInputInputProps = $props();
-
-  let context = useTagsInputContext();
-
-  let attrs = $derived(mergeProps(props, context.getInputProps()));
-</script>
-
-<input {...attrs} />
+<script lang="ts" context="module">
+  import type {SvelteHtmlProps} from '../types.js';
+
+  export interface TagsInputInputProps extends SvelteHtmlProps<'input'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useTagsInputContext} from './context.svelte.js';
+
+  let {...props}: TagsInputInputProps = $props();
+
+  let context = useTagsInputContext();
+
+  let attrs = $derived(mergeProps(props, context.getInputProps()));
+</script>
+
+<input {...attrs} />

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface TagsInputInputProps extends Assign<SvelteHTMLElements['input'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface TagsInputInputProps extends SvelteHtmlProps<'input'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/tags-input/item-delete-trigger.svelte

@@ -1,23 +1,27 @@
-<script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
-
-  export interface TagsInputItemDeleteTriggerProps
-    extends Assign<SvelteHTMLElements['button'], {}> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useTagsInputContext, useTagsInputItemContext} from './context.svelte.js';
-
-  let {children, ...props}: TagsInputItemDeleteTriggerProps = $props();
-
-  let context = useTagsInputContext();
-  let itemContext = useTagsInputItemContext();
-
-  let attrs = $derived(mergeProps(props, context.getItemDeleteTriggerProps(itemContext)));
-</script>
-
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+<script lang="ts" context="module">
+  import type {SvelteHtmlProps} from '../types.js';
+
+  export interface TagsInputItemDeleteTriggerProps
+    extends SvelteHtmlProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {
+    useTagsInputContext,
+    useTagsInputItemContext,
+  } from './context.svelte.js';
+
+  let {children, ...props}: TagsInputItemDeleteTriggerProps = $props();
+
+  let context = useTagsInputContext();
+  let itemContext = useTagsInputItemContext();
+
+  let attrs = $derived(
+    mergeProps(props, context.getItemDeleteTriggerProps(itemContext)),
+  );
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/dist/tags-input/item-delete-trigger.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface TagsInputItemDeleteTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface TagsInputItemDeleteTriggerProps extends SvelteHtmlProps<'button'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/tags-input/item-input.svelte

@@ -1,20 +1,24 @@
-<script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
-
-  export interface TagsInputItemInputProps extends Assign<SvelteHTMLElements['input'], {}> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useTagsInputContext, useTagsInputItemContext} from './context.svelte.js';
-
-  let {...props}: TagsInputItemInputProps = $props();
-
-  let context = useTagsInputContext();
-  let itemContext = useTagsInputItemContext();
-
-  let attrs = $derived(mergeProps(props, context.getItemInputProps(itemContext)));
-</script>
-
-<input {...attrs} />
+<script lang="ts" context="module">
+  import type {SvelteHtmlProps} from '../types.js';
+
+  export interface TagsInputItemInputProps extends SvelteHtmlProps<'input'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {
+    useTagsInputContext,
+    useTagsInputItemContext,
+  } from './context.svelte.js';
+
+  let {...props}: TagsInputItemInputProps = $props();
+
+  let context = useTagsInputContext();
+  let itemContext = useTagsInputItemContext();
+
+  let attrs = $derived(
+    mergeProps(props, context.getItemInputProps(itemContext)),
+  );
+</script>
+
+<input {...attrs} />

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface TagsInputItemInputProps extends Assign<SvelteHTMLElements['input'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface TagsInputItemInputProps extends SvelteHtmlProps<'input'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/tags-input/item-preview.svelte

@@ -1,22 +1,26 @@
-<script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
-
-  export interface TagsInputItemPreviewProps extends Assign<SvelteHTMLElements['div'], {}> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useTagsInputContext, useTagsInputItemContext} from './context.svelte.js';
-
-  let {children, ...props}: TagsInputItemPreviewProps = $props();
-
-  let context = useTagsInputContext();
-  let itemContext = useTagsInputItemContext();
-
-  let attrs = $derived(mergeProps(props, context.getItemPreviewProps(itemContext)));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {SvelteHtmlProps} from '../types.js';
+
+  export interface TagsInputItemPreviewProps extends SvelteHtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {
+    useTagsInputContext,
+    useTagsInputItemContext,
+  } from './context.svelte.js';
+
+  let {children, ...props}: TagsInputItemPreviewProps = $props();
+
+  let context = useTagsInputContext();
+  let itemContext = useTagsInputItemContext();
+
+  let attrs = $derived(
+    mergeProps(props, context.getItemPreviewProps(itemContext)),
+  );
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface TagsInputItemPreviewProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface TagsInputItemPreviewProps extends SvelteHtmlProps<'div'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/tags-input/item-text.svelte

@@ -1,22 +1,26 @@
-<script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
-
-  export interface TagsInputItemTextProps extends Assign<SvelteHTMLElements['span'], {}> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useTagsInputContext, useTagsInputItemContext} from './context.svelte.js';
-
-  let {children, ...props}: TagsInputItemTextProps = $props();
-
-  let context = useTagsInputContext();
-  let itemContext = useTagsInputItemContext();
-
-  let attrs = $derived(mergeProps(props, context.getItemTextProps(itemContext)));
-</script>
-
-<span {...attrs}>
-  {@render children?.()}
-</span>
+<script lang="ts" context="module">
+  import type {SvelteHtmlProps} from '../types.js';
+
+  export interface TagsInputItemTextProps extends SvelteHtmlProps<'span'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {
+    useTagsInputContext,
+    useTagsInputItemContext,
+  } from './context.svelte.js';
+
+  let {children, ...props}: TagsInputItemTextProps = $props();
+
+  let context = useTagsInputContext();
+  let itemContext = useTagsInputItemContext();
+
+  let attrs = $derived(
+    mergeProps(props, context.getItemTextProps(itemContext)),
+  );
+</script>
+
+<span {...attrs}>
+  {@render children?.()}
+</span>

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface TagsInputItemTextProps extends Assign<SvelteHTMLElements['span'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface TagsInputItemTextProps extends SvelteHtmlProps<'span'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/tags-input/item.svelte

@@ -1,37 +1,52 @@
-<script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {ItemProps} from '@zag-js/tags-input';
-  import type {SvelteHTMLElements} from 'svelte/elements';
-
-  export interface TagsInputItemProps extends Assign<SvelteHTMLElements['div'], ItemProps> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {setTagsInputItemContext, useTagsInputContext} from './context.svelte.js';
-
-  let {index, value, disabled, children, ...props}: TagsInputItemProps = $props();
-
-  let context = useTagsInputContext();
-
-  let attrs = $derived(
-    mergeProps(
-      props,
-      context.getItemProps({
-        index,
-        value,
-        disabled,
-      }),
-    ),
-  );
-
-  setTagsInputItemContext({
-    index,
-    value,
-    disabled,
-  });
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign, SvelteHtmlProps} from '../types.js';
+  import type {ItemProps, ItemState} from '@zag-js/tags-input';
+  import type {Snippet} from 'svelte';
+
+  export interface TagsInputItemProps
+    extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, ItemProps> {
+    children?: Snippet<[state: ItemState]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {
+    setTagsInputItemContext,
+    useTagsInputContext,
+  } from './context.svelte.js';
+
+  let {index, value, disabled, children, ...props}: TagsInputItemProps =
+    $props();
+
+  let context = useTagsInputContext();
+
+  let state = $derived(
+    context.getItemState({
+      index,
+      value,
+      disabled,
+    }),
+  );
+
+  let attrs = $derived(
+    mergeProps(
+      props,
+      context.getItemProps({
+        index,
+        value,
+        disabled,
+      }),
+    ),
+  );
+
+  setTagsInputItemContext({
+    index,
+    value,
+    disabled,
+  });
+</script>
+
+<div {...attrs}>
+  {@render children?.(state)}
+</div>

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

@@ -1,7 +1,8 @@
-import type { Assign } from '../types.js';
-import type { ItemProps } from '@zag-js/tags-input';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface TagsInputItemProps extends Assign<SvelteHTMLElements['div'], ItemProps> {
+import type { Assign, SvelteHtmlProps } from '../types.js';
+import type { ItemProps, ItemState } from '@zag-js/tags-input';
+import type { Snippet } from 'svelte';
+export interface TagsInputItemProps extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, ItemProps> {
+    children?: Snippet<[state: ItemState]>;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/tags-input/label.svelte

@@ -1,21 +1,20 @@
-<script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
-
-  export interface TagsInputLabelProps extends Assign<SvelteHTMLElements['label'], {}> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useTagsInputContext} from './context.svelte.js';
-
-  let {children, ...props}: TagsInputLabelProps = $props();
-
-  let context = useTagsInputContext();
-
-  let attrs = $derived(mergeProps(props, context.getLabelProps()));
-</script>
-
-<label {...attrs}>
-  {@render children?.()}
-</label>
+<script lang="ts" context="module">
+  import type {SvelteHtmlProps} from '../types.js';
+
+  export interface TagsInputLabelProps extends SvelteHtmlProps<'label'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useTagsInputContext} from './context.svelte.js';
+
+  let {children, ...props}: TagsInputLabelProps = $props();
+
+  let context = useTagsInputContext();
+
+  let attrs = $derived(mergeProps(props, context.getLabelProps()));
+</script>
+
+<label {...attrs}>
+  {@render children?.()}
+</label>