ui-ingredients 0.0.19 → 0.0.21

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

@@ -10,14 +10,14 @@ 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 locale = getLocaleContext();
+    const environment = getEnvironmentContext();
     const [state, send] = useMachine(select.machine({
         ...props,
         id: props.id ?? createUniqueId(),
-        dir: localeContext?.dir,
+        dir: locale?.dir,
         open: props.defaultOpen,
-        getRootNode: environmentContext?.getRootNode,
+        getRootNode: environment?.getRootNode,
         collection,
         'open.controlled': props.open != null,
     }));

package/dist/select/hidden-select.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: SelectHiddenSelectProps = $props();
 
-  let context = selectContext.get();
+  let select = selectContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getHiddenSelectProps()));
+  let attrs = $derived(mergeProps(props, select.getHiddenSelectProps()));
 </script>
 
 <select {...attrs}>

package/dist/select/indicator.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: SelectIndicatorProps = $props();
 
-  let context = selectContext.get();
+  let select = selectContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getIndicatorProps()));
+  let attrs = $derived(mergeProps(props, select.getIndicatorProps()));
 </script>
 
 <span {...attrs}>

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

@@ -10,12 +10,11 @@
 
   let {children, ...props}: SelectItemGroupLabelProps = $props();
 
-  let context = selectContext.get();
-
+  let select = selectContext.get();
   let itemGroupProps = selectItemGroupPropsContext.get();
 
   let attrs = $derived(
-    mergeProps(props, context.getItemGroupLabelProps({htmlFor: itemGroupProps.id})),
+    mergeProps(props, select.getItemGroupLabelProps({htmlFor: itemGroupProps.id})),
   );
 </script>
 

package/dist/select/item-group.svelte

@@ -13,7 +13,7 @@
 
   let {id, children, ...props}: SelectItemGroupProps = $props();
 
-  let context = selectContext.get();
+  let select = selectContext.get();
 
   let uid = createUniqueId();
 
@@ -21,7 +21,7 @@
     id: id ?? uid,
   });
 
-  let attrs = $derived(mergeProps(props, context.getItemGroupProps(itemGroupProps)));
+  let attrs = $derived(mergeProps(props, select.getItemGroupProps(itemGroupProps)));
 
   selectItemGroupPropsContext.set(() => itemGroupProps);
 </script>

package/dist/select/item-indicator.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: SelectItemIndicatorProps = $props();
 
-  let context = selectContext.get();
-
+  let select = selectContext.get();
   let itemProps = selectItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemIndicatorProps(itemProps)));
+  let attrs = $derived(mergeProps(props, select.getItemIndicatorProps(itemProps)));
 </script>
 
 <span {...attrs}>

package/dist/select/item-text.svelte

@@ -10,17 +10,16 @@
 
   let {children, ...props}: SelectItemTextProps = $props();
 
-  let context = selectContext.get();
-
+  let select = selectContext.get();
   let itemProps = selectItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemTextProps(itemProps)));
+  let attrs = $derived(mergeProps(props, select.getItemTextProps(itemProps)));
 </script>
 
 <span {...attrs}>
   {#if children}
     {@render children?.()}
   {:else}
-    {context.collection.stringifyItem(itemProps.item)}
+    {select.collection.stringifyItem(itemProps.item)}
   {/if}
 </span>

package/dist/select/item.svelte

@@ -14,15 +14,14 @@
 
   let {item, persistFocus, children, ...props}: SelectItemProps = $props();
 
-  let context = selectContext.get();
-
+  let select = selectContext.get();
   let itemProps = $derived({
     item,
     persistFocus,
   });
 
-  let state = $derived(context.getItemState(itemProps));
-  let attrs = $derived(mergeProps(props, context.getItemProps(itemProps)));
+  let state = $derived(select.getItemState(itemProps));
+  let attrs = $derived(mergeProps(props, select.getItemProps(itemProps)));
 
   selectItemPropsContext.set(() => itemProps);
 </script>

package/dist/select/label.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: SelectLabelProps = $props();
 
-  let context = selectContext.get();
+  let select = selectContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getLabelProps()));
+  let attrs = $derived(mergeProps(props, select.getLabelProps()));
 </script>
 
 <label {...attrs}>

