ui-ingredients 0.0.19 → 0.0.21

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/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/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/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/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/input.svelte

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

package/dist/tags-input/item-delete-trigger.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: TagsInputItemDeleteTriggerProps = $props();
 
-  let context = tagsInputContext.get();
-
+  let tagsInput = tagsInputContext.get();
   let itemProps = tagsInputItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemDeleteTriggerProps(itemProps)));
+  let attrs = $derived(mergeProps(props, tagsInput.getItemDeleteTriggerProps(itemProps)));
 </script>
 
 <button type="button" {...attrs}>

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

@@ -10,11 +10,10 @@
 
   let {...props}: TagsInputItemInputProps = $props();
 
-  let context = tagsInputContext.get();
-
+  let tagsInput = tagsInputContext.get();
   let itemProps = tagsInputItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemInputProps(itemProps)));
+  let attrs = $derived(mergeProps(props, tagsInput.getItemInputProps(itemProps)));
 </script>
 
 <input {...attrs} />

package/dist/tags-input/item-preview.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: TagsInputItemPreviewProps = $props();
 
-  let context = tagsInputContext.get();
-
+  let tagsInput = tagsInputContext.get();
   let itemProps = tagsInputItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemPreviewProps(itemProps)));
+  let attrs = $derived(mergeProps(props, tagsInput.getItemPreviewProps(itemProps)));
 </script>
 
 <div {...attrs}>

package/dist/tags-input/item-text.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: TagsInputItemTextProps = $props();
 
-  let context = tagsInputContext.get();
-
+  let tagsInput = tagsInputContext.get();
   let itemProps = tagsInputItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemTextProps(itemProps)));
+  let attrs = $derived(mergeProps(props, tagsInput.getItemTextProps(itemProps)));
 </script>
 
 <span {...attrs}>

package/dist/tags-input/item.svelte

@@ -22,16 +22,15 @@
     ...props
   }: TagsInputItemProps = $props();
 
-  let context = tagsInputContext.get();
-
+  let tagsInput = tagsInputContext.get();
   let itemProps = $derived({
     index,
     value,
     disabled,
   });
 
-  let state = $derived(context.getItemState(itemProps));
-  let attrs = $derived(mergeProps(props, context.getItemProps(itemProps)));
+  let state = $derived(tagsInput.getItemState(itemProps));
+  let attrs = $derived(mergeProps(props, tagsInput.getItemProps(itemProps)));
 
   tagsInputItemPropsContext.set(() => itemProps);
 </script>

package/dist/tags-input/label.svelte

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

package/dist/tags-input/root.svelte

@@ -5,7 +5,7 @@
 
   export interface TagsInputProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateTagsInputProps> {
-    children?: Snippet<[api: CreateTagsInputReturn]>;
+    children?: Snippet<[tagsInput: CreateTagsInputReturn]>;
   }
 </script>
 
@@ -46,7 +46,7 @@
     ...props
   }: TagsInputProps = $props();
 
-  let context = createTagsInputt({
+  let tagsInput = createTagsInputt({
     id,
     ids,
     max,
@@ -76,11 +76,11 @@
     onPointerDownOutside,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, tagsInput.getRootProps()));
 
-  tagsInputContext.set(context);
+  tagsInputContext.set(tagsInput);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(tagsInput)}
 </div>

package/dist/timer/action-trigger.svelte

@@ -12,9 +12,9 @@
 
   let {action, children, ...props}: TimerActionTriggerProps = $props();
 
-  let context = timerContext.get();
+  let timer = timerContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getActionTriggerProps({action})));
+  let attrs = $derived(mergeProps(props, timer.getActionTriggerProps({action})));
 </script>
 
 <button type="button" {...attrs}>

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

@@ -3,11 +3,11 @@ import { createUniqueId } from '../utils.svelte.js';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as timer from '@zag-js/timer';
 export function createTimer(props) {
-    const environmentContext = getEnvironmentContext();
+    const environment = getEnvironmentContext();
     const [state, send] = useMachine(timer.machine({
         ...props,
         id: props.id ?? createUniqueId(),
-        getRootNode: environmentContext?.getRootNode,
+        getRootNode: environment?.getRootNode,
     }));
     const api = $derived(reflect(() => timer.connect(state, send, normalizeProps)));
     return api;

package/dist/timer/item-label.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: TimerItemLabelProps = $props();
 
-  let context = timerContext.get();
-
+  let timer = timerContext.get();
   let itemProps = timerItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemLabelProps(itemProps)));
+  let attrs = $derived(mergeProps(props, timer.getItemLabelProps(itemProps)));
 </script>
 
 <span {...attrs}>

package/dist/timer/item-value.svelte

@@ -10,17 +10,16 @@
 
   let {children, ...props}: TimerItemValueProps = $props();
 
-  let context = timerContext.get();
-
+  let timer = timerContext.get();
   let itemProps = timerItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemValueProps(itemProps)));
