ui-ingredients 0.0.5 → 0.0.7

package/dist/clipboard/root.svelte

@@ -1,30 +1,51 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { uuid } from "../utils.svelte.js";
-import { mergeProps } from "@zag-js/svelte";
-import { createClipboardContext, setClipboardContext } from "./context.svelte.js";
-let {
-  id = uuid(),
-  ids,
-  value,
-  timeout,
-  onStatusChange,
-  getRootNode,
-  children,
-  ...props
-} = $props();
-let context = createClipboardContext({
-  id,
-  ids,
-  value,
-  timeout,
-  onStatusChange,
-  getRootNode
-});
-let attrs = $derived(mergeProps(props, context.getRootProps()));
-setClipboardContext(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 {
+    CreateClipboardContextProps,
+    CreateClipboardContextReturn,
+  } from './context.svelte.js';
+
+  export interface ClipboardProps
+    extends Assign<
+      WithoutChildren<SvelteHTMLElements['div']>,
+      OptionalId<CreateClipboardContextProps>
+    > {
+    children?: Snippet<[CreateClipboardContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {createClipboardContext, setClipboardContext} from './context.svelte.js';
+
+  let {
+    id = uuid(),
+    ids,
+    value,
+    timeout,
+    onStatusChange,
+    getRootNode,
+    children,
+    ...props
+  }: ClipboardProps = $props();
+
+  let context = createClipboardContext({
+    id,
+    ids,
+    value: $state.snapshot(value),
+    timeout,
+    onStatusChange,
+    getRootNode,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  setClipboardContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>

package/dist/clipboard/trigger.svelte

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

package/dist/collapsible/content.svelte

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

package/dist/collapsible/root.svelte

@@ -1,36 +1,57 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { uuid } from "../utils.svelte.js";
-import { mergeProps } from "@zag-js/svelte";
-import { createCollapsibleContext, setCollapsibleContext } from "./context.svelte.js";
-let {
-  id = uuid(),
-  ids,
-  dir,
-  open,
-  "open.controlled": openControlled,
-  disabled,
-  onOpenChange,
-  onExitComplete,
-  getRootNode,
-  children,
-  ...props
-} = $props();
-let context = createCollapsibleContext({
-  id,
-  ids,
-  dir,
-  open,
-  "open.controlled": openControlled,
-  disabled,
-  onOpenChange,
-  onExitComplete,
-  getRootNode
-});
-let mergedProps = $derived(mergeProps(props, context.getRootProps()));
-setCollapsibleContext(context);
-</script>
-
-<div {...mergedProps}>
-  {@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 {
+    CreateCollapsibleContextProps,
+    CreateCollapsibleContextReturn,
+  } from './context.svelte.js';
+
+  export interface CollapsibleProps
+    extends Assign<
+      WithoutChildren<SvelteHTMLElements['div']>,
+      OptionalId<CreateCollapsibleContextProps>
+    > {
+    children?: Snippet<[CreateCollapsibleContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {createCollapsibleContext, setCollapsibleContext} from './context.svelte.js';
+
+  let {
+    id = uuid(),
+    ids,
+    dir,
+    open,
+    'open.controlled': openControlled,
+    disabled,
+    onOpenChange,
+    onExitComplete,
+    getRootNode,
+    children,
+    ...props
+  }: CollapsibleProps = $props();
+
+  let context = createCollapsibleContext({
+    id,
+    ids,
+    dir,
+    open,
+    'open.controlled': openControlled,
+    disabled,
+    onOpenChange,
+    onExitComplete,
+    getRootNode,
+  });
+
+  let mergedProps = $derived(mergeProps(props, context.getRootProps()));
+
+  setCollapsibleContext(context);
+</script>
+
+<div {...mergedProps}>
+  {@render children?.(context)}
+</div>

package/dist/collapsible/trigger.svelte

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

package/dist/combobox/clear-trigger.svelte

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

package/dist/combobox/content.svelte

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

package/dist/combobox/context.svelte.js

@@ -19,19 +19,19 @@ export function createComboboxContext(props) {
     return api;
 }
 export function setComboboxContext(value) {
-    setContext('Combobox', reflect(() => value));
+    setContext('Combobox', value);
 }
 export function useComboboxContext() {
     return getContext('Combobox');
 }
 export function setComboboxItemContext(value) {
-    setContext('ComboboxItem', reflect(() => value));
+    setContext('ComboboxItem', value);
 }
 export function useComboboxItemContext() {
     return getContext('ComboboxItem');
 }
 export function setComboboxItemGroupContext(value) {
-    setContext('ComboboxItemGroup', reflect(() => value));
+    setContext('ComboboxItemGroup', value);
 }
 export function useComboboxItemGroupContext() {
     return getContext('ComboboxItemGroup');

package/dist/combobox/control.svelte

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

package/dist/combobox/input.svelte

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

package/dist/combobox/item-group-label.svelte

@@ -1,20 +1,29 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useComboboxContext, useComboboxItemGroupContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useComboboxContext();
-let itemGroupContext = useComboboxItemGroupContext();
-let attrs = $derived(
-  mergeProps(
-    props,
-    context.getItemGroupLabelProps({
-      htmlFor: itemGroupContext.id
-    })
-  )
-);
-</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 ComboboxItemGroupLabelProps extends Assign<SvelteHTMLElements['span'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useComboboxContext, useComboboxItemGroupContext} from './context.svelte.js';
+
+  let {children, ...props}: ComboboxItemGroupLabelProps = $props();
+
+  let context = useComboboxContext();
+  let itemGroupContext = useComboboxItemGroupContext();
+
+  let attrs = $derived(
+    mergeProps(
+      props,
+      context.getItemGroupLabelProps({
+        htmlFor: itemGroupContext.id,
+      }),
+    ),
+  );
+</script>
+
+<span {...attrs}>
+  {@render children?.()}
+</span>

package/dist/combobox/item-group.svelte

@@ -1,14 +1,26 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { uuid } from "../utils.svelte.js";
-import { mergeProps } from "@zag-js/svelte";
-import { setComboboxItemGroupContext, useComboboxContext } from "./context.svelte.js";
-let { id = uuid(), children, ...props } = $props();
-let context = useComboboxContext();
-let attrs = $derived(mergeProps(props, context.getItemGroupProps({ id })));
-setComboboxItemGroupContext({ id });
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign, OptionalId} from '../types.js';
+  import type {ItemGroupProps} from '@zag-js/combobox';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface ComboboxItemGroupProps
+    extends Assign<SvelteHTMLElements['div'], OptionalId<ItemGroupProps>> {}
+</script>
+
+<script lang="ts">
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {setComboboxItemGroupContext, useComboboxContext} from './context.svelte.js';
+
+  let {id = uuid(), children, ...props}: ComboboxItemGroupProps = $props();
+
+  let context = useComboboxContext();
+
+  let attrs = $derived(mergeProps(props, context.getItemGroupProps({id})));
+
+  setComboboxItemGroupContext({id});
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/combobox/item-indicator.svelte

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

package/dist/combobox/item-text.svelte

@@ -1,17 +1,26 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useComboboxContext, useComboboxItemContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useComboboxContext();
-let itemContext = useComboboxItemContext();
-let attrs = $derived(mergeProps(props, context.getItemTextProps(itemContext)));
-</script>
-
-<span {...attrs}>
-  {#if children}
-    {@render children?.()}
-  {:else}
-    {context.collection.stringifyItem(itemContext.item)}
-  {/if}
-</span>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface ComboboxItemTextProps extends Assign<SvelteHTMLElements['span'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useComboboxContext, useComboboxItemContext} from './context.svelte.js';
+
+  let {children, ...props}: ComboboxItemTextProps = $props();
+
+  let context = useComboboxContext();
+  let itemContext = useComboboxItemContext();
+
+  let attrs = $derived(mergeProps(props, context.getItemTextProps(itemContext)));
+</script>
+
+<span {...attrs}>
+  {#if children}
+    {@render children?.()}
+  {:else}
+    {context.collection.stringifyItem(itemContext.item)}
+  {/if}
+</span>