ui-ingredients 0.0.20 → 0.0.22

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/slider.d.ts

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/slider';
 export { default as Control } from './control.svelte';
 export { default as HiddenInput } from './hidden-input.svelte';
 export { default as Label } from './label.svelte';

package/dist/slider/slider.js

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/slider';
 export { default as Control } from './control.svelte';
 export { default as HiddenInput } from './hidden-input.svelte';
 export { default as Label } from './label.svelte';

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/index.d.ts

@@ -1,4 +1,4 @@
-export { anatomy as stepsAnatomy } from '@zag-js/steps';
+export * as Steps from './steps.js';
 export type { StepsContentProps } from './content.svelte';
 export type { StepsIndicatorProps } from './indicator.svelte';
 export type { StepsItemProps } from './item.svelte';
@@ -8,5 +8,4 @@ export type { StepsPrevTriggerProps } from './prev-trigger.svelte';
 export type { StepsProgressProps } from './progress.svelte';
 export type { StepsProps } from './root.svelte';
 export type { StepsSeparatorProps } from './separator.svelte';
-export * as Steps from './steps.js';
 export type { StepsTriggerProps } from './trigger.svelte';

package/dist/steps/index.js

@@ -1,2 +1 @@
-export { anatomy as stepsAnatomy } from '@zag-js/steps';
 export * as Steps from './steps.js';

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/steps.d.ts

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/steps';
 export { default as Content } from './content.svelte';
 export { default as Indicator } from './indicator.svelte';
 export { default as Item } from './item.svelte';

package/dist/steps/steps.js

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/steps';
 export { default as Content } from './content.svelte';
 export { default as Indicator } from './indicator.svelte';
 export { default as Item } from './item.svelte';

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;

package/dist/switch/hidden-input.svelte

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

package/dist/switch/index.d.ts

@@ -1,7 +1,6 @@
-export { anatomy as switchAnatomy } from '@zag-js/switch';
+export * as Switch from './switch.js';
 export type { SwitchControlProps } from './control.svelte';
 export type { SwitchHiddenInputProps } from './hidden-input.svelte';
 export type { SwitchLabelProps } from './label.svelte';
 export type { SwitchProps } from './root.svelte';
-export * as Switch from './switch.js';
 export type { SwitchThumbProps } from './thumb.svelte';

package/dist/switch/index.js

@@ -1,2 +1 @@
-export { anatomy as switchAnatomy } from '@zag-js/switch';
 export * as Switch from './switch.js';

package/dist/switch/label.svelte

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

package/dist/switch/root.svelte

@@ -5,7 +5,7 @@
 
   export interface SwitchProps
     extends Assign<Omit<HtmlProps<'label'>, 'children'>, CreateSwitchProps> {
-    children?: Snippet<[api: CreateSwitchReturn]>;
+    children?: Snippet<[switch$: CreateSwitchReturn]>;
   }
 </script>
 
@@ -31,7 +31,7 @@
     ...props
   }: SwitchProps = $props();
 
-  let context = createSwitch({
+  let switch$ = createSwitch({
     id,
     ids,
     form,
@@ -46,11 +46,11 @@
     onCheckedChange,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, switch$.getRootProps()));
 
-  switchContext.set(context);
+  switchContext.set(switch$);
 </script>
 
 <label {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(switch$)}
 </label>

package/dist/switch/switch.d.ts

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/switch';
 export { default as Control } from './control.svelte';
 export { default as HiddenInput } from './hidden-input.svelte';
 export { default as Label } from './label.svelte';

package/dist/switch/switch.js

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/switch';
 export { default as Control } from './control.svelte';
 export { default as HiddenInput } from './hidden-input.svelte';
 export { default as Label } from './label.svelte';

package/dist/switch/thumb.svelte

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

package/dist/tabs/content.svelte

@@ -11,9 +11,9 @@
 
   let {value, children, ...props}: TabsContentProps = $props();
 
-  let context = tabsContext.get();
+  let tabs = tabsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getContentProps({value})));
+  let attrs = $derived(mergeProps(props, tabs.getContentProps({value})));
 </script>
 
 <div {...attrs}>

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

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

