ui-ingredients 0.0.16 → 0.0.18

package/dist/segment-group/label.svelte

@@ -1,20 +1,22 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface SegmentGroupLabelProps extends HtmlIngredientProps<'span'> {}
+  export interface SegmentGroupLabelProps extends HtmlProps<'span'> {}
 </script>
 
 <script lang="ts">
+  import {ensureStyleIsString} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
-  import {useSegmentGroupContext} from './context.svelte.js';
+  import {parts} from './anatomy.js';
+  import {segmentGroupContext} from './context.svelte.js';
 
   let {children, ...props}: SegmentGroupLabelProps = $props();
 
-  let context = useSegmentGroupContext();
+  let context = segmentGroupContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getLabelProps()));
+  let attrs = $derived(mergeProps(props, context.getLabelProps(), parts.label.attrs));
 </script>
 
-<span {...attrs}>
+<span {...ensureStyleIsString(attrs)}>
   {@render children?.()}
 </span>

package/dist/segment-group/label.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface SegmentGroupLabelProps extends HtmlIngredientProps<'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;

package/dist/segment-group/root.svelte

@@ -1,34 +1,27 @@
-<script lang="ts" context="module">
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {
-    CreateSegmentGroupContextProps,
-    CreateSegmentGroupContextReturn,
-  } from './context.svelte.js';
+    CreateSegmentGroupProps,
+    CreateSegmentGroupReturn,
+  } from './create-segment-group.svelte.js';
 
   export interface SegmentGroupProps
