ui-ingredients 0.0.30 → 0.0.31

Sign up to get free protection for your applications and to get access to all the features.
Files changed (218) hide show
  1. package/dist/accordion/accordion.d.ts +0 -1
  2. package/dist/accordion/accordion.js +0 -1
  3. package/dist/accordion/create-accordion.svelte.js +2 -2
  4. package/dist/accordion/index.d.ts +1 -0
  5. package/dist/accordion/index.js +1 -0
  6. package/dist/avatar/avatar.d.ts +0 -1
  7. package/dist/avatar/avatar.js +0 -1
  8. package/dist/avatar/create-avatar.svelte.js +2 -2
  9. package/dist/avatar/index.d.ts +1 -0
  10. package/dist/avatar/index.js +1 -0
  11. package/dist/carousel/carousel.d.ts +0 -1
  12. package/dist/carousel/carousel.js +0 -1
  13. package/dist/carousel/create-carousel.svelte.js +2 -2
  14. package/dist/carousel/index.d.ts +1 -0
  15. package/dist/carousel/index.js +1 -0
  16. package/dist/checkbox/checkbox.d.ts +0 -1
  17. package/dist/checkbox/checkbox.js +0 -1
  18. package/dist/checkbox/create-checkbox.svelte.js +2 -2
  19. package/dist/checkbox/index.d.ts +1 -0
  20. package/dist/checkbox/index.js +1 -0
  21. package/dist/clipboard/clipboard.d.ts +0 -1
  22. package/dist/clipboard/clipboard.js +0 -1
  23. package/dist/clipboard/create-clipboard.svelte.js +2 -2
  24. package/dist/clipboard/index.d.ts +1 -0
  25. package/dist/clipboard/index.js +1 -0
  26. package/dist/collapsible/collapsible.d.ts +0 -1
  27. package/dist/collapsible/collapsible.js +0 -1
  28. package/dist/collapsible/create-collapsible.svelte.js +2 -2
  29. package/dist/collapsible/index.d.ts +1 -0
  30. package/dist/collapsible/index.js +1 -0
  31. package/dist/color-picker/color-picker.d.ts +1 -1
  32. package/dist/color-picker/color-picker.js +1 -1
  33. package/dist/color-picker/create-color-picker.svelte.js +2 -2
  34. package/dist/color-picker/index.d.ts +1 -0
  35. package/dist/color-picker/index.js +1 -0
  36. package/dist/combobox/combobox.d.ts +0 -1
  37. package/dist/combobox/combobox.js +0 -1
  38. package/dist/combobox/create-combobox.svelte.js +2 -2
  39. package/dist/combobox/index.d.ts +1 -0
  40. package/dist/combobox/index.js +1 -0
  41. package/dist/combobox/item-group.svelte +3 -3
  42. package/dist/date-picker/anatomy.d.ts +2 -0
  43. package/dist/date-picker/create-date-picker.svelte.js +2 -2
  44. package/dist/date-picker/date-picker.d.ts +0 -1
  45. package/dist/date-picker/date-picker.js +0 -1
  46. package/dist/date-picker/index.d.ts +1 -0
  47. package/dist/date-picker/index.js +1 -0
  48. package/dist/date-picker/range-text.svelte +1 -1
  49. package/dist/dialog/create-dialog.svelte.js +2 -2
  50. package/dist/dialog/dialog.d.ts +0 -1
  51. package/dist/dialog/dialog.js +0 -1
  52. package/dist/dialog/index.d.ts +1 -0
  53. package/dist/dialog/index.js +1 -0
  54. package/dist/editable/create-editable.svelte.js +2 -2
  55. package/dist/editable/editable.d.ts +0 -1
  56. package/dist/editable/editable.js +0 -1
  57. package/dist/editable/index.d.ts +1 -0
  58. package/dist/editable/index.js +1 -0
  59. package/dist/field/anatomy.d.ts +2 -0
  60. package/dist/field/anatomy.js +3 -0
  61. package/dist/field/context.svelte.d.ts +3 -0
  62. package/dist/field/context.svelte.js +2 -0
  63. package/dist/field/create-field.svelte.d.ts +28 -0
  64. package/dist/field/create-field.svelte.js +142 -0
  65. package/dist/field/error-text.svelte +26 -0
  66. package/dist/field/error-text.svelte.d.ts +18 -0
  67. package/dist/field/field.d.ts +7 -0
  68. package/dist/field/field.js +7 -0
  69. package/dist/field/helper-text.svelte +26 -0
  70. package/dist/field/helper-text.svelte.d.ts +18 -0
  71. package/dist/field/index.d.ts +9 -0
  72. package/dist/field/index.js +2 -0
  73. package/dist/field/input.svelte +24 -0
  74. package/dist/field/input.svelte.d.ts +18 -0
  75. package/dist/field/label.svelte +26 -0
  76. package/dist/field/label.svelte.d.ts +18 -0
  77. package/dist/field/root.svelte +44 -0
  78. package/dist/field/root.svelte.d.ts +18 -0
  79. package/dist/field/select.svelte +24 -0
  80. package/dist/field/select.svelte.d.ts +18 -0
  81. package/dist/field/textarea.svelte +24 -0
  82. package/dist/field/textarea.svelte.d.ts +18 -0
  83. package/dist/file-upload/create-file-upload.svelte.js +2 -2
  84. package/dist/file-upload/file-upload.d.ts +0 -1
  85. package/dist/file-upload/file-upload.js +0 -1
  86. package/dist/file-upload/index.d.ts +1 -0
  87. package/dist/file-upload/index.js +1 -0
  88. package/dist/hover-card/create-hover-card.svelte.js +2 -2
  89. package/dist/hover-card/hover-card.d.ts +0 -1
  90. package/dist/hover-card/hover-card.js +0 -1
  91. package/dist/hover-card/index.d.ts +1 -0
  92. package/dist/hover-card/index.js +1 -0
  93. package/dist/index.d.ts +1 -0
  94. package/dist/index.js +1 -0
  95. package/dist/menu/create-menu.svelte.js +2 -2
  96. package/dist/menu/index.d.ts +1 -0
  97. package/dist/menu/index.js +1 -0
  98. package/dist/menu/item-group.svelte +3 -3
  99. package/dist/menu/menu.d.ts +0 -1
  100. package/dist/menu/menu.js +0 -1
  101. package/dist/number-input/create-number-input.svelte.js +2 -2
  102. package/dist/number-input/index.d.ts +1 -0
  103. package/dist/number-input/index.js +1 -0
  104. package/dist/number-input/number-input.d.ts +0 -1
  105. package/dist/number-input/number-input.js +0 -1
  106. package/dist/pagination/create-pagination.svelte.js +2 -2
  107. package/dist/pagination/index.d.ts +1 -0
  108. package/dist/pagination/index.js +1 -0
  109. package/dist/pagination/pagination.d.ts +0 -1
  110. package/dist/pagination/pagination.js +0 -1
  111. package/dist/pin-input/anatomy.d.ts +2 -0
  112. package/dist/pin-input/create-pin-input.svelte.js +2 -2
  113. package/dist/pin-input/index.d.ts +1 -0
  114. package/dist/pin-input/index.js +1 -0
  115. package/dist/pin-input/pin-input.d.ts +0 -1
  116. package/dist/pin-input/pin-input.js +0 -1
  117. package/dist/popover/create-popover.svelte.js +2 -2
  118. package/dist/popover/popover.d.ts +1 -1
  119. package/dist/popover/popover.js +1 -1
  120. package/dist/progress/create-progress.svelte.js +2 -2
  121. package/dist/progress/index.d.ts +1 -0
  122. package/dist/progress/index.js +1 -0
  123. package/dist/progress/progress.d.ts +0 -1
  124. package/dist/progress/progress.js +0 -1
  125. package/dist/qr-code/create-qr-code.svelte.js +2 -2
  126. package/dist/qr-code/index.d.ts +1 -0
  127. package/dist/qr-code/index.js +1 -0
  128. package/dist/qr-code/qr-code.d.ts +0 -1
  129. package/dist/qr-code/qr-code.js +0 -1
  130. package/dist/radio-group/create-radio-group.svelte.js +2 -2
  131. package/dist/radio-group/index.d.ts +1 -0
  132. package/dist/radio-group/index.js +1 -0
  133. package/dist/radio-group/radio-group.d.ts +0 -1
  134. package/dist/radio-group/radio-group.js +0 -1
  135. package/dist/rating-group/create-rating-group.svelte.js +2 -2
  136. package/dist/rating-group/index.d.ts +1 -0
  137. package/dist/rating-group/index.js +1 -0
  138. package/dist/rating-group/item.svelte +2 -2
  139. package/dist/rating-group/rating-group.d.ts +0 -1
  140. package/dist/rating-group/rating-group.js +0 -1
  141. package/dist/segment-group/anatomy.d.ts +2 -0
  142. package/dist/segment-group/create-segment-group.svelte.js +2 -2
  143. package/dist/segment-group/index.d.ts +1 -0
  144. package/dist/segment-group/index.js +1 -0
  145. package/dist/segment-group/segment-group.d.ts +0 -1
  146. package/dist/segment-group/segment-group.js +0 -1
  147. package/dist/select/create-select.svelte.js +2 -2
  148. package/dist/select/index.d.ts +1 -0
  149. package/dist/select/index.js +1 -0
  150. package/dist/select/item-group.svelte +3 -3
  151. package/dist/select/select.d.ts +0 -1
  152. package/dist/select/select.js +0 -1
  153. package/dist/signature-pad/create-signature-pad.svelte.js +2 -2
  154. package/dist/signature-pad/index.d.ts +1 -0
  155. package/dist/signature-pad/index.js +1 -0
  156. package/dist/signature-pad/signature-pad.d.ts +0 -1
  157. package/dist/signature-pad/signature-pad.js +0 -1
  158. package/dist/slider/create-slider.svelte.js +2 -2
  159. package/dist/slider/index.d.ts +1 -0
  160. package/dist/slider/index.js +1 -0
  161. package/dist/slider/slider.d.ts +0 -1
  162. package/dist/slider/slider.js +0 -1
  163. package/dist/splitter/create-splitter.svelte.js +2 -2
  164. package/dist/splitter/index.d.ts +1 -0
  165. package/dist/splitter/index.js +1 -0
  166. package/dist/splitter/splitter.d.ts +0 -1
  167. package/dist/splitter/splitter.js +0 -1
  168. package/dist/steps/create-steps.svelte.js +2 -2
  169. package/dist/steps/index.d.ts +1 -0
  170. package/dist/steps/index.js +1 -0
  171. package/dist/steps/steps.d.ts +0 -1
  172. package/dist/steps/steps.js +0 -1
  173. package/dist/switch/create-switch.svelte.js +2 -2
  174. package/dist/switch/index.d.ts +1 -0
  175. package/dist/switch/index.js +1 -0
  176. package/dist/switch/switch.d.ts +0 -1
  177. package/dist/switch/switch.js +0 -1
  178. package/dist/tabs/create-tabs.svelte.js +2 -2
  179. package/dist/tabs/index.d.ts +1 -0
  180. package/dist/tabs/index.js +1 -0
  181. package/dist/tabs/tabs.d.ts +0 -1
  182. package/dist/tabs/tabs.js +0 -1
  183. package/dist/tags-input/create-tags-input.svelte.js +2 -2
  184. package/dist/tags-input/index.d.ts +1 -0
  185. package/dist/tags-input/index.js +1 -0
  186. package/dist/tags-input/tags-input.d.ts +0 -1
  187. package/dist/tags-input/tags-input.js +0 -1
  188. package/dist/time-picker/create-time-picker.svelte.js +2 -2
  189. package/dist/time-picker/index.d.ts +1 -0
  190. package/dist/time-picker/index.js +1 -0
  191. package/dist/time-picker/time-picker.d.ts +1 -1
  192. package/dist/time-picker/time-picker.js +1 -1
  193. package/dist/timer/create-timer.svelte.js +2 -2
  194. package/dist/timer/index.d.ts +2 -2
  195. package/dist/timer/index.js +1 -1
  196. package/dist/toast/create-toaster.svelte.js +2 -2
  197. package/dist/toast/index.d.ts +1 -0
  198. package/dist/toast/index.js +1 -0
  199. package/dist/toast/toast.d.ts +0 -1
  200. package/dist/toast/toast.js +0 -1
  201. package/dist/toggle-group/create-toggle-group.svelte.js +2 -2
  202. package/dist/toggle-group/index.d.ts +1 -0
  203. package/dist/toggle-group/index.js +1 -0
  204. package/dist/toggle-group/toggle-group.d.ts +0 -1
  205. package/dist/toggle-group/toggle-group.js +0 -1
  206. package/dist/tooltip/create-tooltip.svelte.js +2 -2
  207. package/dist/tooltip/index.d.ts +1 -0
  208. package/dist/tooltip/index.js +1 -0
  209. package/dist/tooltip/tooltip.d.ts +0 -1
  210. package/dist/tooltip/tooltip.js +0 -1
  211. package/dist/tree-view/create-tree-view.svelte.js +2 -2
  212. package/dist/tree-view/index.d.ts +1 -0
  213. package/dist/tree-view/index.js +1 -0
  214. package/dist/tree-view/tree-view.d.ts +0 -1
  215. package/dist/tree-view/tree-view.js +0 -1
  216. package/package.json +1 -1
  217. package/dist/create-unique-id.d.ts +0 -1
  218. package/dist/create-unique-id.js +0 -4
