ui-ingredients 0.0.19 → 0.0.21

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

package/dist/popover/trigger.svelte

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

package/dist/portal/root.svelte

@@ -14,17 +14,15 @@
 
   let {container, disabled, children}: PortalProps = $props();
 
-  let environmentContext = getEnvironmentContext();
+  let environment = getEnvironmentContext();
 </script>
 
 <div
   use:portal={{
     disabled,
     container,
-    getRootNode: environmentContext?.getRootNode,
+    getRootNode: environment?.getRootNode,
   }}
-  data-scope="portal"
-  data-part="root"
 >
   {@render children?.()}
 </div>

package/dist/presence/create-presence.svelte.d.ts

@@ -0,0 +1,10 @@
+import * as presence from '@zag-js/presence';
+export interface CreatePresenceProps extends presence.Context {
+}
+export declare function createPresence(props: CreatePresenceProps): {
+    ref: (node: HTMLElement) => void;
+    getRootProps: () => {
+        hidden: boolean;
+        'data-state': string;
+    };
+};

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

@@ -0,0 +1,19 @@
+import * as presence from '@zag-js/presence';
+import { normalizeProps, useMachine } from '@zag-js/svelte';
+export function createPresence(props) {
+    const [state, send] = useMachine(presence.machine(props));
+    const api = $derived(presence.connect(state, send, normalizeProps));
+    function ref(node) {
+        api.setNode(node);
+    }
+    function getRootProps() {
+        return {
+            hidden: !api.present,
+            'data-state': api.present ? 'open' : 'closed',
+        };
+    }
+    return {
+        ref,
+        getRootProps,
+    };
+}

package/dist/presence/root.svelte

@@ -1,13 +1,13 @@
 <script lang="ts" module>
   import type {Assign, HtmlProps} from '../types.js';
-  import type {Context} from '@zag-js/presence';
+  import type {CreatePresenceProps} from './create-presence.svelte.js';
 
-  export interface PresenceProps extends Assign<HtmlProps<'div'>, Context> {}
+  export interface PresenceProps extends Assign<HtmlProps<'div'>, CreatePresenceProps> {}
 </script>
 
 <script lang="ts">
-  import * as presence from '@zag-js/presence';
-  import {normalizeProps, useMachine} from '@zag-js/svelte';
+  import {mergeProps} from '@zag-js/svelte';
+  import {createPresence} from './create-presence.svelte.js';
 
   let {
     /**/
@@ -18,24 +18,15 @@
     ...props
   }: PresenceProps = $props();
 
-  let [machineState, send] = useMachine(
-    presence.machine({
-      present,
-      immediate,
-      onExitComplete,
-    }),
-  );
+  let presence = createPresence({
+    present,
+    immediate,
+    onExitComplete,
+  });
 
-  let api = $derived(presence.connect(machineState, send, normalizeProps));
+  let attrs = $derived(mergeProps(props, presence.getRootProps()));
 </script>
 
-<div
-  use:api.setNode
-  hidden={!api.present}
-  data-scope="presence"
-  data-part="root"
-  data-state={api.skip ? undefined : present ? 'open' : 'closed'}
-  {...props}
->
+<div use:presence.ref {...attrs}>
   {@render children?.()}
 </div>

package/dist/progress/circle-range.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: ProgressCircleRangeProps = $props();
 
-  let context = progressContext.get();
+  let progress = progressContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getCircleRangeProps()));
+  let attrs = $derived(mergeProps(props, progress.getCircleRangeProps()));
 </script>
 
 <circle {...attrs}>

package/dist/progress/circle-track.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: ProgressCircleTrackProps = $props();
 
-  let context = progressContext.get();
+  let progress = progressContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getCircleTrackProps()));
+  let attrs = $derived(mergeProps(props, progress.getCircleTrackProps()));
 </script>
 
 <circle {...attrs}>

package/dist/progress/circle.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: ProgressCircleProps = $props();
 
-  let context = progressContext.get();
+  let progress = progressContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getCircleProps()));
+  let attrs = $derived(mergeProps(props, progress.getCircleProps()));
 </script>
 
 <svg {...attrs}>