ui-ingredients 0.0.20 → 0.0.21

package/dist/combobox/clear-trigger.svelte

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

package/dist/combobox/content.svelte

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

package/dist/combobox/control.svelte

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

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

@@ -10,14 +10,14 @@ export function createCombobox(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(combobox.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,
         collection,
     }));

package/dist/combobox/input.svelte

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

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

@@ -10,14 +10,13 @@
 
   let {children, ...props}: ComboboxItemGroupLabelProps = $props();
 
-  let context = comboboxContext.get();
-
+  let combobox = comboboxContext.get();
   let itemGroupProps = comboboxItemGroupPropsContext.get();
 
   let attrs = $derived(
     mergeProps(
       props,
-      context.getItemGroupLabelProps({
+      combobox.getItemGroupLabelProps({
         htmlFor: itemGroupProps.id,
       }),
     ),

package/dist/combobox/item-group.svelte

@@ -13,7 +13,7 @@
 
   let {id, children, ...props}: ComboboxItemGroupProps = $props();
 
-  let context = comboboxContext.get();
+  let combobox = comboboxContext.get();
 
   let uid = createUniqueId();
 
@@ -21,7 +21,7 @@
     id: id ?? uid,
   });
 
-  let attrs = $derived(mergeProps(props, context.getItemGroupProps(comboboxItemGroupProps)));
+  let attrs = $derived(mergeProps(props, combobox.getItemGroupProps(comboboxItemGroupProps)));
 
   comboboxItemGroupPropsContext.set(() => comboboxItemGroupProps);
 </script>

package/dist/combobox/item-indicator.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: ComboboxItemIndicatorProps = $props();
 
-  let context = comboboxContext.get();
-
+  let combobox = comboboxContext.get();
   let itemProps = comboboxItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemIndicatorProps(itemProps)));
+  let attrs = $derived(mergeProps(props, combobox.getItemIndicatorProps(itemProps)));
 </script>
 
 <span {...attrs}>

package/dist/combobox/item-text.svelte

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

package/dist/combobox/item.svelte

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

package/dist/combobox/label.svelte

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

package/dist/combobox/list.svelte

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

package/dist/combobox/positioner.svelte

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

package/dist/combobox/root.svelte

@@ -5,7 +5,7 @@
 
   export interface ComboboxProps<T>
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateComboboxProps<T>> {
-    children?: Snippet<[api: CreateComboboxReturn]>;
+    children?: Snippet<[combobox: CreateComboboxReturn]>;
   }
 </script>
 
@@ -60,7 +60,7 @@
     ...props
   }: ComboboxProps<T> = $props();
 
-  let context = createCombobox({
+  let combobox = createCombobox({
     id,
     ids,
     name,
@@ -104,11 +104,11 @@
     scrollToIndexFn,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, combobox.getRootProps()));
 
-  comboboxContext.set(context);
+  comboboxContext.set(combobox);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(combobox)}
 </div>

package/dist/combobox/trigger.svelte

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

package/dist/date-picker/clear-trigger.svelte

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

package/dist/date-picker/content.svelte

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

package/dist/date-picker/control.svelte

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

package/dist/date-picker/create-date-picker.svelte.d.ts

@@ -1,5 +1,5 @@
 import * as datePicker from '@zag-js/date-picker';
-type Omitted = 'id' | 'dir' | 'min' | 'max' | 'value' | 'focusedValue' | 'locale' | 'getRootNode' | 'open.controlled';
+type Omitted = 'id' | 'dir' | 'min' | 'max' | 'value' | 'focusedValue' | 'getRootNode' | 'open.controlled';
 export interface CreateDatePickerProps extends Omit<datePicker.Context, Omitted> {
     id?: string | null;
     min?: string | Date;

package/dist/date-picker/create-date-picker.svelte.js

@@ -4,20 +4,20 @@ import { createUniqueId } from '../utils.svelte.js';
 import * as datePicker from '@zag-js/date-picker';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createDatePicker(props) {
-    const localeContext = getLocaleContext();
-    const environmentContext = getEnvironmentContext();
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
     const [state, send] = useMachine(datePicker.machine({
         ...props,
         id: props.id ?? createUniqueId(),
-        dir: localeContext?.dir,
+        dir: locale?.dir,
         min: props.min ? datePicker.parse(props.min) : undefined,
         max: props.max ? datePicker.parse(props.max) : undefined,
         value: props.value ? datePicker.parse(props.value) : undefined,
         focusedValue: props.focusedValue ? datePicker.parse(props.focusedValue) : undefined,
         open: props.defaultOpen,
         'open.controlled': props.open != null,
-        locale: localeContext?.locale,
-        getRootNode: environmentContext?.getRootNode,
+        locale: props.locale ?? locale?.locale,
+        getRootNode: environment?.getRootNode,
     }));
     const api = $derived(reflect(() => datePicker.connect(state, send, normalizeProps)));
     return api;

package/dist/date-picker/day-table-cell-trigger.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: DatePickerDayTableCellTriggerProps = $props();
 
-  let context = datePickerContext.get();
-
+  let datePicker = datePickerContext.get();
   let tableCellProps = datePickerDayTableCellPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getDayTableCellTriggerProps(tableCellProps)));
+  let attrs = $derived(mergeProps(props, datePicker.getDayTableCellTriggerProps(tableCellProps)));
 </script>
 
 <button type="button" {...attrs}>

package/dist/date-picker/day-table-cell.svelte

@@ -22,16 +22,15 @@
     ...props
   }: DatePickerDayTableCellProps = $props();
 