@@ -0,0 +1,142 @@
1
+ import { ariaAttr, dataAttr } from '@zag-js/dom-query';
2
+ import { uid } from 'uid';
3
+ import { parts } from './anatomy.js';
4
+ export function createField(props) {
5
+ const id_ = uid();
6
+ const {
7
+ /**/
8
+ ids, invalid, disabled, required, readonly, } = $derived.by(() => {
9
+ const id = props.id ?? id_;
10
+ const ids = {
11
+ root: props.ids?.root ?? `field:${id}`,
12
+ label: props.ids?.label ?? `field:${id}:label`,
13
+ control: props.ids?.control ?? `field:${id}:control`,
14
+ errorText: props.ids?.errorText ?? `field:${id}:error-text`,
15
+ helperText: props.ids?.helperText ?? `field:${id}:helper-text`,
16
+ };
17
+ return {
18
+ ids,
19
+ invalid: props.invalid ?? false,
20
+ required: props.required ?? false,
21
+ disabled: props.disabled ?? false,
22
+ readonly: props.readOnly ?? false,
23
+ };
24
+ });
25
+ let hasErrorText = $state(false);
26
+ let hasHelperText = $state(false);
27
+ const ariaDescribedby = $derived.by(() => {
28
+ const l = [];
29
+ if (hasErrorText) {
30
+ l.push(ids.errorText);
31
+ }
32
+ if (hasHelperText) {
33
+ l.push(ids.helperText);
34
+ }
35
+ return l.join(' ');
36
+ });
37
+ $effect(() => {
38
+ if (invalid && document.getElementById(ids.errorText)) {
39
+ hasErrorText = true;
40
+ }
41
+ });
42
+ $effect(() => {
43
+ if (document.getElementById(ids.helperText)) {
44
+ hasHelperText = true;
45
+ }
46
+ });
47
+ function getRootProps() {
48
+ return {
49
+ ...parts.root.attrs,
50
+ id: ids.root,
51
+ role: 'group',
52
+ 'data-invalid': dataAttr(invalid),
53
+ 'data-disabled': dataAttr(disabled),
54
+ 'data-required': dataAttr(required),
55
+ 'data-readonly': dataAttr(readonly),
56
+ };
57
+ }
58
+ function getLabelProps() {
59
+ return {
60
+ ...parts.label.attrs,
61
+ id: ids.label,
62
+ for: ids.control,
63
+ 'data-invalid': dataAttr(invalid),
64
+ 'data-disabled': dataAttr(disabled),
65
+ 'data-required': dataAttr(required),
66
+ 'data-readonly': dataAttr(readonly),
67
+ };
68
+ }
69
+ function getErrorTextProps() {
70
+ return {
71
+ ...parts.errorText.attrs,
72
+ id: ids.errorText,
73
+ hidden: !hasErrorText,
74
+ 'data-invalid': dataAttr(invalid),
75
+ 'data-disabled': dataAttr(disabled),
76
+ 'data-required': dataAttr(required),
77
+ 'data-readonly': dataAttr(readonly),
78
+ };
79
+ }
80
+ function getHelperTextProps() {
81
+ return {
82
+ id: ids.helperText,
83
+ 'data-invalid': dataAttr(invalid),
84
+ 'data-disabled': dataAttr(disabled),
85
+ 'data-required': dataAttr(required),
86
+ 'data-readonly': dataAttr(readonly),
87
+ };
88
+ }
89
+ function getInputProps() {
90
+ return {
91
+ ...parts.input.attrs,
92
+ id: ids.control,
93
+ disabled,
94
+ required,
95
+ readonly,
96
+ 'aria-invalid': ariaAttr(invalid),
97
+ 'aria-describedby': ariaDescribedby,
98
+ 'data-invalid': dataAttr(invalid),
99
+ 'data-disabled': dataAttr(disabled),
100
+ 'data-required': dataAttr(required),
101
+ 'data-readonly': dataAttr(readonly),
102
+ };
103
+ }
104
+ function getSelectProps() {
105
+ return {
106
+ ...parts.select.attrs,
107
+ id: ids.control,
108
+ disabled,
109
+ required,
110
+ 'aria-invalid': ariaAttr(invalid),
111
+ 'aria-readonly': ariaAttr(readonly),
112
+ 'aria-describedby': ariaDescribedby,
113
+ 'data-invalid': dataAttr(invalid),
114
+ 'data-disabled': dataAttr(disabled),
115
+ 'data-required': dataAttr(required),
116
+ 'data-readonly': dataAttr(readonly),
117
+ };
118
+ }
119
+ function getTextareaProps() {
120
+ return {
121
+ ...parts.textarea.attrs,
122
+ id: ids.control,
123
+ disabled,
124
+ required,
125
+ readonly,
126
+ 'aria-describedby': ariaDescribedby,
127
+ 'data-invalid': dataAttr(invalid),
128
+ 'data-disabled': dataAttr(disabled),
129
+ 'data-required': dataAttr(required),
130
+ 'data-readonly': dataAttr(readonly),
131
+ };
132
+ }
133
+ return {
134
+ getRootProps,
135
+ getLabelProps,
136
+ getErrorTextProps,
137
+ getHelperTextProps,
138
+ getInputProps,
139
+ getSelectProps,
140
+ getTextareaProps,
141
+ };
142
+ }
@@ -0,0 +1,26 @@
1
+ <script lang="ts" module>
2
+ import type {AsChild, HTMLProps} from '../types.js';
3
+
4
+ export interface FieldErrorTextProps extends HTMLProps<'div'> {
5
+ asChild?: AsChild;
6
+ }
7
+ </script>
8
+
9
+ <script lang="ts">
10
+ import {mergeProps} from '../merge-props.js';
11
+ import {fieldContext} from './context.svelte.js';
12
+
13
+ let {asChild, children, ...props}: FieldErrorTextProps = $props();
14
+
15
+ let field = fieldContext.get();
16
+
17
+ let mergedProps = $derived(mergeProps(props, field.getErrorTextProps()));
18
+ </script>
19
+
20
+ {#if asChild}
21
+ {@render asChild(mergedProps)}
22
+ {:else}
23
+ <div {...mergedProps}>
24
+ {@render children?.()}
25
+ </div>
26
+ {/if}
@@ -0,0 +1,18 @@
1
+ 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> {
2
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
+ $$bindings?: Bindings;
4
+ } & Exports;
5
+ (internal: unknown, props: Props & {
6
+ $$events?: Events;
7
+ $$slots?: Slots;
8
+ }): Exports & {
9
+ $set?: any;
10
+ $on?: any;
11
+ };
12
+ z_$$bindings?: Bindings;
13
+ }
14
+ declare const ErrorText: $$__sveltets_2_IsomorphicComponent<FieldErrorTextProps, {
15
+ [evt: string]: CustomEvent<any>;
16
+ }, {}, {}, "">;
17
+ type ErrorText = InstanceType<typeof ErrorText>;
18
+ export default ErrorText;
@@ -0,0 +1,7 @@
1
+ export { default as ErrorText } from './error-text.svelte';
2
+ export { default as HelperText } from './helper-text.svelte';
3
+ export { default as Input } from './input.svelte';
4
+ export { default as Label } from './label.svelte';
5
+ export { default as Root } from './root.svelte';
6
+ export { default as Select } from './select.svelte';
7
+ export { default as Textarea } from './textarea.svelte';
@@ -0,0 +1,7 @@
1
+ export { default as ErrorText } from './error-text.svelte';
2
+ export { default as HelperText } from './helper-text.svelte';
3
+ export { default as Input } from './input.svelte';
4
+ export { default as Label } from './label.svelte';
5
+ export { default as Root } from './root.svelte';
6
+ export { default as Select } from './select.svelte';
7
+ export { default as Textarea } from './textarea.svelte';
@@ -0,0 +1,26 @@
1
+ <script lang="ts" module>
2
+ import type {AsChild, HTMLProps} from '../types.js';
3
+
4
+ export interface FieldHelperTextProps extends HTMLProps<'div'> {
5
+ asChild?: AsChild;
6
+ }
7
+ </script>
8
+
9
+ <script lang="ts">
10
+ import {mergeProps} from '../merge-props.js';
11
+ import {fieldContext} from './context.svelte.js';
12
+
13
+ let {asChild, children, ...props}: FieldHelperTextProps = $props();
14
+
15
+ let field = fieldContext.get();
16
+
17
+ let mergedProps = $derived(mergeProps(props, field.getHelperTextProps()));
18
+ </script>
19
+
20
+ {#if asChild}
21
+ {@render asChild(mergedProps)}
22
+ {:else}
23
+ <div {...mergedProps}>
24
+ {@render children?.()}
25
+ </div>
26
+ {/if}
@@ -0,0 +1,18 @@
1
+ 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> {
2
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
+ $$bindings?: Bindings;
4
+ } & Exports;
5
+ (internal: unknown, props: Props & {
6
+ $$events?: Events;
7
+ $$slots?: Slots;
8
+ }): Exports & {
9
+ $set?: any;
10
+ $on?: any;
11
+ };
12
+ z_$$bindings?: Bindings;
13
+ }
14
+ declare const HelperText: $$__sveltets_2_IsomorphicComponent<FieldHelperTextProps, {
15
+ [evt: string]: CustomEvent<any>;
16
+ }, {}, {}, "">;
17
+ type HelperText = InstanceType<typeof HelperText>;
18
+ export default HelperText;
@@ -0,0 +1,9 @@
1
+ export { anatomy as fieldAnatomy } from './anatomy.js';
2
+ export type { FieldErrorTextProps } from './error-text.svelte';
3
+ export type { FieldHelperTextProps } from './helper-text.svelte';
4
+ export type { FieldInputProps } from './input.svelte';
5
+ export type { FieldLabelProps } from './label.svelte';
6
+ export type { FieldProps } from './root.svelte';
7
+ export type { FieldSelectProps } from './select.svelte';
8
+ export type { FieldTextareaProps } from './textarea.svelte';
9
+ export * as Field from './field.js';
@@ -0,0 +1,2 @@
1
+ export { anatomy as fieldAnatomy } from './anatomy.js';
2
+ export * as Field from './field.js';
@@ -0,0 +1,24 @@
1
+ <script lang="ts" module>
2
+ import type {AsChild, HTMLProps} from '../types.js';
3
+
4
+ export interface FieldInputProps extends HTMLProps<'input'> {
5
+ asChild?: AsChild;
6
+ }
7
+ </script>
8
+
9
+ <script lang="ts">
10
+ import {mergeProps} from '../merge-props.js';
11
+ import {fieldContext} from './context.svelte.js';
12
+
13
+ let {asChild, ...props}: FieldInputProps = $props();
14
+
15
+ let field = fieldContext.get();
16
+
17
+ let mergedProps = $derived(mergeProps(props, field.getInputProps()));
18
+ </script>
19
+
20
+ {#if asChild}
21
+ {@render asChild(mergedProps)}
22
+ {:else}
23
+ <input {...mergedProps} />
24
+ {/if}
@@ -0,0 +1,18 @@
1
+ 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> {
2
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
+ $$bindings?: Bindings;
4
+ } & Exports;
5
+ (internal: unknown, props: Props & {
6
+ $$events?: Events;
7
+ $$slots?: Slots;
8
+ }): Exports & {
9
+ $set?: any;
10
+ $on?: any;
11
+ };
12
+ z_$$bindings?: Bindings;
13
+ }
14
+ declare const Input: $$__sveltets_2_IsomorphicComponent<FieldInputProps, {
15
+ [evt: string]: CustomEvent<any>;
16
+ }, {}, {}, "">;
17
+ type Input = InstanceType<typeof Input>;
18
+ export default Input;
@@ -0,0 +1,26 @@
1
+ <script lang="ts" module>
2
+ import type {AsChild, HTMLProps} from '../types.js';
3
+
4
+ export interface FieldLabelProps extends HTMLProps<'label'> {
5
+ asChild?: AsChild;
6
+ }
7
+ </script>
8
+
9
+ <script lang="ts">
10
+ import {mergeProps} from '../merge-props.js';
11
+ import {fieldContext} from './context.svelte.js';
12
+
13
+ let {children, asChild, ...props}: FieldLabelProps = $props();
14
+
15
+ let field = fieldContext.get();
16
+
17
+ let mergedProps = $derived(mergeProps(props, field.getLabelProps()));
18
+ </script>
19
+
20
+ {#if asChild}
21
+ {@render asChild(mergedProps)}
22
+ {:else}
23
+ <label {...mergedProps}>
24
+ {@render children?.()}
25
+ </label>
26
+ {/if}
@@ -0,0 +1,18 @@
1
+ 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> {
2
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
+ $$bindings?: Bindings;
4
+ } & Exports;
5
+ (internal: unknown, props: Props & {
6
+ $$events?: Events;
7
+ $$slots?: Slots;
8
+ }): Exports & {
9
+ $set?: any;
10
+ $on?: any;
11
+ };
12
+ z_$$bindings?: Bindings;
13
+ }
14
+ declare const Label: $$__sveltets_2_IsomorphicComponent<FieldLabelProps, {
15
+ [evt: string]: CustomEvent<any>;
16
+ }, {}, {}, "">;
17
+ type Label = InstanceType<typeof Label>;
18
+ export default Label;
@@ -0,0 +1,44 @@
1
+ <script lang="ts" module>
2
+ import type {AsChild, Assign, HTMLProps} from '../types.js';
3
+ import type {
4
+ CreateFieldProps,
5
+ CreateFieldReturn,
6
+ } from './create-field.svelte.js';
7
+
8
+ export interface FieldProps
9
+ extends Assign<HTMLProps<'div'>, CreateFieldProps> {
10
+ asChild?: AsChild<CreateFieldReturn>;
11
+ }
12
+ </script>
13
+
14
+ <script lang="ts">
15
+ import {mergeProps} from '../merge-props.js';
16
+ import {createSplitProps} from '@zag-js/utils';
17
+ import {fieldContext} from './context.svelte.js';
18
+ import {createField} from './create-field.svelte.js';
19
+
20
+ let {asChild, children, ...props}: FieldProps = $props();
21
+
22
+ let [fieldProps, otherProps] = createSplitProps<CreateFieldProps>([
23
+ 'id',
24
+ 'ids',
25
+ 'invalid',
26
+ 'disabled',
27
+ 'readOnly',
28
+ 'required',
29
+ ])(props);
30
+
31
+ let field = createField(fieldProps);
32
+
33
+ let mergedProps = $derived(mergeProps(otherProps, field.getRootProps()));
34
+
35
+ fieldContext.set(field);
36
+ </script>
37
+
38
+ {#if asChild}
39
+ {@render asChild(mergedProps, field)}
40
+ {:else}
41
+ <div {...mergedProps}>
42
+ {@render children?.()}
43
+ </div>
44
+ {/if}
@@ -0,0 +1,18 @@
1
+ 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> {
2
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
+ $$bindings?: Bindings;
4
+ } & Exports;
5
+ (internal: unknown, props: Props & {
6
+ $$events?: Events;
7
+ $$slots?: Slots;
8
+ }): Exports & {
9
+ $set?: any;
10
+ $on?: any;
11
+ };
12
+ z_$$bindings?: Bindings;
13
+ }
14
+ declare const Root: $$__sveltets_2_IsomorphicComponent<FieldProps, {
15
+ [evt: string]: CustomEvent<any>;
16
+ }, {}, {}, "">;
17
+ type Root = InstanceType<typeof Root>;
18
+ export default Root;
@@ -0,0 +1,24 @@
1
+ <script lang="ts" module>
2
+ import type {AsChild, HTMLProps} from '../types.js';
3
+
4
+ export interface FieldSelectProps extends HTMLProps<'select'> {
5
+ asChild?: AsChild;
6
+ }
7
+ </script>
8
+
9
+ <script lang="ts">
10
+ import {mergeProps} from '../merge-props.js';
11
+ import {fieldContext} from './context.svelte.js';
12
+
13
+ let {children, asChild, ...props}: FieldSelectProps = $props();
14
+
15
+ let field = fieldContext.get();
16
+
17
+ let mergedProps = $derived(mergeProps(props, field.getSelectProps()));
18
+ </script>
19
+
20
+ {#if asChild}
21
+ {@render asChild(mergedProps)}
22
+ {:else}
23
+ <select {...mergedProps}>{@render children?.()}</select>
24
+ {/if}
@@ -0,0 +1,18 @@
1
+ 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> {
2
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
+ $$bindings?: Bindings;
4
+ } & Exports;
5
+ (internal: unknown, props: Props & {
6
+ $$events?: Events;
7
+ $$slots?: Slots;
8
+ }): Exports & {
9
+ $set?: any;
10
+ $on?: any;
11
+ };
12
+ z_$$bindings?: Bindings;
13
+ }
14
+ declare const Select: $$__sveltets_2_IsomorphicComponent<FieldSelectProps, {
15
+ [evt: string]: CustomEvent<any>;
16
+ }, {}, {}, "">;
17
+ type Select = InstanceType<typeof Select>;
18
+ export default Select;
@@ -0,0 +1,24 @@
1
+ <script lang="ts" module>
2
+ import type {AsChild, HTMLProps} from '../types.js';
3
+
4
+ export interface FieldTextareaProps extends HTMLProps<'textarea'> {
5
+ asChild?: AsChild;
6
+ }
7
+ </script>
8
+
9
+ <script lang="ts">
10
+ import {mergeProps} from '../merge-props.js';
11
+ import {fieldContext} from './context.svelte.js';
12
+
13
+ let {asChild, ...props}: FieldTextareaProps = $props();
14
+
15
+ let field = fieldContext.get();
16
+
17
+ let mergedProps = $derived(mergeProps(props, field.getTextareaProps()));
18
+ </script>
19
+
20
+ {#if asChild}
21
+ {@render asChild(mergedProps)}
22
+ {:else}
23
+ <textarea {...mergedProps}></textarea>
24
+ {/if}
@@ -0,0 +1,18 @@
1
+ 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> {
2
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
+ $$bindings?: Bindings;
4
+ } & Exports;
5
+ (internal: unknown, props: Props & {
6
+ $$events?: Events;
7
+ $$slots?: Slots;
8
+ }): Exports & {
9
+ $set?: any;
10
+ $on?: any;
11
+ };
12
+ z_$$bindings?: Bindings;
13
+ }
14
+ declare const Textarea: $$__sveltets_2_IsomorphicComponent<FieldTextareaProps, {
15
+ [evt: string]: CustomEvent<any>;
16
+ }, {}, {}, "">;
17
+ type Textarea = InstanceType<typeof Textarea>;
18
+ export default Textarea;
@@ -1,14 +1,14 @@
1
- import { createUniqueId } from '../create-unique-id.js';
2
1
  import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
