ui-ingredients 0.0.5 → 0.0.7

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>

package/dist/toast/description.svelte

@@ -1,16 +1,25 @@
-<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.getDescriptionProps()));
-</script>
-
-<div {...attrs}>
-  {#if children}
-    {@render children?.()}
-  {:else}
-    {context.description}
-  {/if}
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+
+  export interface ToastDescriptionProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</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}: ToastDescriptionProps = $props();
+
+  let context = useToastContext();
+
+  let attrs = $derived(mergeProps(props, context.getDescriptionProps()));
+</script>
+
+<div {...attrs}>
+  {#if children}
+    {@render children?.()}
+  {:else}
+    {context.description}
+  {/if}
+</div>

package/dist/toast/root.svelte

@@ -1,16 +1,25 @@
-<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.getRootProps()));
-</script>
-
-<div {...attrs}>
-  <div {...context.getGhostBeforeProps()}></div>
-
-  {@render children?.()}
-
-  <div {...context.getGhostAfterProps()}></div>
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+
+  export interface ToastProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</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}: ToastProps = $props();
+
+  let context = useToastContext();
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+</script>
+
+<div {...attrs}>
+  <div {...context.getGhostBeforeProps()}></div>
+
+  {@render children?.()}
+
+  <div {...context.getGhostAfterProps()}></div>
+</div>

package/dist/toast/title.svelte

