ui-ingredients 0.0.6 → 0.0.8

package/dist/switch/label.svelte

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

package/dist/switch/root.svelte

@@ -1,46 +1,64 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { uuid } from "../utils.svelte.js";
-import { mergeProps } from "@zag-js/svelte";
-import { createSwitchContext, setSwitchContext } from "./context.svelte.js";
-let {
-  id = uuid(),
-  ids,
-  dir,
-  form,
-  name,
-  label,
-  value,
-  checked,
-  invalid,
-  disabled,
-  readOnly,
-  required,
-  onCheckedChange,
-  getRootNode,
-  children,
-  ...props
-} = $props();
-let context = createSwitchContext({
-  id,
-  ids,
-  dir,
-  form,
-  name,
-  label,
-  value: $state.snapshot(value),
-  checked,
-  invalid,
-  disabled,
-  readOnly,
-  required,
-  onCheckedChange,
-  getRootNode
-});
-let attrs = $derived(mergeProps(props, context.getRootProps()));
-setSwitchContext(context);
-</script>
-
-<label {...attrs}>
-  {@render children?.(context)}
-</label>
+<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 {CreateSwitchContextProps, CreateSwitchContextReturn} from './context.svelte.js';
+
+  export interface SwitchProps
+    extends Assign<
+      WithoutChildren<SvelteHTMLElements['label']>,
+      OptionalId<CreateSwitchContextProps>
+    > {
+    children?: Snippet<[CreateSwitchContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {createSwitchContext, setSwitchContext} from './context.svelte.js';
+
+  let {
+    id = uuid(),
+    ids,
+    dir,
+    form,
+    name,
+    label,
+    value,
+    checked,
+    invalid,
+    disabled,
+    readOnly,
+    required,
+    onCheckedChange,
+    getRootNode,
+    children,
+    ...props
+  }: SwitchProps = $props();
+
+  let context = createSwitchContext({
+    id,
+    ids,
+    dir,
+    form,
+    name,
+    label,
+    value: $state.snapshot(value),
+    checked,
+    invalid,
+    disabled,
+    readOnly,
+    required,
+    onCheckedChange,
+    getRootNode,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  setSwitchContext(context);
+</script>
+
+<label {...attrs}>
+  {@render children?.(context)}
+</label>

package/dist/switch/thumb.svelte

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

package/dist/tabs/content.svelte

@@ -1,12 +1,22 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useTabsContext } from "./context.svelte.js";
-let { value, children, ...props } = $props();
-let context = useTabsContext();
-let attrs = $derived(mergeProps(props, context.getContentProps({ value })));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {ContentProps} from '@zag-js/tabs';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface TabsContentProps extends Assign<SvelteHTMLElements['div'], ContentProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useTabsContext} from './context.svelte.js';
+
+  let {value, children, ...props}: TabsContentProps = $props();
+
+  let context = useTabsContext();
+
+  let attrs = $derived(mergeProps(props, context.getContentProps({value})));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/tabs/list.svelte

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

package/dist/tabs/root.svelte

@@ -1,42 +1,57 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { uuid } from "../utils.svelte.js";
-import { mergeProps } from "@zag-js/svelte";
-import { createTabsContext, setTabsContext } from "./context.svelte.js";
-let {
-  id = uuid(),
-  ids,
-  dir,
-  value,
-  loopFocus,
-  composite,
-  orientation,
-  translations,
-  activationMode,
-  onFocusChange,
-  onValueChange,
-  getRootNode,
-  children,
-  ...props
-} = $props();
-let context = createTabsContext({
-  id,
-  ids,
-  dir,
-  value: $state.snapshot(value),
-  loopFocus,
-  composite,
-  orientation,
-  translations,
-  activationMode,
-  onFocusChange,
-  onValueChange,
-  getRootNode
-});
-let attrs = $derived(mergeProps(props, context.getRootProps()));
-setTabsContext(context);
-</script>
-
-<div {...attrs}>
-  {@render children?.(context)}
-</div>
+<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 {CreateTabsContextProps, CreateTabsContextReturn} from './context.svelte.js';
+
+  export interface TabsProps
+    extends Assign<WithoutChildren<SvelteHTMLElements['div']>, OptionalId<CreateTabsContextProps>> {
+    children?: Snippet<[CreateTabsContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {createTabsContext, setTabsContext} from './context.svelte.js';
+
+  let {
+    id = uuid(),
+    ids,
+    dir,
+    value,
+    loopFocus,
+    composite,
+    orientation,
+    translations,
+    activationMode,
+    onFocusChange,
+    onValueChange,
+    getRootNode,
+    children,
+    ...props
+  }: TabsProps = $props();
+
+  let context = createTabsContext({
+    id,
+    ids,
+    dir,
+    value: $state.snapshot(value),
+    loopFocus,
+    composite,
+    orientation,
+    translations,
+    activationMode,
+    onFocusChange,
+    onValueChange,
+    getRootNode,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  setTabsContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>

package/dist/tabs/trigger.svelte

@@ -1,12 +1,22 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useTabsContext } from "./context.svelte.js";
-let { value, disabled, children, ...props } = $props();
-let context = useTabsContext();
-let attrs = $derived(mergeProps(props, context.getTriggerProps({ value, disabled })));
-</script>
-
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {TriggerProps} from '@zag-js/tabs';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface TabsTriggerProps extends Assign<SvelteHTMLElements['button'], TriggerProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useTabsContext} from './context.svelte.js';
+
+  let {value, disabled, children, ...props}: TabsTriggerProps = $props();
+
+  let context = useTabsContext();
+
+  let attrs = $derived(mergeProps(props, context.getTriggerProps({value, disabled})));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

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>