@ark-ui/svelte 5.0.5 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/dist/components/angle-slider/angle-slider-context.svelte +17 -0
  2. package/dist/components/angle-slider/angle-slider-context.svelte.d.ts +8 -0
  3. package/dist/components/angle-slider/angle-slider-control.svelte +18 -0
  4. package/dist/components/angle-slider/angle-slider-control.svelte.d.ts +8 -0
  5. package/dist/components/angle-slider/angle-slider-hidden-input.svelte +18 -0
  6. package/dist/components/angle-slider/angle-slider-hidden-input.svelte.d.ts +8 -0
  7. package/dist/components/angle-slider/angle-slider-label.svelte +18 -0
  8. package/dist/components/angle-slider/angle-slider-label.svelte.d.ts +8 -0
  9. package/dist/components/angle-slider/angle-slider-marker-group.svelte +18 -0
  10. package/dist/components/angle-slider/angle-slider-marker-group.svelte.d.ts +8 -0
  11. package/dist/components/angle-slider/angle-slider-marker.svelte +22 -0
  12. package/dist/components/angle-slider/angle-slider-marker.svelte.d.ts +9 -0
  13. package/dist/components/angle-slider/angle-slider-root-provider.svelte +24 -0
  14. package/dist/components/angle-slider/angle-slider-root-provider.svelte.d.ts +12 -0
  15. package/dist/components/angle-slider/angle-slider-root.svelte +54 -0
  16. package/dist/components/angle-slider/angle-slider-root.svelte.d.ts +9 -0
  17. package/dist/components/angle-slider/angle-slider-thumb.svelte +18 -0
  18. package/dist/components/angle-slider/angle-slider-thumb.svelte.d.ts +8 -0
  19. package/dist/components/angle-slider/angle-slider-value-text.svelte +18 -0
  20. package/dist/components/angle-slider/angle-slider-value-text.svelte.d.ts +8 -0
  21. package/dist/components/angle-slider/angle-slider.anatomy.d.ts +1 -0
  22. package/dist/components/angle-slider/angle-slider.anatomy.js +1 -0
  23. package/dist/components/angle-slider/angle-slider.d.ts +10 -0
  24. package/dist/components/angle-slider/angle-slider.js +10 -0
  25. package/dist/components/angle-slider/index.d.ts +14 -0
  26. package/dist/components/angle-slider/index.js +14 -0
  27. package/dist/components/angle-slider/use-angle-slider-context.d.ts +4 -0
  28. package/dist/components/angle-slider/use-angle-slider-context.js +4 -0
  29. package/dist/components/angle-slider/use-angle-slider.svelte.d.ts +9 -0
  30. package/dist/components/angle-slider/use-angle-slider.svelte.js +20 -0
  31. package/dist/components/checkbox/split-checkbox-props.svelte.d.ts +1 -1
  32. package/dist/components/color-picker/split-color-picker-props.svelte.d.ts +1 -1
  33. package/dist/components/color-picker/split-color-picker-props.svelte.js +1 -0
  34. package/dist/components/date-picker/date-picker-root.svelte +1 -0
  35. package/dist/components/editable/editable-split-props.d.ts +1 -1
  36. package/dist/components/index.d.ts +1 -0
  37. package/dist/components/index.js +1 -0
  38. package/dist/components/number-input/split-number-input-props.svelte.d.ts +1 -1
  39. package/dist/components/rating-group/split-rating-group-props.svelte.d.ts +1 -1
  40. package/package.json +58 -58