3
2
  import { getLocaleContext } from '../locale-provider/context.svelte.js';
4
3
  import * as fileUpload from '@zag-js/file-upload';
5
4
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
5
+ import { uid } from 'uid';
6
6
  export function createFileUpload(props) {
7
7
  const locale = getLocaleContext();
8
8
  const environment = getEnvironmentContext();
9
9
  const [state, send] = useMachine(fileUpload.machine({
10
10
  ...props,
11
- id: props.id ?? createUniqueId(),
11
+ id: props.id ?? uid(),
12
12
  dir: locale?.dir,
13
13
  locale: props.locale ?? locale?.locale,
14
14
  getRootNode: environment?.getRootNode,
@@ -1,4 +1,3 @@
1
- export { anatomy } from '@zag-js/file-upload';
2
1
  export { default as Dropzone } from './dropzone.svelte';
3
2
  export { default as HiddenInput } from './hidden-input.svelte';
4
3
  export { default as ItemDeleteTrigger } from './item-delete-trigger.svelte';
@@ -1,4 +1,3 @@
1
- export { anatomy } from '@zag-js/file-upload';
2
1
  export { default as Dropzone } from './dropzone.svelte';
3
2
  export { default as HiddenInput } from './hidden-input.svelte';
4
3
  export { default as ItemDeleteTrigger } from './item-delete-trigger.svelte';
@@ -11,3 +11,4 @@ export type { FileUploadItemProps } from './item.svelte';
11
11
  export type { FileUploadLabelProps } from './label.svelte';
12
12
  export type { FileUploadProps } from './root.svelte';
13
13
  export type { FileUploadTriggerProps } from './trigger.svelte';
14
+ export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';
@@ -1 +1,2 @@
1
1
  export * as FileUpload from './file-upload.js';
2
+ export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';
@@ -1,14 +1,14 @@
1
- import { createUniqueId } from '../create-unique-id.js';
2
1
  import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
3
2
  import { getLocaleContext } from '../locale-provider/context.svelte.js';
4
3
  import * as hoverCard from '@zag-js/hover-card';
5
4
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
5
+ import { uid } from 'uid';
6
6
  export function createHoverCard(props) {
7
7
  const locale = getLocaleContext();
8
8
  const environment = getEnvironmentContext();
9
9
  const [state, send] = useMachine(hoverCard.machine({
10
10
  ...props,
11
- id: props.id ?? createUniqueId(),
11
+ id: props.id ?? uid(),
12
12
  dir: locale?.dir,
13
13
  open: props.defaultOpen ?? props.open,
14
14
  getRootNode: environment?.getRootNode,
@@ -1,4 +1,3 @@
1
- export { anatomy } from '@zag-js/hover-card';
2
1
  export { default as ArrowTip } from './arrow-tip.svelte';
3
2
  export { default as Arrow } from './arrow.svelte';
4
3
  export { default as Content } from './content.svelte';
@@ -1,4 +1,3 @@
1
- export { anatomy } from '@zag-js/hover-card';
2
1
  export { default as ArrowTip } from './arrow-tip.svelte';
3
2
  export { default as Arrow } from './arrow.svelte';
4
3
  export { default as Content } from './content.svelte';
@@ -5,3 +5,4 @@ export type { HoverCardContentProps } from './content.svelte';
5
5
  export type { HoverCardPositionerProps } from './positioner.svelte';
6
6
  export type { HoverCardProps } from './root.svelte';
7
7
  export type { HoverCardTriggerProps } from './trigger.svelte';
8
+ export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';
@@ -1 +1,2 @@
1
1
  export * as HoverCard from './hover-card.js';
2
+ export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';
package/dist/index.d.ts CHANGED
@@ -10,6 +10,7 @@ export * from './date-picker/index.js';
10
10
  export * from './dialog/index.js';
11
11
  export * from './editable/index.js';
12
12
  export * from './environment-provider/index.js';
13
+ export * from './field/index.js';
13
14
  export * from './file-upload/index.js';
14
15
  export * from './hover-card/index.js';
15
16
  export * from './locale-provider/index.js';
package/dist/index.js CHANGED
@@ -10,6 +10,7 @@ export * from './date-picker/index.js';
10
10
  export * from './dialog/index.js';
11
11
  export * from './editable/index.js';
12
12
  export * from './environment-provider/index.js';
13
+ export * from './field/index.js';
13
14
  export * from './file-upload/index.js';
14
15
  export * from './hover-card/index.js';
15
16
  export * from './locale-provider/index.js';
@@ -1,14 +1,14 @@
1
- import { createUniqueId } from '../create-unique-id.js';
2
1
  import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
3
2
  import { getLocaleContext } from '../locale-provider/context.svelte.js';
4
3
  import * as menu from '@zag-js/menu';
5
4
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
5
+ import { uid } from 'uid';
6
6
  export function createMenu(props) {
7
7
  const locale = getLocaleContext();
8
8
  const environment = getEnvironmentContext();
9
9
  const [state, send] = useMachine(menu.machine({
10
10
  ...props,
11
- id: props.id ?? createUniqueId(),
11
+ id: props.id ?? uid(),
12
12
  dir: locale?.dir,
13
13
  open: props.defaultOpen ?? props.open,
14
14
  getRootNode: environment?.getRootNode,
@@ -15,3 +15,4 @@ export { type MenuRootProps } from './root.svelte';
15
15
  export { type MenuSeparatorProps } from './separator.svelte';
16
16
  export { type MenuTriggerItemIndicatorProps } from './trigger-item.svelte';
17
17
  export { type MenuTriggerProps } from './trigger.svelte';
18
+ export { anatomy as menuAnatomy } from '@zag-js/menu';
@@ -15,3 +15,4 @@ export {} from './root.svelte';
15
15
  export {} from './separator.svelte';
16
16
  export {} from './trigger-item.svelte';
17
17
  export {} from './trigger.svelte';
18
+ export { anatomy as menuAnatomy } from '@zag-js/menu';