ui-ingredients 0.0.20 → 0.0.21

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

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

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

package/dist/progress/label.svelte

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

package/dist/progress/range.svelte

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

package/dist/progress/root.svelte

@@ -5,7 +5,7 @@
 
   export interface ProgressProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateProgressProps> {
-    children?: Snippet<[api: CreateProgressReturn]>;
+    children?: Snippet<[progress: CreateProgressReturn]>;
   }
 </script>
 
@@ -27,7 +27,7 @@
     ...props
   }: ProgressProps = $props();
 
-  let context = createProgress({
+  let progress = createProgress({
     id,
     ids,
     max,
@@ -37,11 +37,11 @@
     translations,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, progress.getRootProps()));
 
-  progressContext.set(context);
+  progressContext.set(progress);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(progress)}
 </div>

package/dist/progress/track.svelte

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

package/dist/progress/value-text.svelte

@@ -10,15 +10,15 @@
 
   let {children, ...props}: ProgressValueTextProps = $props();
 
-  let context = progressContext.get();
+  let progress = progressContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getValueTextProps()));
+  let attrs = $derived(mergeProps(props, progress.getValueTextProps()));
 </script>
 
 <div {...attrs}>
   {#if children}
     {@render children()}
   {:else}
-    {context.percentAsString}
+    {progress.percentAsString}
   {/if}
 </div>

package/dist/qr-code/create-qr-code.svelte.js

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

package/dist/qr-code/frame.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: QRCodeFrameProps = $props();
 
-  let context = qrCodeContext.get();
+  let qrCode = qrCodeContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getFrameProps()));
+  let attrs = $derived(mergeProps(props, qrCode.getFrameProps()));
 </script>
 
 <svg {...attrs}>

package/dist/qr-code/overlay.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: QRCodeOverlayProps = $props();
 
-  let context = qrCodeContext.get();
+  let qrCode = qrCodeContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getOverlayProps()));
+  let attrs = $derived(mergeProps(props, qrCode.getOverlayProps()));
 </script>
 
 <div {...attrs}>

package/dist/qr-code/pattern.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: QRCodePatternProps = $props();
 
-  let context = qrCodeContext.get();
+  let qrCode = qrCodeContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getPatternProps()));
+  let attrs = $derived(mergeProps(props, qrCode.getPatternProps()));
 </script>
 
 <path {...attrs}>

package/dist/qr-code/root.svelte

@@ -5,7 +5,7 @@
 
   export interface QRCodeProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateQRCodeProps> {
-    children?: Snippet<[api: CreateQRCodeReturn]>;
+    children?: Snippet<[qrCode: CreateQRCodeReturn]>;
   }
 </script>
 
@@ -24,18 +24,18 @@
     ...props
   }: QRCodeProps = $props();
 
-  let context = createQRCode({
+  let qrCode = createQRCode({
     id,
     ids,
     value: $state.snapshot(value),
     encoding,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, qrCode.getRootProps()));
 
-  qrCodeContext.set(context);
+  qrCodeContext.set(qrCode);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(qrCode)}
 </div>

package/dist/radio-group/create-radio-group.svelte.js

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

package/dist/radio-group/indicator.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: RadioGroupIndicatorProps = $props();
 
-  let context = radioGroupContext.get();
+  let radioGroup = radioGroupContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getIndicatorProps()));
+  let attrs = $derived(mergeProps(props, radioGroup.getIndicatorProps()));
 </script>
 
 <span {...attrs}>

package/dist/radio-group/item-control.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: RadioGroupItemControlProps = $props();
 
-  let context = radioGroupContext.get();
-
+  let radioGroup = radioGroupContext.get();
   let itemProps = radioGroupItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemControlProps(itemProps)));
+  let attrs = $derived(mergeProps(props, radioGroup.getItemControlProps(itemProps)));
 </script>
 
 <div {...attrs}>

package/dist/radio-group/item-hidden-input.svelte

@@ -10,11 +10,10 @@
 
   let {...props}: RadioGroupItemHiddenInputProps = $props();
 
-  let context = radioGroupContext.get();
-
+  let radioGroup = radioGroupContext.get();
   let itemProps = radioGroupItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemHiddenInputProps(itemProps)));
+  let attrs = $derived(mergeProps(props, radioGroup.getItemHiddenInputProps(itemProps)));
 </script>
 
 <input {...attrs} />

package/dist/radio-group/item-text.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: RadioGroupItemTextProps = $props();
 
-  let context = radioGroupContext.get();
-
+  let radioGroup = radioGroupContext.get();
   let itemProps = radioGroupItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemTextProps(itemProps)));