+  let attrs = $derived(mergeProps(props, timer.getItemValueProps(itemProps)));
 </script>
 
 <span {...attrs}>
   {#if children}
     {@render children?.()}
   {:else}
-    {context.formattedTime[itemProps.type]}
+    {timer.formattedTime[itemProps.type]}
   {/if}
 </span>

package/dist/timer/item.svelte

@@ -11,13 +11,12 @@
 
   let {type, children, ...props}: TimerItemProps = $props();
 
-  let context = timerContext.get();
-
+  let timer = timerContext.get();
   let itemProps = $derived({
     type,
   });
 
-  let attrs = $derived(mergeProps(props, context.getItemProps(itemProps)));
+  let attrs = $derived(mergeProps(props, timer.getItemProps(itemProps)));
 
   timerItemPropsContext.set(() => itemProps);
 </script>

package/dist/timer/root.svelte

@@ -4,7 +4,7 @@
   import type {CreateTimerProps, CreateTimerReturn} from './create-timer.svelte.js';
 
   export interface TimerProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateTimerProps> {
-    children?: Snippet<[api: CreateTimerReturn]>;
+    children?: Snippet<[timer: CreateTimerReturn]>;
   }
 </script>
 
@@ -26,7 +26,7 @@
     ...props
   }: TimerProps = $props();
 
-  let context = createTimer({
+  let timer = createTimer({
     id,
     startMs,
     targetMs,
@@ -37,11 +37,11 @@
     onComplete,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, timer.getRootProps()));
 
-  timerContext.set(context);
+  timerContext.set(timer);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(timer)}
 </div>

package/dist/timer/separator.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: TimerSeparatorProps = $props();
 
-  let context = timerContext.get();
+  let timer = timerContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getSeparatorProps()));
+  let attrs = $derived(mergeProps(props, timer.getSeparatorProps()));
 </script>
 
 <span {...attrs}>

package/dist/toast/create-toaster.svelte.js

@@ -4,13 +4,13 @@ import { createUniqueId } from '../utils.svelte.js';
 import { normalizeProps, reflect } from '@zag-js/svelte';
 import * as toast from '@zag-js/toast';
 export function createToaster(props) {
-    const localContext = getLocaleContext();
-    const environmentContext = getEnvironmentContext();
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
     const machine = $derived(toast.group.machine({
         ...props,
         id: props?.id ?? createUniqueId(),
-        dir: localContext?.dir,
-        getRootNode: environmentContext?.getRootNode,
+        dir: locale?.dir,
+        getRootNode: environment?.getRootNode,
     }));
     const api = $derived(reflect(() => ({
         machine,

package/dist/toggle-group/create-toggle-group.svelte.js

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

package/dist/toggle-group/item.svelte

@@ -15,15 +15,14 @@
 
   let {value, disabled, children, ...props}: ToggleGroupItemProps = $props();
 
-  let context = toggleGroupContext.get();
-
+  let toggleGroup = toggleGroupContext.get();
   let itemProps = $derived({
     value,
     disabled,
   });
 
-  let state = $derived(context.getItemState(itemProps));
-  let attrs = $derived(mergeProps(props, context.getItemProps(itemProps)));
+  let state = $derived(toggleGroup.getItemState(itemProps));
+  let attrs = $derived(mergeProps(props, toggleGroup.getItemProps(itemProps)));
 </script>
 
 <button type="button" {...attrs}>

package/dist/toggle-group/root.svelte

@@ -31,7 +31,7 @@
     ...props
   }: ToggleGroupProps = $props();
 
-  let context = createToggleGroup({
+  let toggleGroup = createToggleGroup({
     id,
     ids,
     value: $state.snapshot(value),
@@ -43,11 +43,11 @@
     onValueChange,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, toggleGroup.getRootProps()));
 
-  toggleGroupContext.set(context);
+  toggleGroupContext.set(toggleGroup);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(toggleGroup)}
 </div>

package/dist/tooltip/arrow-tip.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: TooltipArrowTipProps = $props();
 
-  let context = tooltipContext.get();
+  let tooltip = tooltipContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getArrowTipProps()));
+  let attrs = $derived(mergeProps(props, tooltip.getArrowTipProps()));
 </script>
 
 <div {...attrs}>

package/dist/tooltip/arrow.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: TooltipArrowProps = $props();
 
-  let context = tooltipContext.get();
+  let tooltip = tooltipContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getArrowProps()));
+  let attrs = $derived(mergeProps(props, tooltip.getArrowProps()));
 </script>
 
 <div {...attrs}>

package/dist/tooltip/content.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: TooltipContentProps = $props();
 
-  let context = tooltipContext.get();
+  let tooltip = tooltipContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getContentProps()));
+  let attrs = $derived(mergeProps(props, tooltip.getContentProps()));
 </script>
 
 <div {...attrs}>

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

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

package/dist/tooltip/positioner.svelte

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