ui-ingredients 0.0.5 → 0.0.7

package/dist/combobox/item.svelte

@@ -1,24 +1,35 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { setComboboxItemContext, useComboboxContext } from "./context.svelte.js";
-let { id, children, item, persistFocus, ...props } = $props();
-let context = useComboboxContext();
-let attrs = $derived(
-  mergeProps(
-    props,
-    context.getItemProps({
-      item,
-      persistFocus
-    })
-  )
-);
-setComboboxItemContext({
-  item,
-  persistFocus
-});
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {ItemProps} from '@zag-js/combobox';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface ComboboxItemProps extends Assign<SvelteHTMLElements['div'], ItemProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {setComboboxItemContext, useComboboxContext} from './context.svelte.js';
+
+  let {children, item, persistFocus, ...props}: ComboboxItemProps = $props();
+
+  let context = useComboboxContext();
+
+  let attrs = $derived(
+    mergeProps(
+      props,
+      context.getItemProps({
+        item,
+        persistFocus,
+      }),
+    ),
+  );
+
+  setComboboxItemContext({
+    item,
+    persistFocus,
+  });
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/combobox/label.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.getLabelProps()));
-</script>
-
-<label {...attrs}>
-  {@render children?.()}
-</label>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface ComboboxLabelProps extends Assign<SvelteHTMLElements['label'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useComboboxContext} from './context.svelte.js';
+
+  let {children, ...props}: ComboboxLabelProps = $props();
+
+  let context = useComboboxContext();
+
+  let attrs = $derived(mergeProps(props, context.getLabelProps()));
+</script>
+
+<label {...attrs}>
+  {@render children?.()}
+</label>

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

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

package/dist/combobox/root.svelte

@@ -1,104 +1,122 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts" generics="T">import { uuid } from "../utils.svelte.js";
-import { mergeProps } from "@zag-js/svelte";
-import { createComboboxContext, setComboboxContext } from "./context.svelte.js";
-let {
-  id = uuid(),
-  ids,
-  dir,
-  name,
-  form,
-  open,
-  "open.controlled": openControlled,
-  items,
-  value,
-  invalid,
-  disabled,
-  multiple,
-  readOnly,
-  required,
-  autoFocus,
-  composite,
-  loopFocus,
-  inputValue,
-  placeholder,
-  positioning,
-  translations,
-  disableLayer,
-  closeOnSelect,
-  inputBehavior,
-  openOnChange,
-  openOnClick,
-  openOnKeyPress,
-  allowCustomValue,
-  highlightedValue,
-  selectionBehavior,
-  itemToString,
-  itemToValue,
-  isItemDisabled,
-  onOpenChange,
-  onValueChange,
-  onFocusOutside,
-  onHighlightChange,
-  onInteractOutside,
-  onInputValueChange,
-  onPointerDownOutside,
-  getSelectionValue,
-  scrollToIndexFn,
-  getRootNode,
-  children,
-  ...props
-} = $props();
-let context = createComboboxContext({
-  id,
-  ids,
-  dir,
-  name,
-  form,
-  open,
-  "open.controlled": openControlled,
-  items,
-  value,
-  invalid,
-  disabled,
-  multiple,
-  readOnly,
-  required,
-  autoFocus,
-  composite,
-  loopFocus,
-  inputValue,
-  placeholder,
-  positioning,
-  translations,
-  disableLayer,
-  closeOnSelect,
-  inputBehavior,
-  openOnChange,
-  openOnClick,
-  openOnKeyPress,
-  allowCustomValue,
-  highlightedValue,
-  selectionBehavior,
-  itemToString,
-  itemToValue,
-  isItemDisabled,
-  onOpenChange,
-  onValueChange,
-  onFocusOutside,
-  onHighlightChange,
-  onInteractOutside,
-  onInputValueChange,
-  onPointerDownOutside,
-  getSelectionValue,
-  scrollToIndexFn,
-  getRootNode
-});
-let attrs = $derived(mergeProps(props, context.getRootProps()));
-setComboboxContext(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 {CreateComboboxContextProps, CreateComboboxContextReturn} from './context.svelte.js';
+
+  export interface ComboboxProps<T>
+    extends Assign<
+      WithoutChildren<SvelteHTMLElements['div']>,
+      OptionalId<CreateComboboxContextProps<T>>
+    > {
+    children?: Snippet<[CreateComboboxContextReturn]>;
+  }
+</script>
+
+<script lang="ts" generics="T">
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {createComboboxContext, setComboboxContext} from './context.svelte.js';
+
+  let {
+    id = uuid(),
+    ids,
+    dir,
+    name,
+    form,
+    open,
+    'open.controlled': openControlled,
+    items,
+    value,
+    invalid,
+    disabled,
+    multiple,
+    readOnly,
+    required,
+    autoFocus,
+    composite,
+    loopFocus,
+    inputValue,
+    placeholder,
+    positioning,
+    translations,
+    disableLayer,
+    closeOnSelect,
+    inputBehavior,
+    openOnChange,
+    openOnClick,
+    openOnKeyPress,
+    allowCustomValue,
+    highlightedValue,
+    selectionBehavior,
+    itemToString,
+    itemToValue,
+    isItemDisabled,
+    onOpenChange,
+    onValueChange,
+    onFocusOutside,
+    onHighlightChange,
+    onInteractOutside,
+    onInputValueChange,
+    onPointerDownOutside,
+    getSelectionValue,
+    scrollToIndexFn,
+    getRootNode,
+    children,
+    ...props
+  }: ComboboxProps<T> = $props();
+
+  let context = createComboboxContext({
+    id,
+    ids,
+    dir,
+    name,
+    form,
+    open,
+    'open.controlled': openControlled,
+    items,
+    value: $state.snapshot(value),
+    invalid,
+    disabled,
+    multiple,
+    readOnly,
+    required,
+    autoFocus,
+    composite,
+    loopFocus,
+    inputValue,
+    placeholder,
+    positioning,
+    translations,
+    disableLayer,
+    closeOnSelect,
+    inputBehavior,
+    openOnChange,
+    openOnClick,
+    openOnKeyPress,
+    allowCustomValue,
+    highlightedValue,
+    selectionBehavior,
+    itemToString,
+    itemToValue,
+    isItemDisabled,
+    onOpenChange,
+    onValueChange,
+    onFocusOutside,
+    onHighlightChange,
+    onInteractOutside,
+    onInputValueChange,
+    onPointerDownOutside,
+    getSelectionValue,
+    scrollToIndexFn,
+    getRootNode,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  setComboboxContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>

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

package/dist/dialog/backdrop.svelte

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

package/dist/dialog/close-trigger.svelte

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

package/dist/dialog/content.svelte

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

package/dist/dialog/description.svelte

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

package/dist/dialog/positioner.svelte

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

package/dist/dialog/root.svelte

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