package/dist/select/list.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: SelectListProps = $props();
 
-  let context = selectContext.get();
+  let select = selectContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getListProps()));
+  let attrs = $derived(mergeProps(props, select.getListProps()));
 </script>
 
 <div {...attrs}>

package/dist/select/positioner.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: SelectPositionerProps = $props();
 
-  let context = selectContext.get();
+  let select = selectContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getPositionerProps()));
+  let attrs = $derived(mergeProps(props, select.getPositionerProps()));
 </script>
 
 <div {...attrs}>

package/dist/select/root.svelte

@@ -5,7 +5,7 @@
 
   export interface SelectProps<T>
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateSelectProps<T>> {
-    children?: Snippet<[api: CreateSelectReturn]>;
+    children?: Snippet<[select: CreateSelectReturn]>;
   }
 </script>
 
@@ -47,7 +47,7 @@
     ...props
   }: SelectProps<T> = $props();
 
-  let context = createSelect({
+  let select = createSelect({
     id,
     ids,
     form,
@@ -78,11 +78,11 @@
     scrollToIndexFn,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, select.getRootProps()));
 
-  selectContext.set(context);
+  selectContext.set(select);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(select)}
 </div>

package/dist/select/trigger.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: SelectTriggerProps = $props();
 
-  let context = selectContext.get();
+  let select = selectContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getTriggerProps()));
+  let attrs = $derived(mergeProps(props, select.getTriggerProps()));
 </script>
 
 <button type="button" {...attrs}>

package/dist/select/value-text.svelte

@@ -10,16 +10,16 @@
 
   let {children, placeholder, ...props}: SelectValueTextProps = $props();
 
-  let context = selectContext.get();
+  let select = selectContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getValueTextProps()));
+  let attrs = $derived(mergeProps(props, select.getValueTextProps()));
 </script>
 
 <span {...attrs}>
   {#if children}
     {@render children?.()}
-  {:else if context.value.length}
-    {context.valueAsString}
+  {:else if select.value.length}
+    {select.valueAsString}
   {:else}
     {placeholder}
   {/if}

package/dist/slider/control.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: SliderControlProps = $props();
 
-  let context = sliderContext.get();
+  let slider = sliderContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getControlProps()));
+  let attrs = $derived(mergeProps(props, slider.getControlProps()));
 </script>
 
 <div {...attrs}>

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

@@ -4,13 +4,13 @@ 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 localeContext = getLocaleContext();
-    const environmentContext = getEnvironmentContext();
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
     const [state, send] = useMachine(slider.machine({
         ...props,
         id: props.id ?? createUniqueId(),
-        dir: localeContext?.dir,
-        getRootNode: environmentContext?.getRootNode,
+        dir: locale?.dir,
+        getRootNode: environment?.getRootNode,
     }));
     const api = $derived(reflect(() => slider.connect(state, send, normalizeProps)));
     return api;

package/dist/slider/hidden-input.svelte

@@ -10,11 +10,10 @@
 
   let {...props}: SliderHiddenInputProps = $props();
 
-  let context = sliderContext.get();
-
+  let slider = sliderContext.get();
   let thumbProps = sliderThumbPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getHiddenInputProps(thumbProps)));
+  let attrs = $derived(mergeProps(props, slider.getHiddenInputProps(thumbProps)));
 </script>
 
 <input {...attrs} />

package/dist/slider/label.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: SliderLabelProps = $props();
 
-  let context = sliderContext.get();
+  let slider = sliderContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getLabelProps()));
+  let attrs = $derived(mergeProps(props, slider.getLabelProps()));
 </script>
 
 <label {...attrs}>