@@ -0,0 +1,17 @@
1
+ <script lang="ts" module>
2
+ import type { Snippet } from 'svelte'
3
+ import type { UseAngleSliderContext } from './use-angle-slider-context'
4
+
5
+ export interface AngleSliderContextProps {
6
+ render: Snippet<[UseAngleSliderContext]>
7
+ }
8
+ </script>
9
+
10
+ <script lang="ts">
11
+ import { useAngleSliderContext } from './use-angle-slider-context'
12
+
13
+ const { render }: AngleSliderContextProps = $props()
14
+ const angleSlider = useAngleSliderContext()
15
+ </script>
16
+
17
+ {@render render?.(angleSlider)}
@@ -0,0 +1,8 @@
1
+ import type { Snippet } from 'svelte';
2
+ import type { UseAngleSliderContext } from './use-angle-slider-context';
3
+ export interface AngleSliderContextProps {
4
+ render: Snippet<[UseAngleSliderContext]>;
5
+ }
6
+ declare const AngleSliderContext: import("svelte").Component<AngleSliderContextProps, {}, "">;
7
+ type AngleSliderContext = ReturnType<typeof AngleSliderContext>;
8
+ export default AngleSliderContext;
@@ -0,0 +1,18 @@
1
+ <script lang="ts" module>
2
+ import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
3
+
4
+ export interface AngleSliderControlBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
5
+ export interface AngleSliderControlProps extends HTMLProps<'div'>, AngleSliderControlBaseProps {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import { mergeProps } from '@zag-js/svelte'
10
+ import { Ark } from '../factory'
11
+ import { useAngleSliderContext } from './use-angle-slider-context'
12
+
13
+ let { ref = $bindable(null), ...props }: AngleSliderControlProps = $props()
14
+ const angleSlider = useAngleSliderContext()
15
+ const mergedProps = $derived(mergeProps(angleSlider().getControlProps(), props))
16
+ </script>
17
+
18
+ <Ark as="div" bind:ref {...mergedProps} />
@@ -0,0 +1,8 @@
1
+ import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
2
+ export interface AngleSliderControlBaseProps extends PolymorphicProps<'div'>, RefAttribute {
3
+ }
4
+ export interface AngleSliderControlProps extends HTMLProps<'div'>, AngleSliderControlBaseProps {
5
+ }
6
+ declare const AngleSliderControl: import("svelte").Component<AngleSliderControlProps, {}, "ref">;
7
+ type AngleSliderControl = ReturnType<typeof AngleSliderControl>;
8
+ export default AngleSliderControl;
@@ -0,0 +1,18 @@
1
+ <script lang="ts" module>
2
+ import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
3
+
4
+ export interface AngleSliderHiddenInputBaseProps extends PolymorphicProps<'input'>, RefAttribute {}
5
+ export interface AngleSliderHiddenInputProps extends HTMLProps<'input'>, AngleSliderHiddenInputBaseProps {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import { mergeProps } from '@zag-js/svelte'
10
+ import { Ark } from '../factory'
11
+ import { useAngleSliderContext } from './use-angle-slider-context'
12
+
13
+ let { ref = $bindable(null), ...props }: AngleSliderHiddenInputProps = $props()
14
+ const angleSlider = useAngleSliderContext()
15
+ const mergedProps = $derived(mergeProps(angleSlider().getHiddenInputProps(), props))
16
+ </script>
17
+
18
+ <Ark as="input" bind:ref {...mergedProps} />
@@ -0,0 +1,8 @@
1
+ import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
2
+ export interface AngleSliderHiddenInputBaseProps extends PolymorphicProps<'input'>, RefAttribute {
3
+ }
4
+ export interface AngleSliderHiddenInputProps extends HTMLProps<'input'>, AngleSliderHiddenInputBaseProps {
5
+ }
6
+ declare const AngleSliderHiddenInput: import("svelte").Component<AngleSliderHiddenInputProps, {}, "ref">;
7
+ type AngleSliderHiddenInput = ReturnType<typeof AngleSliderHiddenInput>;
8
+ export default AngleSliderHiddenInput;
@@ -0,0 +1,18 @@
1
+ <script lang="ts" module>
2
+ import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
3
+
4
+ export interface AngleSliderLabelBaseProps extends PolymorphicProps<'label'>, RefAttribute {}
5
+ export interface AngleSliderLabelProps extends HTMLProps<'label'>, AngleSliderLabelBaseProps {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import { mergeProps } from '@zag-js/svelte'
10
+ import { Ark } from '../factory'
11
+ import { useAngleSliderContext } from './use-angle-slider-context'
12
+
13
+ let { ref = $bindable(null), ...props }: AngleSliderLabelProps = $props()
14
+ const angleSlider = useAngleSliderContext()
15
+ const mergedProps = $derived(mergeProps(angleSlider().getLabelProps(), props))
16
+ </script>
17
+
18
+ <Ark as="label" bind:ref {...mergedProps} />
@@ -0,0 +1,8 @@
1
+ import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
2
+ export interface AngleSliderLabelBaseProps extends PolymorphicProps<'label'>, RefAttribute {
3
+ }
4
+ export interface AngleSliderLabelProps extends HTMLProps<'label'>, AngleSliderLabelBaseProps {
5
+ }
6
+ declare const AngleSliderLabel: import("svelte").Component<AngleSliderLabelProps, {}, "ref">;
7
+ type AngleSliderLabel = ReturnType<typeof AngleSliderLabel>;
8
+ export default AngleSliderLabel;
@@ -0,0 +1,18 @@
1
+ <script lang="ts" module>
2
+ import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
3
+
4
+ export interface AngleSliderMarkerGroupBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
5
+ export interface AngleSliderMarkerGroupProps extends HTMLProps<'div'>, AngleSliderMarkerGroupBaseProps {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import { mergeProps } from '@zag-js/svelte'
10
+ import { Ark } from '../factory'
11
+ import { useAngleSliderContext } from './use-angle-slider-context'
12
+
13
+ let { ref = $bindable(null), ...props }: AngleSliderMarkerGroupProps = $props()
14
+ const angleSlider = useAngleSliderContext()
15
+ const mergedProps = $derived(mergeProps(angleSlider().getMarkerGroupProps(), props))
16
+ </script>
17
+
18
+ <Ark as="div" bind:ref {...mergedProps} />
@@ -0,0 +1,8 @@
1
+ import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
2
+ export interface AngleSliderMarkerGroupBaseProps extends PolymorphicProps<'div'>, RefAttribute {
3
+ }
4
+ export interface AngleSliderMarkerGroupProps extends HTMLProps<'div'>, AngleSliderMarkerGroupBaseProps {
5
+ }
6
+ declare const AngleSliderMarkerGroup: import("svelte").Component<AngleSliderMarkerGroupProps, {}, "ref">;
7
+ type AngleSliderMarkerGroup = ReturnType<typeof AngleSliderMarkerGroup>;
8
+ export default AngleSliderMarkerGroup;
@@ -0,0 +1,22 @@
1
+ <script lang="ts" module>
2
+ import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
3
+ import type { MarkerProps } from '@zag-js/angle-slider'
4
+
5
+ export interface AngleSliderMarkerBaseProps extends MarkerProps, PolymorphicProps<'span'>, RefAttribute {}
6
+ export interface AngleSliderMarkerProps extends HTMLProps<'span'>, AngleSliderMarkerBaseProps {}
7
+ </script>
8
+
9
+ <script lang="ts">
10
+ import { mergeProps } from '@zag-js/svelte'
11
+ import { createSplitProps } from '../../utils/create-split-props'
12
+ import { Ark } from '../factory'
13
+ import { useAngleSliderContext } from './use-angle-slider-context'
14
+
15
+ let { ref = $bindable(null), ...props }: AngleSliderMarkerProps = $props()
16
+ const [markerProps, localProps] = $derived(createSplitProps<MarkerProps>()(props, ['value']))
17
+
18
+ const angleSlider = useAngleSliderContext()
19
+ const mergedProps = $derived(mergeProps(angleSlider().getMarkerProps(markerProps), localProps))
20
+ </script>
21
+
22
+ <Ark as="span" bind:ref {...mergedProps} />
@@ -0,0 +1,9 @@
1
+ import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
2
+ import type { MarkerProps } from '@zag-js/angle-slider';
3
+ export interface AngleSliderMarkerBaseProps extends MarkerProps, PolymorphicProps<'span'>, RefAttribute {
4
+ }
5
+ export interface AngleSliderMarkerProps extends HTMLProps<'span'>, AngleSliderMarkerBaseProps {
6
+ }
7
+ declare const AngleSliderMarker: import("svelte").Component<AngleSliderMarkerProps, {}, "ref">;
8
+ type AngleSliderMarker = ReturnType<typeof AngleSliderMarker>;
9
+ export default AngleSliderMarker;
@@ -0,0 +1,24 @@
1
+ <script lang="ts" module>
2
+ import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
3
+ import type { UseAngleSliderReturn } from './use-angle-slider.svelte'
4
+
5
+ interface RootProviderProps {
6
+ value: UseAngleSliderReturn
7
+ }
8
+
9
+ export interface AngleSliderRootProviderBaseProps extends RootProviderProps, RefAttribute {}
10
+ export interface AngleSliderRootProviderProps extends Assign<HTMLProps<'div'>, AngleSliderRootProviderBaseProps> {}
11
+ </script>
12
+
13
+ <script lang="ts">
14
+ import { mergeProps } from '@zag-js/svelte'
15
+ import { Ark } from '../factory'
16
+ import { AngleSliderProvider } from './use-angle-slider-context'
17
+
18
+ let { ref = $bindable(null), value: angleSlider, ...localProps }: AngleSliderRootProviderProps = $props()
19
+ const mergedProps = $derived(mergeProps(angleSlider().getRootProps(), localProps))
20
+
21
+ AngleSliderProvider(angleSlider)
22
+ </script>
23
+
24
+ <Ark as="div" bind:ref {...mergedProps} />
@@ -0,0 +1,12 @@
1
+ import type { Assign, HTMLProps, RefAttribute } from '../../types';
2
+ import type { UseAngleSliderReturn } from './use-angle-slider.svelte';
3
+ interface RootProviderProps {
4
+ value: UseAngleSliderReturn;
5
+ }
6
+ export interface AngleSliderRootProviderBaseProps extends RootProviderProps, RefAttribute {
7
+ }
8
+ export interface AngleSliderRootProviderProps extends Assign<HTMLProps<'div'>, AngleSliderRootProviderBaseProps> {
9
+ }
10
+ declare const AngleSliderRootProvider: import("svelte").Component<AngleSliderRootProviderProps, {}, "ref">;
11
+ type AngleSliderRootProvider = ReturnType<typeof AngleSliderRootProvider>;
12
+ export default AngleSliderRootProvider;
@@ -0,0 +1,54 @@
1
+ <script lang="ts" module>
2
+ import type { Assign, HTMLProps, Optional, PolymorphicProps, RefAttribute } from '../../types'
3
+ import type { UseAngleSliderProps } from './use-angle-slider.svelte'
4
+
5
+ export interface AngleSliderRootBaseProps
6
+ extends Optional<UseAngleSliderProps, 'id'>,
7
+ PolymorphicProps<'div'>,
8
+ RefAttribute {}
9
+ export interface AngleSliderRootProps extends Assign<HTMLProps<'div'>, AngleSliderRootBaseProps> {}
10
+ </script>
11
+
12
+ <script lang="ts">
13
+ import { mergeProps } from '@zag-js/svelte'
14
+ import { createSplitProps } from '../../utils/create-split-props'
15
+ import { Ark } from '../factory'
16
+ import { AngleSliderProvider } from './use-angle-slider-context'
17
+ import { useAngleSlider } from './use-angle-slider.svelte'
18
+
19
+ let { ref = $bindable(null), value = $bindable(), ...props }: AngleSliderRootProps = $props()
20
+ const providedId = $props.id()
21
+
22
+ const [useAngleSliderProps, localProps] = $derived(
23
+ createSplitProps<Optional<UseAngleSliderProps, 'id'>>()(props, [
24
+ 'id',
25
+ 'ids',
26
+ 'name',
27
+ 'invalid',
28
+ 'readOnly',
29
+ 'disabled',
30
+ 'onValueChangeEnd',
31
+ 'onValueChange',
32
+ 'defaultValue',
33
+ 'value',
34
+ 'step',
35
+ ]),
36
+ )
37
+
38
+ const resolvedProps = $derived<UseAngleSliderProps>({
39
+ ...useAngleSliderProps,
40
+ id: useAngleSliderProps.id ?? providedId,
41
+ value,
42
+ onValueChange(details) {
43
+ useAngleSliderProps.onValueChange?.(details)
44
+ if (value !== undefined) value = details.value
45
+ },
46
+ })
47
+
48
+ const angleSlider = useAngleSlider(() => resolvedProps)
49
+ const mergedProps = $derived(mergeProps(angleSlider().getRootProps(), localProps))
50
+
51
+ AngleSliderProvider(angleSlider)
52
+ </script>
53
+
54
+ <Ark as="div" bind:ref {...mergedProps} />
@@ -0,0 +1,9 @@
1
+ import type { Assign, HTMLProps, Optional, PolymorphicProps, RefAttribute } from '../../types';
2
+ import type { UseAngleSliderProps } from './use-angle-slider.svelte';
3
+ export interface AngleSliderRootBaseProps extends Optional<UseAngleSliderProps, 'id'>, PolymorphicProps<'div'>, RefAttribute {
4
+ }
5
+ export interface AngleSliderRootProps extends Assign<HTMLProps<'div'>, AngleSliderRootBaseProps> {
6
+ }
7
+ declare const AngleSliderRoot: import("svelte").Component<AngleSliderRootProps, {}, "ref" | "value">;
8
+ type AngleSliderRoot = ReturnType<typeof AngleSliderRoot>;
9
+ export default AngleSliderRoot;
@@ -0,0 +1,18 @@
1
+ <script lang="ts" module>
2
+ import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
3
+
4
+ export interface AngleSliderThumbBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
5
+ export interface AngleSliderThumbProps extends HTMLProps<'div'>, AngleSliderThumbBaseProps {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import { mergeProps } from '@zag-js/svelte'
10
+ import { Ark } from '../factory'
11
+ import { useAngleSliderContext } from './use-angle-slider-context'
12
+
13
+ let { ref = $bindable(null), ...props }: AngleSliderThumbProps = $props()
14
+ const angleSlider = useAngleSliderContext()
15
+ const mergedProps = $derived(mergeProps(angleSlider().getThumbProps(), props))
16
+ </script>
17
+
18
+ <Ark as="div" bind:ref {...mergedProps} />
@@ -0,0 +1,8 @@
1
+ import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
2
+ export interface AngleSliderThumbBaseProps extends PolymorphicProps<'div'>, RefAttribute {
3
+ }
4
+ export interface AngleSliderThumbProps extends HTMLProps<'div'>, AngleSliderThumbBaseProps {
5
+ }
6
+ declare const AngleSliderThumb: import("svelte").Component<AngleSliderThumbProps, {}, "ref">;
7
+ type AngleSliderThumb = ReturnType<typeof AngleSliderThumb>;
8
+ export default AngleSliderThumb;
@@ -0,0 +1,18 @@
1
+ <script lang="ts" module>
2
+ import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
3
+
4
+ export interface AngleSliderValueTextBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
5
+ export interface AngleSliderValueTextProps extends HTMLProps<'div'>, AngleSliderValueTextBaseProps {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import { mergeProps } from '@zag-js/svelte'
10
+ import { Ark } from '../factory'
11
+ import { useAngleSliderContext } from './use-angle-slider-context'
12
+
13
+ let { ref = $bindable(null), ...props }: AngleSliderValueTextProps = $props()
14
+ const angleSlider = useAngleSliderContext()
15
+ const mergedProps = $derived(mergeProps(angleSlider().getValueTextProps(), props))
16
+ </script>
17
+
18
+ <Ark as="span" bind:ref {...mergedProps} />
@@ -0,0 +1,8 @@
1
+ import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
2
+ export interface AngleSliderValueTextBaseProps extends PolymorphicProps<'div'>, RefAttribute {
3
+ }
4
+ export interface AngleSliderValueTextProps extends HTMLProps<'div'>, AngleSliderValueTextBaseProps {
5
+ }
6
+ declare const AngleSliderValueText: import("svelte").Component<AngleSliderValueTextProps, {}, "ref">;
7
+ type AngleSliderValueText = ReturnType<typeof AngleSliderValueText>;
8
+ export default AngleSliderValueText;
@@ -0,0 +1 @@
1
+ export { anatomy as angleSliderAnatomy } from '@zag-js/angle-slider';
@@ -0,0 +1 @@
1
+ export { anatomy as angleSliderAnatomy } from '@zag-js/angle-slider';
@@ -0,0 +1,10 @@
1
+ export { default as Context, type AngleSliderContextProps as ContextProps } from './angle-slider-context.svelte';
2
+ export { default as Root, type AngleSliderRootProps as RootProps, type AngleSliderRootBaseProps as RootBaseProps, } from './angle-slider-root.svelte';
3
+ export { default as RootProvider, type AngleSliderRootProviderProps as RootProviderProps, type AngleSliderRootProviderBaseProps as RootProviderBaseProps, } from './angle-slider-root-provider.svelte';
4
+ export { default as Label, type AngleSliderLabelBaseProps as LabelBaseProps, type AngleSliderLabelProps as LabelProps, } from './angle-slider-label.svelte';
5
+ export { default as Control, type AngleSliderControlBaseProps as ControlBaseProps, type AngleSliderControlProps as ControlProps, } from './angle-slider-control.svelte';
6
+ export { default as Thumb, type AngleSliderThumbBaseProps as ThumbBaseProps, type AngleSliderThumbProps as ThumbProps, } from './angle-slider-thumb.svelte';
7
+ export { default as MarkerGroup, type AngleSliderMarkerGroupBaseProps as MarkerGroupBaseProps, type AngleSliderMarkerGroupProps as MarkerGroupProps, } from './angle-slider-marker-group.svelte';
8
+ export { default as Marker, type AngleSliderMarkerBaseProps as MarkerBaseProps, type AngleSliderMarkerProps as MarkerProps, } from './angle-slider-marker.svelte';
9
+ export { default as ValueText, type AngleSliderValueTextBaseProps as ValueTextBaseProps, type AngleSliderValueTextProps as ValueTextProps, } from './angle-slider-value-text.svelte';
10
+ export { default as HiddenInput, type AngleSliderHiddenInputBaseProps as HiddenInputBaseProps, type AngleSliderHiddenInputProps as HiddenInputProps, } from './angle-slider-hidden-input.svelte';
@@ -0,0 +1,10 @@
1
+ export { default as Context } from './angle-slider-context.svelte';
2
+ export { default as Root, } from './angle-slider-root.svelte';
3
+ export { default as RootProvider, } from './angle-slider-root-provider.svelte';
4
+ export { default as Label, } from './angle-slider-label.svelte';
5
+ export { default as Control, } from './angle-slider-control.svelte';
6
+ export { default as Thumb, } from './angle-slider-thumb.svelte';
7
+ export { default as MarkerGroup, } from './angle-slider-marker-group.svelte';
8
+ export { default as Marker, } from './angle-slider-marker.svelte';
9
+ export { default as ValueText, } from './angle-slider-value-text.svelte';
10
+ export { default as HiddenInput, } from './angle-slider-hidden-input.svelte';
@@ -0,0 +1,14 @@
1
+ export { default as AngleSliderContext, type AngleSliderContextProps } from './angle-slider-context.svelte';
2
+ export { default as AngleSliderControl, type AngleSliderControlBaseProps, type AngleSliderControlProps, } from './angle-slider-control.svelte';
3
+ export { default as AngleSliderHiddenInput, type AngleSliderHiddenInputBaseProps, type AngleSliderHiddenInputProps, } from './angle-slider-hidden-input.svelte';
4
+ export { default as AngleSliderLabel, type AngleSliderLabelBaseProps, type AngleSliderLabelProps, } from './angle-slider-label.svelte';
5
+ export { default as AngleSliderMarker, type AngleSliderMarkerBaseProps, type AngleSliderMarkerProps, } from './angle-slider-marker.svelte';
6
+ export { default as AngleSliderMarkerGroup, type AngleSliderMarkerGroupBaseProps, type AngleSliderMarkerGroupProps, } from './angle-slider-marker-group.svelte';
7
+ export { default as AngleSliderRoot, type AngleSliderRootBaseProps, type AngleSliderRootProps, } from './angle-slider-root.svelte';
8
+ export { default as AngleSliderRootProvider, type AngleSliderRootProviderBaseProps, type AngleSliderRootProviderProps, } from './angle-slider-root-provider.svelte';
9
+ export { default as AngleSliderThumb, type AngleSliderThumbBaseProps, type AngleSliderThumbProps, } from './angle-slider-thumb.svelte';
10
+ export { default as AngleSliderValueText, type AngleSliderValueTextBaseProps, type AngleSliderValueTextProps, } from './angle-slider-value-text.svelte';
11
+ export { angleSliderAnatomy } from './angle-slider.anatomy';
12
+ export { useAngleSliderContext, type UseAngleSliderContext } from './use-angle-slider-context';
13
+ export { useAngleSlider, type UseAngleSliderProps, type UseAngleSliderReturn } from './use-angle-slider.svelte';
14
+ export * as AngleSlider from './angle-slider';
@@ -0,0 +1,14 @@
1
+ export { default as AngleSliderContext } from './angle-slider-context.svelte';
2
+ export { default as AngleSliderControl, } from './angle-slider-control.svelte';
3
+ export { default as AngleSliderHiddenInput, } from './angle-slider-hidden-input.svelte';
4
+ export { default as AngleSliderLabel, } from './angle-slider-label.svelte';
5
+ export { default as AngleSliderMarker, } from './angle-slider-marker.svelte';
6
+ export { default as AngleSliderMarkerGroup, } from './angle-slider-marker-group.svelte';
7
+ export { default as AngleSliderRoot, } from './angle-slider-root.svelte';
8
+ export { default as AngleSliderRootProvider, } from './angle-slider-root-provider.svelte';
9
+ export { default as AngleSliderThumb, } from './angle-slider-thumb.svelte';
10
+ export { default as AngleSliderValueText, } from './angle-slider-value-text.svelte';
11
+ export { angleSliderAnatomy } from './angle-slider.anatomy';
12
+ export { useAngleSliderContext } from './use-angle-slider-context';
13
+ export { useAngleSlider } from './use-angle-slider.svelte';
14
+ export * as AngleSlider from './angle-slider';
@@ -0,0 +1,4 @@
1
+ import type { UseAngleSliderReturn } from './use-angle-slider.svelte';
2
+ export interface UseAngleSliderContext extends UseAngleSliderReturn {
3
+ }
4
+ export declare const AngleSliderProvider: (opts: UseAngleSliderContext) => void, useAngleSliderContext: (fallback?: UseAngleSliderContext | undefined) => UseAngleSliderContext;
@@ -0,0 +1,4 @@
1
+ import { createContext } from '../../utils/create-context';
2
+ export const [AngleSliderProvider, useAngleSliderContext] = createContext({
3
+ name: 'AngleSliderContext',
4
+ });
@@ -0,0 +1,9 @@
1
+ import type { Accessor } from '../../types';
2
+ import * as angleSlider from '@zag-js/angle-slider';
3
+ import { type PropTypes } from '@zag-js/svelte';
4
+ import { type MaybeFunction } from '@zag-js/utils';
5
+ export interface UseAngleSliderProps extends Omit<angleSlider.Props, 'dir' | 'getRootNode'> {
6
+ }
7
+ export interface UseAngleSliderReturn extends Accessor<angleSlider.Api<PropTypes>> {
8
+ }
9
+ export declare const useAngleSlider: (props: MaybeFunction<UseAngleSliderProps>) => () => angleSlider.Api<import("@zag-js/types").PropTypes>;
@@ -0,0 +1,20 @@
1
+ import { useEnvironmentContext } from '../../providers/environment';
2
+ import { useLocaleContext } from '../../providers/locale';
3
+ import * as angleSlider from '@zag-js/angle-slider';
4
+ import { normalizeProps, useMachine } from '@zag-js/svelte';
5
+ import { runIfFn } from '@zag-js/utils';
6
+ export const useAngleSlider = (props) => {
7
+ const env = useEnvironmentContext();
8
+ const locale = useLocaleContext();
9
+ const machineProps = $derived.by(() => {
10
+ const resolvedProps = runIfFn(props);
11
+ return {
12
+ dir: locale().dir,
13
+ getRootNode: env().getRootNode,
14
+ ...resolvedProps,
15
+ };
16
+ });
17
+ const service = useMachine(angleSlider.machine, () => machineProps);
18
+ const api = $derived(angleSlider.connect(service, normalizeProps));
19
+ return () => api;
20
+ };
@@ -1,2 +1,2 @@
1
1
  import type { UseCheckboxProps } from './use-checkbox.svelte';
2
- export declare const splitCheckboxProps: <T extends UseCheckboxProps>(props: T) => [UseCheckboxProps, Omit<T, "form" | "name" | "value" | "ids" | "disabled" | "id" | "readOnly" | "invalid" | "required" | "checked" | "defaultChecked" | "onCheckedChange">];
2
+ export declare const splitCheckboxProps: <T extends UseCheckboxProps>(props: T) => [UseCheckboxProps, Omit<T, "form" | "name" | "value" | "ids" | "disabled" | "id" | "readOnly" | "invalid" | "checked" | "required" | "defaultChecked" | "onCheckedChange">];
@@ -1,2 +1,2 @@
1
1
  import type { UseColorPickerProps } from './use-color-picker.svelte';
2
- export declare const splitColorPickerProps: <T extends UseColorPickerProps>(props: T) => [UseColorPickerProps, Omit<T, "name" | "defaultValue" | "value" | "open" | "ids" | "defaultOpen" | "onOpenChange" | "disabled" | "id" | "onValueChange" | "readOnly" | "invalid" | "required" | "onValueChangeEnd" | "positioning" | "initialFocusEl" | "format" | "defaultFormat" | "onFormatChange" | "closeOnSelect" | "openAutoFocus" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside">];
2
+ export declare const splitColorPickerProps: <T extends UseColorPickerProps>(props: T) => [UseColorPickerProps, Omit<T, "name" | "defaultValue" | "value" | "open" | "ids" | "defaultOpen" | "onOpenChange" | "disabled" | "id" | "inline" | "onValueChange" | "onValueChangeEnd" | "readOnly" | "invalid" | "required" | "positioning" | "initialFocusEl" | "format" | "defaultFormat" | "onFormatChange" | "closeOnSelect" | "openAutoFocus" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside">];
@@ -25,4 +25,5 @@ export const splitColorPickerProps = (props) => splitFn(props, [
25
25
  'readOnly',
26
26
  'required',
27
27
  'value',
28
+ 'inline',
28
29
  ]);
@@ -67,6 +67,7 @@
67
67
  'translations',
68
68
  'value',
69
69
  'view',
70
+ 'inline',
70
71
  ]),
71
72
  )
72
73
 
@@ -1,2 +1,2 @@
1
1
  import type { UseEditableProps } from './use-editable.svelte';
2
- export declare function splitEditableProps<T extends UseEditableProps>(props: T): [UseEditableProps, Omit<T, "form" | "name" | "defaultValue" | "value" | "ids" | "disabled" | "id" | "placeholder" | "onValueChange" | "translations" | "readOnly" | "invalid" | "required" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "finalFocusEl" | "autoResize" | "activationMode" | "submitMode" | "selectOnFocus" | "edit" | "defaultEdit" | "onEditChange" | "maxLength" | "onValueRevert" | "onValueCommit">];
2
+ export declare function splitEditableProps<T extends UseEditableProps>(props: T): [UseEditableProps, Omit<T, "form" | "name" | "defaultValue" | "value" | "ids" | "disabled" | "id" | "placeholder" | "onValueChange" | "readOnly" | "invalid" | "required" | "translations" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "finalFocusEl" | "autoResize" | "activationMode" | "submitMode" | "selectOnFocus" | "edit" | "defaultEdit" | "onEditChange" | "maxLength" | "onValueRevert" | "onValueCommit">];
@@ -1,4 +1,5 @@
1
1
  export * from './accordion';
2
+ export * from './angle-slider';
2
3
  export * from './avatar';
3
4
  export * from './carousel';
4
5
  export * from './checkbox';
@@ -1,4 +1,5 @@
1
1
  export * from './accordion';
2
+ export * from './angle-slider';
2
3
  export * from './avatar';
3
4
  export * from './carousel';
4
5
  export * from './checkbox';
@@ -1,2 +1,2 @@
1
1
  import type { UseNumberInputProps } from './use-number-input.svelte';
2
- export declare const splitNumberInputProps: <T extends UseNumberInputProps>(props: T) => [UseNumberInputProps, Omit<T, "form" | "pattern" | "name" | "defaultValue" | "value" | "locale" | "ids" | "disabled" | "id" | "step" | "onValueChange" | "onFocusChange" | "translations" | "readOnly" | "invalid" | "required" | "max" | "min" | "allowOverflow" | "allowMouseWheel" | "clampValueOnBlur" | "focusInputOnChange" | "formatOptions" | "inputMode" | "onValueInvalid" | "spinOnPress">];
2
+ export declare const splitNumberInputProps: <T extends UseNumberInputProps>(props: T) => [UseNumberInputProps, Omit<T, "form" | "pattern" | "name" | "defaultValue" | "value" | "locale" | "ids" | "disabled" | "id" | "step" | "onValueChange" | "onFocusChange" | "readOnly" | "invalid" | "max" | "min" | "required" | "translations" | "allowOverflow" | "allowMouseWheel" | "clampValueOnBlur" | "focusInputOnChange" | "formatOptions" | "inputMode" | "onValueInvalid" | "spinOnPress">];
@@ -1,2 +1,2 @@
1
1
  import type { UseRatingGroupProps } from './use-rating-group.svelte';
2
- export declare const splitRatingGroupProps: <T extends UseRatingGroupProps>(props: T) => [UseRatingGroupProps, Omit<T, "form" | "name" | "defaultValue" | "value" | "ids" | "disabled" | "id" | "onValueChange" | "translations" | "readOnly" | "required" | "autoFocus" | "count" | "allowHalf" | "onHoverChange">];
2
+ export declare const splitRatingGroupProps: <T extends UseRatingGroupProps>(props: T) => [UseRatingGroupProps, Omit<T, "form" | "name" | "defaultValue" | "value" | "ids" | "disabled" | "id" | "onValueChange" | "readOnly" | "required" | "translations" | "autoFocus" | "count" | "allowHalf" | "onHoverChange">];
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ark-ui/svelte",
3
3
  "type": "module",
4
- "version": "5.0.5",
4
+ "version": "5.1.0",
5
5
  "description": "A collection of unstyled, accessible UI components for Svelte",
6
6
  "keywords": [
7
7
  "accordion",
@@ -120,63 +120,63 @@
120
120
  "sideEffects": false,
121
121
  "dependencies": {
122
122
  "@internationalized/date": "3.8.2",
123
- "@zag-js/accordion": "1.17.4",
124
- "@zag-js/angle-slider": "1.17.4",
125
- "@zag-js/anatomy": "1.17.4",
126
- "@zag-js/auto-resize": "1.17.4",
127
- "@zag-js/avatar": "1.17.4",
128
- "@zag-js/carousel": "1.17.4",
129
- "@zag-js/checkbox": "1.17.4",
130
- "@zag-js/clipboard": "1.17.4",
131
- "@zag-js/collapsible": "1.17.4",
132
- "@zag-js/collection": "1.17.4",
133
- "@zag-js/color-picker": "1.17.4",
134
- "@zag-js/color-utils": "1.17.4",
135
- "@zag-js/combobox": "1.17.4",
136
- "@zag-js/core": "1.17.4",
137
- "@zag-js/date-picker": "1.17.4",
138
- "@zag-js/date-utils": "1.17.4",
139
- "@zag-js/dialog": "1.17.4",
140
- "@zag-js/dom-query": "1.17.4",
141
- "@zag-js/editable": "1.17.4",
142
- "@zag-js/file-upload": "1.17.4",
143
- "@zag-js/file-utils": "1.17.4",
144
- "@zag-js/focus-trap": "1.17.4",
145
- "@zag-js/floating-panel": "1.17.4",
146
- "@zag-js/highlight-word": "1.17.4",
147
- "@zag-js/hover-card": "1.17.4",
148
- "@zag-js/i18n-utils": "1.17.4",
149
- "@zag-js/listbox": "1.17.4",
150
- "@zag-js/menu": "1.17.4",
151
- "@zag-js/number-input": "1.17.4",
152
- "@zag-js/pagination": "1.17.4",
153
- "@zag-js/password-input": "1.17.4",
154
- "@zag-js/pin-input": "1.17.4",
155
- "@zag-js/popover": "1.17.4",
156
- "@zag-js/presence": "1.17.4",
157
- "@zag-js/progress": "1.17.4",
158
- "@zag-js/qr-code": "1.17.4",
159
- "@zag-js/radio-group": "1.17.4",
160
- "@zag-js/rating-group": "1.17.4",
161
- "@zag-js/svelte": "1.17.4",
162
- "@zag-js/select": "1.17.4",
163
- "@zag-js/signature-pad": "1.17.4",
164
- "@zag-js/slider": "1.17.4",
165
- "@zag-js/splitter": "1.17.4",
166
- "@zag-js/steps": "1.17.4",
167
- "@zag-js/switch": "1.17.4",
168
- "@zag-js/tabs": "1.17.4",
169
- "@zag-js/tags-input": "1.17.4",
170
- "@zag-js/time-picker": "1.17.4",
171
- "@zag-js/timer": "1.17.4",
172
- "@zag-js/toast": "1.17.4",
173
- "@zag-js/toggle": "1.17.4",
174
- "@zag-js/toggle-group": "1.17.4",
175
- "@zag-js/tooltip": "1.17.4",
176
- "@zag-js/tour": "1.17.4",
177
- "@zag-js/tree-view": "1.17.4",
178
- "@zag-js/types": "1.17.4",
179
- "@zag-js/utils": "1.17.4"
123
+ "@zag-js/accordion": "1.18.0",
124
+ "@zag-js/angle-slider": "1.18.0",
125
+ "@zag-js/anatomy": "1.18.0",
126
+ "@zag-js/auto-resize": "1.18.0",
127
+ "@zag-js/avatar": "1.18.0",
128
+ "@zag-js/carousel": "1.18.0",
129
+ "@zag-js/checkbox": "1.18.0",
130
+ "@zag-js/clipboard": "1.18.0",
131
+ "@zag-js/collapsible": "1.18.0",
132
+ "@zag-js/collection": "1.18.0",
133
+ "@zag-js/color-picker": "1.18.0",
134
+ "@zag-js/color-utils": "1.18.0",
135
+ "@zag-js/combobox": "1.18.0",
136
+ "@zag-js/core": "1.18.0",
137
+ "@zag-js/date-picker": "1.18.0",
138
+ "@zag-js/date-utils": "1.18.0",
139
+ "@zag-js/dialog": "1.18.0",
140
+ "@zag-js/dom-query": "1.18.0",
141
+ "@zag-js/editable": "1.18.0",
142
+ "@zag-js/file-upload": "1.18.0",
143
+ "@zag-js/file-utils": "1.18.0",
144
+ "@zag-js/focus-trap": "1.18.0",
145
+ "@zag-js/floating-panel": "1.18.0",
146
+ "@zag-js/highlight-word": "1.18.0",
147
+ "@zag-js/hover-card": "1.18.0",
148
+ "@zag-js/i18n-utils": "1.18.0",
149
+ "@zag-js/listbox": "1.18.0",
150
+ "@zag-js/menu": "1.18.0",
151
+ "@zag-js/number-input": "1.18.0",
152
+ "@zag-js/pagination": "1.18.0",
153
+ "@zag-js/password-input": "1.18.0",
154
+ "@zag-js/pin-input": "1.18.0",
155
+ "@zag-js/popover": "1.18.0",
156
+ "@zag-js/presence": "1.18.0",
157
+ "@zag-js/progress": "1.18.0",
158
+ "@zag-js/qr-code": "1.18.0",
159
+ "@zag-js/radio-group": "1.18.0",
160
+ "@zag-js/rating-group": "1.18.0",
161
+ "@zag-js/svelte": "1.18.0",
162
+ "@zag-js/select": "1.18.0",
163
+ "@zag-js/signature-pad": "1.18.0",
164
+ "@zag-js/slider": "1.18.0",
165
+ "@zag-js/splitter": "1.18.0",
166
+ "@zag-js/steps": "1.18.0",
167
+ "@zag-js/switch": "1.18.0",
168
+ "@zag-js/tabs": "1.18.0",
169
+ "@zag-js/tags-input": "1.18.0",
170
+ "@zag-js/time-picker": "1.18.0",
171
+ "@zag-js/timer": "1.18.0",
172
+ "@zag-js/toast": "1.18.0",
173
+ "@zag-js/toggle": "1.18.0",
174
+ "@zag-js/toggle-group": "1.18.0",
175
+ "@zag-js/tooltip": "1.18.0",
176
+ "@zag-js/tour": "1.18.0",
177
+ "@zag-js/tree-view": "1.18.0",
178
+ "@zag-js/types": "1.18.0",
179
+ "@zag-js/utils": "1.18.0"
180
180
  },
181
181
  "devDependencies": {
182
182
  "@storybook/addon-a11y": "9.0.10",