ui-ingredients 0.0.6 → 0.0.7

package/dist/steps/separator.svelte

@@ -1,13 +1,22 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useStepsContext, useStepsItemContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useStepsContext();
-let itemContext = useStepsItemContext();
-let attrs = $derived(mergeProps(props, context.getSeparatorProps(itemContext)));
-</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 StepsSeparatorProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useStepsContext, useStepsItemContext} from './context.svelte.js';
+
+  let {children, ...props}: StepsSeparatorProps = $props();
+
+  let context = useStepsContext();
+  let itemContext = useStepsItemContext();
+
+  let attrs = $derived(mergeProps(props, context.getSeparatorProps(itemContext)));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/steps/trigger.svelte

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

package/dist/switch/control.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.getControlProps()));
-</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 SwitchControlProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useSwitchContext} from './context.svelte.js';
+
+  let {children, ...props}: SwitchControlProps = $props();
+
+  let context = useSwitchContext();
+
+  let attrs = $derived(mergeProps(props, context.getControlProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/switch/hidden-input.svelte

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

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/toast/action-trigger.svelte

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

package/dist/toast/actor.svelte

@@ -1,11 +1,22 @@
-<script lang="ts">import * as toast from "@zag-js/toast";
-import {
-  createToastContext,
-  setToastContext
-} from "./context.svelte.js";
-let { actor, children$ } = $props();
-let context = createToastContext(actor);
-setToastContext(context);
-</script>
-
-{@render children$(context)}
+<script lang="ts">
+  import * as toast from '@zag-js/toast';
+  import type {Snippet} from 'svelte';
+  import {
+    createToastContext,
+    setToastContext,
+    type CreateToastContextReturn,
+  } from './context.svelte.js';
+
+  interface Props {
+    actor: toast.Service;
+    children$: Snippet<[CreateToastContextReturn]>;
+  }
+
+  let {actor, children$}: Props = $props();
+
+  let context = createToastContext(actor);
+
+  setToastContext(context);
+</script>
+
+{@render children$(context)}

package/dist/toast/close-trigger.svelte

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