ui-ingredients 0.0.20 → 0.0.21

package/dist/menu/item.svelte

@@ -14,8 +14,7 @@
 
   let {value, valueText, disabled, closeOnSelect, children, ...props}: MenuItemProps = $props();
 
-  let context = menuContext.get();
-
+  let menu = menuContext.get();
   let itemProps = $derived({
     value,
     valueText,
@@ -23,8 +22,8 @@
     closeOnSelect,
   });
 
-  let state = $derived(context.getItemState(itemProps));
-  let attrs = $derived(mergeProps(props, context.getItemProps(itemProps)));
+  let state = $derived(menu.getItemState(itemProps));
+  let attrs = $derived(mergeProps(props, menu.getItemProps(itemProps)));
 </script>
 
 <div {...attrs}>

package/dist/menu/option-item-indicator.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: MenuOptionItemIndicatorProps = $props();
 
-  let context = menuContext.get();
-
+  let menu = menuContext.get();
   let optionItemProps = menuOptionItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemIndicatorProps(optionItemProps)));
+  let attrs = $derived(mergeProps(props, menu.getItemIndicatorProps(optionItemProps)));
 </script>
 
 <span {...attrs}>

package/dist/menu/option-item-text.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: MenuOptionItemTextProps = $props();
 
-  let context = menuContext.get();
-
+  let menu = menuContext.get();
   let optionItemProps = menuOptionItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemTextProps(optionItemProps)));
+  let attrs = $derived(mergeProps(props, menu.getItemTextProps(optionItemProps)));
 </script>
 
 <span {...attrs}>

package/dist/menu/option-item.svelte

@@ -25,8 +25,7 @@
     ...props
   }: MenuOptionItemProps = $props();
 
-  let context = menuContext.get();
-
+  let menu = menuContext.get();
   let itemProps: OptionItemProps = $derived({
     type,
     value,
@@ -37,8 +36,8 @@
     onCheckedChange,
   });
 
-  let state = $derived(context.getOptionItemState(itemProps));
-  let attrs = $derived(mergeProps(props, context.getOptionItemProps(itemProps)));
+  let state = $derived(menu.getOptionItemState(itemProps));
+  let attrs = $derived(mergeProps(props, menu.getOptionItemProps(itemProps)));
 
   menuOptionItemPropsContext.set(() => itemProps);
 </script>

package/dist/menu/positioner.svelte

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

package/dist/menu/root.svelte

@@ -3,7 +3,7 @@
   import {type CreateMenuProps, type CreateMenuReturn} from './create-menu.svelte.js';
 
   export interface MenuRootProps extends CreateMenuProps {
-    children?: Snippet<[api: CreateMenuReturn]>;
+    children?: Snippet<[menu: CreateMenuReturn]>;
   }
 </script>
 
@@ -13,9 +13,9 @@
 
   let {children, ...props}: MenuRootProps = $props();
 
-  let context = createMenu(props);
+  let menu = createMenu(props);
 
-  menuContext.set(context);
+  menuContext.set(menu);
 </script>
 
-{@render children?.(context)}
+{@render children?.(menu)}

package/dist/menu/separator.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: MenuSeparatorProps = $props();
 
-  let context = menuContext.get();
+  let menu = menuContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getSeparatorProps()));
+  let attrs = $derived(mergeProps(props, menu.getSeparatorProps()));
 </script>
 
 <div {...attrs}>

package/dist/menu/trigger-item.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: MenuTriggerItemIndicatorProps = $props();
 
-  let context = menuContext.get();
+  let menu = menuContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getTriggerItemProps(context)));
+  let attrs = $derived(mergeProps(props, menu.getTriggerItemProps(menu)));
 </script>
 
 <button type="button" {...attrs}>

package/dist/menu/trigger.svelte

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

package/dist/number-input/control.svelte

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

package/dist/number-input/create-number-input.svelte.d.ts

@@ -1,5 +1,5 @@
 import * as numberInput from '@zag-js/number-input';