package/dist/slider/marker-group.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: SliderMarkerGroupProps = $props();
 
-  let context = sliderContext.get();
+  let slider = sliderContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getMarkerGroupProps()));
+  let attrs = $derived(mergeProps(props, slider.getMarkerGroupProps()));
 </script>
 
 <div {...attrs}>

package/dist/slider/marker.svelte

@@ -11,12 +11,12 @@
 
   let {value, children, ...props}: SliderMarkerProps = $props();
 
-  let context = sliderContext.get();
+  let slider = sliderContext.get();
 
   let attrs = $derived(
     mergeProps(
       props,
-      context.getMarkerProps({
+      slider.getMarkerProps({
         value,
       }),
     ),

package/dist/slider/range.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: SliderRangeProps = $props();
 
-  let context = sliderContext.get();
+  let slider = sliderContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getRangeProps()));
+  let attrs = $derived(mergeProps(props, slider.getRangeProps()));
 </script>
 
 <div {...attrs}>

package/dist/slider/root.svelte

@@ -5,7 +5,7 @@
 
   export interface SliderProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateSliderProps> {
-    children?: Snippet<[api: CreateSliderReturn]>;
+    children?: Snippet<[slider: CreateSliderReturn]>;
   }
 </script>
 
@@ -41,7 +41,7 @@
     ...props
   }: SliderProps = $props();
 
-  let context = createSlider({
+  let slider = createSlider({
     id,
     ids,
     max,
@@ -66,11 +66,11 @@
     getAriaValueText,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, slider.getRootProps()));
 
-  sliderContext.set(context);
+  sliderContext.set(slider);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(slider)}
 </div>

package/dist/slider/thumb.svelte

@@ -11,14 +11,13 @@
 
   let {name, index, children, ...props}: SliderThumbProps = $props();
 
-  let context = sliderContext.get();
-
+  let slider = sliderContext.get();
   let thumbProps = $derived({
     name,
     index,
   });
 
-  let attrs = $derived(mergeProps(props, context.getThumbProps(thumbProps)));
+  let attrs = $derived(mergeProps(props, slider.getThumbProps(thumbProps)));
 
   sliderThumbPropsContext.set(() => thumbProps);
 </script>

package/dist/slider/track.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: SliderTrackProps = $props();
 
-  let context = sliderContext.get();
+  let slider = sliderContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getTrackProps()));
+  let attrs = $derived(mergeProps(props, slider.getTrackProps()));
 </script>
 
 <div {...attrs}>

package/dist/slider/value-text.svelte

@@ -10,15 +10,15 @@
 
   let {children, ...props}: SliderValueTextProps = $props();
 
-  let context = sliderContext.get();
+  let slider = sliderContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getValueTextProps()));
+  let attrs = $derived(mergeProps(props, slider.getValueTextProps()));
 </script>
 
 <span {...attrs}>
   {#if children}
     {@render children()}
   {:else}
-    {context.value.join(', ')}
+    {slider.value.join(', ')}
   {/if}
 </span>

package/dist/steps/content.svelte

@@ -11,9 +11,9 @@
 
   let {index, children, ...props}: StepsContentProps = $props();
 
-  let context = stepsContext.get();
+  let steps = stepsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getContentProps({index})));
+  let attrs = $derived(mergeProps(props, steps.getContentProps({index})));
 </script>
 
 <div {...attrs}>

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

@@ -4,13 +4,13 @@ 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 localeContext = getLocaleContext();
-    const environmentContext = getEnvironmentContext();
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
     const [state, send] = useMachine(steps.machine({
         ...props,
         id: props.id ?? createUniqueId(),
-        dir: localeContext?.dir,
-        getRootNode: environmentContext?.getRootNode,
+        dir: locale?.dir,
+        getRootNode: environment?.getRootNode,
     }));
     const api = $derived(reflect(() => steps.connect(state, send, normalizeProps)));
     return api;