-    extends Assign<
-      Omit<HtmlIngredientProps<'div'>, 'children'>,
-      Omit<CreateSegmentGroupContextProps, 'id'>
-    > {
-    children?: Snippet<[context: CreateSegmentGroupContextReturn]>;
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateSegmentGroupProps> {
+    children?: Snippet<[api: CreateSegmentGroupReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {useEnvironmentContext} from '../environment-provider/index.js';
-  import {useLocaleContext} from '../locale-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
+  import {ensureStyleIsString} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
-  import {
-    createSegmentGroupContext,
-    setSegmentGroupContext,
-  } from './context.svelte.js';
+  import {parts} from './anatomy.js';
+  import {segmentGroupContext} from './context.svelte.js';
+  import {createSegmentGroup} from './create-segment-group.svelte.js';
 
   let {
     id,
     ids,
-    dir,
     form,
     name,
     value,
@@ -36,18 +29,13 @@
     readOnly,
     orientation,
     onValueChange,
-    getRootNode,
     children,
     ...props
   }: SegmentGroupProps = $props();
 
-  let localeContext = useLocaleContext();
-  let environmentContext = useEnvironmentContext();
-
-  let context = createSegmentGroupContext({
-    id: id ?? createUniqueId(),
+  let context = createSegmentGroup({
+    id,
     ids,
-    dir: dir ?? localeContext?.dir,
     form,
     name,
     value: $state.snapshot(value),
@@ -55,14 +43,13 @@
     readOnly,
     orientation,
     onValueChange,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, context.getRootProps(), parts.root.attrs));
 
-  setSegmentGroupContext(context);
+  segmentGroupContext.set(context);
 </script>
 
-<div {...attrs}>
+<div {...ensureStyleIsString(attrs)}>
   {@render children?.(context)}
 </div>

package/dist/segment-group/root.svelte.d.ts

@@ -1,9 +1,3 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
-import type { Snippet } from 'svelte';
-import type { CreateSegmentGroupContextProps, CreateSegmentGroupContextReturn } from './context.svelte.js';
-export interface SegmentGroupProps extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreateSegmentGroupContextProps, 'id'>> {
-    children?: Snippet<[context: CreateSegmentGroupContextReturn]>;
-}
 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;

package/dist/select/clear-trigger.svelte

@@ -1,17 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface SelectClearTriggerProps
-    extends HtmlIngredientProps<'button'> {}
+  export interface SelectClearTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useSelectContext} from './context.svelte.js';
+  import {selectContext} from './context.svelte.js';
 
   let {children, ...props}: SelectClearTriggerProps = $props();
 
-  let context = useSelectContext();
+  let context = selectContext.get();
 
   let attrs = $derived(mergeProps(props, context.getClearTriggerProps()));
 </script>

package/dist/select/clear-trigger.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface SelectClearTriggerProps extends HtmlIngredientProps<'button'> {
-}
 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;

package/dist/select/content.svelte

@@ -1,16 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface SelectContentProps extends HtmlIngredientProps<'div'> {}
+  export interface SelectContentProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useSelectContext} from './context.svelte.js';
+  import {selectContext} from './context.svelte.js';
 
   let {children, ...props}: SelectContentProps = $props();
 
-  let context = useSelectContext();
+  let context = selectContext.get();
 
   let attrs = $derived(mergeProps(props, context.getContentProps()));
 </script>

package/dist/select/content.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface SelectContentProps extends HtmlIngredientProps<'div'> {
-}
 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;

package/dist/select/context.svelte.d.ts

@@ -1,16 +1,6 @@
-import * as select from '@zag-js/select';
-export interface CreateSelectContextProps<T> extends Omit<select.Context, 'collection'> {
-    items: T[];
-    itemToString?: (item: T) => string;
-    itemToValue?: (item: T) => string;
-    isItemDisabled?: (item: T) => boolean;
-}
-export interface CreateSelectContextReturn extends ReturnType<typeof createSelectContext> {
-}
-export declare function createSelectContext<T>(props: CreateSelectContextProps<T>): any;
-export declare function setSelectContext(value: CreateSelectContextReturn): void;
-export declare function useSelectContext(): CreateSelectContextReturn;
-export declare function setSelectItemGroupPropsContext(value: select.ItemGroupProps): void;
-export declare function useSelectItemGroupPropsContext(): select.ItemGroupProps;
-export declare function setSelectItemPropsContext(value: select.ItemProps): void;
-export declare function useSelectItemPropsContext(): select.ItemProps<any>;
+import { Context } from '../utils.svelte.js';
+import type { ItemGroupProps, ItemProps } from '@zag-js/select';
+import type { CreateSelectReturn } from './create-select.svelte.js';
+export declare const selectContext: Context<CreateSelectReturn>;
+export declare const selectItemPropsContext: Context<ItemProps<any>>;
+export declare const selectItemGroupPropsContext: Context<ItemGroupProps>;

package/dist/select/context.svelte.js

@@ -1,38 +1,4 @@
-import * as select from '@zag-js/select';
-import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getContext, setContext } from 'svelte';
-export function createSelectContext(props) {
-    const collection = $derived(select.collection({
-        items: props.items,
-        itemToValue: (item) => props.itemToValue ? props.itemToValue(item) : String(item),
-        itemToString: (item) => props.itemToString ? props.itemToString(item) : String(item),
-        isItemDisabled: (item) => props.isItemDisabled ? props.isItemDisabled(item) : false,
-    }));
-    const [state, send] = useMachine(select.machine({
-        ...props,
-        collection,
-    }));
-    const api = $derived(reflect(() => ({
-        ...select.connect(state, send, normalizeProps),
-        collection,
-    })));
-    return api;
-}
-export function setSelectContext(value) {
-    setContext('Select', value);
-}
-export function useSelectContext() {
-    return getContext('Select');
-}
-export function setSelectItemGroupPropsContext(value) {
-    setContext('SelectItemGroup', value);
-}
-export function useSelectItemGroupPropsContext() {
-    return getContext('SelectItemGroup');
-}
-export function setSelectItemPropsContext(value) {
-    setContext('SelectItem', value);
-}
-export function useSelectItemPropsContext() {
-    return getContext('SelectItem');
-}
+import { Context } from '../utils.svelte.js';
+export const selectContext = new Context('Select');
+export const selectItemPropsContext = new Context('SelectItem');
+export const selectItemGroupPropsContext = new Context('SelectItemGroup');

package/dist/select/control.svelte

@@ -1,16 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface SelectControlProps extends HtmlIngredientProps<'div'> {}
+  export interface SelectControlProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useSelectContext} from './context.svelte.js';
+  import {selectContext} from './context.svelte.js';
 
   let {children, ...props}: SelectControlProps = $props();
 
-  let context = useSelectContext();
+  let context = selectContext.get();
 
   let attrs = $derived(mergeProps(props, context.getControlProps()));
 </script>

package/dist/select/control.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface SelectControlProps extends HtmlIngredientProps<'div'> {
-}
 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;

package/dist/select/create-select.svelte.d.ts

@@ -0,0 +1,11 @@
+import * as select from '@zag-js/select';
+export interface CreateSelectProps<T> extends Omit<select.Context, 'id' | 'dir' | 'getRootNode' | 'collection' | 'open.controlled'> {
+    id?: string | null;
+    items: T[];
+    itemToString?: (item: T) => string;
+    itemToValue?: (item: T) => string;
+    isItemDisabled?: (item: T) => boolean;
+}
+export interface CreateSelectReturn extends select.Api {
+}
+export declare function createSelect<T>(props: CreateSelectProps<T>): any;

package/dist/select/create-select.svelte.js

@@ -0,0 +1,28 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
+import * as select from '@zag-js/select';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+export function createSelect(props) {
+    const collection = $derived(select.collection({
+        items: props.items,
+        itemToValue: (item) => (props.itemToValue ? props.itemToValue(item) : String(item)),
+        itemToString: (item) => (props.itemToString ? props.itemToString(item) : String(item)),
+        isItemDisabled: (item) => (props.isItemDisabled ? props.isItemDisabled(item) : false),
+    }));
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(select.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+        collection,
+        'open.controlled': props.open != null,
+    }));
+    const api = $derived(reflect(() => ({
+        ...select.connect(state, send, normalizeProps),
+        collection,
+    })));
+    return api;
+}