-  let context = datePickerContext.get();
-
+  let datePicker = datePickerContext.get();
   let tableCellProps: DayTableCellProps = $derived({
     value,
     disabled,
     visibleRange,
   });
 
-  let state = $derived(context.getDayTableCellState(tableCellProps));
-  let attrs = $derived(mergeProps(props, context.getDayTableCellProps(tableCellProps)));
+  let state = $derived(datePicker.getDayTableCellState(tableCellProps));
+  let attrs = $derived(mergeProps(props, datePicker.getDayTableCellProps(tableCellProps)));
 
   datePickerDayTableCellPropsContext.set(() => tableCellProps);
 </script>

package/dist/date-picker/input.svelte

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

package/dist/date-picker/label.svelte

@@ -11,9 +11,9 @@
 
   let {index, children, ...props}: DatePickerLabelProps = $props();
 
-  let context = datePickerContext.get();
+  let datePicker = datePickerContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getLabelProps({index})));
+  let attrs = $derived(mergeProps(props, datePicker.getLabelProps({index})));
 </script>
 
 <label {...attrs}>

package/dist/date-picker/month-select.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: DatePickerMonthSelectProps = $props();
 
-  let context = datePickerContext.get();
+  let datePicker = datePickerContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getMonthSelectProps()));
+  let attrs = $derived(mergeProps(props, datePicker.getMonthSelectProps()));
 
   const months = [
     'January',

package/dist/date-picker/month-table-cell-trigger.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: DatePickerMonthTableCellTriggerProps = $props();
 
-  let context = datePickerContext.get();
-
+  let datePicker = datePickerContext.get();
   let tableCellProps = datePickerTableCellPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getMonthTableCellTriggerProps(tableCellProps)));
+  let attrs = $derived(mergeProps(props, datePicker.getMonthTableCellTriggerProps(tableCellProps)));
 </script>
 
 <button type="button" {...attrs}>

package/dist/date-picker/month-table-cell.svelte

@@ -22,16 +22,15 @@
     ...props
   }: DatePickerMonthTableCellProps = $props();
 
-  let context = datePickerContext.get();
-
+  let datePicker = datePickerContext.get();
   let tableCellProps: TableCellProps = $derived({
     value,
     disabled,
     columns,
   });
 
-  let state = $derived(context.getMonthTableCellState(tableCellProps));
-  let attrs = $derived(mergeProps(props, context.getMonthTableCellProps(tableCellProps)));
+  let state = $derived(datePicker.getMonthTableCellState(tableCellProps));
+  let attrs = $derived(mergeProps(props, datePicker.getMonthTableCellProps(tableCellProps)));
 
   datePickerTableCellPropsContext.set(() => tableCellProps);
 </script>

package/dist/date-picker/next-trigger.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: DatePickerNextTriggerProps = $props();
 
-  let context = datePickerContext.get();
-
+  let datePicker = datePickerContext.get();
   let viewProps = datePickerViewPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getNextTriggerProps(viewProps)));
+  let attrs = $derived(mergeProps(props, datePicker.getNextTriggerProps(viewProps)));
 </script>
 
 <button type="button" {...attrs}>

package/dist/date-picker/positioner.svelte

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

package/dist/date-picker/preset-trigger.svelte

@@ -12,9 +12,9 @@
 
   let {value, children, ...props}: DatePickerPresetTriggerProps = $props();
 
