ui-ingredients 0.0.7 → 0.0.8

package/README.md

@@ -45,7 +45,7 @@ npm install ui-ingredients
 - 🟢 Combobox
 - 🟡 DatePicker
 - 🟢 Dialog
-- ⚪ Editable
+- 🟡 Editable
 - ⚪ FileUpload
 - 🟢 HoverCard
 - 🟡 Menu
@@ -56,7 +56,7 @@ npm install ui-ingredients
 - 🟢 Portal
 - 🟢 Presence
 - 🟢 Progress
-- ⚪ QRCode
+- 🟢 QRCode
 - 🟢 RadioGroup
 - ⚪ RatingGroup
 - 🟢 Select
@@ -66,8 +66,8 @@ npm install ui-ingredients
 - 🟢 Steps
 - 🟢 Switch
 - 🟢 Tabs
-- 🟡 TagsInput
-- ⚪ Timer
+- 🟢 TagsInput
+- 🟢 Timer
 - 🟢 Toast
 - 🟢 ToggleGroup
 - 🟢 Tooltip

package/dist/index.d.ts

@@ -26,6 +26,8 @@ export * as Popover from './popover/index.js';
 export type { PopoverArrowProps, PopoverArrowTipProps, PopoverCloseTriggerProps, PopoverContentProps, PopoverDescriptionProps, PopoverPositionerProps, PopoverProps, PopoverTitleProps, PopoverTriggerProps, } from './popover/index.js';
 export * as Progress from './progress/index.js';
 export type { ProgressCircleProps, ProgressCircleRangeProps, ProgressCircleTrackProps, ProgressLabelProps, ProgressProps, ProgressRangeProps, ProgressTrackProps, ProgressValueTextProps, } from './progress/index.js';
+export * as QRCode from './qr-code/index.js';
+export type { QRCodeFrameProps, QRCodeOverlayProps, QRCodePatternProps, QRCodeProps, } from './qr-code/index.js';
 export * as RadioGroup from './radio-group/index.js';
 export type { RadioGroupIndicatorProps, RadioGroupItemControlProps, RadioGroupItemHiddenInputProps, RadioGroupItemProps, RadioGroupItemTextProps, RadioGroupLabelProps, RadioGroupProps, } from './radio-group/index.js';
 export * as Select from './select/index.js';
@@ -38,6 +40,10 @@ export * as Switch from './switch/index.js';
 export type { SwitchControlProps, SwitchHiddenInputProps, SwitchLabelProps, SwitchProps, SwitchThumbProps, } from './switch/index.js';
 export * as Tabs from './tabs/index.js';
 export type { TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps, } from './tabs/index.js';
+export * as TagsInput from './tags-input/index.js';
+export type { TagsInputClearTriggerProps, TagsInputControlProps, TagsInputHiddenInputProps, TagsInputInputProps, TagsInputItemDeleteTriggerProps, TagsInputItemInputProps, TagsInputItemPreviewProps, TagsInputItemProps, TagsInputItemTextProps, TagsInputLabelProps, TagsInputProps, } from './tags-input/index.js';
+export * as Timer from './timer/index.js';
+export type { TimerActionTriggerProps, TimerItemLabelProps, TimerItemProps, TimerItemValueProps, TimerProps, TimerSeparatorProps, } from './timer/index.js';
 export * as ToggleGroup from './toggle-group/index.js';
 export type { ToggleGroupItemProps, ToggleGroupProps, } from './toggle-group/index.js';
 export * as Tooltip from './tooltip/index.js';
@@ -51,10 +57,12 @@ export { anatomy as carouselAnatomy } from '@zag-js/carousel';
 export { anatomy as checkboxAnatomy } from '@zag-js/checkbox';
 export { anatomy as clipboardAnatomy } from '@zag-js/clipboard';
 export { anatomy as collapsibleAnatomy } from '@zag-js/collapsible';
+export { anatomy as colorPickerAnatomy } from '@zag-js/color-picker';
 export { anatomy as comboboxAnatomy } from '@zag-js/combobox';
 export { anatomy as datePickerAnatomy } from '@zag-js/date-picker';
 export { anatomy as dialogAnatomy } from '@zag-js/dialog';
 export { anatomy as editableAnatomy } from '@zag-js/editable';
