ui-ingredients 0.0.19 → 0.0.21

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>
 

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

@@ -10,11 +10,10 @@
 
   let {...props}: SegmentGroupItemHiddenInputProps = $props();
 
-  let context = segmentGroupContext.get();
-
+  let segmentGroup = segmentGroupContext.get();
   let itemProps = segmentGroupItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemHiddenInputProps(itemProps)));
+  let attrs = $derived(mergeProps(props, segmentGroup.getItemHiddenInputProps(itemProps)));
 </script>
 
 <input {...attrs} />

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

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

package/dist/segment-group/item.svelte

@@ -24,16 +24,15 @@
     ...props
   }: SegmentGroupItemProps = $props();
 
-  let context = segmentGroupContext.get();
-
+  let segmentGroup = segmentGroupContext.get();
   let itemProps = $derived({
     value,
     invalid,
     disabled,
   });
 
-  let state = $derived(context.getItemState(itemProps));
-  let attrs = $derived(mergeProps(props, context.getItemProps(itemProps), parts.item.attrs));
+  let state = $derived(segmentGroup.getItemState(itemProps));
+  let attrs = $derived(mergeProps(props, segmentGroup.getItemProps(itemProps), parts.item.attrs));
 
   segmentGroupItemPropsContext.set(() => itemProps);
 </script>

package/dist/segment-group/label.svelte

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

package/dist/segment-group/root.svelte

@@ -8,7 +8,7 @@
 
   export interface SegmentGroupProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateSegmentGroupProps> {
-    children?: Snippet<[api: CreateSegmentGroupReturn]>;
+    children?: Snippet<[segmentGroup: CreateSegmentGroupReturn]>;
   }
 </script>
 
@@ -33,7 +33,7 @@
     ...props
   }: SegmentGroupProps = $props();
 
-  let context = createSegmentGroup({
+  let segmentGroup = createSegmentGroup({
     id,
     ids,
     form,
@@ -45,11 +45,11 @@
     onValueChange,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps(), parts.root.attrs));
+  let attrs = $derived(mergeProps(props, segmentGroup.getRootProps(), parts.root.attrs));
 
-  segmentGroupContext.set(context);
+  segmentGroupContext.set(segmentGroup);
 </script>
 
 <div {...ensureStyleIsString(attrs)}>
-  {@render children?.(context)}
+  {@render children?.(segmentGroup)}
 </div>

package/dist/select/clear-trigger.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: SelectClearTriggerProps = $props();
 
-  let context = selectContext.get();
+  let select = selectContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getClearTriggerProps()));
+  let attrs = $derived(mergeProps(props, select.getClearTriggerProps()));
 </script>
 
 <button type="button" {...attrs}>

package/dist/select/content.svelte

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

package/dist/select/control.svelte

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