-  let context = datePickerContext.get();
+  let datePicker = datePickerContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getPresetTriggerProps({value})));
+  let attrs = $derived(mergeProps(props, datePicker.getPresetTriggerProps({value})));
 </script>
 
 <button type="button" {...attrs}>

package/dist/date-picker/prev-trigger.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: DatePickerPrevTriggerProps = $props();
 
-  let context = datePickerContext.get();
-
+  let datePicker = datePickerContext.get();
   let viewProps = datePickerViewPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getPrevTriggerProps(viewProps)));
+  let attrs = $derived(mergeProps(props, datePicker.getPrevTriggerProps(viewProps)));
 </script>
 
 <button type="button" {...attrs}>

package/dist/date-picker/range-text.svelte

@@ -10,15 +10,15 @@
 
   let {children, ...props}: DatePickerRangeTextProps = $props();
 
-  let context = datePickerContext.get();
+  let datePicker = datePickerContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getRangeTextProps()));
+  let attrs = $derived(mergeProps(props, datePicker.getRangeTextProps()));
 </script>
 
 <div {...attrs}>
   {#if children}
     {@render children()}
   {:else}
-    {context.visibleRangeText.formatted}
+    {datePicker.visibleRangeText.formatted}
   {/if}
 </div>

package/dist/date-picker/root.svelte

@@ -5,7 +5,7 @@
 
   export interface DatePickerProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateDatePickerProps> {
-    children?: Snippet<[api: CreateDatePickerReturn]>;
+    children?: Snippet<[datePicker: CreateDatePickerReturn]>;
   }
 </script>
 
@@ -24,6 +24,7 @@
     view,
     value,
     modal,
+    locale,
     disabled,
     readOnly,
     timeZone,
@@ -46,7 +47,7 @@
     ...props
   }: DatePickerProps = $props();
 
-  let context = createDatePicker({
+  let datePicker = createDatePicker({
     id,
     ids,
     min,
@@ -56,6 +57,7 @@
     view,
     value: $state.snapshot(value),
     modal,
+    locale,
     disabled,
     readOnly,
     timeZone,
@@ -76,11 +78,11 @@
     isDateUnavailable,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, datePicker.getRootProps()));
 
-  datePickerContext.set(context);
+  datePickerContext.set(datePicker);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(datePicker)}
 </div>

package/dist/date-picker/table-body.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: DatePickerTableBodyProps = $props();
 
-  let context = datePickerContext.get();
-
+  let datePicker = datePickerContext.get();
   let tableProps = datePickerTablePropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getTableBodyProps(tableProps)));
+  let attrs = $derived(mergeProps(props, datePicker.getTableBodyProps(tableProps)));
 </script>
 
 <div {...attrs}>

package/dist/date-picker/table-head.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: DatePickerTableHeadProps = $props();
 
-  let context = datePickerContext.get();
-
+  let datePicker = datePickerContext.get();
   let tableProps = datePickerTablePropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getTableHeadProps(tableProps)));
+  let attrs = $derived(mergeProps(props, datePicker.getTableHeadProps(tableProps)));
 </script>
 
 <div {...attrs}>

package/dist/date-picker/table-header.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: DatePickerTableHeaderProps = $props();
 
-  let context = datePickerContext.get();
-
+  let datePicker = datePickerContext.get();
   let tableProps = datePickerTablePropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getTableHeaderProps(tableProps)));
+  let attrs = $derived(mergeProps(props, datePicker.getTableHeaderProps(tableProps)));
 </script>
 
 <div {...attrs}>

package/dist/date-picker/table-row.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: DatePickerTableRowProps = $props();
 
-  let context = datePickerContext.get();
-
+  let datePicker = datePickerContext.get();
   let tableProps = datePickerTablePropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getTableRowProps(tableProps)));
+  let attrs = $derived(mergeProps(props, datePicker.getTableRowProps(tableProps)));
 </script>
 
 <div {...attrs}>

package/dist/date-picker/table.svelte

@@ -16,13 +16,11 @@
 
   let {id, columns, children, ...props}: DatePickerTableProps = $props();
 
-  let context = datePickerContext.get();
-
+  let datePicker = datePickerContext.get();
   let viewProps = datePickerViewPropsContext.get();
-
   let tableProps: TableProps = $derived({...viewProps, id, columns});
 
-  let attrs = $derived(mergeProps(props, context.getTableProps(tableProps)));
+  let attrs = $derived(mergeProps(props, datePicker.getTableProps(tableProps)));
 
   datePickerTablePropsContext.set(() => tableProps);
 </script>

package/dist/date-picker/trigger.svelte

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