ui-ingredients 0.0.20 → 0.0.22

package/dist/clipboard/input.svelte

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

package/dist/clipboard/label.svelte

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

package/dist/clipboard/root.svelte

@@ -5,7 +5,7 @@
 
   export interface ClipboardProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateClipboardProps> {
-    children?: Snippet<[api: CreateClipboardReturn]>;
+    children?: Snippet<[clipboard: CreateClipboardReturn]>;
   }
 </script>
 
@@ -25,7 +25,7 @@
     ...props
   }: ClipboardProps = $props();
 
-  let context = createClipboard({
+  let clipboard = createClipboard({
     id,
     ids,
     value: $state.snapshot(value),
@@ -33,11 +33,11 @@
     onStatusChange,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, clipboard.getRootProps()));
 
-  clipboardContext.set(context);
+  clipboardContext.set(clipboard);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(clipboard)}
 </div>

package/dist/clipboard/trigger.svelte

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

package/dist/collapsible/collapsible.d.ts

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

package/dist/collapsible/collapsible.js

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

package/dist/collapsible/content.svelte

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

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

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

package/dist/collapsible/index.d.ts

@@ -1,4 +1,3 @@
-export { anatomy as collapsibleAnatomy } from '@zag-js/collapsible';
 export * as Collapsible from './collapsible.js';
 export type { CollapsibleContentProps } from './content.svelte';
 export type { CollapsibleProps } from './root.svelte';

package/dist/collapsible/index.js

@@ -1,2 +1 @@
-export { anatomy as collapsibleAnatomy } from '@zag-js/collapsible';
 export * as Collapsible from './collapsible.js';

package/dist/collapsible/root.svelte

@@ -29,7 +29,7 @@
     ...props
   }: CollapsibleProps = $props();
 
-  let context = createCollapsible({
+  let collapsible = createCollapsible({
     id,
     ids,
     open,
@@ -39,11 +39,11 @@
     onExitComplete,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, collapsible.getRootProps()));
 
-  collapsibleContext.set(context);
+  collapsibleContext.set(collapsible);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(collapsible)}
 </div>

package/dist/collapsible/trigger.svelte

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

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

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/combobox';
 export { default as ClearTrigger } from './clear-trigger.svelte';
 export { default as Content } from './content.svelte';
 export { default as Control } from './control.svelte';

package/dist/combobox/combobox.js

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/combobox';
 export { default as ClearTrigger } from './clear-trigger.svelte';
 export { default as Content } from './content.svelte';
 export { default as Control } from './control.svelte';

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

@@ -1,6 +1,5 @@
-export { anatomy as comboboxAnatomy } from '@zag-js/combobox';
-export type { ComboboxClearTriggerProps } from './clear-trigger.svelte';
 export * as Combobox from './combobox.js';
+export type { ComboboxClearTriggerProps } from './clear-trigger.svelte';
 export type { ComboboxContentProps } from './content.svelte';
 export type { ComboboxControlProps } from './control.svelte';
 export type { ComboboxInputProps } from './input.svelte';

package/dist/combobox/index.js

@@ -1,2 +1 @@
-export { anatomy as comboboxAnatomy } from '@zag-js/combobox';
 export * as Combobox from './combobox.js';

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/anatomy.js

@@ -1,3 +1,3 @@
-import { anatomy } from '@zag-js/date-picker';
-export const datePickerAnatomy = anatomy.extendWith('view');
-export const parts = datePickerAnatomy.build();
+import { anatomy as _ } from '@zag-js/date-picker';
+export const anatomy = _.extendWith('view');
+export const parts = anatomy.build();

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

@@ -1,3 +1,5 @@
+export { parse } from '@zag-js/date-picker';
+export { anatomy } from './anatomy.js';
 export { default as ClearTrigger } from './clear-trigger.svelte';
 export { default as Content } from './content.svelte';
 export { default as Control } from './control.svelte';

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

@@ -1,3 +1,5 @@
+export { parse } from '@zag-js/date-picker';
+export { anatomy } from './anatomy.js';
 export { default as ClearTrigger } from './clear-trigger.svelte';
 export { default as Content } from './content.svelte';
 export { default as Control } from './control.svelte';

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

@@ -1,5 +1,3 @@
-export { parse as parseDate } from '@zag-js/date-picker';
-export { datePickerAnatomy } from './anatomy.js';
 export * as DatePicker from './date-picker.js';
 export type { DatePickerClearTriggerProps } from './clear-trigger.svelte';
 export type { DatePickerContentProps } from './content.svelte';

package/dist/date-picker/index.js

@@ -1,3 +1 @@
-export { parse as parseDate } from '@zag-js/date-picker';
-export { datePickerAnatomy } from './anatomy.js';
 export * as DatePicker from './date-picker.js';

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}>