-export interface CreateNumberInputProps extends Omit<numberInput.Context, 'id' | 'dir' | 'locale' | 'getRootNode'> {
+export interface CreateNumberInputProps extends Omit<numberInput.Context, 'id' | 'dir' | 'getRootNode'> {
     id?: string | null;
 }
 export interface CreateNumberInputReturn extends numberInput.Api {

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

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

package/dist/number-input/decrement-trigger.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: NumberInputDecrementTriggerProps = $props();
 
-  let context = numberInputContext.get();
+  let numberInput = numberInputContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getDecrementTriggerProps()));
+  let attrs = $derived(mergeProps(props, numberInput.getDecrementTriggerProps()));
 </script>
 
 <button type="button" {...attrs}>

package/dist/number-input/increment-trigger.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: NumberInputIncrementTriggerProps = $props();
 
-  let context = numberInputContext.get();
+  let numberInput = numberInputContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getIncrementTriggerProps()));
+  let attrs = $derived(mergeProps(props, numberInput.getIncrementTriggerProps()));
 </script>
 
 <button type="button" {...attrs}>

package/dist/number-input/input.svelte

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

package/dist/number-input/label.svelte

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

package/dist/number-input/root.svelte

@@ -8,7 +8,7 @@
 
   export interface NumberInputProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateNumberInputProps> {
-    children?: Snippet<[api: CreateNumberInputReturn]>;
+    children?: Snippet<[numberInput: CreateNumberInputReturn]>;
   }
 </script>
 
@@ -26,6 +26,7 @@
     name,
     form,
     value,
+    locale,
     pattern,
     invalid,
     disabled,
@@ -46,7 +47,7 @@
     ...props
   }: NumberInputProps = $props();
 
-  let context = createNumberInput({
+  let numberInput = createNumberInput({
     id,
     ids,
     max,
@@ -55,6 +56,7 @@
     name,
     form,
     value: $state.snapshot(value),
+    locale,
     pattern,
     invalid,
     disabled,
@@ -73,11 +75,11 @@
     onValueInvalid,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, numberInput.getRootProps()));
 
-  numberInputContext.set(context);
+  numberInputContext.set(numberInput);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(numberInput)}
 </div>

package/dist/number-input/scrubber.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: NumberInputScrubberProps = $props();
 
-  let context = numberInputContext.get();
+  let numberInput = numberInputContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getScrubberProps()));
+  let attrs = $derived(mergeProps(props, numberInput.getScrubberProps()));
 </script>
 
 <div {...attrs}>

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

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

package/dist/pagination/ellipsis.svelte

@@ -11,9 +11,9 @@
 
   let {index, children, ...props}: PaginationEllipsisProps = $props();
 
-  let context = paginationContext.get();
+  let pagination = paginationContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getEllipsisProps({index})));
+  let attrs = $derived(mergeProps(props, pagination.getEllipsisProps({index})));
 </script>
 
 <span {...attrs}>

package/dist/pagination/item.svelte

@@ -12,12 +12,12 @@
 
   let {value, children, ...props}: PaginationItemProps = $props();
 
