ui-ingredients 0.0.5 → 0.0.7

package/dist/radio-group/context.svelte.js

@@ -13,7 +13,7 @@ export function useRadioGroupContext() {
     return getContext('RadioGroup');
 }
 export function setRadioGroupItemContext(value) {
-    setContext('RadioGroupItem', reflect(() => value));
+    setContext('RadioGroupItem', value);
 }
 export function useRadioGroupItemContext() {
     return getContext('RadioGroupItem');

package/dist/radio-group/indicator.svelte

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

package/dist/radio-group/item-control.svelte

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

package/dist/radio-group/item-hidden-input.svelte

@@ -1,11 +1,20 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useRadioGroupContext, useRadioGroupItemContext } from "./context.svelte.js";
-let { ...props } = $props();
-let context = useRadioGroupContext();
-let itemContext = useRadioGroupItemContext();
-let attrs = $derived(mergeProps(props, context.getItemHiddenInputProps(itemContext)));
-</script>
-
-<input {...attrs} />
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface RadioGroupItemHiddenInputProps extends Assign<SvelteHTMLElements['input'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useRadioGroupContext, useRadioGroupItemContext} from './context.svelte.js';
+
+  let {...props}: RadioGroupItemHiddenInputProps = $props();
+
+  let context = useRadioGroupContext();
+  let itemContext = useRadioGroupItemContext();
+
+  let attrs = $derived(mergeProps(props, context.getItemHiddenInputProps(itemContext)));
+</script>
+
+<input {...attrs} />

package/dist/radio-group/item-text.svelte

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

package/dist/radio-group/item.svelte

@@ -1,26 +1,37 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { setRadioGroupItemContext, useRadioGroupContext } from "./context.svelte.js";
-let { value, invalid, disabled, children, ...props } = $props();
-let context = useRadioGroupContext();
-let attrs = $derived(
-  mergeProps(
-    props,
-    context.getItemProps({
-      value,
-      invalid,
-      disabled
-    })
-  )
-);
-setRadioGroupItemContext({
-  value,
-  invalid,
-  disabled
-});
-</script>
-
-<label {...attrs}>
-  {@render children?.()}
-</label>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {ItemProps} from '@zag-js/radio-group';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface RadioGroupItemProps extends Assign<SvelteHTMLElements['label'], ItemProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {setRadioGroupItemContext, useRadioGroupContext} from './context.svelte.js';
+
+  let {value, invalid, disabled, children, ...props}: RadioGroupItemProps = $props();
+
+  let context = useRadioGroupContext();
+
+  let attrs = $derived(
+    mergeProps(
+      props,
+      context.getItemProps({
+        value,
+        invalid,
+        disabled,
+      }),
+    ),
+  );
+
+  setRadioGroupItemContext({
+    value,
+    invalid,
+    disabled,
+  });
+</script>
+
+<label {...attrs}>
+  {@render children?.()}
+</label>

package/dist/radio-group/label.svelte

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

package/dist/radio-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 { createRadioGroupContext, setRadioGroupContext } from "./context.svelte.js";
-let {
-  id = uuid(),
-  ids,
-  dir,
-  form,
-  name,
-  value,
-  disabled,
-  readOnly,
-  orientation,
-  onValueChange,
-  getRootNode,
-  children,
-  ...props
-} = $props();
-let context = createRadioGroupContext({
-  id,
-  ids,
-  dir,
-  form,
-  name,
-  value: $state.snapshot(value),
-  disabled,
-  readOnly,
-  orientation,
-  onValueChange,
-  getRootNode
-});
-let attrs = $derived(mergeProps(props, context.getRootProps()));
-setRadioGroupContext(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 {
+    CreateRadioGroupContextProps,
+    CreateRadioGroupContextReturn,
+  } from './context.svelte.js';
+
+  export interface RadioGroupProps
+    extends Assign<
+      WithoutChildren<SvelteHTMLElements['div']>,
+      OptionalId<CreateRadioGroupContextProps>
+    > {
+    children?: Snippet<[CreateRadioGroupContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {createRadioGroupContext, setRadioGroupContext} from './context.svelte.js';
+
+  let {
+    id = uuid(),
+    ids,
+    dir,
+    form,
+    name,
+    value,
+    disabled,
+    readOnly,
+    orientation,
+    onValueChange,
+    getRootNode,
+    children,
+    ...props
+  }: RadioGroupProps = $props();
+
+  let context = createRadioGroupContext({
+    id,
+    ids,
+    dir,
+    form,
+    name,
+    value: $state.snapshot(value),
+    disabled,
+    readOnly,
+    orientation,
+    onValueChange,
+    getRootNode,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  setRadioGroupContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>

package/dist/select/clear-trigger.svelte

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

package/dist/select/content.svelte

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

package/dist/select/context.svelte.js

@@ -19,19 +19,19 @@ export function createSelectContext(props) {
     return api;
 }
 export function setSelectContext(value) {
-    setContext('Select', reflect(() => value));
+    setContext('Select', value);
 }
 export function useSelectContext() {
     return getContext('Select');
 }
 export function setSelectItemGroupContext(value) {
-    setContext('SelectItemGroup', reflect(() => value));
+    setContext('SelectItemGroup', value);
 }
 export function useSelectItemGroupContext() {
     return getContext('SelectItemGroup');
 }
 export function setSelectItemContext(value) {
-    setContext('SelectItem', reflect(() => value));
+    setContext('SelectItem', value);
 }
 export function useSelectItemContext() {
     return getContext('SelectItem');

package/dist/select/control.svelte

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

package/dist/select/hidden-select.svelte

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

package/dist/select/indicator.svelte

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

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

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

package/dist/select/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 { setSelectItemGroupContext, useSelectContext } from "./context.svelte.js";
-let { id = uuid(), children, ...props } = $props();
-let context = useSelectContext();
-let attrs = $derived(mergeProps(props, context.getItemGroupProps({ id })));
-setSelectItemGroupContext({ 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/select';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface SelectItemGroupProps
+    extends Assign<SvelteHTMLElements['div'], OptionalId<ItemGroupProps>> {}
+</script>
+
+<script lang="ts">
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {setSelectItemGroupContext, useSelectContext} from './context.svelte.js';
+
+  let {id = uuid(), children, ...props}: SelectItemGroupProps = $props();
+
+  let context = useSelectContext();
+
+  let attrs = $derived(mergeProps(props, context.getItemGroupProps({id})));
+
+  setSelectItemGroupContext({id});
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>