+export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';
 export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';
 export { anatomy as menuAnatomy } from '@zag-js/menu';
 export { anatomy as numberInputAnatomy } from '@zag-js/number-input';
@@ -62,14 +70,17 @@ export { anatomy as paginationAnatomy } from '@zag-js/pagination';
 export { anatomy as pinInputAnatomy } from '@zag-js/pin-input';
 export { anatomy as popoverAnatomy } from '@zag-js/popover';
 export { anatomy as progressAnatomy } from '@zag-js/progress';
+export { anatomy as qrCodeAnatomy } from '@zag-js/qr-code';
 export { anatomy as radioGroupAnatomy } from '@zag-js/radio-group';
 export { anatomy as ratingGroupAnatomy } from '@zag-js/rating-group';
 export { anatomy as selectAnatomy } from '@zag-js/select';
+export { anatomy as signaturePadAnatomy } from '@zag-js/signature-pad';
 export { anatomy as sliderAnatomy } from '@zag-js/slider';
 export { anatomy as stepsAnatomy } from '@zag-js/steps';
 export { anatomy as switchAnatomy } from '@zag-js/switch';
 export { anatomy as tabsAnatomy } from '@zag-js/tabs';
 export { anatomy as tagsInputAnatomy } from '@zag-js/tags-input';
+export { anatomy as timerAnatomy } from '@zag-js/timer';
 export { anatomy as toastAnatomy } from '@zag-js/toast';
 export { anatomy as toggleGroupAnatomy } from '@zag-js/toggle-group';
 export { anatomy as tooltipAnatomy } from '@zag-js/tooltip';

package/dist/index.js

@@ -12,12 +12,15 @@ export * as Pagination from './pagination/index.js';
 export * as PinInput from './pin-input/index.js';
 export * as Popover from './popover/index.js';
 export * as Progress from './progress/index.js';
+export * as QRCode from './qr-code/index.js';
 export * as RadioGroup from './radio-group/index.js';
 export * as Select from './select/index.js';
 export * as Slider from './slider/index.js';
 export * as Steps from './steps/index.js';
 export * as Switch from './switch/index.js';
 export * as Tabs from './tabs/index.js';
+export * as TagsInput from './tags-input/index.js';
+export * as Timer from './timer/index.js';
 export * as ToggleGroup from './toggle-group/index.js';
 export * as Tooltip from './tooltip/index.js';
 export * from './portal/index.js';
@@ -29,10 +32,12 @@ export { anatomy as carouselAnatomy } from '@zag-js/carousel';
 export { anatomy as checkboxAnatomy } from '@zag-js/checkbox';
 export { anatomy as clipboardAnatomy } from '@zag-js/clipboard';
 export { anatomy as collapsibleAnatomy } from '@zag-js/collapsible';
+export { anatomy as colorPickerAnatomy } from '@zag-js/color-picker';
 export { anatomy as comboboxAnatomy } from '@zag-js/combobox';
 export { anatomy as datePickerAnatomy } from '@zag-js/date-picker';
 export { anatomy as dialogAnatomy } from '@zag-js/dialog';
 export { anatomy as editableAnatomy } from '@zag-js/editable';
+export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';
 export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';
 export { anatomy as menuAnatomy } from '@zag-js/menu';
 export { anatomy as numberInputAnatomy } from '@zag-js/number-input';
@@ -40,14 +45,17 @@ export { anatomy as paginationAnatomy } from '@zag-js/pagination';
 export { anatomy as pinInputAnatomy } from '@zag-js/pin-input';
 export { anatomy as popoverAnatomy } from '@zag-js/popover';
 export { anatomy as progressAnatomy } from '@zag-js/progress';
+export { anatomy as qrCodeAnatomy } from '@zag-js/qr-code';
 export { anatomy as radioGroupAnatomy } from '@zag-js/radio-group';
 export { anatomy as ratingGroupAnatomy } from '@zag-js/rating-group';
 export { anatomy as selectAnatomy } from '@zag-js/select';
