ui-ingredients 0.0.6 → 0.0.8

package/dist/timer/root.svelte

@@ -0,0 +1,54 @@
+<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 {CreateTimerContextProps, CreateTimerContextReturn} from './context.svelte.js';
+
+  export interface TimerProps
+    extends Assign<
+      WithoutChildren<SvelteHTMLElements['div']>,
+      OptionalId<CreateTimerContextProps>
+    > {
+    children?: Snippet<[CreateTimerContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {createTimerContext, setTimerContext} from './context.svelte.js';
+
+  let {
+    id = uuid(),
+    startMs,
+    targetMs,
+    interval,
+    autoStart,
+    countdown,
+    onTick,
+    onComplete,
+    getRootNode,
+    children,
+    ...props
+  }: TimerProps = $props();
+
+  let context = createTimerContext({
+    id,
+    startMs,
+    targetMs,
+    interval,
+    autoStart,
+    countdown,
+    onTick,
+    onComplete,
+    getRootNode,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  setTimerContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>

package/dist/timer/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 { CreateTimerContextProps, CreateTimerContextReturn } from './context.svelte.js';
+export interface TimerProps extends Assign<WithoutChildren<SvelteHTMLElements['div']>, OptionalId<CreateTimerContextProps>> {
+    children?: Snippet<[CreateTimerContextReturn]>;
+}
+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<TimerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Root = InstanceType<typeof Root>;
+export default Root;

package/dist/timer/separator.svelte

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

package/dist/timer/separator.svelte.d.ts

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

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>

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>