ui-ingredients 0.0.20 → 0.0.22

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/anatomy.js

@@ -1,3 +1,3 @@
-import { anatomy } from '@zag-js/radio-group';
-export const segmentGroupAnatomy = anatomy.rename('segment-group');
-export const parts = segmentGroupAnatomy.build();
+import { anatomy as _ } from '@zag-js/radio-group';
+export const anatomy = _.rename('segment-group');
+export const parts = anatomy.build();

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

@@ -1,4 +1,4 @@
-export { segmentGroupAnatomy } from './anatomy.js';
+export * as SegmentGroup from './segment-group.js';
 export type { SegmentGroupIndicatorProps } from './indicator.svelte';
 export type { SegmentGroupItemControlProps } from './item-control.svelte';
 export type { SegmentGroupItemHiddenInputProps } from './item-hidden-input.svelte';
@@ -6,4 +6,3 @@ export type { SegmentGroupItemTextProps } from './item-text.svelte';
 export type { SegmentGroupItemProps } from './item.svelte';
 export type { SegmentGroupLabelProps } from './label.svelte';
 export type { SegmentGroupProps } from './root.svelte';
-export * as SegmentGroup from './segment-group.js';

package/dist/segment-group/index.js

@@ -1,2 +1 @@
-export { segmentGroupAnatomy } from './anatomy.js';
 export * as SegmentGroup from './segment-group.js';

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

@@ -1,3 +1,4 @@
+export { anatomy } from './anatomy.js';
 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/segment-group/segment-group.js

@@ -1,3 +1,4 @@
+export { anatomy } from './anatomy.js';
 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/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}>

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

@@ -10,14 +10,14 @@ export function createSelect(props) {
         itemToString: (item) => (props.itemToString ? props.itemToString(item) : String(item)),
         isItemDisabled: (item) => (props.isItemDisabled ? props.isItemDisabled(item) : false),
     }));
-    const localeContext = getLocaleContext();
-    const environmentContext = getEnvironmentContext();
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
     const [state, send] = useMachine(select.machine({
         ...props,
         id: props.id ?? createUniqueId(),
-        dir: localeContext?.dir,
+        dir: locale?.dir,
         open: props.defaultOpen,
-        getRootNode: environmentContext?.getRootNode,
+        getRootNode: environment?.getRootNode,
         collection,
         'open.controlled': props.open != null,
     }));

package/dist/select/hidden-select.svelte

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

package/dist/select/index.d.ts

@@ -1,4 +1,4 @@
-export { anatomy as selectAnatomy } from '@zag-js/select';
+export * as Select from './select.js';
 export type { SelectClearTriggerProps } from './clear-trigger.svelte';
 export type { SelectContentProps } from './content.svelte';
 export type { SelectControlProps } from './control.svelte';
@@ -13,6 +13,5 @@ export type { SelectLabelProps } from './label.svelte';
 export type { SelectListProps } from './list.svelte';
 export type { SelectPositionerProps } from './positioner.svelte';
 export type { SelectProps } from './root.svelte';
-export * as Select from './select.js';
 export type { SelectTriggerProps } from './trigger.svelte';
 export type { SelectValueTextProps } from './value-text.svelte';

package/dist/select/index.js

@@ -1,2 +1 @@
-export { anatomy as selectAnatomy } from '@zag-js/select';
 export * as Select from './select.js';

package/dist/select/indicator.svelte

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

package/dist/select/item-group-label.svelte

@@ -10,12 +10,11 @@
 
   let {children, ...props}: SelectItemGroupLabelProps = $props();
 
-  let context = selectContext.get();
-
+  let select = selectContext.get();
   let itemGroupProps = selectItemGroupPropsContext.get();
 
   let attrs = $derived(
-    mergeProps(props, context.getItemGroupLabelProps({htmlFor: itemGroupProps.id})),
+    mergeProps(props, select.getItemGroupLabelProps({htmlFor: itemGroupProps.id})),
   );
 </script>
 

package/dist/select/item-group.svelte

@@ -13,7 +13,7 @@
 
   let {id, children, ...props}: SelectItemGroupProps = $props();
 
-  let context = selectContext.get();
+  let select = selectContext.get();
 
   let uid = createUniqueId();
 
@@ -21,7 +21,7 @@
     id: id ?? uid,
   });
 
-  let attrs = $derived(mergeProps(props, context.getItemGroupProps(itemGroupProps)));
+  let attrs = $derived(mergeProps(props, select.getItemGroupProps(itemGroupProps)));
 
   selectItemGroupPropsContext.set(() => itemGroupProps);
 </script>

package/dist/select/item-indicator.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: SelectItemIndicatorProps = $props();
 
-  let context = selectContext.get();
-
+  let select = selectContext.get();
   let itemProps = selectItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemIndicatorProps(itemProps)));
+  let attrs = $derived(mergeProps(props, select.getItemIndicatorProps(itemProps)));
 </script>
 
 <span {...attrs}>

package/dist/select/item-text.svelte

@@ -10,17 +10,16 @@
 
   let {children, ...props}: SelectItemTextProps = $props();
 
-  let context = selectContext.get();
-
+  let select = selectContext.get();
   let itemProps = selectItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemTextProps(itemProps)));