+export { anatomy as signaturePadAnatomy } from '@zag-js/signature-pad';
 export { anatomy as sliderAnatomy } from '@zag-js/slider';
 export { anatomy as stepsAnatomy } from '@zag-js/steps';
 export { anatomy as switchAnatomy } from '@zag-js/switch';
 export { anatomy as tabsAnatomy } from '@zag-js/tabs';
 export { anatomy as tagsInputAnatomy } from '@zag-js/tags-input';
+export { anatomy as timerAnatomy } from '@zag-js/timer';
 export { anatomy as toastAnatomy } from '@zag-js/toast';
 export { anatomy as toggleGroupAnatomy } from '@zag-js/toggle-group';
 export { anatomy as tooltipAnatomy } from '@zag-js/tooltip';

package/dist/qr-code/context.svelte.d.ts

@@ -0,0 +1,8 @@
+import * as qrCode from '@zag-js/qr-code';
+export interface CreateQRCodeContextProps extends qrCode.Context {
+}
+export interface CreateQRCodeContextReturn extends ReturnType<typeof createQRCodeContext> {
+}
+export declare function createQRCodeContext(props: CreateQRCodeContextProps): any;
+export declare function setQRCodeContext(value: CreateQRCodeContextReturn): void;
+export declare function useQRCodeContext(): CreateQRCodeContextReturn;

package/dist/qr-code/context.svelte.js

@@ -0,0 +1,14 @@
+import * as qrCode from '@zag-js/qr-code';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { getContext, setContext } from 'svelte';
+export function createQRCodeContext(props) {
+    const [state, send] = useMachine(qrCode.machine(props));
+    const api = $derived(reflect(() => qrCode.connect(state, send, normalizeProps)));
+    return api;
+}
+export function setQRCodeContext(value) {
+    setContext('QRCode', value);
+}
+export function useQRCodeContext() {
+    return getContext('QRCode');
+}

package/dist/qr-code/frame.svelte

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

package/dist/qr-code/frame.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Assign } from '../types.js';
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface QRCodeFrameProps extends Assign<SvelteHTMLElements['svg'], {}> {
+}
+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> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Frame: $$__sveltets_2_IsomorphicComponent<QRCodeFrameProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Frame = InstanceType<typeof Frame>;
+export default Frame;

package/dist/qr-code/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Frame, type QRCodeFrameProps } from './frame.svelte';
+export { default as Overlay, type QRCodeOverlayProps } from './overlay.svelte';
+export { default as Pattern, type QRCodePatternProps } from './pattern.svelte';
+export { default as Root, type QRCodeProps } from './root.svelte';

package/dist/qr-code/index.js

@@ -0,0 +1,4 @@
+export { default as Frame } from './frame.svelte';
+export { default as Overlay } from './overlay.svelte';
+export { default as Pattern } from './pattern.svelte';
+export { default as Root } from './root.svelte';

package/dist/qr-code/overlay.svelte

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

package/dist/qr-code/overlay.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Assign } from '../types.js';
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface QRCodeOverlayProps extends Assign<SvelteHTMLElements['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> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Overlay: $$__sveltets_2_IsomorphicComponent<QRCodeOverlayProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Overlay = InstanceType<typeof Overlay>;
+export default Overlay;

package/dist/qr-code/pattern.svelte

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

package/dist/qr-code/pattern.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Assign } from '../types.js';
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface QRCodePatternProps extends Assign<SvelteHTMLElements['path'], {}> {
+}
+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> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Pattern: $$__sveltets_2_IsomorphicComponent<QRCodePatternProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Pattern = InstanceType<typeof Pattern>;
+export default Pattern;

package/dist/qr-code/root.svelte

