ui-ingredients 0.0.6 → 0.0.8

package/dist/slider/thumb.svelte

@@ -1,24 +1,35 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { setSliderThumbContext, useSliderContext } from "./context.svelte.js";
-let { name, index, children, ...props } = $props();
-let context = useSliderContext();
-let attrs = $derived(
-  mergeProps(
-    props,
-    context.getThumbProps({
-      name,
-      index
-    })
-  )
-);
-setSliderThumbContext({
-  name,
-  index
-});
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {ThumbProps} from '@zag-js/slider';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface SliderThumbProps extends Assign<SvelteHTMLElements['div'], ThumbProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {setSliderThumbContext, useSliderContext} from './context.svelte.js';
+
+  let {name, index, children, ...props}: SliderThumbProps = $props();
+
+  let context = useSliderContext();
+
+  let attrs = $derived(
+    mergeProps(
+      props,
+      context.getThumbProps({
+        name,
+        index,
+      }),
+    ),
+  );
+
+  setSliderThumbContext({
+    name,
+    index,
+  });
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/slider/track.svelte

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

package/dist/slider/value-text.svelte

@@ -1,16 +1,25 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useSliderContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useSliderContext();
-let attrs = $derived(mergeProps(props, context.getValueTextProps()));
-</script>
-
-<span {...attrs}>
-  {#if children}
-    {@render children()}
-  {:else}
-    {context.value.join(', ')}
-  {/if}
-</span>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface SliderValueTextProps extends Assign<SvelteHTMLElements['span'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useSliderContext} from './context.svelte.js';
+
+  let {children, ...props}: SliderValueTextProps = $props();
+
+  let context = useSliderContext();
+
+  let attrs = $derived(mergeProps(props, context.getValueTextProps()));
+</script>
+
+<span {...attrs}>
+  {#if children}
+    {@render children()}
+  {:else}
+    {context.value.join(', ')}
+  {/if}
+</span>

package/dist/steps/content.svelte

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

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

package/dist/steps/item.svelte

@@ -1,13 +1,24 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { setStepsItemContext, useStepsContext } from "./context.svelte.js";
-let { index, children, ...props } = $props();
-let context = useStepsContext();
-let attrs = $derived(mergeProps(props, context.getItemProps({ index })));
-setStepsItemContext({ index });
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {ItemProps} from '@zag-js/steps';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface StepsItemProps extends Assign<SvelteHTMLElements['div'], ItemProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {setStepsItemContext, useStepsContext} from './context.svelte.js';
+
+  let {index, children, ...props}: StepsItemProps = $props();
+
+  let context = useStepsContext();
+
+  let attrs = $derived(mergeProps(props, context.getItemProps({index})));
+
+  setStepsItemContext({index});
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/steps/list.svelte

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

package/dist/steps/next-trigger.svelte

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

package/dist/steps/prev-trigger.svelte

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

package/dist/steps/progress.svelte

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

package/dist/steps/root.svelte

@@ -1,38 +1,56 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { uuid } from "../utils.svelte.js";
-import { mergeProps } from "@zag-js/svelte";
-import { createStepsContext, setStepsContext } from "./context.svelte.js";
-let {
-  id = uuid(),
-  ids,
-  dir,
-  step,
-  count,
-  linear,
-  orientation,
-  onStepChange,
-  onStepComplete,
-  getRootNode,
-  children,
-  ...props
-} = $props();
-let context = createStepsContext({
-  id,
-  ids,
-  dir,
-  step,
-  count,
-  linear,
-  orientation,
-  onStepChange,
-  onStepComplete,
-  getRootNode
-});
-let attrs = $derived(mergeProps(props, context.getRootProps()));
-setStepsContext(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 {CreateStepsContextProps, CreateStepsContextReturn} from './context.svelte.js';
+
+  export interface StepsProps
+    extends Assign<
+      WithoutChildren<SvelteHTMLElements['div']>,
+      OptionalId<CreateStepsContextProps>
+    > {
+    children?: Snippet<[CreateStepsContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {createStepsContext, setStepsContext} from './context.svelte.js';
+
+  let {
+    id = uuid(),
+    ids,
+    dir,
+    step,
+    count,
+    linear,
+    orientation,
+    onStepChange,
+    onStepComplete,
+    getRootNode,
+    children,
+    ...props
+  }: StepsProps = $props();
+
+  let context = createStepsContext({
+    id,
+    ids,
+    dir,
+    step,
+    count,
+    linear,
+    orientation,
+    onStepChange,
+    onStepComplete,
+    getRootNode,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  setStepsContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>

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} />