package/dist/tabs/index.d.ts

@@ -1,6 +1,5 @@
-export { anatomy as tabsAnatomy } from '@zag-js/tabs';
+export * as Tabs from './tabs.js';
 export type { TabsContentProps } from './content.svelte';
 export type { TabsListProps } from './list.svelte';
 export type { TabsProps } from './root.svelte';
-export * as Tabs from './tabs.js';
 export type { TabsTriggerProps } from './trigger.svelte';

package/dist/tabs/index.js

@@ -1,2 +1 @@
-export { anatomy as tabsAnatomy } from '@zag-js/tabs';
 export * as Tabs from './tabs.js';

package/dist/tabs/list.svelte

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

package/dist/tabs/root.svelte

@@ -4,7 +4,7 @@
   import type {CreateTabsProps, CreateTabsReturn} from './create-tabs.svelte.js';
 
   export interface TabsProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateTabsProps> {
-    children?: Snippet<[api: CreateTabsReturn]>;
+    children?: Snippet<[tabs: CreateTabsReturn]>;
   }
 </script>
 
@@ -28,7 +28,7 @@
     ...props
   }: TabsProps = $props();
 
-  let context = createTabs({
+  let tabs = createTabs({
     id,
     ids,
     value: $state.snapshot(value),
@@ -41,11 +41,11 @@
     onValueChange,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, tabs.getRootProps()));
 
-  tabsContext.set(context);
+  tabsContext.set(tabs);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(tabs)}
 </div>

package/dist/tabs/tabs.d.ts

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/tabs';
 export { default as Content } from './content.svelte';
 export { default as List } from './list.svelte';
 export { default as Root } from './root.svelte';

package/dist/tabs/tabs.js

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/tabs';
 export { default as Content } from './content.svelte';
 export { default as List } from './list.svelte';
 export { default as Root } from './root.svelte';

package/dist/tabs/trigger.svelte

@@ -11,12 +11,12 @@
 
   let {value, disabled, children, ...props}: TabsTriggerProps = $props();
 
-  let context = tabsContext.get();
+  let tabs = tabsContext.get();
 
   let attrs = $derived(
     mergeProps(
       props,
-      context.getTriggerProps({
+      tabs.getTriggerProps({
         value,
         disabled,
       }),

package/dist/tags-input/clear-trigger.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: TagsInputClearTriggerProps = $props();
 
-  let context = tagsInputContext.get();
+  let tagsInput = tagsInputContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getClearTriggerProps()));
+  let attrs = $derived(mergeProps(props, tagsInput.getClearTriggerProps()));
 </script>
 
 <button type="button" {...attrs}>

package/dist/tags-input/control.svelte

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

package/dist/tags-input/create-tags-input.svelte.js

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

package/dist/tags-input/hidden-input.svelte

@@ -10,9 +10,9 @@
 
   let {...props}: TagsInputHiddenInputProps = $props();
 
-  let context = tagsInputContext.get();
+  let tagsInput = tagsInputContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getHiddenInputProps()));
+  let attrs = $derived(mergeProps(props, tagsInput.getHiddenInputProps()));
 </script>
 
 <input {...attrs} />

package/dist/tags-input/index.d.ts

@@ -1,4 +1,4 @@
-export { anatomy as tagsInputAnatomy } from '@zag-js/tags-input';
+export * as TagsInput from './tags-input.js';
 export type { TagsInputClearTriggerProps } from './clear-trigger.svelte';
 export type { TagsInputControlProps } from './control.svelte';
 export type { TagsInputHiddenInputProps } from './hidden-input.svelte';
@@ -10,4 +10,3 @@ export type { TagsInputItemTextProps } from './item-text.svelte';
 export type { TagsInputItemProps } from './item.svelte';
 export type { TagsInputLabelProps } from './label.svelte';
 export type { TagsInputProps } from './root.svelte';
-export * as TagsInput from './tags-input.js';