ui-ingredients 0.0.11 → 0.0.13

package/dist/slider/hidden-input.svelte

@@ -1,22 +1,26 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface SliderHiddenInputProps
-    extends HtmlIngredientProps<'input'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useSliderContext, useSliderThumbContext} from './context.svelte.js';
-
-  let {...props}: SliderHiddenInputProps = $props();
-
-  let context = useSliderContext();
-  let thumbContext = useSliderThumbContext();
-
-  let attrs = $derived(
-    mergeProps(props, context.getHiddenInputProps(thumbContext)),
-  );
-</script>
-
-<input {...attrs} />
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SliderHiddenInputProps
+    extends HtmlIngredientProps<'input'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {
+    useSliderContext,
+    useSliderThumbPropsContext,
+  } from './context.svelte.js';
+
+  let {...props}: SliderHiddenInputProps = $props();
+
+  let context = useSliderContext();
+
+  let thumbProps = useSliderThumbPropsContext();
+
+  let attrs = $derived(
+    mergeProps(props, context.getHiddenInputProps(thumbProps)),
+  );
+</script>
+
+<input {...attrs} />

package/dist/slider/label.svelte

@@ -1,20 +1,20 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface SliderLabelProps extends HtmlIngredientProps<'label'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useSliderContext} from './context.svelte.js';
-
-  let {children, ...props}: SliderLabelProps = $props();
-
-  let context = useSliderContext();
-
-  let attrs = $derived(mergeProps(props, context.getLabelProps()));
-</script>
-
-<label {...attrs}>
-  {@render children?.()}
-</label>
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SliderLabelProps extends HtmlIngredientProps<'label'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useSliderContext} from './context.svelte.js';
+
+  let {children, ...props}: SliderLabelProps = $props();
+
+  let context = useSliderContext();
+
+  let attrs = $derived(mergeProps(props, context.getLabelProps()));
+</script>
+
+<label {...attrs}>
+  {@render children?.()}
+</label>

package/dist/slider/marker-group.svelte

@@ -1,20 +1,20 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface SliderMarkerGroupProps extends HtmlIngredientProps<'div'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useSliderContext} from './context.svelte.js';
-
-  let {children, ...props}: SliderMarkerGroupProps = $props();
-
-  let context = useSliderContext();
-
-  let attrs = $derived(mergeProps(props, context.getMarkerGroupProps()));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SliderMarkerGroupProps extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useSliderContext} from './context.svelte.js';
+
+  let {children, ...props}: SliderMarkerGroupProps = $props();
+
+  let context = useSliderContext();
+
+  let attrs = $derived(mergeProps(props, context.getMarkerGroupProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/slider/marker.svelte

@@ -1,29 +1,29 @@
-<script lang="ts" context="module">
-  import type {Assign, HtmlIngredientProps} from '../types.js';
-  import type {MarkerProps} from '@zag-js/slider';
-
-  export interface SliderMarkerProps
-    extends Assign<HtmlIngredientProps<'span'>, MarkerProps> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useSliderContext} from './context.svelte.js';
-
-  let {value, children, ...props}: SliderMarkerProps = $props();
-
-  let context = useSliderContext();
-
-  let attrs = $derived(
-    mergeProps(
-      props,
-      context.getMarkerProps({
-        value,
-      }),
-    ),
-  );
-</script>
-
-<span {...attrs}>
-  {@render children?.()}
-</span>
+<script lang="ts" context="module">
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {MarkerProps} from '@zag-js/slider';
+
+  export interface SliderMarkerProps
+    extends Assign<HtmlIngredientProps<'span'>, MarkerProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useSliderContext} from './context.svelte.js';
+
+  let {value, children, ...props}: SliderMarkerProps = $props();
+
+  let context = useSliderContext();
+
+  let attrs = $derived(
+    mergeProps(
+      props,
+      context.getMarkerProps({
+        value,
+      }),
+    ),
+  );
+</script>
+
+<span {...attrs}>
+  {@render children?.()}
+</span>

package/dist/slider/range.svelte