package/dist/select/hidden-select.svelte

@@ -1,17 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface SelectHiddenSelectProps
-    extends HtmlIngredientProps<'select'> {}
+  export interface SelectHiddenSelectProps extends HtmlProps<'select'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useSelectContext} from './context.svelte.js';
+  import {selectContext} from './context.svelte.js';
 
   let {children, ...props}: SelectHiddenSelectProps = $props();
 
-  let context = useSelectContext();
+  let context = selectContext.get();
 
   let attrs = $derived(mergeProps(props, context.getHiddenSelectProps()));
 </script>

package/dist/select/hidden-select.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface SelectHiddenSelectProps extends HtmlIngredientProps<'select'> {
-}
 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;

package/dist/select/indicator.svelte

@@ -1,16 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface SelectIndicatorProps extends HtmlIngredientProps<'span'> {}
+  export interface SelectIndicatorProps extends HtmlProps<'span'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useSelectContext} from './context.svelte.js';
+  import {selectContext} from './context.svelte.js';
 
   let {children, ...props}: SelectIndicatorProps = $props();
 
-  let context = useSelectContext();
+  let context = selectContext.get();
 
   let attrs = $derived(mergeProps(props, context.getIndicatorProps()));
 </script>

package/dist/select/indicator.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface SelectIndicatorProps extends HtmlIngredientProps<'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;

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

@@ -1,28 +1,21 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface SelectItemGroupLabelProps
-    extends HtmlIngredientProps<'span'> {}
+  export interface SelectItemGroupLabelProps extends HtmlProps<'span'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {
-    useSelectContext,
-    useSelectItemGroupPropsContext,
-  } from './context.svelte.js';
+  import {selectContext, selectItemGroupPropsContext} from './context.svelte.js';
 
   let {children, ...props}: SelectItemGroupLabelProps = $props();
 
-  let context = useSelectContext();
+  let context = selectContext.get();
 
-  let itemGroupProps = useSelectItemGroupPropsContext();
+  let itemGroupProps = selectItemGroupPropsContext.get();
 
   let attrs = $derived(
-    mergeProps(
-      props,
-      context.getItemGroupLabelProps({htmlFor: itemGroupProps.id}),
-    ),
+    mergeProps(props, context.getItemGroupLabelProps({htmlFor: itemGroupProps.id})),
   );
 </script>
 

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface SelectItemGroupLabelProps extends HtmlIngredientProps<'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;

package/dist/select/item-group.svelte

@@ -1,30 +1,29 @@
-<script lang="ts" context="module">
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
   import type {ItemGroupProps} from '@zag-js/select';
 
   export interface SelectItemGroupProps
-    extends Assign<HtmlIngredientProps<'div'>, Omit<ItemGroupProps, 'id'>> {}
+    extends Assign<HtmlProps<'div'>, Omit<ItemGroupProps, 'id'>> {}
 </script>
 
 <script lang="ts">
   import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
