ui-ingredients 0.0.16 → 0.0.17

package/dist/segment-group/item-hidden-input.svelte.d.ts

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

@@ -1,26 +1,26 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
-  export interface SegmentGroupItemTextProps
-    extends HtmlIngredientProps<'span'> {}
+  export interface SegmentGroupItemTextProps extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">
+  import {ensureStyleIsString} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
-  import {
-    useSegmentGroupContext,
-    useSegmentGroupItemPropsContext,
-  } from './context.svelte.js';
+  import {parts} from './anatomy.js';
+  import {segmentGroupContext, segmentGroupItemPropsContext} from './context.svelte.js';
 
   let {children, ...props}: SegmentGroupItemTextProps = $props();
 
-  let context = useSegmentGroupContext();
+  let context = segmentGroupContext.get();
 
-  let itemProps = useSegmentGroupItemPropsContext();
+  let itemProps = segmentGroupItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemTextProps(itemProps)));
+  let attrs = $derived(
+    mergeProps(props, context.getItemTextProps(itemProps), parts.itemText.attrs),
+  );
 </script>
 
-<span {...attrs}>
+<span {...ensureStyleIsString(attrs)}>
   {@render children?.()}
 </span>

package/dist/segment-group/item-text.svelte.d.ts

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

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/radio-group';
   import type {Snippet} from 'svelte';
@@ -10,11 +10,10 @@
 </script>
 
 <script lang="ts">
+  import {ensureStyleIsString} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
-  import {
-    setSegmentGroupItemPropsContext,
-    useSegmentGroupContext,
-  } from './context.svelte.js';
+  import {parts} from './anatomy.js';
+  import {segmentGroupContext, segmentGroupItemPropsContext} from './context.svelte.js';
 
   let {
     /**/
@@ -25,34 +24,20 @@
     ...props
   }: SegmentGroupItemProps = $props();
 
-  let context = useSegmentGroupContext();
-
-  let state = $derived(
-    context.getItemState({
-      value,
-      invalid,
-      disabled,
-    }),
-  );
-
-  let attrs = $derived(
-    mergeProps(
-      props,
-      context.getItemProps({
-        value,
-        invalid,
-        disabled,
-      }),
-    ),
-  );
-
-  setSegmentGroupItemPropsContext({
+  let context = segmentGroupContext.get();
+
+  let itemProps = $derived({
     value,
     invalid,
     disabled,
   });
+
+  let state = $derived(context.getItemState(itemProps));
+  let attrs = $derived(mergeProps(props, context.getItemProps(itemProps), parts.item.attrs));
+
+  segmentGroupItemPropsContext.set(() => itemProps);
 </script>
 
-<label {...attrs}>
+<label {...ensureStyleIsString(attrs)}>
   {@render children?.(state)}
 </label>

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

@@ -1,9 +1,3 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
-import type { ItemProps, ItemState } from '@zag-js/radio-group';
-import type { Snippet } from 'svelte';
-export interface SegmentGroupItemProps extends Assign<Omit<HtmlIngredientProps<'label'>, 'children'>, ItemProps> {
-    children?: Snippet<[state: ItemState]>;
-}
 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/label.svelte

@@ -1,20 +1,22 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface SegmentGroupLabelProps extends HtmlIngredientProps<'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,29 +1,28 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} 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'>
+      Omit<CreateSegmentGroupProps, 'id'>
     > {
-    children?: Snippet<[context: CreateSegmentGroupContextReturn]>;
+    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 {getEnvironmentContext} from '../environment-provider/index.js';
+  import {getLocaleContext} from '../locale-provider/index.js';
+  import {createUniqueId, 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,
@@ -41,11 +40,13 @@
     ...props
   }: SegmentGroupProps = $props();
 
-  let localeContext = useLocaleContext();
-  let environmentContext = useEnvironmentContext();
+  let localeContext = getLocaleContext();
+  let environmentContext = getEnvironmentContext();
 
-  let context = createSegmentGroupContext({
-    id: id ?? createUniqueId(),
+  let uid = createUniqueId();
+
+  let context = createSegmentGroup({
+    id: id ?? uid,
     ids,
     dir: dir ?? localeContext?.dir,
     form,
@@ -58,11 +59,11 @@
     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">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
-  export interface SelectClearTriggerProps
-    extends HtmlIngredientProps<'button'> {}
+  export interface SelectClearTriggerProps extends HtmlIngredientProps<'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,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface SelectContentProps extends HtmlIngredientProps<'div'> {}
@@ -6,11 +6,11 @@
 
 <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,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface SelectControlProps extends HtmlIngredientProps<'div'> {}
@@ -6,11 +6,11 @@
 
 <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,10 @@
+import * as select from '@zag-js/select';
+export interface CreateSelectProps<T> extends Omit<select.Context, 'collection'> {
+    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,19 @@
+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 [state, send] = useMachine(select.machine({
+        ...props,
+        collection,
+    }));
+    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">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
-  export interface SelectHiddenSelectProps
-    extends HtmlIngredientProps<'select'> {}
+  export interface SelectHiddenSelectProps extends HtmlIngredientProps<'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,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface SelectIndicatorProps extends HtmlIngredientProps<'span'> {}
@@ -6,11 +6,11 @@
 
 <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">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
-  export interface SelectItemGroupLabelProps
-    extends HtmlIngredientProps<'span'> {}
+  export interface SelectItemGroupLabelProps extends HtmlIngredientProps<'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,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {ItemGroupProps} from '@zag-js/select';
 
@@ -9,22 +9,21 @@
 <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">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
-  export interface SelectItemIndicatorProps
-    extends HtmlIngredientProps<'span'> {}
+  export interface SelectItemIndicatorProps extends HtmlIngredientProps<'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;