-  let context = paginationContext.get();
+  let pagination = paginationContext.get();
 
   let attrs = $derived(
     mergeProps(
       props,
-      context.getItemProps({
+      pagination.getItemProps({
         type: 'page',
         value,
       }),

package/dist/pagination/next-trigger.svelte

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

package/dist/pagination/prev-trigger.svelte

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

package/dist/pagination/root.svelte

@@ -5,7 +5,7 @@
 
   export interface PaginationProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreatePaginationProps> {
-    children?: Snippet<[api: CreatePaginationReturn]>;
+    children?: Snippet<[pagination: CreatePaginationReturn]>;
   }
 </script>
 
@@ -29,7 +29,7 @@
     ...props
   }: PaginationProps = $props();
 
-  let context = createPagination({
+  let pagination = createPagination({
     id,
     ids,
     type,
@@ -42,11 +42,11 @@
     onPageSizeChange,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, pagination.getRootProps()));
 
-  paginationContext.set(context);
+  paginationContext.set(pagination);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(pagination)}
 </div>

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

@@ -9,14 +9,14 @@
 
   let {children, onclick, ...props}: PinInputClearTriggerProps = $props();
 
-  let context = pinInputContext.get();
+  let pinInput = pinInputContext.get();
 </script>
 
 <button
   type="button"
   onclick={(e) => {
     onclick?.(e);
-    context.clearValue();
+    pinInput.clearValue();
   }}
   {...props}
 >

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

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

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

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

package/dist/pin-input/input.svelte

@@ -11,9 +11,9 @@
 
   let {index, ...props}: PinInputInputProps = $props();
 
-  let context = pinInputContext.get();
+  let pinInput = pinInputContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getInputProps({index})));
+  let attrs = $derived(mergeProps(props, pinInput.getInputProps({index})));
 </script>
 
 <input {...attrs} />

package/dist/pin-input/label.svelte

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

package/dist/pin-input/root.svelte

@@ -5,7 +5,7 @@
 
   export interface PinInputProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreatePinInputProps> {
-    children?: Snippet<[api: CreatePinInputReturn]>;
+    children?: Snippet<[pinInput: CreatePinInputReturn]>;
   }
 </script>
 
@@ -40,7 +40,7 @@
     ...props
   }: PinInputProps = $props();
 
-  let context = createPinInputContext({
+  let pinInput = createPinInputContext({
     id,
     ids,
     otp,
@@ -64,11 +64,11 @@
     onValueComplete,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, pinInput.getRootProps()));
 
-  pinInputContext.set(context);
+  pinInputContext.set(pinInput);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(pinInput)}
 </div>

package/dist/popover/arrow-tip.svelte

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

package/dist/popover/arrow.svelte

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

package/dist/popover/close-trigger.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: PopoverCloseTriggerProps = $props();
 
-  let context = popoverContext.get();
+  let popover = popoverContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getCloseTriggerProps()));
+  let attrs = $derived(mergeProps(props, popover.getCloseTriggerProps()));
 </script>
 
 <button type="button" {...attrs}>

package/dist/popover/content.svelte

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

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

@@ -4,14 +4,14 @@ import { createUniqueId } from '../utils.svelte.js';
 import * as popover from '@zag-js/popover';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createPopover(props) {
-    const localeContext = getLocaleContext();
-    const environmentContext = getEnvironmentContext();
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
     const [state, send] = useMachine(popover.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(() => popover.connect(state, send, normalizeProps)));

package/dist/popover/description.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: PopoverDescriptionProps = $props();
 
-  let context = popoverContext.get();
+  let popover = popoverContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getDescriptionProps()));
+  let attrs = $derived(mergeProps(props, popover.getDescriptionProps()));
 </script>
 
 <div {...attrs}>

package/dist/popover/positioner.svelte

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

package/dist/popover/root.svelte

@@ -3,7 +3,7 @@
   import type {CreatePopoverProps, CreatePopoverReturn} from './create-popover.svelte.js';
 
   export interface PopoverProps extends CreatePopoverProps {
-    children?: Snippet<[api: CreatePopoverReturn]>;
+    children?: Snippet<[popover: CreatePopoverReturn]>;
   }
 </script>
 
@@ -13,9 +13,9 @@
 
   let {children, ...props}: PopoverProps = $props();
 
-  let context = createPopover(props);
+  let popover = createPopover(props);
 
-  popoverContext.set(context);
+  popoverContext.set(popover);
 </script>
 
-{@render children?.(context)}
+{@render children?.(popover)}

package/dist/popover/title.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: PopoverTitleProps = $props();
 
-  let context = popoverContext.get();
+  let popover = popoverContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getTitleProps()));
+  let attrs = $derived(mergeProps(props, popover.getTitleProps()));
 </script>
 
 <div {...attrs}>