ui-ingredients 0.0.17 → 0.0.18

package/dist/segment-group/root.svelte

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

package/dist/select/clear-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface SelectClearTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface SelectClearTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/select/content.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface SelectContentProps extends HtmlIngredientProps<'div'> {}
+  export interface SelectContentProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/select/control.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface SelectControlProps extends HtmlIngredientProps<'div'> {}
+  export interface SelectControlProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,5 +1,6 @@
 import * as select from '@zag-js/select';
-export interface CreateSelectProps<T> extends Omit<select.Context, 'collection'> {
+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;

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

@@ -1,3 +1,6 @@
+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) {
@@ -7,9 +10,15 @@ export function createSelect(props) {
         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),

package/dist/select/hidden-select.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface SelectHiddenSelectProps extends HtmlIngredientProps<'select'> {}
+  export interface SelectHiddenSelectProps extends HtmlProps<'select'> {}
 </script>
 
 <script lang="ts">

package/dist/select/indicator.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface SelectIndicatorProps extends HtmlIngredientProps<'span'> {}
+  export interface SelectIndicatorProps extends HtmlProps<'span'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface SelectItemGroupLabelProps extends HtmlIngredientProps<'span'> {}
+  export interface SelectItemGroupLabelProps extends HtmlProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/select/item-group.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  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">

package/dist/select/item-indicator.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface SelectItemIndicatorProps extends HtmlIngredientProps<'span'> {}
+  export interface SelectItemIndicatorProps extends HtmlProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/select/item-text.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface SelectItemTextProps extends HtmlIngredientProps<'span'> {}
+  export interface SelectItemTextProps extends HtmlProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/select/item.svelte

@@ -1,10 +1,9 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  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>

package/dist/select/label.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface SelectLabelProps extends HtmlIngredientProps<'label'> {}
+  export interface SelectLabelProps extends HtmlProps<'label'> {}
 </script>
 
 <script lang="ts">

package/dist/select/list.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface SelectListProps extends HtmlIngredientProps<'div'> {}
+  export interface SelectListProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/select/positioner.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface SelectPositionerProps extends HtmlIngredientProps<'div'> {}
+  export interface SelectPositionerProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/select/root.svelte

@@ -1,18 +1,15 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateSelectProps, CreateSelectReturn} from './create-select.svelte.js';
 
   export interface SelectProps<T>
-    extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreateSelectProps<T>, 'id'>> {
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateSelectProps<T>> {
     children?: Snippet<[api: CreateSelectReturn]>;
   }
 </script>
 
 <script lang="ts" generics="T">
-  import {getEnvironmentContext} from '../environment-provider/index.js';
-  import {getLocaleContext} from '../locale-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {selectContext} from './context.svelte.js';
   import {createSelect} from './create-select.svelte.js';
@@ -20,11 +17,9 @@
   let {
     id,
     ids,
-    dir,
     form,
     name,
     open,
-    'open.controlled': openControlled,
     value,
     items,
     invalid,
@@ -47,24 +42,16 @@
     onInteractOutside,
     onPointerDownOutside,
     scrollToIndexFn,
-    getRootNode,
     children,
     ...props
   }: SelectProps<T> = $props();
 
-  let localeContext = getLocaleContext();
-  let environmentContext = getEnvironmentContext();
-
-  let uid = createUniqueId();
-
   let context = createSelect({
-    id: id ?? uid,
+    id,
     ids,
-    dir: dir ?? localeContext?.dir,
     form,
     name,
     open,
-    'open.controlled': openControlled,
     value: $state.snapshot(value),
     items,
     invalid,
@@ -87,7 +74,6 @@
     onInteractOutside,
     onPointerDownOutside,
     scrollToIndexFn,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
   });
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));

package/dist/select/trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface SelectTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface SelectTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/select/value-text.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface SelectValueTextProps extends HtmlIngredientProps<'span'> {}
+  export interface SelectValueTextProps extends HtmlProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/slider/control.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface SliderControlProps extends HtmlIngredientProps<'div'> {}
+  export interface SliderControlProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,5 +1,6 @@
 import * as slider from '@zag-js/slider';
