ui-ingredients 0.0.20 → 0.0.22

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

package/dist/date-picker/view-control.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: DatePickerViewControlProps = $props();
 
-  let context = datePickerContext.get();
-
+  let datePicker = datePickerContext.get();
   let viewProps = datePickerViewPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getViewControlProps(viewProps)));
+  let attrs = $derived(mergeProps(props, datePicker.getViewControlProps(viewProps)));
 </script>
 
 <div {...attrs}>

package/dist/date-picker/view.svelte

@@ -12,13 +12,13 @@
 
   let {view = 'day', children, ...props}: DatePickerViewProps = $props();
 
-  let context = datePickerContext.get();
+  let datePicker = datePickerContext.get();
 
   let attrs = $derived(mergeProps(props, parts.view.attrs));
 
   datePickerViewPropsContext.set(() => ({view}));
 </script>
 
-<div hidden={context.view !== view} {...attrs}>
+<div hidden={datePicker.view !== view} {...attrs}>
   {@render children?.()}
 </div>

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

@@ -10,9 +10,9 @@
 
   let {children, ...props}: DatePickerYearSelectProps = $props();
 
-  let context = datePickerContext.get();
+  let datePicker = datePickerContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getYearSelectProps()));
+  let attrs = $derived(mergeProps(props, datePicker.getYearSelectProps()));
 
   function getYears() {
     const currentYear = new Date().getFullYear();

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

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

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

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

package/dist/dialog/backdrop.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: DialogBackdropProps = $props();
 
-  let context = dialogContext.get();
+  let dialog = dialogContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getBackdropProps()));
+  let attrs = $derived(mergeProps(props, dialog.getBackdropProps()));
 </script>
 
 <div {...attrs}>

package/dist/dialog/close-trigger.svelte

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

package/dist/dialog/content.svelte

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

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

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

package/dist/dialog/description.svelte

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

package/dist/dialog/dialog.d.ts

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/dialog';
 export { default as Backdrop } from './backdrop.svelte';
 export { default as CloseTrigger } from './close-trigger.svelte';
 export { default as Content } from './content.svelte';

package/dist/dialog/dialog.js

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/dialog';
 export { default as Backdrop } from './backdrop.svelte';
 export { default as CloseTrigger } from './close-trigger.svelte';
 export { default as Content } from './content.svelte';

package/dist/dialog/index.d.ts

@@ -1,9 +1,8 @@
-export { anatomy as dialogAnatomy } from '@zag-js/dialog';
+export * as Dialog from './dialog.js';
 export type { DialogBackdropProps } from './backdrop.svelte';
 export type { DialogCloseTriggerProps } from './close-trigger.svelte';
 export type { DialogContentProps } from './content.svelte';
 export type { DialogDescriptionProps } from './description.svelte';
-export * as Dialog from './dialog.js';
 export type { DialogPositionerProps } from './positioner.svelte';
 export type { DialogProps } from './root.svelte';
 export type { DialogTitleProps } from './title.svelte';

package/dist/dialog/index.js

@@ -1,2 +1 @@
-export { anatomy as dialogAnatomy } from '@zag-js/dialog';
 export * as Dialog from './dialog.js';

package/dist/dialog/positioner.svelte

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

package/dist/dialog/root.svelte

@@ -3,7 +3,7 @@
   import type {CreateDialogProps, CreateDialogReturn} from './create-dialog.svelte.js';
 
   export interface DialogProps extends CreateDialogProps {
-    children?: Snippet<[api: CreateDialogReturn]>;
+    children?: Snippet<[dialog: CreateDialogReturn]>;
   }
 </script>
 
@@ -13,9 +13,9 @@
 
   let {children, ...props}: DialogProps = $props();
 
-  let context = createDialog(props);
+  let dialog = createDialog(props);
 
-  dialogContext.set(context);
+  dialogContext.set(dialog);
 </script>
 
-{@render children?.(context)}
+{@render children?.(dialog)}

package/dist/dialog/title.svelte

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

package/dist/dialog/trigger.svelte

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

package/dist/editable/area.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: EditableAreaProps = $props();
 
-  let context = editableContext.get();
+  let editable = editableContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getAreaProps()));
+  let attrs = $derived(mergeProps(props, editable.getAreaProps()));
 </script>
 
 <div {...attrs}>

package/dist/editable/cancel-trigger.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: EditableCancelTriggerProps = $props();
 
-  let context = editableContext.get();
+  let editable = editableContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getCancelTriggerProps()));
+  let attrs = $derived(mergeProps(props, editable.getCancelTriggerProps()));
 </script>
 
 <button type="button" {...attrs}>

package/dist/editable/control.svelte

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

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

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

package/dist/editable/edit-trigger.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: EditableEditTriggerProps = $props();
 
-  let context = editableContext.get();
+  let editable = editableContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getEditTriggerProps()));
+  let attrs = $derived(mergeProps(props, editable.getEditTriggerProps()));
 </script>
 
 <button type="button" {...attrs}>

package/dist/editable/editable.d.ts

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/editable';
 export { default as Area } from './area.svelte';
 export { default as CancelTrigger } from './cancel-trigger.svelte';
 export { default as Control } from './control.svelte';

package/dist/editable/editable.js

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/editable';
 export { default as Area } from './area.svelte';
 export { default as CancelTrigger } from './cancel-trigger.svelte';
 export { default as Control } from './control.svelte';

package/dist/editable/index.d.ts

@@ -1,9 +1,8 @@
-export { anatomy as editableAnatomy } from '@zag-js/editable';
+export * as Editable from './editable.js';
 export type { EditableAreaProps } from './area.svelte';
 export type { EditableCancelTriggerProps } from './cancel-trigger.svelte';
 export type { EditableControlProps } from './control.svelte';
 export type { EditableEditTriggerProps } from './edit-trigger.svelte';
-export * as Editable from './editable.js';
 export type { EditableInputProps } from './input.svelte';
 export type { EditableLabelProps } from './label.svelte';
 export type { EditablePreviewProps } from './preview.svelte';

package/dist/editable/index.js

@@ -1,2 +1 @@
-export { anatomy as editableAnatomy } from '@zag-js/editable';
 export * as Editable from './editable.js';

package/dist/editable/input.svelte

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

package/dist/editable/label.svelte

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

package/dist/editable/preview.svelte

@@ -10,15 +10,15 @@
 
   let {children, ...props}: EditablePreviewProps = $props();
 
-  let context = editableContext.get();
+  let editable = editableContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getPreviewProps()));
+  let attrs = $derived(mergeProps(props, editable.getPreviewProps()));
 </script>
 
 <div {...attrs}>
   {#if children}
     {@render children?.()}
   {:else}
-    {context.value}
+    {editable.value}
   {/if}
 </div>