@@ -0,0 +1,48 @@
+<script lang="ts" context="module">
+  import type {Assign, OptionalId, WithoutChildren} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {CreateQRCodeContextProps, CreateQRCodeContextReturn} from './context.svelte.js';
+
+  export interface QRCodeProps
+    extends Assign<
+      WithoutChildren<SvelteHTMLElements['div']>,
+      OptionalId<CreateQRCodeContextProps>
+    > {
+    children?: Snippet<[CreateQRCodeContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {createQRCodeContext, setQRCodeContext} from './context.svelte.js';
+
+  let {
+    id = uuid(),
+    ids,
+    dir,
+    value,
+    encoding,
+    getRootNode,
+    children,
+    ...props
+  }: QRCodeProps = $props();
+
+  let context = createQRCodeContext({
+    id,
+    ids,
+    dir,
+    value: $state.snapshot(value),
+    encoding,
+    getRootNode,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  setQRCodeContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>

package/dist/qr-code/root.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Assign, OptionalId, WithoutChildren } from '../types.js';
+import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+import type { CreateQRCodeContextProps, CreateQRCodeContextReturn } from './context.svelte.js';
+export interface QRCodeProps extends Assign<WithoutChildren<SvelteHTMLElements['div']>, OptionalId<CreateQRCodeContextProps>> {
+    children?: Snippet<[CreateQRCodeContextReturn]>;
+}
+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> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Root: $$__sveltets_2_IsomorphicComponent<QRCodeProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Root = InstanceType<typeof Root>;
+export default Root;

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

@@ -0,0 +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>

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

@@ -0,0 +1,22 @@
+import type { Assign } from '../types.js';
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface TagsInputClearTriggerProps extends Assign<SvelteHTMLElements['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> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ClearTrigger: $$__sveltets_2_IsomorphicComponent<TagsInputClearTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ClearTrigger = InstanceType<typeof ClearTrigger>;
+export default ClearTrigger;

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

@@ -0,0 +1,10 @@
+import * as tagsInput from '@zag-js/tags-input';
+export interface CreateTagsInputContextProps extends tagsInput.Context {
+}
+export interface CreateTagsInputContextReturn extends ReturnType<typeof createTagsInputContext> {
+}
+export declare function createTagsInputContext(props: CreateTagsInputContextProps): any;
+export declare function setTagsInputContext(value: CreateTagsInputContextReturn): void;
+export declare function useTagsInputContext(): CreateTagsInputContextReturn;
+export declare function setTagsInputItemContext(value: tagsInput.ItemProps): void;
+export declare function useTagsInputItemContext(): tagsInput.ItemProps;

package/dist/tags-input/context.svelte.js

@@ -0,0 +1,20 @@
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import * as tagsInput from '@zag-js/tags-input';
+import { getContext, setContext } from 'svelte';
+export function createTagsInputContext(props) {
+    const [state, send] = useMachine(tagsInput.machine(props));
+    const api = $derived(reflect(() => tagsInput.connect(state, send, normalizeProps)));
+    return api;
+}
+export function setTagsInputContext(value) {
+    setContext('TagsInput', value);
+}
+export function useTagsInputContext() {
+    return getContext('TagsInput');
+}
+export function setTagsInputItemContext(value) {
+    setContext('TagsInputItem', value);
+}
+export function useTagsInputItemContext() {
+    return getContext('TagsInputItem');
+}

package/dist/tags-input/control.svelte

@@ -0,0 +1,21 @@
+<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>

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

@@ -0,0 +1,22 @@
+import type { Assign } from '../types.js';
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface TagsInputControlProps extends Assign<SvelteHTMLElements['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> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Control: $$__sveltets_2_IsomorphicComponent<TagsInputControlProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Control = InstanceType<typeof Control>;
+export default Control;

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

@@ -0,0 +1,19 @@
+<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} />

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

@@ -0,0 +1,22 @@
+import type { Assign } from '../types.js';
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface TagsInputHiddenInputProps extends Assign<SvelteHTMLElements['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> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const HiddenInput: $$__sveltets_2_IsomorphicComponent<TagsInputHiddenInputProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type HiddenInput = InstanceType<typeof HiddenInput>;
+export default HiddenInput;

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

@@ -0,0 +1,11 @@
+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 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 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

@@ -0,0 +1,11 @@
+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 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 Item } from './item.svelte';
+export { default as Label } from './label.svelte';
+export { default as Root } from './root.svelte';

package/dist/tags-input/input.svelte

@@ -0,0 +1,19 @@
+<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} />

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

@@ -0,0 +1,22 @@
+import type { Assign } from '../types.js';
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface TagsInputInputProps extends Assign<SvelteHTMLElements['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> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Input: $$__sveltets_2_IsomorphicComponent<TagsInputInputProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Input = InstanceType<typeof Input>;
+export default Input;

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

@@ -0,0 +1,23 @@
+<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>