-export interface CreateSliderProps extends slider.Context {
+export interface CreateSliderProps extends Omit<slider.Context, 'id' | 'dir' | 'getRootNode'> {
+    id?: string | null;
 }
 export interface CreateSliderReturn extends slider.Api {
 }

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

@@ -1,7 +1,17 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
 import * as slider from '@zag-js/slider';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createSlider(props) {
-    const [state, send] = useMachine(slider.machine(props));
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(slider.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+    }));
     const api = $derived(reflect(() => slider.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/slider/hidden-input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface SliderHiddenInputProps extends HtmlIngredientProps<'input'> {}
+  export interface SliderHiddenInputProps extends HtmlProps<'input'> {}
 </script>
 
 <script lang="ts">

package/dist/slider/label.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface SliderLabelProps extends HtmlIngredientProps<'label'> {}
+  export interface SliderLabelProps extends HtmlProps<'label'> {}
 </script>
 
 <script lang="ts">

package/dist/slider/marker-group.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface SliderMarkerGroupProps extends HtmlIngredientProps<'div'> {}
+  export interface SliderMarkerGroupProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/slider/marker.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {MarkerProps} from '@zag-js/slider';
 
-  export interface SliderMarkerProps extends Assign<HtmlIngredientProps<'span'>, MarkerProps> {}
+  export interface SliderMarkerProps extends Assign<HtmlProps<'span'>, MarkerProps> {}
 </script>
 
 <script lang="ts">

package/dist/slider/range.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface SliderRangeProps extends HtmlIngredientProps<'div'> {}
+  export interface SliderRangeProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/slider/root.svelte

@@ -1,18 +1,15 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateSliderProps, CreateSliderReturn} from './create-slider.svelte.js';
 
   export interface SliderProps
-    extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreateSliderProps, 'id'>> {
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateSliderProps> {
     children?: Snippet<[api: CreateSliderReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {getEnvironmentContext} from '../environment-provider/index.js';
-  import {getLocaleContext} from '../locale-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {sliderContext} from './context.svelte.js';
   import {createSlider} from './create-slider.svelte.js';
@@ -20,7 +17,6 @@
   let {
     id,
     ids,
-    dir,
     max,
     min,
     step,
@@ -41,20 +37,13 @@
     onValueChange,
     onValueChangeEnd,
     getAriaValueText,
-    getRootNode,
     children,
     ...props
   }: SliderProps = $props();
 
-  let localeContext = getLocaleContext();
-  let environmentContext = getEnvironmentContext();
-
-  let uid = createUniqueId();
-
   let context = createSlider({
-    id: id ?? uid,
+    id,
     ids,
-    dir: dir ?? localeContext?.dir,
     max,
     min,
     step,
@@ -75,7 +64,6 @@
     onValueChange,
     onValueChangeEnd,
     getAriaValueText,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
   });
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));

package/dist/slider/thumb.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {ThumbProps} from '@zag-js/slider';
 
-  export interface SliderThumbProps extends Assign<HtmlIngredientProps<'div'>, ThumbProps> {}
+  export interface SliderThumbProps extends Assign<HtmlProps<'div'>, ThumbProps> {}
 </script>
 
 <script lang="ts">

package/dist/slider/track.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface SliderTrackProps extends HtmlIngredientProps<'div'> {}
+  export interface SliderTrackProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/slider/value-text.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface SliderValueTextProps extends HtmlIngredientProps<'span'> {}
+  export interface SliderValueTextProps extends HtmlProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/steps/content.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {ItemProps} from '@zag-js/steps';
 
-  export interface StepsContentProps extends Assign<HtmlIngredientProps<'div'>, ItemProps> {}
+  export interface StepsContentProps extends Assign<HtmlProps<'div'>, ItemProps> {}
 </script>
 
 <script lang="ts">

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

@@ -1,5 +1,6 @@
 import * as steps from '@zag-js/steps';
-export interface CreateStepsProps extends steps.Context {
+export interface CreateStepsProps extends Omit<steps.Context, 'id' | 'dir' | 'getRootNode'> {
+    id?: string | null;
 }
 export interface CreateStepsReturn extends steps.Api {
 }

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

@@ -1,7 +1,17 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
 import * as steps from '@zag-js/steps';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createSteps(props) {
-    const [state, send] = useMachine(steps.machine(props));
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(steps.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+    }));
     const api = $derived(reflect(() => steps.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/steps/indicator.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface StepsIndicatorProps extends HtmlIngredientProps<'div'> {}
+  export interface StepsIndicatorProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/steps/item.svelte

@@ -1,10 +1,9 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/steps';
   import type {Snippet} from 'svelte';
 
-  export interface StepsItemProps
-    extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, ItemProps> {
+  export interface StepsItemProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
     children?: Snippet<[state: ItemState]>;
   }
 </script>

package/dist/steps/list.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface StepsListProps extends HtmlIngredientProps<'div'> {}
+  export interface StepsListProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/steps/next-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface StepsNextTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface StepsNextTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/steps/prev-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface StepsPrevTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface StepsPrevTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/steps/progress.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface StepsProgressProps extends HtmlIngredientProps<'div'> {}
+  export interface StepsProgressProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">