-  import {
-    setSelectItemGroupPropsContext,
-    useSelectContext,
-  } from './context.svelte.js';
+  import {selectContext, selectItemGroupPropsContext} from './context.svelte.js';
 
   let {id, children, ...props}: SelectItemGroupProps = $props();
 
-  let context = useSelectContext();
+  let context = selectContext.get();
 
   let uid = createUniqueId();
 
-  let attrs = $derived(
-    mergeProps(props, context.getItemGroupProps({id: id ?? uid})),
-  );
+  let itemGroupProps = $derived({
+    id: id ?? uid,
+  });
 
-  setSelectItemGroupPropsContext({id: id ?? uid});
+  let attrs = $derived(mergeProps(props, context.getItemGroupProps(itemGroupProps)));
+
+  selectItemGroupPropsContext.set(() => itemGroupProps);
 </script>
 
 <div {...attrs}>

package/dist/select/item-group.svelte.d.ts

@@ -1,7 +1,3 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
-import type { ItemGroupProps } from '@zag-js/select';
-export interface SelectItemGroupProps extends Assign<HtmlIngredientProps<'div'>, Omit<ItemGroupProps, 'id'>> {
-}
 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;

package/dist/select/item-indicator.svelte

@@ -1,26 +1,20 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface SelectItemIndicatorProps
-    extends HtmlIngredientProps<'span'> {}
+  export interface SelectItemIndicatorProps extends HtmlProps<'span'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {
-    useSelectContext,
-    useSelectItemPropsContext,
-  } from './context.svelte.js';
+  import {selectContext, selectItemPropsContext} from './context.svelte.js';
 
   let {children, ...props}: SelectItemIndicatorProps = $props();
 
-  let context = useSelectContext();
+  let context = selectContext.get();
 
-  let itemProps = useSelectItemPropsContext();
+  let itemProps = selectItemPropsContext.get();
 
-  let attrs = $derived(
-    mergeProps(props, context.getItemIndicatorProps(itemProps)),
-  );
+  let attrs = $derived(mergeProps(props, context.getItemIndicatorProps(itemProps)));
 </script>
 
 <span {...attrs}>

package/dist/select/item-indicator.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface SelectItemIndicatorProps extends HtmlIngredientProps<'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;

package/dist/select/item-text.svelte

@@ -1,21 +1,18 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface SelectItemTextProps extends HtmlIngredientProps<'span'> {}
+  export interface SelectItemTextProps extends HtmlProps<'span'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {
-    useSelectContext,
-    useSelectItemPropsContext,
-  } from './context.svelte.js';
+  import {selectContext, selectItemPropsContext} from './context.svelte.js';
 
   let {children, ...props}: SelectItemTextProps = $props();
 
-  let context = useSelectContext();
+  let context = selectContext.get();
 
-  let itemProps = useSelectItemPropsContext();
+  let itemProps = selectItemPropsContext.get();
 
   let attrs = $derived(mergeProps(props, context.getItemTextProps(itemProps)));
 </script>

package/dist/select/item-text.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface SelectItemTextProps extends HtmlIngredientProps<'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;

package/dist/select/item.svelte

@@ -1,46 +1,30 @@
-<script lang="ts" context="module">
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/select';
   import type {Snippet} from 'svelte';
 
-  export interface SelectItemProps
-    extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, ItemProps> {
+  export interface SelectItemProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
     children?: Snippet<[state: ItemState]>;
   }
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {
-    setSelectItemPropsContext,
-    useSelectContext,
-  } from './context.svelte.js';
+  import {selectContext, selectItemPropsContext} from './context.svelte.js';
 
   let {item, persistFocus, children, ...props}: SelectItemProps = $props();
 
-  let context = useSelectContext();
-
-  let state = $derived(
-    context.getItemState({
-      item,
-      persistFocus,
-    }),
-  );
-
-  let attrs = $derived(
-    mergeProps(
-      props,
-      context.getItemProps({
-        item,
-        persistFocus,
-      }),
-    ),
-  );
-
-  setSelectItemPropsContext({
+  let context = selectContext.get();
+
+  let itemProps = $derived({
     item,
     persistFocus,
   });
+
+  let state = $derived(context.getItemState(itemProps));
+  let attrs = $derived(mergeProps(props, context.getItemProps(itemProps)));
+
+  selectItemPropsContext.set(() => itemProps);
 </script>
 
 <div {...attrs}>