ui-ingredients 0.0.20 → 0.0.22

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

@@ -1,9 +1,8 @@
-export { anatomy as progressAnatomy } from '@zag-js/progress';
+export * as Progress from './progress.js';
 export type { ProgressCircleRangeProps } from './circle-range.svelte';
 export type { ProgressCircleTrackProps } from './circle-track.svelte';
 export type { ProgressCircleProps } from './circle.svelte';
 export type { ProgressLabelProps } from './label.svelte';
-export * as Progress from './progress.js';
 export type { ProgressRangeProps } from './range.svelte';
 export type { ProgressProps } from './root.svelte';
 export type { ProgressTrackProps } from './track.svelte';

package/dist/progress/index.js

@@ -1,2 +1 @@
-export { anatomy as progressAnatomy } from '@zag-js/progress';
 export * as Progress from './progress.js';

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

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/progress';
 export { default as CircleRange } from './circle-range.svelte';
 export { default as CircleTrack } from './circle-track.svelte';
 export { default as Circle } from './circle.svelte';

package/dist/progress/progress.js

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/progress';
 export { default as CircleRange } from './circle-range.svelte';
 export { default as CircleTrack } from './circle-track.svelte';
 export { default as Circle } from './circle.svelte';

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

@@ -1,6 +1,5 @@
-export { anatomy as qrCodeAnatomy } from '@zag-js/qr-code';
+export * as QRCode from './qr-code.js';
 export type { QRCodeFrameProps } from './frame.svelte';
 export type { QRCodeOverlayProps } from './overlay.svelte';
 export type { QRCodePatternProps } from './pattern.svelte';
-export * as QRCode from './qr-code.js';
 export type { QRCodeProps } from './root.svelte';

package/dist/qr-code/index.js

@@ -1,2 +1 @@
-export { anatomy as qrCodeAnatomy } from '@zag-js/qr-code';
 export * as QRCode from './qr-code.js';

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

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/qr-code';
 export { default as Frame } from './frame.svelte';
 export { default as Overlay } from './overlay.svelte';
 export { default as Pattern } from './pattern.svelte';

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

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/qr-code';
 export { default as Frame } from './frame.svelte';
 export { default as Overlay } from './overlay.svelte';
 export { default as Pattern } from './pattern.svelte';

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

@@ -1,9 +1,8 @@
-export { anatomy as radioGroupAnatomy } from '@zag-js/radio-group';
+export * as RadioGroup from './radio-group.js';
 export type { RadioGroupIndicatorProps } from './indicator.svelte';
 export type { RadioGroupItemControlProps } from './item-control.svelte';
 export type { RadioGroupItemHiddenInputProps } from './item-hidden-input.svelte';
 export type { RadioGroupItemTextProps } from './item-text.svelte';
 export type { RadioGroupItemProps } from './item.svelte';
 export type { RadioGroupLabelProps } from './label.svelte';
-export * as RadioGroup from './radio-group.js';
 export type { RadioGroupProps } from './root.svelte';

package/dist/radio-group/index.js

@@ -1,2 +1 @@
-export { anatomy as radioGroupAnatomy } from '@zag-js/radio-group';
 export * as RadioGroup from './radio-group.js';

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

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/radio-group';
 export { default as Indicator } from './indicator.svelte';
 export { default as ItemControl } from './item-control.svelte';
 export { default as ItemHiddenInput } from './item-hidden-input.svelte';

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

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/radio-group';
 export { default as Indicator } from './indicator.svelte';
 export { default as ItemControl } from './item-control.svelte';
 export { default as ItemHiddenInput } from './item-hidden-input.svelte';

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

@@ -1,7 +1,6 @@
-export { anatomy as ratingGroupAnatomy } from '@zag-js/rating-group';
+export * as RatingGroup from './rating-group.js';
 export type { RatingGroupControlProps } from './control.svelte';
 export type { RatingGroupHiddenInputProps } from './hidden-input.svelte';
 export type { RatingGroupItemProps } from './item.svelte';
 export type { RatingGroupLabelProps } from './label.svelte';
-export * as RatingGroup from './rating-group.js';
 export type { RatingGroupProps } from './root.svelte';

package/dist/rating-group/index.js

@@ -1,2 +1 @@
-export { anatomy as ratingGroupAnatomy } from '@zag-js/rating-group';
 export * as RatingGroup from './rating-group.js';

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

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/rating-group';
 export { default as Control } from './control.svelte';
 export { default as HiddenInput } from './hidden-input.svelte';
 export { default as Item } from './item.svelte';

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

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/rating-group';
 export { default as Control } from './control.svelte';
 export { default as HiddenInput } from './hidden-input.svelte';
 export { default as Item } from './item.svelte';