+  let attrs = $derived(mergeProps(props, radioGroup.getItemTextProps(itemProps)));
 </script>
 
 <span {...attrs}>

package/dist/radio-group/item.svelte

@@ -22,16 +22,15 @@
     ...props
   }: RadioGroupItemProps = $props();
 
-  let context = radioGroupContext.get();
-
+  let radioGroup = radioGroupContext.get();
   let itemProps = $derived({
     value,
     invalid,
     disabled,
   });
 
-  let state = $derived(context.getItemState(itemProps));
-  let attrs = $derived(mergeProps(props, context.getItemProps(itemProps)));
+  let state = $derived(radioGroup.getItemState(itemProps));
+  let attrs = $derived(mergeProps(props, radioGroup.getItemProps(itemProps)));
 
   radioGroupItemPropsContext.set(() => itemProps);
 </script>

package/dist/radio-group/label.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: RadioGroupLabelProps = $props();
 
-  let context = radioGroupContext.get();
+  let radioGroup = radioGroupContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getLabelProps()));
+  let attrs = $derived(mergeProps(props, radioGroup.getLabelProps()));
 </script>
 
 <span {...attrs}>

package/dist/radio-group/root.svelte

@@ -5,7 +5,7 @@
 
   export interface RadioGroupProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateRadioGroupProps> {
-    children?: Snippet<[api: CreateRadioGroupReturn]>;
+    children?: Snippet<[radioGroup: CreateRadioGroupReturn]>;
   }
 </script>
 
@@ -28,7 +28,7 @@
     ...props
   }: RadioGroupProps = $props();
 
-  let context = createRadioGroup({
+  let radioGroup = createRadioGroup({
     id,
     ids,
     form,
@@ -40,11 +40,11 @@
     onValueChange,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, radioGroup.getRootProps()));
 
-  radioGroupContext.set(context);
+  radioGroupContext.set(radioGroup);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(radioGroup)}
 </div>

package/dist/rating-group/control.svelte

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

package/dist/rating-group/create-rating-group.svelte.js

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

package/dist/rating-group/hidden-input.svelte

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

package/dist/rating-group/item.svelte

@@ -15,11 +15,10 @@
 
   let {index, children, ...props}: RatingGroupItemProps = $props();
 
-  let context = ratingGroupContext.get();
+  let radioGroup = ratingGroupContext.get();
 
-  let state = $derived(context.getItemState({index}));
-
-  let attrs = $derived(mergeProps(props, context.getItemProps({index})));
+  let state = $derived(radioGroup.getItemState({index}));
+  let attrs = $derived(mergeProps(props, radioGroup.getItemProps({index})));
 </script>
 
 <div {...attrs}>

package/dist/rating-group/label.svelte

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

package/dist/rating-group/root.svelte

@@ -8,7 +8,7 @@
 
   export interface RatingGroupProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateRatingGroupProps> {
-    children?: Snippet<[api: CreateRatingGroupReturn]>;
+    children?: Snippet<[radioGroup: CreateRatingGroupReturn]>;
   }
 </script>
 
@@ -36,7 +36,7 @@
     ...props
   }: RatingGroupProps = $props();
 
-  let context = createRatingGroup({
+  let radioGroup = createRatingGroup({
     id,
     ids,
     form,
@@ -53,11 +53,11 @@
     onValueChange,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, radioGroup.getRootProps()));
 
-  ratingGroupContext.set(context);
+  ratingGroupContext.set(radioGroup);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(radioGroup)}
 </div>

package/dist/segment-group/create-segment-group.svelte.js

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

package/dist/segment-group/indicator.svelte

@@ -12,9 +12,9 @@
 
   let {children, ...props}: SegmentGroupIndicatorProps = $props();
 
-  let context = segmentGroupContext.get();
+  let segmentGroup = segmentGroupContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getIndicatorProps(), parts.indicator.attrs));
+  let attrs = $derived(mergeProps(props, segmentGroup.getIndicatorProps(), parts.indicator.attrs));
 </script>
 
 <span {...ensureStyleIsString(attrs)}>

package/dist/segment-group/item-control.svelte

@@ -12,12 +12,11 @@
 
   let {children, ...props}: SegmentGroupItemControlProps = $props();
 
-  let context = segmentGroupContext.get();
-
+  let segmentGroup = segmentGroupContext.get();
   let itemProps = segmentGroupItemPropsContext.get();
 
   let attrs = $derived(
-    mergeProps(props, context.getItemControlProps(itemProps), parts.itemControl.attrs),
+    mergeProps(props, segmentGroup.getItemControlProps(itemProps), parts.itemControl.attrs),
   );
 </script>