@@ -1,16 +1,25 @@
-<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.getTitleProps()));
-</script>
-
-<div {...attrs}>
-  {#if children}
-    {@render children?.()}
-  {:else}
-    {context.title}
-  {/if}
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+
+  export interface ToastTitleProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</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}: ToastTitleProps = $props();
+
+  let context = useToastContext();
+
+  let attrs = $derived(mergeProps(props, context.getTitleProps()));
+</script>
+
+<div {...attrs}>
+  {#if children}
+    {@render children?.()}
+  {:else}
+    {context.title}
+  {/if}
+</div>

package/dist/toast/toaster.svelte

@@ -1,25 +1,40 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { Portal } from "../portal/index.js";
-import { mergeProps, normalizeProps, useMachine } from "@zag-js/svelte";
-import * as toast from "@zag-js/toast";
-import ToastActor from "./actor.svelte";
-let { toaster, children, ...props } = $props();
-let [state, send] = useMachine(toaster.machine);
-let placement = $derived(state.context.placement);
-let api = $derived(toast.group.connect(state, send, normalizeProps));
-let toasts = $derived(api.getToastsByPlacement(placement));
-let attrs = $derived(mergeProps(props, api.getGroupProps({ placement })));
-</script>
-
-<Portal>
-  <div {...attrs}>
-    {#each toasts as toast (toast.id)}
-      <ToastActor actor={toast}>
-        {#snippet children$(ctx)}
-          {@render children(ctx)}
-        {/snippet}
-      </ToastActor>
-    {/each}
-  </div>
-</Portal>
+<script lang="ts" context="module">
+  import type {WithoutChildren} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {CreateToastContextReturn} from './context.svelte.js';
+  import type {CreateToasterReturn} from './create-toaster.svelte.js';
+
+  export interface ToasterProps extends WithoutChildren<SvelteHTMLElements['div']> {
+    toaster: CreateToasterReturn;
+    children: Snippet<[CreateToastContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {Portal} from '../portal/index.js';
+  import {mergeProps, normalizeProps, useMachine} from '@zag-js/svelte';
+  import * as toast from '@zag-js/toast';
+  import ToastActor from './actor.svelte';
+
+  let {toaster, children, ...props}: ToasterProps = $props();
+
+  let [state, send] = useMachine(toaster.machine);
+
+  let placement = $derived(state.context.placement);
+  let api = $derived(toast.group.connect(state, send, normalizeProps));
+  let toasts = $derived(api.getToastsByPlacement(placement));
+  let attrs = $derived(mergeProps(props, api.getGroupProps({placement})));
+</script>
+
+<Portal>
+  <div {...attrs}>
+    {#each toasts as toast (toast.id)}
+      <ToastActor actor={toast}>
+        {#snippet children$(ctx)}
+          {@render children(ctx)}
+        {/snippet}
+      </ToastActor>
+    {/each}
+  </div>
+</Portal>

package/dist/toggle-group/item.svelte

@@ -1,12 +1,22 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useToggleGroupContext } from "./context.svelte.js";
-let { value, disabled, children, ...props } = $props();
-let context = useToggleGroupContext();
-let attrs = $derived(mergeProps(props, context.getItemProps({ value, disabled })));
-</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 ToggleGroupItemProps extends Assign<SvelteHTMLElements['button'], ItemProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import type {ItemProps} from '@zag-js/toggle-group';
+  import {useToggleGroupContext} from './context.svelte.js';
+
+  let {value, disabled, children, ...props}: ToggleGroupItemProps = $props();
+
+  let context = useToggleGroupContext();
+
+  let attrs = $derived(mergeProps(props, context.getItemProps({value, disabled})));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/dist/toggle-group/root.svelte

@@ -1,40 +1,61 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { uuid } from "../utils.svelte.js";
-import { mergeProps } from "@zag-js/svelte";
-import { createToggleGroupContext, setToggleGroupContext } from "./context.svelte.js";
-let {
-  id = uuid(),
-  ids,
-  dir,
-  value,
-  disabled,
-  multiple,
-  loopFocus,
-  rovingFocus,
-  orientation,
-  onValueChange,
-  getRootNode,
-  children,
-  ...props
-} = $props();
-let context = createToggleGroupContext({
-  id,
-  ids,
-  dir,
-  value: $state.snapshot(value),
-  disabled,
-  multiple,
-  loopFocus,
-  rovingFocus,
-  orientation,
-  onValueChange,
-  getRootNode
-});
-let attrs = $derived(mergeProps(props, context.getRootProps()));
-setToggleGroupContext(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 {
+    CreateToggleGroupContextProps,
+    CreateToggleGroupContextReturn,
+  } from './context.svelte.js';
+
+  export interface ToggleGroupProps
+    extends Assign<
+      WithoutChildren<SvelteHTMLElements['div']>,
+      OptionalId<CreateToggleGroupContextProps>
+    > {
+    children?: Snippet<[CreateToggleGroupContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {createToggleGroupContext, setToggleGroupContext} from './context.svelte.js';
+
+  let {
+    id = uuid(),
+    ids,
+    dir,
+    value,
+    disabled,
+    multiple,
+    loopFocus,
+    rovingFocus,
+    orientation,
+    onValueChange,
+    getRootNode,
+    children,
+    ...props
+  }: ToggleGroupProps = $props();
+
+  let context = createToggleGroupContext({
+    id,
+    ids,
+    dir,
+    value: $state.snapshot(value),
+    disabled,
+    multiple,
+    loopFocus,
+    rovingFocus,
+    orientation,
+    onValueChange,
+    getRootNode,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  setToggleGroupContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>

package/dist/tooltip/arrow-tip.svelte

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

package/dist/tooltip/arrow.svelte

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

package/dist/tooltip/content.svelte

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

package/dist/tooltip/positioner.svelte

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

package/dist/tooltip/root.svelte

@@ -1,10 +1,22 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { uuid } from "../utils.svelte.js";
-import { createTooltipContext, setTooltipContext } from "./context.svelte.js";
-let { id = uuid(), children, ...props } = $props();
-let context = createTooltipContext({ id, ...props });
-setTooltipContext(context);
-</script>
-
-{@render children?.(context)}
+<script lang="ts" context="module">
+  import type {OptionalId} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {CreateTooltipContextProps, CreateTooltipContextReturn} from './context.svelte.js';
+
+  export interface TooltipProps extends OptionalId<CreateTooltipContextProps> {
+    children?: Snippet<[CreateTooltipContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {uuid} from '../utils.svelte.js';
+  import {createTooltipContext, setTooltipContext} from './context.svelte.js';
+
+  let {id = uuid(), children, ...props}: TooltipProps = $props();
+
+  let context = createTooltipContext({id, ...props});
+
+  setTooltipContext(context);
+</script>
+
+{@render children?.(context)}

package/dist/tooltip/trigger.svelte

@@ -1,12 +1,21 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useTooltipContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useTooltipContext();
-let attrs = $derived(mergeProps(props, context.getTriggerProps()));
-</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 TooltipTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useTooltipContext} from './context.svelte.js';
+
+  let {children, ...props}: TooltipTriggerProps = $props();
+
+  let context = useTooltipContext();
+
+  let attrs = $derived(mergeProps(props, context.getTriggerProps()));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>