@@ -1,20 +1,20 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface SliderRangeProps extends HtmlIngredientProps<'div'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useSliderContext} from './context.svelte.js';
-
-  let {children, ...props}: SliderRangeProps = $props();
-
-  let context = useSliderContext();
-
-  let attrs = $derived(mergeProps(props, context.getRangeProps()));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SliderRangeProps extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useSliderContext} from './context.svelte.js';
+
+  let {children, ...props}: SliderRangeProps = $props();
+
+  let context = useSliderContext();
+
+  let attrs = $derived(mergeProps(props, context.getRangeProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/slider/root.svelte

@@ -1,86 +1,91 @@
-<script lang="ts" context="module">
-  import type {Assign, HtmlIngredientProps} from '../types.js';
-  import type {Snippet} from 'svelte';
-  import type {
-    CreateSliderContextProps,
-    CreateSliderContextReturn,
-  } from './context.svelte.js';
-
-  export interface SliderProps
-    extends Assign<
-      Omit<HtmlIngredientProps<'div'>, 'children'>,
-      Omit<CreateSliderContextProps, 'id'>
-    > {
-    children?: Snippet<[context: CreateSliderContextReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {uuid} from '../utils.svelte.js';
-  import {mergeProps} from '@zag-js/svelte';
-  import {createSliderContext, setSliderContext} from './context.svelte.js';
-
-  let {
-    id,
-    ids,
-    dir,
-    max,
-    min,
-    step,
-    form,
-    name,
-    value,
-    origin,
-    invalid,
-    readOnly,
-    disabled,
-    orientation,
-    thumbAlignment,
-    thumbSize,
-    minStepsBetweenThumbs,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledby,
-    onFocusChange,
-    onValueChange,
-    onValueChangeEnd,
-    getAriaValueText,
-    getRootNode,
-    children,
-    ...props
-  }: SliderProps = $props();
-
-  let context = createSliderContext({
-    id: id ?? uuid(),
-    ids,
-    dir,
-    max,
-    min,
-    step,
-    form,
-    name,
-    value: $state.snapshot(value),
-    origin,
-    invalid,
-    readOnly,
-    disabled,
-    orientation,
-    thumbAlignment,
-    thumbSize,
-    minStepsBetweenThumbs,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledby,
-    onFocusChange,
-    onValueChange,
-    onValueChangeEnd,
-    getAriaValueText,
-    getRootNode,
-  });
-
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
-
-  setSliderContext(context);
-</script>
-
-<div {...attrs}>
-  {@render children?.(context)}
-</div>
+<script lang="ts" context="module">
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateSliderContextProps,
+    CreateSliderContextReturn,
+  } from './context.svelte.js';
+
+  export interface SliderProps
+    extends Assign<
+      Omit<HtmlIngredientProps<'div'>, 'children'>,
+      Omit<CreateSliderContextProps, 'id'>
+    > {
+    children?: Snippet<[context: CreateSliderContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {useEnvironmentContext} from '../environment-provider/index.js';
+  import {useLocaleContext} from '../locale-provider/index.js';
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {createSliderContext, setSliderContext} from './context.svelte.js';
+
+  let {
+    id,
+    ids,
+    dir,
+    max,
+    min,
+    step,
+    form,
+    name,
+    value,
+    origin,
+    invalid,
+    readOnly,
+    disabled,
+    orientation,
+    thumbAlignment,
+    thumbSize,
+    minStepsBetweenThumbs,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    onFocusChange,
+    onValueChange,
+    onValueChangeEnd,
+    getAriaValueText,
+    getRootNode,
+    children,
+    ...props
+  }: SliderProps = $props();
+
+  let localeContext = useLocaleContext();
+  let environmentContext = useEnvironmentContext();
+
+  let context = createSliderContext({
+    id: id ?? uuid(),
+    ids,
+    dir: dir ?? localeContext?.dir,
+    max,
+    min,
+    step,
+    form,
+    name,
+    value: $state.snapshot(value),
+    origin,
+    invalid,
+    readOnly,
+    disabled,
+    orientation,
+    thumbAlignment,
+    thumbSize,
+    minStepsBetweenThumbs,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    onFocusChange,
+    onValueChange,
+    onValueChangeEnd,
+    getAriaValueText,
+    getRootNode: getRootNode ?? environmentContext?.getRootNode,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  setSliderContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>

package/dist/slider/thumb.svelte

@@ -1,35 +1,38 @@
-<script lang="ts" context="module">
-  import type {Assign, HtmlIngredientProps} from '../types.js';
-  import type {ThumbProps} from '@zag-js/slider';
-
-  export interface SliderThumbProps
-    extends Assign<HtmlIngredientProps<'div'>, ThumbProps> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {setSliderThumbContext, useSliderContext} from './context.svelte.js';
-
-  let {name, index, children, ...props}: SliderThumbProps = $props();
-
-  let context = useSliderContext();
-
-  let attrs = $derived(
-    mergeProps(
-      props,
-      context.getThumbProps({
-        name,
-        index,
-      }),
-    ),
-  );
-
-  setSliderThumbContext({
-    name,
-    index,
-  });
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {ThumbProps} from '@zag-js/slider';
+
+  export interface SliderThumbProps
+    extends Assign<HtmlIngredientProps<'div'>, ThumbProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {
+    setSliderThumbPropsContext,
+    useSliderContext,
+  } from './context.svelte.js';
+
+  let {name, index, children, ...props}: SliderThumbProps = $props();
+
+  let context = useSliderContext();
+
+  let attrs = $derived(
+    mergeProps(
+      props,
+      context.getThumbProps({
+        name,
+        index,
+      }),
+    ),
+  );
+
+  setSliderThumbPropsContext({
+    name,
+    index,
+  });
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/slider/track.svelte

@@ -1,20 +1,20 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface SliderTrackProps extends HtmlIngredientProps<'div'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useSliderContext} from './context.svelte.js';
-
-  let {children, ...props}: SliderTrackProps = $props();
-
-  let context = useSliderContext();
-
-  let attrs = $derived(mergeProps(props, context.getTrackProps()));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SliderTrackProps extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useSliderContext} from './context.svelte.js';
+
+  let {children, ...props}: SliderTrackProps = $props();
+
+  let context = useSliderContext();
+
+  let attrs = $derived(mergeProps(props, context.getTrackProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/slider/value-text.svelte

@@ -1,24 +1,24 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface SliderValueTextProps extends HtmlIngredientProps<'span'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useSliderContext} from './context.svelte.js';
-
-  let {children, ...props}: SliderValueTextProps = $props();
-
-  let context = useSliderContext();
-
-  let attrs = $derived(mergeProps(props, context.getValueTextProps()));
-</script>
-
-<span {...attrs}>
-  {#if children}
-    {@render children()}
-  {:else}
-    {context.value.join(', ')}
-  {/if}
-</span>
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SliderValueTextProps extends HtmlIngredientProps<'span'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useSliderContext} from './context.svelte.js';
+
+  let {children, ...props}: SliderValueTextProps = $props();
+
+  let context = useSliderContext();
+
+  let attrs = $derived(mergeProps(props, context.getValueTextProps()));
+</script>
+
+<span {...attrs}>
+  {#if children}
+    {@render children()}
+  {:else}
+    {context.value.join(', ')}
+  {/if}
+</span>

package/dist/steps/content.svelte

@@ -1,22 +1,22 @@
-<script lang="ts" context="module">
-  import type {Assign, HtmlIngredientProps} from '../types.js';
-  import type {ItemProps} from '@zag-js/steps';
-
-  export interface StepsContentProps
-    extends Assign<HtmlIngredientProps<'div'>, ItemProps> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useStepsContext} from './context.svelte.js';
-
-  let {index, children, ...props}: StepsContentProps = $props();
-
-  let context = useStepsContext();
-
-  let attrs = $derived(mergeProps(props, context.getContentProps({index})));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {ItemProps} from '@zag-js/steps';
+
+  export interface StepsContentProps
+    extends Assign<HtmlIngredientProps<'div'>, ItemProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useStepsContext} from './context.svelte.js';
+
+  let {index, children, ...props}: StepsContentProps = $props();
+
+  let context = useStepsContext();
+
+  let attrs = $derived(mergeProps(props, context.getContentProps({index})));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/steps/context.svelte.d.ts

@@ -6,5 +6,5 @@ export interface CreateStepsContextReturn extends ReturnType<typeof createStepsC
 export declare function createStepsContext(props: CreateStepsContextProps): any;
 export declare function setStepsContext(value: CreateStepsContextReturn): void;
 export declare function useStepsContext(): CreateStepsContextReturn;
-export declare function setStepsItemContext(value: steps.ItemProps): void;
-export declare function useStepsItemContext(): steps.ItemProps;
+export declare function setStepsItemPropsContext(value: steps.ItemProps): void;
+export declare function useStepsItemPropsContext(): steps.ItemProps;

package/dist/steps/context.svelte.js

@@ -12,9 +12,9 @@ export function setStepsContext(value) {
 export function useStepsContext() {
     return getContext('Steps');
 }
-export function setStepsItemContext(value) {
+export function setStepsItemPropsContext(value) {
     setContext('StepsItem', value);
 }
-export function useStepsItemContext() {
+export function useStepsItemPropsContext() {
     return getContext('StepsItem');
 }