ui-ingredients 0.16.0 → 0.17.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (129) hide show
  1. package/README.md +2 -2
  2. package/dist/accordion/index.d.ts +2 -1
  3. package/dist/accordion/index.js +2 -1
  4. package/dist/alert/index.d.ts +2 -1
  5. package/dist/alert/index.js +2 -1
  6. package/dist/alert-dialog/index.d.ts +2 -1
  7. package/dist/alert-dialog/index.js +2 -1
  8. package/dist/anatomy.d.ts +1 -0
  9. package/dist/anatomy.js +1 -0
  10. package/dist/angle-slider/angle-slider-anatomy.d.ts +1 -0
  11. package/dist/angle-slider/angle-slider-anatomy.js +1 -0
  12. package/dist/angle-slider/angle-slider-context.svelte.d.ts +2 -0
  13. package/dist/angle-slider/angle-slider-context.svelte.js +2 -0
  14. package/dist/angle-slider/angle-slider-control.svelte +29 -0
  15. package/dist/angle-slider/angle-slider-control.svelte.d.ts +21 -0
  16. package/dist/angle-slider/angle-slider-hidden-input.svelte +28 -0
  17. package/dist/angle-slider/angle-slider-hidden-input.svelte.d.ts +21 -0
  18. package/dist/angle-slider/angle-slider-label.svelte +29 -0
  19. package/dist/angle-slider/angle-slider-label.svelte.d.ts +21 -0
  20. package/dist/angle-slider/angle-slider-marker-group.svelte +31 -0
  21. package/dist/angle-slider/angle-slider-marker-group.svelte.d.ts +21 -0
  22. package/dist/angle-slider/angle-slider-marker.svelte +38 -0
  23. package/dist/angle-slider/angle-slider-marker.svelte.d.ts +22 -0
  24. package/dist/angle-slider/angle-slider-root.svelte +59 -0
  25. package/dist/angle-slider/angle-slider-root.svelte.d.ts +22 -0
  26. package/dist/angle-slider/angle-slider-thumb.svelte +29 -0
  27. package/dist/angle-slider/angle-slider-thumb.svelte.d.ts +21 -0
  28. package/dist/angle-slider/angle-slider-value-text.svelte +35 -0
  29. package/dist/angle-slider/angle-slider-value-text.svelte.d.ts +21 -0
  30. package/dist/angle-slider/angle-slider.d.ts +8 -0
  31. package/dist/angle-slider/angle-slider.js +8 -0
  32. package/dist/angle-slider/create-angle-slider.svelte.d.ts +7 -0
  33. package/dist/angle-slider/create-angle-slider.svelte.js +18 -0
  34. package/dist/angle-slider/index.d.ts +12 -0
  35. package/dist/angle-slider/index.js +4 -0
  36. package/dist/avatar/index.d.ts +2 -2
  37. package/dist/avatar/index.js +2 -2
  38. package/dist/breadcrumbs/index.d.ts +2 -1
  39. package/dist/breadcrumbs/index.js +2 -1
  40. package/dist/carousel/index.d.ts +2 -1
  41. package/dist/carousel/index.js +2 -1
  42. package/dist/checkbox/index.d.ts +2 -1
  43. package/dist/checkbox/index.js +2 -1
  44. package/dist/clipboard/clipboard-indicator.svelte +40 -40
  45. package/dist/clipboard/index.d.ts +2 -1
  46. package/dist/clipboard/index.js +2 -1
  47. package/dist/collapsible/index.d.ts +2 -1
  48. package/dist/collapsible/index.js +2 -1
  49. package/dist/color-picker/index.d.ts +2 -1
  50. package/dist/color-picker/index.js +2 -1
  51. package/dist/combobox/index.d.ts +2 -1
  52. package/dist/combobox/index.js +2 -1
  53. package/dist/date-picker/index.d.ts +2 -1
  54. package/dist/date-picker/index.js +2 -1
  55. package/dist/dialog/index.d.ts +2 -1
  56. package/dist/dialog/index.js +2 -1
  57. package/dist/drawer/index.d.ts +3 -2
  58. package/dist/drawer/index.js +2 -1
  59. package/dist/editable/index.d.ts +2 -1
  60. package/dist/editable/index.js +2 -1
  61. package/dist/environment-provider/index.d.ts +1 -1
  62. package/dist/environment-provider/index.js +1 -1
  63. package/dist/field/index.d.ts +2 -1
  64. package/dist/field/index.js +2 -1
  65. package/dist/file-upload/index.d.ts +2 -1
  66. package/dist/file-upload/index.js +2 -1
  67. package/dist/floating-panel/index.d.ts +2 -1
  68. package/dist/floating-panel/index.js +2 -1
  69. package/dist/hover-card/index.d.ts +2 -1
  70. package/dist/hover-card/index.js +2 -1
  71. package/dist/index.d.ts +1 -0
  72. package/dist/index.js +1 -0
  73. package/dist/locale-provider/index.d.ts +1 -1
  74. package/dist/locale-provider/index.js +1 -1
  75. package/dist/menu/index.d.ts +2 -1
  76. package/dist/menu/index.js +2 -1
  77. package/dist/number-input/index.d.ts +2 -1
  78. package/dist/number-input/index.js +2 -1
  79. package/dist/pagination/index.d.ts +2 -1
  80. package/dist/pagination/index.js +2 -1
  81. package/dist/pin-input/index.d.ts +2 -1
  82. package/dist/pin-input/index.js +2 -1
  83. package/dist/popover/index.d.ts +2 -1
  84. package/dist/popover/index.js +2 -1
  85. package/dist/presence/index.d.ts +1 -1
  86. package/dist/presence/index.js +1 -1
  87. package/dist/progress/index.d.ts +2 -1
  88. package/dist/progress/index.js +2 -1
  89. package/dist/qr-code/index.d.ts +2 -1
  90. package/dist/qr-code/index.js +2 -1
  91. package/dist/radio-group/index.d.ts +2 -1
  92. package/dist/radio-group/index.js +2 -1
  93. package/dist/rating-group/index.d.ts +2 -1
  94. package/dist/rating-group/index.js +2 -1
  95. package/dist/segment-group/index.d.ts +2 -1
  96. package/dist/segment-group/index.js +2 -1
  97. package/dist/select/index.d.ts +2 -1
  98. package/dist/select/index.js +2 -1
  99. package/dist/signature-pad/index.d.ts +2 -1
  100. package/dist/signature-pad/index.js +2 -1
  101. package/dist/slider/index.d.ts +2 -1
  102. package/dist/slider/index.js +2 -1
  103. package/dist/splitter/index.d.ts +2 -1
  104. package/dist/splitter/index.js +2 -1
  105. package/dist/steps/index.d.ts +2 -1
  106. package/dist/steps/index.js +2 -1
  107. package/dist/switch/index.d.ts +2 -1
  108. package/dist/switch/index.js +2 -1
  109. package/dist/tabs/index.d.ts +2 -1
  110. package/dist/tabs/index.js +2 -1
  111. package/dist/tags-input/index.d.ts +2 -1
  112. package/dist/tags-input/index.js +2 -1
  113. package/dist/time-picker/index.d.ts +2 -1
  114. package/dist/time-picker/index.js +2 -1
  115. package/dist/timer/index.d.ts +2 -1
  116. package/dist/timer/index.js +2 -1
  117. package/dist/toast/index.d.ts +2 -1
  118. package/dist/toast/index.js +2 -1
  119. package/dist/toggle/index.d.ts +2 -0
  120. package/dist/toggle/index.js +2 -0
  121. package/dist/toggle-group/index.d.ts +2 -1
  122. package/dist/toggle-group/index.js +2 -1
  123. package/dist/tooltip/index.d.ts +2 -1
  124. package/dist/tooltip/index.js +2 -1
  125. package/dist/tour/index.d.ts +2 -2
  126. package/dist/tour/index.js +2 -1
  127. package/dist/tree-view/index.d.ts +2 -1
  128. package/dist/tree-view/index.js +2 -1
  129. package/package.json +404 -403
