ui-ingredients 0.0.10 → 0.0.12

package/dist/slider/control.svelte

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

package/dist/slider/control.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { SvelteHtmlProps } from '../types.js';
-export interface SliderControlProps extends SvelteHtmlProps<'div'> {
+import type { HtmlIngredientProps } from '../types.js';
+export interface SliderControlProps extends HtmlIngredientProps<'div'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/slider/hidden-input.svelte

@@ -1,21 +1,26 @@
-<script lang="ts" context="module">
-  import type {SvelteHtmlProps} from '../types.js';
-
-  export interface SliderHiddenInputProps extends SvelteHtmlProps<'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/hidden-input.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { SvelteHtmlProps } from '../types.js';
-export interface SliderHiddenInputProps extends SvelteHtmlProps<'input'> {
+import type { HtmlIngredientProps } from '../types.js';
+export interface SliderHiddenInputProps extends HtmlIngredientProps<'input'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/slider/index.d.ts

@@ -1,10 +1,12 @@
-export { default as Control, type SliderControlProps } from './control.svelte';
-export { default as HiddenInput, type SliderHiddenInputProps, } from './hidden-input.svelte';
-export { default as Label, type SliderLabelProps } from './label.svelte';
-export { default as MarkerGroup, type SliderMarkerGroupProps, } from './marker-group.svelte';
-export { default as Marker, type SliderMarkerProps } from './marker.svelte';
-export { default as Range, type SliderRangeProps } from './range.svelte';
-export { default as Root, type SliderProps } from './root.svelte';
-export { default as Thumb, type SliderThumbProps } from './thumb.svelte';
-export { default as Track, type SliderTrackProps } from './track.svelte';
-export { default as ValueText, type SliderValueTextProps, } from './value-text.svelte';
+export { anatomy as sliderAnatomy } from '@zag-js/slider';
+export type { SliderControlProps } from './control.svelte';
+export type { SliderHiddenInputProps } from './hidden-input.svelte';
+export type { SliderLabelProps } from './label.svelte';
+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,10 +1,2 @@
-export { default as Control } from './control.svelte';
-export { default as HiddenInput, } from './hidden-input.svelte';
-export { default as Label } from './label.svelte';
-export { default as MarkerGroup, } from './marker-group.svelte';
-export { default as Marker } from './marker.svelte';
-export { default as Range } from './range.svelte';
-export { default as Root } from './root.svelte';
-export { default as Thumb } from './thumb.svelte';
-export { default as Track } from './track.svelte';
-export { default as ValueText, } from './value-text.svelte';
+export { anatomy as sliderAnatomy } from '@zag-js/slider';
+export * as Slider from './slider.js';

package/dist/slider/label.svelte

@@ -1,20 +1,20 @@
-<script lang="ts" context="module">
-  import type {SvelteHtmlProps} from '../types.js';
-
-  export interface SliderLabelProps extends SvelteHtmlProps<'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/label.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { SvelteHtmlProps } from '../types.js';
-export interface SliderLabelProps extends SvelteHtmlProps<'label'> {
+import type { HtmlIngredientProps } from '../types.js';
+export interface SliderLabelProps extends HtmlIngredientProps<'label'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/slider/marker-group.svelte

@@ -1,20 +1,20 @@
-<script lang="ts" context="module">
-  import type {SvelteHtmlProps} from '../types.js';
-
-  export interface SliderMarkerGroupProps extends SvelteHtmlProps<'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-group.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { SvelteHtmlProps } from '../types.js';
-export interface SliderMarkerGroupProps extends SvelteHtmlProps<'div'> {
+import type { HtmlIngredientProps } from '../types.js';
+export interface SliderMarkerGroupProps extends HtmlIngredientProps<'div'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/slider/marker.svelte

@@ -1,29 +1,29 @@
-<script lang="ts" context="module">
-  import type {Assign, SvelteHtmlProps} from '../types.js';
-  import type {MarkerProps} from '@zag-js/slider';
-
-  export interface SliderMarkerProps
-    extends Assign<SvelteHtmlProps<'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/marker.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { Assign, SvelteHtmlProps } from '../types.js';
+import type { Assign, HtmlIngredientProps } from '../types.js';
 import type { MarkerProps } from '@zag-js/slider';
-export interface SliderMarkerProps extends Assign<SvelteHtmlProps<'span'>, MarkerProps> {
+export interface SliderMarkerProps extends Assign<HtmlIngredientProps<'span'>, MarkerProps> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/slider/range.svelte

@@ -1,20 +1,20 @@
-<script lang="ts" context="module">
-  import type {SvelteHtmlProps} from '../types.js';
-
-  export interface SliderRangeProps extends SvelteHtmlProps<'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/range.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { SvelteHtmlProps } from '../types.js';
-export interface SliderRangeProps extends SvelteHtmlProps<'div'> {
+import type { HtmlIngredientProps } from '../types.js';
+export interface SliderRangeProps extends HtmlIngredientProps<'div'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/slider/root.svelte

@@ -1,86 +1,91 @@
-<script lang="ts" context="module">
-  import type {Assign, SvelteHtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
-  import type {
-    CreateSliderContextProps,
-    CreateSliderContextReturn,
-  } from './context.svelte.js';
-
-  export interface SliderProps
-    extends Assign<
-      Omit<SvelteHtmlProps<'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/root.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { Assign, SvelteHtmlProps } from '../types.js';
+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<SvelteHtmlProps<'div'>, 'children'>, Omit<CreateSliderContextProps, 'id'>> {
+export interface SliderProps extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreateSliderContextProps, 'id'>> {
     children?: Snippet<[context: CreateSliderContextReturn]>;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {

package/dist/slider/slider.d.ts

@@ -0,0 +1,10 @@
+export { default as Control } from './control.svelte';
+export { default as HiddenInput } from './hidden-input.svelte';
+export { default as Label } from './label.svelte';
+export { default as MarkerGroup } from './marker-group.svelte';
+export { default as Marker } from './marker.svelte';
+export { default as Range } from './range.svelte';
+export { default as Root } from './root.svelte';
+export { default as Thumb } from './thumb.svelte';
+export { default as Track } from './track.svelte';
+export { default as ValueText } from './value-text.svelte';

package/dist/slider/slider.js

@@ -0,0 +1,10 @@
+export { default as Control } from './control.svelte';
+export { default as HiddenInput } from './hidden-input.svelte';
+export { default as Label } from './label.svelte';
+export { default as MarkerGroup } from './marker-group.svelte';
+export { default as Marker } from './marker.svelte';
+export { default as Range } from './range.svelte';
+export { default as Root } from './root.svelte';
+export { default as Thumb } from './thumb.svelte';
+export { default as Track } from './track.svelte';
+export { default as ValueText } from './value-text.svelte';