+  let attrs = $derived(mergeProps(props, select.getItemTextProps(itemProps)));
 </script>
 
 <span {...attrs}>
   {#if children}
     {@render children?.()}
   {:else}
-    {context.collection.stringifyItem(itemProps.item)}
+    {select.collection.stringifyItem(itemProps.item)}
   {/if}
 </span>

package/dist/select/item.svelte

@@ -14,15 +14,14 @@
 
   let {item, persistFocus, children, ...props}: SelectItemProps = $props();
 
-  let context = selectContext.get();
-
+  let select = selectContext.get();
   let itemProps = $derived({
     item,
     persistFocus,
   });
 
-  let state = $derived(context.getItemState(itemProps));
-  let attrs = $derived(mergeProps(props, context.getItemProps(itemProps)));
+  let state = $derived(select.getItemState(itemProps));
+  let attrs = $derived(mergeProps(props, select.getItemProps(itemProps)));
 
   selectItemPropsContext.set(() => itemProps);
 </script>

package/dist/select/label.svelte

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

package/dist/select/list.svelte

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

package/dist/select/positioner.svelte

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

package/dist/select/root.svelte

@@ -5,7 +5,7 @@
 
   export interface SelectProps<T>
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateSelectProps<T>> {
-    children?: Snippet<[api: CreateSelectReturn]>;
+    children?: Snippet<[select: CreateSelectReturn]>;
   }
 </script>
 
@@ -47,7 +47,7 @@
     ...props
   }: SelectProps<T> = $props();
 
-  let context = createSelect({
+  let select = createSelect({
     id,
     ids,
     form,
@@ -78,11 +78,11 @@
     scrollToIndexFn,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, select.getRootProps()));
 
-  selectContext.set(context);
+  selectContext.set(select);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(select)}
 </div>

package/dist/select/select.d.ts

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/select';
 export { default as ClearTrigger } from './clear-trigger.svelte';
 export { default as Content } from './content.svelte';
 export { default as Control } from './control.svelte';

package/dist/select/select.js

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/select';
 export { default as ClearTrigger } from './clear-trigger.svelte';
 export { default as Content } from './content.svelte';
 export { default as Control } from './control.svelte';

package/dist/select/trigger.svelte

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

package/dist/select/value-text.svelte

@@ -10,16 +10,16 @@
 
   let {children, placeholder, ...props}: SelectValueTextProps = $props();
 
-  let context = selectContext.get();
+  let select = selectContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getValueTextProps()));
+  let attrs = $derived(mergeProps(props, select.getValueTextProps()));
 </script>
 
 <span {...attrs}>
   {#if children}
     {@render children?.()}
-  {:else if context.value.length}
-    {context.valueAsString}
+  {:else if select.value.length}
+    {select.valueAsString}
   {:else}
     {placeholder}
   {/if}

package/dist/slider/control.svelte

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

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

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

package/dist/slider/hidden-input.svelte

@@ -10,11 +10,10 @@
 
   let {...props}: SliderHiddenInputProps = $props();
 
-  let context = sliderContext.get();
-
+  let slider = sliderContext.get();
   let thumbProps = sliderThumbPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getHiddenInputProps(thumbProps)));
+  let attrs = $derived(mergeProps(props, slider.getHiddenInputProps(thumbProps)));
 </script>
 
 <input {...attrs} />

package/dist/slider/index.d.ts

@@ -1,4 +1,4 @@
-export { anatomy as sliderAnatomy } from '@zag-js/slider';
+export * as Slider from './slider.js';
 export type { SliderControlProps } from './control.svelte';
 export type { SliderHiddenInputProps } from './hidden-input.svelte';
 export type { SliderLabelProps } from './label.svelte';
@@ -6,7 +6,6 @@ export type { SliderMarkerGroupProps } from './marker-group.svelte';
 export type { SliderMarkerProps } from './marker.svelte';
 export type { SliderRangeProps } from './range.svelte';
 export type { SliderProps } from './root.svelte';
-export * as Slider from './slider.js';
 export type { SliderThumbProps } from './thumb.svelte';
 export type { SliderTrackProps } from './track.svelte';
 export type { SliderValueTextProps } from './value-text.svelte';

package/dist/slider/index.js

@@ -1,2 +1 @@
-export { anatomy as sliderAnatomy } from '@zag-js/slider';
 export * as Slider from './slider.js';

package/dist/slider/label.svelte

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

package/dist/slider/marker-group.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: SliderMarkerGroupProps = $props();
 
-  let context = sliderContext.get();
+  let slider = sliderContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getMarkerGroupProps()));
+  let attrs = $derived(mergeProps(props, slider.getMarkerGroupProps()));
 </script>
 
 <div {...attrs}>

package/dist/slider/marker.svelte

@@ -11,12 +11,12 @@
 
   let {value, children, ...props}: SliderMarkerProps = $props();
 
-  let context = sliderContext.get();
+  let slider = sliderContext.get();
 
   let attrs = $derived(
     mergeProps(
       props,
-      context.getMarkerProps({
+      slider.getMarkerProps({
         value,
       }),
     ),