ui-ingredients 0.0.26 → 0.0.28

Sign up to get free protection for your applications and to get access to all the features.
Files changed (301) hide show
  1. package/README.md +80 -80
  2. package/dist/accordion/item-content.svelte +2 -3
  3. package/dist/accordion/item-indicator.svelte +5 -6
  4. package/dist/accordion/item-trigger.svelte +2 -3
  5. package/dist/accordion/item.svelte +2 -2
  6. package/dist/accordion/root.svelte +2 -4
  7. package/dist/avatar/fallback.svelte +5 -6
  8. package/dist/avatar/image.svelte +2 -3
  9. package/dist/avatar/root.svelte +2 -2
  10. package/dist/carousel/indicator-group.svelte +2 -3
  11. package/dist/carousel/indicator.svelte +2 -3
  12. package/dist/carousel/item-group.svelte +2 -3
  13. package/dist/carousel/item.svelte +2 -2
  14. package/dist/carousel/next-trigger.svelte +2 -3
  15. package/dist/carousel/prev-trigger.svelte +2 -3
  16. package/dist/carousel/root.svelte +2 -2
  17. package/dist/carousel/viewport.svelte +2 -3
  18. package/dist/checkbox/control.svelte +2 -3
  19. package/dist/checkbox/indicator.svelte +2 -3
  20. package/dist/checkbox/label.svelte +5 -6
  21. package/dist/checkbox/root.svelte +2 -4
  22. package/dist/clipboard/control.svelte +2 -3
  23. package/dist/clipboard/indicator.svelte +5 -6
  24. package/dist/clipboard/input.svelte +2 -3
  25. package/dist/clipboard/label.svelte +2 -4
  26. package/dist/clipboard/root.svelte +2 -4
  27. package/dist/clipboard/trigger.svelte +2 -3
  28. package/dist/collapsible/content.svelte +2 -3
  29. package/dist/collapsible/create-collapsible.svelte.js +1 -1
  30. package/dist/collapsible/root.svelte +2 -4
  31. package/dist/collapsible/trigger.svelte +2 -3
  32. package/dist/color-picker/create-color-picker.svelte.js +1 -1
  33. package/dist/combobox/clear-trigger.svelte +2 -3
  34. package/dist/combobox/content.svelte +2 -3
  35. package/dist/combobox/control.svelte +2 -3
  36. package/dist/combobox/create-combobox.svelte.js +1 -1
  37. package/dist/combobox/input.svelte +2 -3
  38. package/dist/combobox/item-group-label.svelte +5 -6
  39. package/dist/combobox/item-group.svelte +2 -3
  40. package/dist/combobox/item-indicator.svelte +5 -6
  41. package/dist/combobox/item-text.svelte +5 -6
  42. package/dist/combobox/item.svelte +2 -2
  43. package/dist/combobox/label.svelte +2 -3
  44. package/dist/combobox/list.svelte +2 -3
  45. package/dist/combobox/positioner.svelte +2 -3
  46. package/dist/combobox/root.svelte +2 -2
  47. package/dist/combobox/trigger.svelte +2 -3
  48. package/dist/date-picker/clear-trigger.svelte +2 -3
  49. package/dist/date-picker/content.svelte +2 -3
  50. package/dist/date-picker/control.svelte +2 -3
  51. package/dist/date-picker/create-date-picker.svelte.js +1 -1
  52. package/dist/date-picker/day-table-cell-trigger.svelte +2 -3
  53. package/dist/date-picker/day-table-cell.svelte +5 -5
  54. package/dist/date-picker/input.svelte +2 -3
  55. package/dist/date-picker/label.svelte +2 -3
  56. package/dist/date-picker/month-select.svelte +2 -3
  57. package/dist/date-picker/month-table-cell-trigger.svelte +2 -3
  58. package/dist/date-picker/month-table-cell.svelte +5 -5
  59. package/dist/date-picker/next-trigger.svelte +2 -3
  60. package/dist/date-picker/positioner.svelte +2 -3
  61. package/dist/date-picker/preset-trigger.svelte +2 -4
  62. package/dist/date-picker/prev-trigger.svelte +2 -3
  63. package/dist/date-picker/range-text.svelte +5 -6
  64. package/dist/date-picker/root.svelte +2 -4
  65. package/dist/date-picker/table-body.svelte +5 -6
  66. package/dist/date-picker/table-head.svelte +5 -6
  67. package/dist/date-picker/table-header.svelte +5 -6
  68. package/dist/date-picker/table-row.svelte +5 -6
  69. package/dist/date-picker/table.svelte +6 -6
  70. package/dist/date-picker/trigger.svelte +2 -3
  71. package/dist/date-picker/view-control.svelte +2 -3
  72. package/dist/date-picker/view-trigger.svelte +2 -3
  73. package/dist/date-picker/view.svelte +2 -3
  74. package/dist/date-picker/year-select.svelte +2 -3
  75. package/dist/date-picker/year-table-cell-trigger.svelte +2 -3
  76. package/dist/date-picker/year-table-cell.svelte +5 -5
  77. package/dist/dialog/backdrop.svelte +2 -3
  78. package/dist/dialog/close-trigger.svelte +2 -3
  79. package/dist/dialog/content.svelte +2 -3
  80. package/dist/dialog/create-dialog.svelte.js +1 -1
  81. package/dist/dialog/description.svelte +5 -6
  82. package/dist/dialog/title.svelte +5 -6
  83. package/dist/dialog/trigger.svelte +2 -3
  84. package/dist/editable/area.svelte +2 -3
  85. package/dist/editable/cancel-trigger.svelte +2 -3
  86. package/dist/editable/control.svelte +2 -3
  87. package/dist/editable/create-editable.svelte.js +1 -1
  88. package/dist/editable/edit-trigger.svelte +2 -3
  89. package/dist/editable/input.svelte +2 -3
  90. package/dist/editable/label.svelte +2 -3
  91. package/dist/editable/preview.svelte +2 -3
  92. package/dist/editable/root.svelte +73 -4
  93. package/dist/editable/submit-trigger.svelte +3 -4
  94. package/dist/file-upload/dropzone.svelte +2 -3
  95. package/dist/file-upload/item-delete-trigger.svelte +2 -3
  96. package/dist/file-upload/item-group.svelte +2 -3
  97. package/dist/file-upload/item-name.svelte +5 -6
  98. package/dist/file-upload/item-preview-image.svelte +2 -3
  99. package/dist/file-upload/item-preview.svelte +2 -3
  100. package/dist/file-upload/item-size-text.svelte +5 -6
  101. package/dist/file-upload/item.svelte +2 -3
  102. package/dist/file-upload/label.svelte +2 -3
  103. package/dist/file-upload/root.svelte +10 -4
  104. package/dist/file-upload/trigger.svelte +2 -3
  105. package/dist/hover-card/arrow-tip.svelte +5 -6
  106. package/dist/hover-card/arrow.svelte +5 -6
  107. package/dist/hover-card/content.svelte +2 -3
  108. package/dist/hover-card/create-hover-card.svelte.js +1 -1
  109. package/dist/hover-card/positioner.svelte +2 -3
  110. package/dist/hover-card/trigger.svelte +5 -6
  111. package/dist/menu/arrow-tip.svelte +5 -6
  112. package/dist/menu/arrow.svelte +5 -6
  113. package/dist/menu/content.svelte +2 -3
  114. package/dist/menu/context-trigger.svelte +2 -3
  115. package/dist/menu/create-menu.svelte.js +1 -1
  116. package/dist/menu/indicator.svelte +5 -6
  117. package/dist/menu/item-group-label.svelte +5 -6
  118. package/dist/menu/item-group.svelte +2 -4
  119. package/dist/menu/item.svelte +11 -5
  120. package/dist/menu/option-item-indicator.svelte +5 -6
  121. package/dist/menu/option-item-text.svelte +5 -6
  122. package/dist/menu/option-item.svelte +2 -2
  123. package/dist/menu/positioner.svelte +2 -3
  124. package/dist/menu/separator.svelte +2 -3
  125. package/dist/menu/trigger-item.svelte +2 -3
  126. package/dist/menu/trigger.svelte +2 -3
  127. package/dist/number-input/control.svelte +2 -3
  128. package/dist/number-input/decrement-trigger.svelte +2 -3
  129. package/dist/number-input/increment-trigger.svelte +2 -3
  130. package/dist/number-input/input.svelte +2 -3
  131. package/dist/number-input/label.svelte +2 -3
  132. package/dist/number-input/root.svelte +2 -4
  133. package/dist/number-input/scrubber.svelte +2 -3
  134. package/dist/pagination/ellipsis.svelte +5 -6
  135. package/dist/pagination/item.svelte +2 -3
  136. package/dist/pagination/next-trigger.svelte +2 -3
  137. package/dist/pagination/prev-trigger.svelte +2 -3
  138. package/dist/pagination/root.svelte +2 -4
  139. package/dist/pin-input/clear-trigger.svelte +2 -3
  140. package/dist/pin-input/input.svelte +2 -3
  141. package/dist/pin-input/label.svelte +2 -3
  142. package/dist/pin-input/root.svelte +2 -2
  143. package/dist/popover/arrow-tip.svelte +5 -6
  144. package/dist/popover/arrow.svelte +5 -6
  145. package/dist/popover/close-trigger.svelte +2 -3
  146. package/dist/popover/content.svelte +2 -3
  147. package/dist/popover/create-popover.svelte.js +1 -1
  148. package/dist/popover/description.svelte +5 -6
  149. package/dist/popover/positioner.svelte +2 -3
  150. package/dist/popover/title.svelte +5 -6
  151. package/dist/popover/trigger.svelte +2 -3
  152. package/dist/progress/circle-range.svelte +2 -3
  153. package/dist/progress/circle-track.svelte +2 -3
  154. package/dist/progress/circle.svelte +2 -3
  155. package/dist/progress/label.svelte +5 -6
  156. package/dist/progress/range.svelte +2 -3
  157. package/dist/progress/root.svelte +2 -2
  158. package/dist/progress/track.svelte +2 -3
  159. package/dist/progress/value-text.svelte +5 -6
  160. package/dist/progress/view.svelte +2 -3
  161. package/dist/qr-code/frame.svelte +2 -3
  162. package/dist/qr-code/overlay.svelte +2 -3
  163. package/dist/qr-code/pattern.svelte +2 -3
  164. package/dist/qr-code/root.svelte +2 -2
  165. package/dist/radio-group/indicator.svelte +5 -6
  166. package/dist/radio-group/item-control.svelte +2 -3
  167. package/dist/radio-group/item-text.svelte +5 -6
  168. package/dist/radio-group/item.svelte +2 -2
  169. package/dist/radio-group/label.svelte +5 -6
  170. package/dist/radio-group/root.svelte +2 -4
  171. package/dist/rating-group/control.svelte +2 -3
  172. package/dist/rating-group/item.svelte +2 -2
  173. package/dist/rating-group/label.svelte +2 -3
  174. package/dist/rating-group/root.svelte +2 -4
  175. package/dist/segment-group/indicator.svelte +5 -6
  176. package/dist/segment-group/item-control.svelte +2 -4
  177. package/dist/segment-group/item-text.svelte +5 -6
  178. package/dist/segment-group/item.svelte +2 -2
  179. package/dist/segment-group/label.svelte +5 -6
  180. package/dist/segment-group/root.svelte +2 -4
  181. package/dist/select/clear-trigger.svelte +2 -3
  182. package/dist/select/content.svelte +2 -3
  183. package/dist/select/control.svelte +2 -3
  184. package/dist/select/create-select.svelte.js +1 -1
  185. package/dist/select/indicator.svelte +5 -6
  186. package/dist/select/item-group-label.svelte +5 -6
  187. package/dist/select/item-group.svelte +2 -3
  188. package/dist/select/item-indicator.svelte +5 -6
  189. package/dist/select/item-text.svelte +5 -6
  190. package/dist/select/item.svelte +2 -2
  191. package/dist/select/label.svelte +2 -3
  192. package/dist/select/list.svelte +2 -3
  193. package/dist/select/positioner.svelte +2 -3
  194. package/dist/select/root.svelte +2 -2
  195. package/dist/select/trigger.svelte +2 -3
  196. package/dist/select/value-text.svelte +5 -6
  197. package/dist/signature-pad/clear-trigger.svelte +2 -3
  198. package/dist/signature-pad/control.svelte +2 -3
  199. package/dist/signature-pad/current-segment-path.svelte +2 -3
  200. package/dist/signature-pad/guide.svelte +2 -3
  201. package/dist/signature-pad/label.svelte +2 -3
  202. package/dist/signature-pad/root.svelte +2 -4
  203. package/dist/signature-pad/segment-path.svelte +2 -3
  204. package/dist/signature-pad/segment.svelte +2 -3
  205. package/dist/slider/control.svelte +2 -3
  206. package/dist/slider/label.svelte +2 -3
  207. package/dist/slider/marker-group.svelte +2 -3
  208. package/dist/slider/marker.svelte +2 -3
  209. package/dist/slider/range.svelte +2 -3
  210. package/dist/slider/root.svelte +2 -2
  211. package/dist/slider/thumb.svelte +2 -3
  212. package/dist/slider/track.svelte +2 -3
  213. package/dist/slider/value-text.svelte +5 -6
  214. package/dist/splitter/panel.svelte +2 -3
  215. package/dist/splitter/resize-trigger.svelte +2 -2
  216. package/dist/splitter/root.svelte +2 -2
  217. package/dist/steps/completed-content.svelte +2 -3
  218. package/dist/steps/content.svelte +2 -3
  219. package/dist/steps/indicator.svelte +5 -6
  220. package/dist/steps/item.svelte +2 -2
  221. package/dist/steps/list.svelte +2 -4
  222. package/dist/steps/next-trigger.svelte +2 -3
  223. package/dist/steps/prev-trigger.svelte +2 -3
  224. package/dist/steps/progress.svelte +2 -3
  225. package/dist/steps/root.svelte +2 -2
  226. package/dist/steps/separator.svelte +5 -6
  227. package/dist/steps/trigger.svelte +2 -3
  228. package/dist/switch/control.svelte +2 -3
  229. package/dist/switch/label.svelte +5 -6
  230. package/dist/switch/root.svelte +3 -3
  231. package/dist/switch/thumb.svelte +2 -3
  232. package/dist/tabs/content.svelte +2 -3
  233. package/dist/tabs/list.svelte +2 -3
  234. package/dist/tabs/root.svelte +2 -2
  235. package/dist/tabs/trigger.svelte +2 -3
  236. package/dist/tags-input/clear-trigger.svelte +2 -3
  237. package/dist/tags-input/control.svelte +2 -3
  238. package/dist/tags-input/input.svelte +2 -3
  239. package/dist/tags-input/item-delete-trigger.svelte +2 -3
  240. package/dist/tags-input/item-input.svelte +2 -4
  241. package/dist/tags-input/item-preview.svelte +2 -3
  242. package/dist/tags-input/item-text.svelte +5 -6
  243. package/dist/tags-input/item.svelte +2 -2
  244. package/dist/tags-input/label.svelte +2 -3
  245. package/dist/tags-input/root.svelte +2 -4
  246. package/dist/time-picker/clear-trigger.svelte +2 -3
  247. package/dist/time-picker/column.svelte +2 -3
  248. package/dist/time-picker/content.svelte +2 -3
  249. package/dist/time-picker/control.svelte +2 -3
  250. package/dist/time-picker/create-time-picker.svelte.js +1 -1
  251. package/dist/time-picker/hour-cell.svelte +2 -3
  252. package/dist/time-picker/input.svelte +2 -3
  253. package/dist/time-picker/label.svelte +2 -3
  254. package/dist/time-picker/minute-cell.svelte +2 -3
  255. package/dist/time-picker/period-cell.svelte +2 -4
  256. package/dist/time-picker/positioner.svelte +2 -3
  257. package/dist/time-picker/root.svelte +2 -4
  258. package/dist/time-picker/second-cell.svelte +2 -3
  259. package/dist/time-picker/spacer.svelte +5 -6
  260. package/dist/time-picker/trigger.svelte +2 -3
  261. package/dist/timer/action-trigger.svelte +2 -3
  262. package/dist/timer/item-label.svelte +5 -6
  263. package/dist/timer/item-value.svelte +2 -3
  264. package/dist/timer/item.svelte +2 -3
  265. package/dist/timer/root.svelte +2 -2
  266. package/dist/timer/separator.svelte +5 -6
  267. package/dist/toast/action-trigger.svelte +2 -3
  268. package/dist/toast/close-trigger.svelte +2 -3
  269. package/dist/toast/description.svelte +5 -6
  270. package/dist/toast/ghost-after.svelte +18 -0
  271. package/dist/toast/ghost-after.svelte.d.ts +18 -0
  272. package/dist/toast/ghost-before.svelte +18 -0
  273. package/dist/toast/ghost-before.svelte.d.ts +18 -0
  274. package/dist/toast/index.d.ts +2 -0
  275. package/dist/toast/root.svelte +2 -2
  276. package/dist/toast/title.svelte +5 -6
  277. package/dist/toast/toast.d.ts +2 -0
  278. package/dist/toast/toast.js +2 -0
  279. package/dist/toast/toaster.svelte +3 -3
  280. package/dist/toggle-group/item.svelte +2 -2
  281. package/dist/toggle-group/root.svelte +2 -4
  282. package/dist/tooltip/arrow-tip.svelte +5 -6
  283. package/dist/tooltip/arrow.svelte +5 -6
  284. package/dist/tooltip/content.svelte +2 -3
  285. package/dist/tooltip/create-tooltip.svelte.js +1 -1
  286. package/dist/tooltip/positioner.svelte +2 -3
  287. package/dist/tooltip/trigger.svelte +2 -3
  288. package/dist/tree-view/branch-content.svelte +2 -3
  289. package/dist/tree-view/branch-control.svelte +2 -3
  290. package/dist/tree-view/branch-indicator.svelte +5 -6
  291. package/dist/tree-view/branch-text.svelte +5 -6
  292. package/dist/tree-view/branch-trigger.svelte +2 -3
  293. package/dist/tree-view/branch.svelte +2 -2
  294. package/dist/tree-view/item-indicator.svelte +5 -6
  295. package/dist/tree-view/item-text.svelte +5 -6
  296. package/dist/tree-view/item.svelte +2 -2
  297. package/dist/tree-view/label.svelte +5 -6
  298. package/dist/tree-view/root.svelte +2 -2
  299. package/dist/tree-view/tree.svelte +2 -3
  300. package/dist/types.d.ts +6 -0
  301. package/package.json +1 -1