package/README.md CHANGED
@@ -38,11 +38,11 @@ npm install ui-ingredients
38
38
  </Dialog.Root>
39
39
  ```
40
40
 
41
- ## Inspirations
41
+ ## Inspiration
42
42
 
43
43
  - [zag](https://zagjs.com/) - The fantastic library that powers UI ingredients
44
44
  - [ark](https://ark-ui.com/) - The outstanding headless component library that greatly inspired this one
45
45
 
46
46
  ## Documentation
47
47
 
48
- Browse our beta [documentaion](https://ui-ingredients-next.vercel.app/)
48
+ Browse the [documentation](https://ui-ingredients.vercel.app/) for more information on how to use UI Ingredients
@@ -5,4 +5,5 @@ export type { AccordionItemTriggerProps } from './accordion-item-trigger.svelte'
5
5
  export type { AccordionItemProps } from './accordion-item.svelte';
6
6
  export type { AccordionProps } from './accordion-root.svelte';
7
7
  export { anatomy as accordionAnatomy } from './accordion-anatomy.js';
8
- export { getAccordionContext } from './accordion-context.svelte.js';
8
+ export { getAccordionContext, setAccordionContext, } from './accordion-context.svelte.js';
9
+ export { createAccordion, type CreateAccordionProps, type CreateAccordionReturn, } from './create-accordion.svelte.js';
@@ -1,3 +1,4 @@
1
1
  export * as Accordion from './accordion.js';
2
2
  export { anatomy as accordionAnatomy } from './accordion-anatomy.js';
3
- export { getAccordionContext } from './accordion-context.svelte.js';
3
+ export { getAccordionContext, setAccordionContext, } from './accordion-context.svelte.js';
4
+ export { createAccordion, } from './create-accordion.svelte.js';
@@ -4,4 +4,5 @@ export type { AlertIndicatorProps } from './alert-indicator.svelte';
4
4
  export type { AlertProps } from './alert-root.svelte';
5
5
  export type { AlertTitleProps } from './alert-title.svelte';
6
6
  export { anatomy as alertAnatomy } from './alert-anatomy.js';
7
- export { getAlertContext } from './alert-context.js';
7
+ export { getAlertContext, setAlertContext } from './alert-context.js';
8
+ export { createAlert, type CreateAlertReturn } from './create-alert.svelte.js';
@@ -1,3 +1,4 @@
1
1
  export * as Alert from './alert.js';
2
2
  export { anatomy as alertAnatomy } from './alert-anatomy.js';
3
- export { getAlertContext } from './alert-context.js';
3
+ export { getAlertContext, setAlertContext } from './alert-context.js';
4
+ export { createAlert } from './create-alert.svelte.js';
@@ -8,4 +8,5 @@ export type { AlertDialogProps } from './alert-dialog-root.svelte';
8
8
  export type { AlertDialogTitleProps } from './alert-dialog-title.svelte';
9
9
  export type { AlertDialogTriggerProps } from './alert-dialog-trigger.svelte';
10
10
  export { anatomy as alertDialogAnatomy } from './alert-dialog-anatomy.js';
11
- export { getAlertDialogContext } from './alert-dialog-context.svelte.js';
11
+ export { getAlertDialogContext, setAlertDialogContext, } from './alert-dialog-context.svelte.js';
12
+ export { createAlertDialog, type CreateAlertDialogProps, type CreateAlertDialogReturn, } from './create-alert-dialog.svelte.js';
@@ -1,3 +1,4 @@
1
1
  export * as AlertDialog from './alert-dialog.js';
2
2
  export { anatomy as alertDialogAnatomy } from './alert-dialog-anatomy.js';
3
- export { getAlertDialogContext } from './alert-dialog-context.svelte.js';
3
+ export { getAlertDialogContext, setAlertDialogContext, } from './alert-dialog-context.svelte.js';
4
+ export { createAlertDialog, } from './create-alert-dialog.svelte.js';
package/dist/anatomy.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  export { anatomy as accordionAnatomy } from './accordion/accordion-anatomy.js';
2
2
  export { anatomy as alertDialogAnatomy } from './alert-dialog/alert-dialog-anatomy.js';
3
3
  export { anatomy as alertAnatomy } from './alert/alert-anatomy.js';
4
+ export { anatomy as angleSliderAnatomy } from './angle-slider/angle-slider-anatomy.js';
4
5
  export { anatomy as avatarAnatomy } from './avatar/avatar-anatomy.js';
5
6
  export { anatomy as breadcrumbsAnatomy } from './breadcrumbs/breadcrumbs-anatomy.js';
6
7
  export { anatomy as carouselAnatomy } from './carousel/carousel-anatomy.js';
package/dist/anatomy.js CHANGED
@@ -1,6 +1,7 @@
1
1
  export { anatomy as accordionAnatomy } from './accordion/accordion-anatomy.js';
2
2
  export { anatomy as alertDialogAnatomy } from './alert-dialog/alert-dialog-anatomy.js';
3
3
  export { anatomy as alertAnatomy } from './alert/alert-anatomy.js';
4
+ export { anatomy as angleSliderAnatomy } from './angle-slider/angle-slider-anatomy.js';
4
5
  export { anatomy as avatarAnatomy } from './avatar/avatar-anatomy.js';
5
6
  export { anatomy as breadcrumbsAnatomy } from './breadcrumbs/breadcrumbs-anatomy.js';
6
7
  export { anatomy as carouselAnatomy } from './carousel/carousel-anatomy.js';
@@ -0,0 +1 @@
1
+ export { anatomy } from '@zag-js/angle-slider';
@@ -0,0 +1 @@
1
+ export { anatomy } from '@zag-js/angle-slider';
@@ -0,0 +1,2 @@
1
+ import type { CreateAngleSliderReturn } from './create-angle-slider.svelte.js';
2
+ export declare const getAngleSliderContext: () => CreateAngleSliderReturn, setAngleSliderContext: (context: CreateAngleSliderReturn | (() => CreateAngleSliderReturn)) => void;
@@ -0,0 +1,2 @@
1
+ import { createContext } from '../create-context.svelte.js';
2
+ export const [getAngleSliderContext, setAngleSliderContext] = createContext('AngleSlider');
@@ -0,0 +1,29 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface AngleSliderControlProps
5
+ extends HtmlIngredientProps<'div', HTMLDivElement> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '../merge-props.js';
10
+ import {getAngleSliderContext} from './angle-slider-context.svelte.js';
11
+
12
+ let {
13
+ ref = $bindable(null),
14
+ asChild,
15
+ children,
16
+ ...props
17
+ }: AngleSliderControlProps = $props();
18
+
19
+ let angleSlider = getAngleSliderContext();
20
+ let mergedProps = $derived(mergeProps(angleSlider.getControlProps(), props));
21
+ </script>
22
+
23
+ {#if asChild}
24
+ {@render asChild(mergedProps)}
25
+ {:else}
26
+ <div {...mergedProps}>
27
+ {@render children?.()}
28
+ </div>
29
+ {/if}
@@ -0,0 +1,21 @@
1
+ import type { HtmlIngredientProps } from '../types.js';
2
+ export interface AngleSliderControlProps extends HtmlIngredientProps<'div', HTMLDivElement> {
3
+ }
4
+ 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> {
5
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
6
+ $$bindings?: Bindings;
7
+ } & Exports;
8
+ (internal: unknown, props: Props & {
9
+ $$events?: Events;
10
+ $$slots?: Slots;
11
+ }): Exports & {
12
+ $set?: any;
13
+ $on?: any;
14
+ };
15
+ z_$$bindings?: Bindings;
16
+ }
17
+ declare const AngleSliderControl: $$__sveltets_2_IsomorphicComponent<AngleSliderControlProps, {
18
+ [evt: string]: CustomEvent<any>;
19
+ }, {}, {}, "ref">;
20
+ type AngleSliderControl = InstanceType<typeof AngleSliderControl>;
21
+ export default AngleSliderControl;
@@ -0,0 +1,28 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface AngleSliderHiddenInputProps
5
+ extends HtmlIngredientProps<'input', HTMLInputElement> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '../merge-props.js';
10
+ import {getAngleSliderContext} from './angle-slider-context.svelte.js';
11
+
12
+ let {
13
+ ref = $bindable(null),
14
+ asChild,
15
+ ...props
16
+ }: AngleSliderHiddenInputProps = $props();
17
+
18
+ let angleSlider = getAngleSliderContext();
19
+ let mergedProps = $derived(
20
+ mergeProps(angleSlider.getHiddenInputProps(), props),
21
+ );
22
+ </script>
23
+
24
+ {#if asChild}
25
+ {@render asChild(mergedProps)}
26
+ {:else}
27
+ <input {...mergedProps} />
28
+ {/if}
@@ -0,0 +1,21 @@
1
+ import type { HtmlIngredientProps } from '../types.js';
2
+ export interface AngleSliderHiddenInputProps extends HtmlIngredientProps<'input', HTMLInputElement> {
3
+ }
4
+ 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> {
5
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
6
+ $$bindings?: Bindings;
7
+ } & Exports;
8
+ (internal: unknown, props: Props & {
9
+ $$events?: Events;
10
+ $$slots?: Slots;
11
+ }): Exports & {
12
+ $set?: any;
13
+ $on?: any;
14
+ };
15
+ z_$$bindings?: Bindings;
16
+ }
17
+ declare const AngleSliderHiddenInput: $$__sveltets_2_IsomorphicComponent<AngleSliderHiddenInputProps, {
18
+ [evt: string]: CustomEvent<any>;
19
+ }, {}, {}, "ref">;
20
+ type AngleSliderHiddenInput = InstanceType<typeof AngleSliderHiddenInput>;
21
+ export default AngleSliderHiddenInput;
@@ -0,0 +1,29 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface AngleSliderLabelProps
5
+ extends HtmlIngredientProps<'label', HTMLLabelElement> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '../merge-props.js';
10
+ import {getAngleSliderContext} from './angle-slider-context.svelte.js';
11
+
12
+ let {
13
+ ref = $bindable(null),
14
+ asChild,
15
+ children,
16
+ ...props
17
+ }: AngleSliderLabelProps = $props();
18
+
19
+ let angleSlider = getAngleSliderContext();
20
+ let mergedProps = $derived(mergeProps(angleSlider.getLabelProps(), props));
21
+ </script>
22
+
23
+ {#if asChild}
24
+ {@render asChild(mergedProps)}
25
+ {:else}
26
+ <label {...mergedProps}>
27
+ {@render children?.()}
28
+ </label>
29
+ {/if}
@@ -0,0 +1,21 @@
1
+ import type { HtmlIngredientProps } from '../types.js';
2
+ export interface AngleSliderLabelProps extends HtmlIngredientProps<'label', HTMLLabelElement> {
3
+ }
4
+ 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> {
5
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
6
+ $$bindings?: Bindings;
7
+ } & Exports;
8
+ (internal: unknown, props: Props & {
9
+ $$events?: Events;
10
+ $$slots?: Slots;
11
+ }): Exports & {
12
+ $set?: any;
13
+ $on?: any;
14
+ };
15
+ z_$$bindings?: Bindings;
16
+ }
17
+ declare const AngleSliderLabel: $$__sveltets_2_IsomorphicComponent<AngleSliderLabelProps, {
18
+ [evt: string]: CustomEvent<any>;
19
+ }, {}, {}, "ref">;
20
+ type AngleSliderLabel = InstanceType<typeof AngleSliderLabel>;
21
+ export default AngleSliderLabel;
@@ -0,0 +1,31 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface AngleSliderMarkerGroupProps
5
+ extends HtmlIngredientProps<'div', HTMLDivElement> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '../merge-props.js';
10
+ import {getAngleSliderContext} from './angle-slider-context.svelte.js';
11
+
12
+ let {
13
+ ref = $bindable(null),
14
+ asChild,
15
+ children,
16
+ ...props
17
+ }: AngleSliderMarkerGroupProps = $props();
18
+
19
+ let angleSlider = getAngleSliderContext();
20
+ let mergedProps = $derived(
21
+ mergeProps(angleSlider.getMarkerGroupProps(), props),
22
+ );
23
+ </script>
24
+
25
+ {#if asChild}
26
+ {@render asChild(mergedProps)}
27
+ {:else}
28
+ <div {...mergedProps}>
29
+ {@render children?.()}
30
+ </div>
31
+ {/if}
@@ -0,0 +1,21 @@
1
+ import type { HtmlIngredientProps } from '../types.js';
2
+ export interface AngleSliderMarkerGroupProps extends HtmlIngredientProps<'div', HTMLDivElement> {
3
+ }
4
+ 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> {
5
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
6
+ $$bindings?: Bindings;
7
+ } & Exports;
8
+ (internal: unknown, props: Props & {
9
+ $$events?: Events;
10
+ $$slots?: Slots;
11
+ }): Exports & {
12
+ $set?: any;
13
+ $on?: any;
14
+ };
15
+ z_$$bindings?: Bindings;
16
+ }
17
+ declare const AngleSliderMarkerGroup: $$__sveltets_2_IsomorphicComponent<AngleSliderMarkerGroupProps, {
18
+ [evt: string]: CustomEvent<any>;
19
+ }, {}, {}, "ref">;
20
+ type AngleSliderMarkerGroup = InstanceType<typeof AngleSliderMarkerGroup>;
21
+ export default AngleSliderMarkerGroup;
@@ -0,0 +1,38 @@
1
+ <script lang="ts" module>
2
+ import type {Assign, HtmlIngredientProps} from '../types.js';
3
+ import type {MarkerProps} from '@zag-js/angle-slider';
4
+
5
+ export interface AngleSliderMarkerProps
6
+ extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, MarkerProps> {}
7
+ </script>
8
+
9
+ <script lang="ts">
10
+ import {mergeProps} from '../merge-props.js';
11
+ import {createSplitProps} from '@zag-js/utils';
12
+ import {getAngleSliderContext} from './angle-slider-context.svelte.js';
13
+
14
+ let {
15
+ ref = $bindable(null),
16
+ asChild,
17
+ children,
18
+ ...props
19
+ }: AngleSliderMarkerProps = $props();
20
+
21
+ let [markerProps, localProps] = $derived(
22
+ createSplitProps<MarkerProps>(['value'])(props),
23
+ );
24
+
25
+ let angleSlider = getAngleSliderContext();
26
+
27
+ let mergedProps = $derived(
28
+ mergeProps(angleSlider.getMarkerProps(markerProps), localProps),
29
+ );
30
+ </script>
31
+
32
+ {#if asChild}
33
+ {@render asChild(mergedProps)}
34
+ {:else}
35
+ <div {...mergedProps}>
36
+ {@render children?.()}
37
+ </div>
38
+ {/if}
@@ -0,0 +1,22 @@
1
+ import type { Assign, HtmlIngredientProps } from '../types.js';
2
+ import type { MarkerProps } from '@zag-js/angle-slider';
3
+ export interface AngleSliderMarkerProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, MarkerProps> {
4
+ }
5
+ 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> {
6
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
7
+ $$bindings?: Bindings;
8
+ } & Exports;
9
+ (internal: unknown, props: Props & {
10
+ $$events?: Events;
11
+ $$slots?: Slots;
12
+ }): Exports & {
13
+ $set?: any;
14
+ $on?: any;
15
+ };
16
+ z_$$bindings?: Bindings;
17
+ }
18
+ declare const AngleSliderMarker: $$__sveltets_2_IsomorphicComponent<AngleSliderMarkerProps, {
19
+ [evt: string]: CustomEvent<any>;
20
+ }, {}, {}, "ref">;
21
+ type AngleSliderMarker = InstanceType<typeof AngleSliderMarker>;
22
+ export default AngleSliderMarker;
@@ -0,0 +1,59 @@
1
+ <script lang="ts" module>
2
+ import type {Assign, HtmlIngredientProps} from '../types.js';
3
+ import {
4
+ type CreateAngleSliderProps,
5
+ type CreateAngleSliderReturn,
6
+ } from './create-angle-slider.svelte.js';
7
+
8
+ export interface AngleSliderProps
9
+ extends Assign<
10
+ HtmlIngredientProps<'div', HTMLDivElement, CreateAngleSliderReturn>,
11
+ CreateAngleSliderProps
12
+ > {}
13
+ </script>
14
+
15
+ <script lang="ts">
16
+ import {mergeProps} from '../merge-props.js';
17
+ import {reflect} from '@zag-js/svelte';
18
+ import {createSplitProps} from '@zag-js/utils';
19
+ import {setAngleSliderContext} from './angle-slider-context.svelte.js';
20
+ import {createAngleSlider} from './create-angle-slider.svelte.js';
21
+
22
+ let {
23
+ ref = $bindable(null),
24
+ asChild,
25
+ children,
26
+ ...props
27
+ }: AngleSliderProps = $props();
28
+
29
+ let [createAngleSliderProps, localProps] = $derived(
30
+ createSplitProps<CreateAngleSliderProps>([
31
+ 'id',
32
+ 'ids',
33
+ 'name',
34
+ 'step',
35
+ 'value',
36
+ 'invalid',
37
+ 'disabled',
38
+ 'readOnly',
39
+ 'onValueChange',
40
+ 'onValueChangeEnd',
41
+ ])(props),
42
+ );
43
+
44
+ let angleSlider = createAngleSlider(reflect(() => createAngleSliderProps));
45
+
46
+ let mergedProps = $derived(
47
+ mergeProps(angleSlider.getRootProps(), localProps),
48
+ );
49
+
50
+ setAngleSliderContext(angleSlider);
51
+ </script>
52
+
53
+ {#if asChild}
54
+ {@render asChild(mergedProps, angleSlider)}
55
+ {:else}
56
+ <div bind:this={ref} {...mergedProps}>
57
+ {@render children?.(angleSlider)}
58
+ </div>
59
+ {/if}
@@ -0,0 +1,22 @@
1
+ import type { Assign, HtmlIngredientProps } from '../types.js';
2
+ import { type CreateAngleSliderProps, type CreateAngleSliderReturn } from './create-angle-slider.svelte.js';
3
+ export interface AngleSliderProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateAngleSliderReturn>, CreateAngleSliderProps> {
4
+ }
5
+ 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> {
6
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
7
+ $$bindings?: Bindings;
8
+ } & Exports;
9
+ (internal: unknown, props: Props & {
10
+ $$events?: Events;
11
+ $$slots?: Slots;
12
+ }): Exports & {
13
+ $set?: any;
14
+ $on?: any;
15
+ };
16
+ z_$$bindings?: Bindings;
17
+ }
18
+ declare const AngleSliderRoot: $$__sveltets_2_IsomorphicComponent<AngleSliderProps, {
19
+ [evt: string]: CustomEvent<any>;
20
+ }, {}, {}, "ref">;
21
+ type AngleSliderRoot = InstanceType<typeof AngleSliderRoot>;
22
+ export default AngleSliderRoot;
@@ -0,0 +1,29 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface AngleSliderThumbProps
5
+ extends HtmlIngredientProps<'div', HTMLDivElement> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '../merge-props.js';
10
+ import {getAngleSliderContext} from './angle-slider-context.svelte.js';
11
+
12
+ let {
13
+ ref = $bindable(null),
14
+ asChild,
15
+ children,
16
+ ...props
17
+ }: AngleSliderThumbProps = $props();
18
+
19
+ let angleSlider = getAngleSliderContext();
20
+ let mergedProps = $derived(mergeProps(angleSlider.getThumbProps(), props));
21
+ </script>
22
+
23
+ {#if asChild}
24
+ {@render asChild(mergedProps)}
25
+ {:else}
26
+ <div {...mergedProps}>
27
+ {@render children?.()}
28
+ </div>
29
+ {/if}
@@ -0,0 +1,21 @@
1
+ import type { HtmlIngredientProps } from '../types.js';
2
+ export interface AngleSliderThumbProps extends HtmlIngredientProps<'div', HTMLDivElement> {
3
+ }
4
+ 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> {
5
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
6
+ $$bindings?: Bindings;
7
+ } & Exports;
8
+ (internal: unknown, props: Props & {
9
+ $$events?: Events;
10
+ $$slots?: Slots;
11
+ }): Exports & {
12
+ $set?: any;
13
+ $on?: any;
14
+ };
15
+ z_$$bindings?: Bindings;
16
+ }
17
+ declare const AngleSliderThumb: $$__sveltets_2_IsomorphicComponent<AngleSliderThumbProps, {
18
+ [evt: string]: CustomEvent<any>;
19
+ }, {}, {}, "ref">;
20
+ type AngleSliderThumb = InstanceType<typeof AngleSliderThumb>;
21
+ export default AngleSliderThumb;
@@ -0,0 +1,35 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface AngleSliderValueTextProps
5
+ extends HtmlIngredientProps<'span', HTMLSpanElement> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '../merge-props.js';
10
+ import {getAngleSliderContext} from './angle-slider-context.svelte.js';
11
+
12
+ let {
13
+ ref = $bindable(null),
14
+ asChild,
15
+ children,
16
+ ...props
17
+ }: AngleSliderValueTextProps = $props();
18
+
19
+ let angleSlider = getAngleSliderContext();
20
+ let mergedProps = $derived(
21
+ mergeProps(angleSlider.getValueTextProps(), props),
22
+ );
23
+ </script>
24
+
25
+ {#if asChild}
26
+ {@render asChild(mergedProps)}
27
+ {:else}
28
+ <span {...mergedProps}>
29
+ {#if children}
30
+ {@render children()}
31
+ {:else}
32
+ {angleSlider.valueAsDegree}
33
+ {/if}
34
+ </span>
35
+ {/if}
@@ -0,0 +1,21 @@
1
+ import type { HtmlIngredientProps } from '../types.js';
2
+ export interface AngleSliderValueTextProps extends HtmlIngredientProps<'span', HTMLSpanElement> {
3
+ }
4
+ 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> {
5
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
6
+ $$bindings?: Bindings;
7
+ } & Exports;
8
+ (internal: unknown, props: Props & {
9
+ $$events?: Events;
10
+ $$slots?: Slots;
11
+ }): Exports & {
12
+ $set?: any;
13
+ $on?: any;
14
+ };
15
+ z_$$bindings?: Bindings;
16
+ }
17
+ declare const AngleSliderValueText: $$__sveltets_2_IsomorphicComponent<AngleSliderValueTextProps, {
18
+ [evt: string]: CustomEvent<any>;
19
+ }, {}, {}, "ref">;
20
+ type AngleSliderValueText = InstanceType<typeof AngleSliderValueText>;
21
+ export default AngleSliderValueText;
@@ -0,0 +1,8 @@
1
+ export { default as Control } from './angle-slider-control.svelte';
2
+ export { default as HiddenInput } from './angle-slider-hidden-input.svelte';
3
+ export { default as SliderLabel } from './angle-slider-label.svelte';
4
+ export { default as MarkerGroup } from './angle-slider-marker-group.svelte';
5
+ export { default as Marker } from './angle-slider-marker.svelte';
6
+ export { default as Root } from './angle-slider-root.svelte';
7
+ export { default as Thumb } from './angle-slider-thumb.svelte';
8
+ export { default as ValueText } from './angle-slider-value-text.svelte';
@@ -0,0 +1,8 @@
1
+ export { default as Control } from './angle-slider-control.svelte';
2
+ export { default as HiddenInput } from './angle-slider-hidden-input.svelte';
3
+ export { default as SliderLabel } from './angle-slider-label.svelte';
4
+ export { default as MarkerGroup } from './angle-slider-marker-group.svelte';
5
+ export { default as Marker } from './angle-slider-marker.svelte';
6
+ export { default as Root } from './angle-slider-root.svelte';
7
+ export { default as Thumb } from './angle-slider-thumb.svelte';
8
+ export { default as ValueText } from './angle-slider-value-text.svelte';
@@ -0,0 +1,7 @@
1
+ import * as angleSlider from '@zag-js/angle-slider';
2
+ export interface CreateAngleSliderProps extends Omit<angleSlider.Context, 'id' | 'dir' | 'getRootNode'> {
3
+ id?: string;
4
+ }
5
+ export interface CreateAngleSliderReturn extends angleSlider.Api {
6
+ }
7
+ export declare function createAngleSlider(props: CreateAngleSliderProps): CreateAngleSliderReturn;
@@ -0,0 +1,18 @@
1
+ import { createUniqueId } from '../create-unique-id.js';
2
+ import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
3
+ import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
4
+ import * as angleSlider from '@zag-js/angle-slider';
5
+ import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
6
+ export function createAngleSlider(props) {
7
+ const locale = getLocaleContext();
8
+ const environment = getEnvironmentContext();
9
+ const id = createUniqueId();
10
+ const context = reflect(() => ({
11
+ id,
12
+ dir: locale?.dir,
13
+ getRootNode: environment?.getRootNode,
14
+ ...props,
15
+ }));
16
+ const [state, send] = useMachine(angleSlider.machine(context), { context });
17
+ return reflect(() => angleSlider.connect(state, send, normalizeProps));
18
+ }
@@ -0,0 +1,12 @@
1
+ export * as AngleSlider from './angle-slider.js';
2
+ export type { AngleSliderControlProps } from './angle-slider-control.svelte';
3
+ export type { AngleSliderHiddenInputProps } from './angle-slider-hidden-input.svelte';
4
+ export type { AngleSliderLabelProps } from './angle-slider-label.svelte';
5
+ export type { AngleSliderMarkerGroupProps } from './angle-slider-marker-group.svelte';
6
+ export type { AngleSliderMarkerProps } from './angle-slider-marker.svelte';
7
+ export type { AngleSliderProps } from './angle-slider-root.svelte';
8
+ export type { AngleSliderThumbProps } from './angle-slider-thumb.svelte';
9
+ export type { AngleSliderValueTextProps } from './angle-slider-value-text.svelte';
10
+ export { anatomy as angleSliderAnatomy } from './angle-slider-anatomy.js';
11
+ export { getAngleSliderContext, setAngleSliderContext, } from './angle-slider-context.svelte.js';
12
+ export { createAngleSlider, type CreateAngleSliderProps, type CreateAngleSliderReturn, } from './create-angle-slider.svelte.js';
@@ -0,0 +1,4 @@
1
+ export * as AngleSlider from './angle-slider.js';
2
+ export { anatomy as angleSliderAnatomy } from './angle-slider-anatomy.js';
3
+ export { getAngleSliderContext, setAngleSliderContext, } from './angle-slider-context.svelte.js';
4
+ export { createAngleSlider, } from './create-angle-slider.svelte.js';
@@ -1,7 +1,7 @@
1
- export * from './avatar-anatomy.js';
2
1
  export * as Avatar from './avatar.js';
3
2
  export type { AvatarFallbackProps } from './avatar-fallback.svelte';
4
3
  export type { AvatarImageProps } from './avatar-image.svelte';
5
4
  export type { AvatarProps } from './avatar-root.svelte';
6
5
  export { anatomy as avatarAnatomy } from './avatar-anatomy.js';
7
- export { getAvatarContext } from './avatar-context.svelte.js';
6
+ export { getAvatarContext, setAvatarContext } from './avatar-context.svelte.js';
7
+ export { createAvatar, type CreateAvatarProps, type CreateAvatarReturn, } from './create-avatar.svelte.js';