package/dist/steps/indicator.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: StepsIndicatorProps = $props();
 
-  let context = stepsContext.get();
-
+  let steps = stepsContext.get();
   let itemProps = stepsItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getIndicatorProps(itemProps)));
+  let attrs = $derived(mergeProps(props, steps.getIndicatorProps(itemProps)));
 </script>
 
 <div {...attrs}>

package/dist/steps/item.svelte

@@ -14,14 +14,13 @@
 
   let {index, children, ...props}: StepsItemProps = $props();
 
-  let context = stepsContext.get();
-
+  let steps = stepsContext.get();
   let itemProps = $derived({
     index,
   });
 
-  let state = $derived(context.getItemState(itemProps));
-  let attrs = $derived(mergeProps(props, context.getItemProps(itemProps)));
+  let state = $derived(steps.getItemState(itemProps));
+  let attrs = $derived(mergeProps(props, steps.getItemProps(itemProps)));
 
   stepsItemPropsContext.set(() => itemProps);
 </script>

package/dist/steps/list.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: StepsListProps = $props();
 
-  let context = stepsContext.get();
+  let steps = stepsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getListProps()));
+  let attrs = $derived(mergeProps(props, steps.getListProps()));
 </script>
 
 <div {...attrs}>

package/dist/steps/next-trigger.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: StepsNextTriggerProps = $props();
 
-  let context = stepsContext.get();
+  let steps = stepsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getNextTriggerProps()));
+  let attrs = $derived(mergeProps(props, steps.getNextTriggerProps()));
 </script>
 
 <button type="button" {...attrs}>

package/dist/steps/prev-trigger.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: StepsPrevTriggerProps = $props();
 
-  let context = stepsContext.get();
+  let steps = stepsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getPrevTriggerProps()));
+  let attrs = $derived(mergeProps(props, steps.getPrevTriggerProps()));
 </script>
 
 <button type="button" {...attrs}>

package/dist/steps/progress.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: StepsProgressProps = $props();
 
-  let context = stepsContext.get();
+  let steps = stepsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getProgressProps()));
+  let attrs = $derived(mergeProps(props, steps.getProgressProps()));
 </script>
 
 <div {...attrs}>

package/dist/steps/root.svelte

@@ -4,7 +4,7 @@
   import type {CreateStepsProps, CreateStepsReturn} from './create-steps.svelte.js';
 
   export interface StepsProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateStepsProps> {
-    children?: Snippet<[api: CreateStepsReturn]>;
+    children?: Snippet<[steps: CreateStepsReturn]>;
   }
 </script>
 
@@ -26,7 +26,7 @@
     ...props
   }: StepsProps = $props();
 
-  let context = createSteps({
+  let steps = createSteps({
     id,
     ids,
     step,
@@ -37,11 +37,11 @@
     onStepComplete,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, steps.getRootProps()));
 
-  stepsContext.set(context);
+  stepsContext.set(steps);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(steps)}
 </div>

package/dist/steps/separator.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: StepsSeparatorProps = $props();
 
-  let context = stepsContext.get();
-
+  let steps = stepsContext.get();
   let itemProps = stepsItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getSeparatorProps(itemProps)));
+  let attrs = $derived(mergeProps(props, steps.getSeparatorProps(itemProps)));
 </script>
 
 <div {...attrs}>

package/dist/steps/trigger.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: StepsTriggerProps = $props();
 
-  let context = stepsContext.get();
-
+  let steps = stepsContext.get();
   let itemProps = stepsItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getTriggerProps(itemProps)));
+  let attrs = $derived(mergeProps(props, steps.getTriggerProps(itemProps)));
 </script>
 
 <button type="button" {...attrs}>

package/dist/switch/control.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: SwitchControlProps = $props();
 
-  let context = switchContext.get();
+  let switch$ = switchContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getControlProps()));
+  let attrs = $derived(mergeProps(props, switch$.getControlProps()));
 </script>
 
 <div {...attrs}>

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

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