@@ -16,7 +16,7 @@ export function createSelect(props) {
16
16
  ...props,
17
17
  id: props.id ?? createUniqueId(),
18
18
  dir: locale?.dir,
19
- open: props.defaultOpen,
19
+ open: props.defaultOpen ?? props.open,
20
20
  getRootNode: environment?.getRootNode,
21
21
  collection,
22
22
  'open.controlled': props.open != null,
@@ -1,9 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type {GenericHtmlProps, HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
- export interface SelectIndicatorProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
4
+ export interface SelectIndicatorProps extends HtmlProps<'span'> {
5
+ asChild?: AsChild;
7
6
  }
8
7
  </script>
9
8
 
@@ -21,7 +20,7 @@
21
20
  {#if asChild}
22
21
  {@render asChild(attrs)}
23
22
  {:else}
24
- <div {...attrs}>
23
+ <span {...attrs}>
25
24
  {@render children?.()}
26
- </div>
25
+ </span>
27
26
  {/if}
@@ -1,9 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type {GenericHtmlProps, HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
- export interface SelectItemGroupLabelProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
4
+ export interface SelectItemGroupLabelProps extends HtmlProps<'span'> {
5
+ asChild?: AsChild;
7
6
  }
8
7
  </script>
9
8
 
@@ -24,7 +23,7 @@
24
23
  {#if asChild}
25
24
  {@render asChild(attrs)}
26
25
  {:else}
27
- <div {...attrs}>
26
+ <span {...attrs}>
28
27
  {@render children?.()}
29
- </div>
28
+ </span>
30
29
  {/if}
@@ -1,11 +1,10 @@
1
1
  <script lang="ts" module>
2
- import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
2
+ import type {AsChild, Assign, HtmlProps} from '../types.js';
3
3
  import type {ItemGroupProps} from '@zag-js/select';
4
- import type {Snippet} from 'svelte';
5
4
 
6
5
  export interface SelectItemGroupProps
7
6
  extends Assign<HtmlProps<'div'>, Omit<ItemGroupProps, 'id'>> {
8
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
7
+ asChild?: AsChild;
9
8
  }
10
9
  </script>
11
10
 
@@ -1,9 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type {GenericHtmlProps, HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
- export interface SelectItemIndicatorProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
4
+ export interface SelectItemIndicatorProps extends HtmlProps<'span'> {
5
+ asChild?: AsChild;
7
6
  }
8
7
  </script>
9
8
 
@@ -22,7 +21,7 @@
22
21
  {#if asChild}
23
22
  {@render asChild(attrs)}
24
23
  {:else}
25
- <div {...attrs}>
24
+ <span {...attrs}>
26
25
  {@render children?.()}
27
- </div>
26
+ </span>
28
27
  {/if}
@@ -1,9 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type {GenericHtmlProps, HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
- export interface SelectItemTextProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
4
+ export interface SelectItemTextProps extends HtmlProps<'span'> {
5
+ asChild?: AsChild;
7
6
  }
8
7
  </script>
9
8
 
@@ -22,11 +21,11 @@
22
21
  {#if asChild}
23
22
  {@render asChild(attrs)}
24
23
  {:else}
25
- <div {...attrs}>
24
+ <span {...attrs}>
26
25
  {#if children}
27
26
  {@render children?.()}
28
27
  {:else}
29
28
  {select.collection.stringifyItem(itemProps.item)}
30
29
  {/if}
31
- </div>
30
+ </span>
32
31
  {/if}
@@ -1,10 +1,10 @@
1
1
  <script lang="ts" module>
2
- import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
2
+ import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
3
3
  import type {ItemProps, ItemState} from '@zag-js/select';
4
4
  import type {Snippet} from 'svelte';
5
5
 
6
6
  export interface SelectItemProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
7
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, sate: ItemState]>;
7
+ asChild?: AsChild<GenericHtmlProps, ItemState>;
8
8
  children?: Snippet<[state: ItemState]>;
9
9
  }
10
10
  </script>
@@ -1,9 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type {HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
4
  export interface SelectLabelProps extends HtmlProps<'label'> {
6
- asChild?: Snippet<[attrs: Omit<HtmlProps<'label'>, 'children'>]>;
5
+ asChild?: AsChild<HtmlProps<'label'>>;
7
6
  }
8
7
  </script>
9
8
 
@@ -1,9 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type {GenericHtmlProps, HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
4
  export interface SelectListProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
5
+ asChild?: AsChild;
7
6
  }
8
7
  </script>
9
8
 
@@ -1,9 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type {GenericHtmlProps, HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
4
  export interface SelectPositionerProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
5
+ asChild?: AsChild;
7
6
  }
8
7
  </script>
9
8
 
@@ -1,11 +1,11 @@
1
1
  <script lang="ts" module>
2
- import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
2
+ import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
3
3
  import type {Snippet} from 'svelte';
4
4
  import type {CreateSelectProps, CreateSelectReturn} from './create-select.svelte.js';
5
5
 
6
6
  export interface SelectProps<T>
7
7
  extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateSelectProps<T>> {
8
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, select: CreateSelectReturn]>;
8
+ asChild?: AsChild<GenericHtmlProps, CreateSelectReturn>;
9
9
  children?: Snippet<[select: CreateSelectReturn]>;
10
10
  }
11
11
  </script>
@@ -1,9 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type {HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
4
  export interface SelectTriggerProps extends HtmlProps<'button'> {
6
- asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
5
+ asChild?: AsChild<HtmlProps<'button'>>;
7
6
  }
8
7
  </script>
9
8
 
@@ -1,9 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type {GenericHtmlProps, HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
- export interface SelectValueTextProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
4
+ export interface SelectValueTextProps extends HtmlProps<'span'> {
5
+ asChild?: AsChild;
7
6
  }
8
7
  </script>
9
8
 
@@ -21,7 +20,7 @@
21
20
  {#if asChild}
22
21
  {@render asChild(attrs)}
23
22
  {:else}
24
- <div {...attrs}>
23
+ <span {...attrs}>
25
24
  {#if children}
26
25
  {@render children?.()}
27
26
  {:else if select.value.length}
@@ -29,5 +28,5 @@
29
28
  {:else}
30
29
  {placeholder}
31
30
  {/if}
32
- </div>
31
+ </span>
33
32
  {/if}
@@ -1,9 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type {GenericHtmlProps, HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
4
  export interface SignaturePadClearTriggerProps extends HtmlProps<'button'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
5
+ asChild?: AsChild<HtmlProps<'button'>>;
7
6
  }
8
7
  </script>
9
8
 
@@ -1,9 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type {GenericHtmlProps, HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
4
  export interface SignaturePadControlProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
5
+ asChild?: AsChild;
7
6
  }
8
7
  </script>
9
8
 
@@ -1,9 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type {HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
4
  export interface SignaturePadCurrentSegmentPathProps extends HtmlProps<'path'> {
6
- asChild?: Snippet<[attrs: Omit<HtmlProps<'path'>, 'children'>]>;
5
+ asChild?: AsChild<HtmlProps<'path'>>;
7
6
  }
8
7
  </script>
9
8
 
@@ -1,9 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type {GenericHtmlProps, HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
4
  export interface SignaturePadGuideProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
5
+ asChild?: AsChild;
7
6
  }
8
7
  </script>
9
8
 
@@ -1,9 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type {HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
4
  export interface SignaturePadLabelProps extends HtmlProps<'label'> {
6
- asChild?: Snippet<[attrs: Omit<HtmlProps<'label'>, 'children'>]>;
5
+ asChild?: AsChild<HtmlProps<'label'>>;
7
6
  }
8
7
  </script>
9
8
 
@@ -1,5 +1,5 @@
1
1
  <script lang="ts" module>
2
- import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
2
+ import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
3
3
  import type {Snippet} from 'svelte';
4
4
  import type {
5
5
  CreateSignaturePadProps,
@@ -8,9 +8,7 @@
8
8
 
9
9
  export interface SignaturePadProps
10
10
  extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateSignaturePadProps> {
11
- asChild?: Snippet<
12
- [attrs: Omit<GenericHtmlProps, 'children'>, signaturePad: CreateSignaturePadReturn]
13
- >;
11
+ asChild?: AsChild<GenericHtmlProps, CreateSignaturePadReturn>;
14
12
  children?: Snippet<[signaturePad: CreateSignaturePadReturn]>;
15
13
  }
16
14
  </script>
@@ -1,11 +1,10 @@
1
1
  <script lang="ts" module>
2
- import type {Assign, HtmlProps} from '../types.js';
2
+ import type {AsChild, Assign, HtmlProps} from '../types.js';
3
3
  import type {SegmentPathProps} from '@zag-js/signature-pad';
4
- import type {Snippet} from 'svelte';
5
4
 
6
5
  export interface SignaturePadSegmentPathProps
7
6
  extends Assign<HtmlProps<'path'>, SegmentPathProps> {
8
- asChild?: Snippet<[attrs: Omit<HtmlProps<'path'>, 'children'>]>;
7
+ asChild?: AsChild<HtmlProps<'path'>>;
9
8
  }
10
9
  </script>
11
10
 
@@ -1,9 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type {HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
4
  export interface SignaturePadSegmentProps extends HtmlProps<'svg'> {
6
- asChild?: Snippet<[attrs: Omit<HtmlProps<'svg'>, 'children'>]>;
5
+ asChild?: AsChild<HtmlProps<'svg'>>;
7
6
  }
8
7
  </script>
9
8
 
@@ -1,9 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type {GenericHtmlProps, HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
4
  export interface SliderControlProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
5
+ asChild?: AsChild;
7
6
  }
8
7
  </script>
9
8
 
@@ -1,9 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type {HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
4
  export interface SliderLabelProps extends HtmlProps<'label'> {
6
- asChild?: Snippet<[attrs: Omit<HtmlProps<'label'>, 'children'>]>;
5
+ asChild?: AsChild<HtmlProps<'label'>>;
7
6
  }
8
7
  </script>
9
8
 
@@ -1,9 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type {GenericHtmlProps, HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
4
  export interface SliderMarkerGroupProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
5
+ asChild?: AsChild;
7
6
  }
8
7
  </script>
9
8
 
@@ -1,10 +1,9 @@
1
1
  <script lang="ts" module>
2
- import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
2
+ import type {AsChild, Assign, HtmlProps} from '../types.js';
3
3
  import type {MarkerProps} from '@zag-js/slider';
4
- import type {Snippet} from 'svelte';
5
4
 
6
5
  export interface SliderMarkerProps extends Assign<HtmlProps<'div'>, MarkerProps> {
7
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
6
+ asChild?: AsChild;
8
7
  }
9
8
  </script>
10
9
 
@@ -1,9 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type {GenericHtmlProps, HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
4
  export interface SliderRangeProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
5
+ asChild?: AsChild;
7
6
  }
8
7
  </script>
9
8
 
@@ -1,11 +1,11 @@
1
1
  <script lang="ts" module>
2
- import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
2
+ import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
3
3
  import type {Snippet} from 'svelte';
4
4
  import type {CreateSliderProps, CreateSliderReturn} from './create-slider.svelte.js';
5
5
 
6
6
  export interface SliderProps
7
7
  extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateSliderProps> {
8
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, slider: CreateSliderReturn]>;
8
+ asChild?: AsChild<GenericHtmlProps, CreateSliderReturn>;
9
9
  children?: Snippet<[slider: CreateSliderReturn]>;
10
10
  }
11
11
  </script>
@@ -1,10 +1,9 @@
1
1
  <script lang="ts" module>
2
- import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
2
+ import type {AsChild, Assign, HtmlProps} from '../types.js';
3
3
  import type {ThumbProps} from '@zag-js/slider';
4
- import type {Snippet} from 'svelte';
5
4
 
6
5
  export interface SliderThumbProps extends Assign<HtmlProps<'div'>, ThumbProps> {
7
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
6
+ asChild?: AsChild;
8
7
  }
9
8
  </script>
10
9
 
@@ -1,9 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type {GenericHtmlProps, HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
4
  export interface SliderTrackProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
5
+ asChild?: AsChild;
7
6
  }
8
7
  </script>
9
8
 
@@ -1,9 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type {GenericHtmlProps, HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
- export interface SliderValueTextProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
4
+ export interface SliderValueTextProps extends HtmlProps<'span'> {
5
+ asChild?: AsChild;
7
6
  }
8
7
  </script>
9
8
 
@@ -21,11 +20,11 @@
21
20
  {#if asChild}
22
21
  {@render asChild(attrs)}
23
22
  {:else}
24
- <div {...attrs}>
23
+ <span {...attrs}>
25
24
  {#if children}
26
25
  {@render children()}
27
26
  {:else}
28
27
  {slider.value.join(', ')}
29
28
  {/if}
30
- </div>
29
+ </span>
31
30
  {/if}
@@ -1,10 +1,9 @@
1
1
  <script lang="ts" module>
2
- import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
2
+ import type {AsChild, Assign, HtmlProps} from '../types.js';
3
3
  import type {PanelProps} from '@zag-js/splitter';
4
- import type {Snippet} from 'svelte';
5
4
 
6
5
  export interface SplitterPanelProps extends Assign<HtmlProps<'div'>, PanelProps> {
7
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
6
+ asChild?: AsChild;
8
7
  }
9
8
  </script>
10
9
 
@@ -1,5 +1,5 @@
1
1
  <script lang="ts" module>
2
- import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
2
+ import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
3
3
  import type {ResizeTriggerProps} from '@zag-js/splitter';
4
4
 
5
5
  /* Currently not exported in zag */
@@ -14,7 +14,7 @@
14
14
 
15
15
  export interface SplitterResizeTriggerProps
16
16
  extends Assign<Omit<HtmlProps<'div'>, 'children'>, ResizeTriggerProps> {
17
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, state: ResizeTriggerState]>;
17
+ asChild?: AsChild<GenericHtmlProps, ResizeTriggerState>;
18
18
  children?: Snippet<[state: ResizeTriggerState]>;
19
19
  }
20
20
  </script>
@@ -1,11 +1,11 @@
1
1
  <script lang="ts" module>
2
- import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
2
+ import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
3
3
  import type {Snippet} from 'svelte';
4
4
  import type {CreateSplitterProps, CreateSplitterReturn} from './create-splitter.svelte.js';
5
5
 
6
6
  export interface SplitterProps
7
7
  extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateSplitterProps> {
8
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, splitter: CreateSplitterReturn]>;
8
+ asChild?: AsChild<GenericHtmlProps, CreateSplitterReturn>;
9
9
  children?: Snippet<[splitter: CreateSplitterReturn]>;
10
10
  }
11
11
  </script>
@@ -1,9 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type {GenericHtmlProps, HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
4
  export interface StepsCompletedContentProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
5
+ asChild?: AsChild;
7
6
  }
8
7
  </script>
9
8
 
@@ -1,10 +1,9 @@
1
1
  <script lang="ts" module>
2
- import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
2
+ import type {AsChild, Assign, HtmlProps} from '../types.js';
3
3
  import type {ItemProps} from '@zag-js/steps';
4
- import type {Snippet} from 'svelte';
5
4
 
6
5
  export interface StepsContentProps extends Assign<HtmlProps<'div'>, ItemProps> {
7
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
6
+ asChild?: AsChild;
8
7
  }
9
8
  </script>
10
9
 
@@ -1,9 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type {GenericHtmlProps, HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
- export interface StepsIndicatorProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
4
+ export interface StepsIndicatorProps extends HtmlProps<'span'> {
5
+ asChild?: AsChild;
7
6
  }
8
7
  </script>
9
8
 
@@ -22,7 +21,7 @@
22
21
  {#if asChild}
23
22
  {@render asChild(attrs)}
24
23
  {:else}
25
- <div {...attrs}>
24
+ <span {...attrs}>
26
25
  {@render children?.()}
27
- </div>
26
+ </span>
28
27
  {/if}
@@ -1,10 +1,10 @@
1
1
  <script lang="ts" module>
2
- import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
2
+ import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
3
3
  import type {ItemProps, ItemState} from '@zag-js/steps';
4
4
  import type {Snippet} from 'svelte';
5
5
 
6
6
  export interface StepsItemProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
7
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, state: ItemState]>;
7
+ asChild?: AsChild<GenericHtmlProps, ItemState>;
8
8
  children?: Snippet<[state: ItemState]>;
9
9
  }
10
10
  </script>
@@ -1,10 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type {Snippet} from 'svelte';
3
-
4
- import type {GenericHtmlProps, HtmlProps} from '../types.js';
2
+ import type {AsChild, HtmlProps} from '../types.js';
5
3
 
6
4
  export interface StepsListProps extends HtmlProps<'div'> {
7
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
5
+ asChild?: AsChild;
8
6
  }
9
7
  </script>
10
8
 
@@ -1,9 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type {HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
4
  export interface StepsNextTriggerProps extends HtmlProps<'button'> {
6
- asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
5
+ asChild?: AsChild;
7
6
  }
8
7
  </script>
9
8
 
@@ -1,9 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type {HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
4
  export interface StepsPrevTriggerProps extends HtmlProps<'button'> {
6
- asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
5
+ asChild?: AsChild;
7
6
  }
8
7
  </script>
9
8