ui-ingredients 0.0.25 → 0.0.27

Sign up to get free protection for your applications and to get access to all the features.
Files changed (379) hide show
  1. package/README.md +80 -80
  2. package/dist/accordion/item-content.svelte +13 -7
  3. package/dist/accordion/item-indicator.svelte +13 -7
  4. package/dist/accordion/item-trigger.svelte +13 -7
  5. package/dist/accordion/item.svelte +11 -6
  6. package/dist/accordion/root.svelte +11 -5
  7. package/dist/avatar/fallback.svelte +13 -7
  8. package/dist/avatar/image.svelte +11 -5
  9. package/dist/avatar/root.svelte +11 -13
  10. package/dist/carousel/indicator-group.svelte +13 -7
  11. package/dist/carousel/indicator.svelte +13 -7
  12. package/dist/carousel/item-group.svelte +13 -7
  13. package/dist/carousel/item.svelte +12 -8
  14. package/dist/carousel/next-trigger.svelte +13 -7
  15. package/dist/carousel/prev-trigger.svelte +13 -7
  16. package/dist/carousel/root.svelte +11 -5
  17. package/dist/carousel/viewport.svelte +13 -7
  18. package/dist/checkbox/control.svelte +13 -7
  19. package/dist/checkbox/hidden-input.svelte +1 -1
  20. package/dist/checkbox/indicator.svelte +13 -7
  21. package/dist/checkbox/label.svelte +13 -7
  22. package/dist/checkbox/root.svelte +11 -5
  23. package/dist/clipboard/control.svelte +13 -7
  24. package/dist/clipboard/indicator.svelte +13 -7
  25. package/dist/clipboard/input.svelte +11 -5
  26. package/dist/clipboard/label.svelte +13 -7
  27. package/dist/clipboard/root.svelte +11 -5
  28. package/dist/clipboard/trigger.svelte +13 -7
  29. package/dist/collapsible/content.svelte +13 -7
  30. package/dist/collapsible/root.svelte +12 -6
  31. package/dist/collapsible/trigger.svelte +13 -7
  32. package/dist/color-picker/area-background.svelte +21 -0
  33. package/dist/color-picker/area-background.svelte.d.ts +18 -0
  34. package/dist/color-picker/area-thumb.svelte +21 -0
  35. package/dist/color-picker/area-thumb.svelte.d.ts +18 -0
  36. package/dist/color-picker/area.svelte +27 -0
  37. package/dist/color-picker/area.svelte.d.ts +18 -0
  38. package/dist/color-picker/channel-input.svelte +28 -0
  39. package/dist/color-picker/channel-input.svelte.d.ts +18 -0
  40. package/dist/color-picker/channel-slider-label.svelte +25 -0
  41. package/dist/color-picker/channel-slider-label.svelte.d.ts +18 -0
  42. package/dist/color-picker/channel-slider-thumb.svelte +23 -0
  43. package/dist/color-picker/channel-slider-thumb.svelte.d.ts +18 -0
  44. package/dist/color-picker/channel-slider-track.svelte +23 -0
  45. package/dist/color-picker/channel-slider-track.svelte.d.ts +18 -0
  46. package/dist/color-picker/channel-slider-value-text.svelte +29 -0
  47. package/dist/color-picker/channel-slider-value-text.svelte.d.ts +18 -0
  48. package/dist/color-picker/channel-slider.svelte +29 -0
  49. package/dist/color-picker/channel-slider.svelte.d.ts +18 -0
  50. package/dist/color-picker/color-picker.d.ts +26 -0
  51. package/dist/color-picker/color-picker.js +26 -0
  52. package/dist/color-picker/content.svelte +20 -0
  53. package/dist/color-picker/content.svelte.d.ts +18 -0
  54. package/dist/color-picker/context.svelte.d.ts +8 -0
  55. package/dist/color-picker/context.svelte.js +6 -0
  56. package/dist/color-picker/control.svelte +20 -0
  57. package/dist/color-picker/control.svelte.d.ts +18 -0
  58. package/dist/color-picker/create-color-picker.svelte.d.ts +9 -0
  59. package/dist/color-picker/create-color-picker.svelte.js +20 -0
  60. package/dist/color-picker/eye-dropper-trigger.svelte +20 -0
  61. package/dist/color-picker/eye-dropper-trigger.svelte.d.ts +18 -0
  62. package/dist/color-picker/format-select.svelte +28 -0
  63. package/dist/color-picker/format-select.svelte.d.ts +18 -0
  64. package/dist/color-picker/format-trigger.svelte +20 -0
  65. package/dist/color-picker/format-trigger.svelte.d.ts +18 -0
  66. package/dist/color-picker/hidden-input.svelte +18 -0
  67. package/dist/color-picker/hidden-input.svelte.d.ts +18 -0
  68. package/dist/color-picker/index.d.ts +26 -0
  69. package/dist/color-picker/index.js +1 -0
  70. package/dist/color-picker/label.svelte +20 -0
  71. package/dist/color-picker/label.svelte.d.ts +18 -0
  72. package/dist/color-picker/positioner.svelte +20 -0
  73. package/dist/color-picker/positioner.svelte.d.ts +18 -0
  74. package/dist/color-picker/root.svelte +75 -0
  75. package/dist/color-picker/root.svelte.d.ts +18 -0
  76. package/dist/color-picker/swatch-group.svelte +20 -0
  77. package/dist/color-picker/swatch-group.svelte.d.ts +18 -0
  78. package/dist/color-picker/swatch-indicator.svelte +21 -0
  79. package/dist/color-picker/swatch-indicator.svelte.d.ts +18 -0
  80. package/dist/color-picker/swatch-trigger.svelte +31 -0
  81. package/dist/color-picker/swatch-trigger.svelte.d.ts +18 -0
  82. package/dist/color-picker/swatch.svelte +27 -0
  83. package/dist/color-picker/swatch.svelte.d.ts +18 -0
  84. package/dist/color-picker/transparency-grid.svelte +29 -0
  85. package/dist/color-picker/transparency-grid.svelte.d.ts +18 -0
  86. package/dist/color-picker/trigger.svelte +20 -0
  87. package/dist/color-picker/trigger.svelte.d.ts +18 -0
  88. package/dist/color-picker/value-text.svelte +24 -0
  89. package/dist/color-picker/value-text.svelte.d.ts +18 -0
  90. package/dist/combobox/clear-trigger.svelte +13 -7
  91. package/dist/combobox/content.svelte +13 -7
  92. package/dist/combobox/control.svelte +13 -7
  93. package/dist/combobox/input.svelte +11 -5
  94. package/dist/combobox/item-group-label.svelte +13 -7
  95. package/dist/combobox/item-group.svelte +13 -8
  96. package/dist/combobox/item-indicator.svelte +13 -7
  97. package/dist/combobox/item-text.svelte +17 -11
  98. package/dist/combobox/item.svelte +11 -6
  99. package/dist/combobox/label.svelte +13 -7
  100. package/dist/combobox/list.svelte +13 -7
  101. package/dist/combobox/positioner.svelte +13 -7
  102. package/dist/combobox/root.svelte +11 -5
  103. package/dist/combobox/trigger.svelte +13 -7
  104. package/dist/date-picker/clear-trigger.svelte +13 -7
  105. package/dist/date-picker/content.svelte +13 -7
  106. package/dist/date-picker/control.svelte +13 -7
  107. package/dist/date-picker/create-date-picker.svelte.d.ts +2 -0
  108. package/dist/date-picker/create-date-picker.svelte.js +11 -1
  109. package/dist/date-picker/day-table-cell-trigger.svelte +13 -7
  110. package/dist/date-picker/day-table-cell.svelte +13 -14
  111. package/dist/date-picker/input.svelte +11 -5
  112. package/dist/date-picker/label.svelte +13 -7
  113. package/dist/date-picker/month-select.svelte +19 -13
  114. package/dist/date-picker/month-table-cell-trigger.svelte +13 -7
  115. package/dist/date-picker/month-table-cell.svelte +13 -14
  116. package/dist/date-picker/next-trigger.svelte +13 -7
  117. package/dist/date-picker/positioner.svelte +13 -7
  118. package/dist/date-picker/preset-trigger.svelte +13 -7
  119. package/dist/date-picker/prev-trigger.svelte +13 -7
  120. package/dist/date-picker/range-text.svelte +17 -11
  121. package/dist/date-picker/root.svelte +11 -5
  122. package/dist/date-picker/table-body.svelte +13 -7
  123. package/dist/date-picker/table-head.svelte +13 -7
  124. package/dist/date-picker/table-header.svelte +13 -7
  125. package/dist/date-picker/table-row.svelte +13 -7
  126. package/dist/date-picker/table.svelte +13 -7
  127. package/dist/date-picker/trigger.svelte +13 -7
  128. package/dist/date-picker/view-control.svelte +13 -7
  129. package/dist/date-picker/view-trigger.svelte +13 -7
  130. package/dist/date-picker/view.svelte +21 -9
  131. package/dist/date-picker/year-select.svelte +19 -13
  132. package/dist/date-picker/year-table-cell-trigger.svelte +13 -7
  133. package/dist/date-picker/year-table-cell.svelte +13 -14
  134. package/dist/dialog/backdrop.svelte +13 -7
  135. package/dist/dialog/close-trigger.svelte +13 -7
  136. package/dist/dialog/content.svelte +13 -7
  137. package/dist/dialog/description.svelte +13 -7
  138. package/dist/dialog/positioner.svelte +14 -7
  139. package/dist/dialog/title.svelte +13 -7
  140. package/dist/dialog/trigger.svelte +13 -7
  141. package/dist/editable/area.svelte +13 -7
  142. package/dist/editable/cancel-trigger.svelte +13 -7
  143. package/dist/editable/control.svelte +13 -7
  144. package/dist/editable/edit-trigger.svelte +13 -7
  145. package/dist/editable/input.svelte +11 -5
  146. package/dist/editable/label.svelte +13 -7
  147. package/dist/editable/preview.svelte +17 -11
  148. package/dist/editable/root.svelte +73 -4
  149. package/dist/editable/submit-trigger.svelte +13 -7
  150. package/dist/file-upload/dropzone.svelte +13 -7
  151. package/dist/file-upload/hidden-input.svelte +1 -1
  152. package/dist/file-upload/item-delete-trigger.svelte +13 -7
  153. package/dist/file-upload/item-group.svelte +13 -7
  154. package/dist/file-upload/item-name.svelte +17 -11
  155. package/dist/file-upload/item-preview-image.svelte +11 -5
  156. package/dist/file-upload/item-preview.svelte +13 -7
  157. package/dist/file-upload/item-size-text.svelte +17 -11
  158. package/dist/file-upload/item.svelte +13 -7
  159. package/dist/file-upload/label.svelte +13 -7
  160. package/dist/file-upload/root.svelte +11 -5
  161. package/dist/file-upload/trigger.svelte +13 -7
  162. package/dist/hover-card/arrow-tip.svelte +13 -7
  163. package/dist/hover-card/arrow.svelte +13 -7
  164. package/dist/hover-card/content.svelte +13 -7
  165. package/dist/hover-card/positioner.svelte +13 -7
  166. package/dist/hover-card/trigger.svelte +13 -7
  167. package/dist/index.d.ts +2 -0
  168. package/dist/index.js +2 -0
  169. package/dist/menu/arrow-tip.svelte +13 -7
  170. package/dist/menu/arrow.svelte +13 -7
  171. package/dist/menu/content.svelte +13 -7
  172. package/dist/menu/context-trigger.svelte +13 -7
  173. package/dist/menu/indicator.svelte +13 -7
  174. package/dist/menu/item-group-label.svelte +13 -7
  175. package/dist/menu/item-group.svelte +13 -9
  176. package/dist/menu/item.svelte +12 -6
  177. package/dist/menu/option-item-indicator.svelte +13 -7
  178. package/dist/menu/option-item-text.svelte +17 -11
  179. package/dist/menu/option-item.svelte +11 -5
  180. package/dist/menu/positioner.svelte +13 -7
  181. package/dist/menu/separator.svelte +13 -7
  182. package/dist/menu/trigger-item.svelte +13 -7
  183. package/dist/menu/trigger.svelte +13 -7
  184. package/dist/number-input/control.svelte +13 -7
  185. package/dist/number-input/decrement-trigger.svelte +13 -7
  186. package/dist/number-input/increment-trigger.svelte +13 -7
  187. package/dist/number-input/input.svelte +11 -5
  188. package/dist/number-input/label.svelte +13 -7
  189. package/dist/number-input/root.svelte +11 -5
  190. package/dist/number-input/scrubber.svelte +13 -7
  191. package/dist/pagination/ellipsis.svelte +13 -7
  192. package/dist/pagination/item.svelte +13 -7
  193. package/dist/pagination/next-trigger.svelte +13 -7
  194. package/dist/pagination/prev-trigger.svelte +13 -7
  195. package/dist/pagination/root.svelte +11 -5
  196. package/dist/pin-input/anatomy.js +3 -0
  197. package/dist/pin-input/clear-trigger.svelte +18 -13
  198. package/dist/pin-input/create-pin-input.svelte.d.ts +2 -0
  199. package/dist/pin-input/create-pin-input.svelte.js +13 -1
  200. package/dist/pin-input/hidden-input.svelte +1 -1
  201. package/dist/pin-input/input.svelte +11 -5
  202. package/dist/pin-input/label.svelte +13 -7
  203. package/dist/pin-input/pin-input.d.ts +1 -1
  204. package/dist/pin-input/pin-input.js +1 -1
  205. package/dist/pin-input/root.svelte +11 -5
  206. package/dist/popover/arrow-tip.svelte +13 -7
  207. package/dist/popover/arrow.svelte +13 -7
  208. package/dist/popover/close-trigger.svelte +13 -7
  209. package/dist/popover/content.svelte +13 -7
  210. package/dist/popover/description.svelte +13 -7
  211. package/dist/popover/positioner.svelte +13 -7
  212. package/dist/popover/title.svelte +13 -7
  213. package/dist/popover/trigger.svelte +13 -7
  214. package/dist/presence/context.svelte.d.ts +3 -0
  215. package/dist/presence/context.svelte.js +2 -0
  216. package/dist/presence/create-presence.svelte.d.ts +11 -4
  217. package/dist/presence/create-presence.svelte.js +19 -3
  218. package/dist/presence/root.svelte +9 -9
  219. package/dist/presence/root.svelte.d.ts +1 -1
  220. package/dist/progress/circle-range.svelte +13 -7
  221. package/dist/progress/circle-track.svelte +13 -7
  222. package/dist/progress/circle.svelte +13 -7
  223. package/dist/progress/label.svelte +13 -7
  224. package/dist/progress/range.svelte +13 -7
  225. package/dist/progress/root.svelte +11 -5
  226. package/dist/progress/track.svelte +13 -7
  227. package/dist/progress/value-text.svelte +17 -11
  228. package/dist/progress/view.svelte +13 -7
  229. package/dist/qr-code/frame.svelte +13 -7
  230. package/dist/qr-code/overlay.svelte +13 -7
  231. package/dist/qr-code/pattern.svelte +13 -7
  232. package/dist/qr-code/root.svelte +11 -5
  233. package/dist/radio-group/indicator.svelte +13 -7
  234. package/dist/radio-group/item-control.svelte +13 -7
  235. package/dist/radio-group/item-hidden-input.svelte +1 -1
  236. package/dist/radio-group/item-text.svelte +13 -7
  237. package/dist/radio-group/item.svelte +11 -13
  238. package/dist/radio-group/label.svelte +13 -7
  239. package/dist/radio-group/root.svelte +11 -5
  240. package/dist/rating-group/control.svelte +15 -9
  241. package/dist/rating-group/hidden-input.svelte +1 -1
  242. package/dist/rating-group/item.svelte +14 -9
  243. package/dist/rating-group/label.svelte +15 -9
  244. package/dist/rating-group/root.svelte +15 -9
  245. package/dist/segment-group/indicator.svelte +13 -8
  246. package/dist/segment-group/item-control.svelte +13 -8
  247. package/dist/segment-group/item-hidden-input.svelte +1 -1
  248. package/dist/segment-group/item-text.svelte +13 -8
  249. package/dist/segment-group/item.svelte +11 -6
  250. package/dist/segment-group/label.svelte +13 -8
  251. package/dist/segment-group/root.svelte +11 -6
  252. package/dist/select/clear-trigger.svelte +13 -7
  253. package/dist/select/content.svelte +13 -7
  254. package/dist/select/control.svelte +13 -7
  255. package/dist/select/hidden-select.svelte +1 -1
  256. package/dist/select/indicator.svelte +13 -7
  257. package/dist/select/item-group-label.svelte +13 -7
  258. package/dist/select/item-group.svelte +13 -8
  259. package/dist/select/item-indicator.svelte +13 -7
  260. package/dist/select/item-text.svelte +17 -11
  261. package/dist/select/item.svelte +11 -6
  262. package/dist/select/label.svelte +13 -7
  263. package/dist/select/list.svelte +13 -7
  264. package/dist/select/positioner.svelte +13 -7
  265. package/dist/select/root.svelte +12 -6
  266. package/dist/select/trigger.svelte +13 -7
  267. package/dist/select/value-text.svelte +19 -13
  268. package/dist/signature-pad/clear-trigger.svelte +13 -7
  269. package/dist/signature-pad/control.svelte +13 -7
  270. package/dist/signature-pad/current-segment-path.svelte +13 -7
  271. package/dist/signature-pad/guide.svelte +13 -7
  272. package/dist/signature-pad/hidden-input.svelte +1 -1
  273. package/dist/signature-pad/label.svelte +13 -7
  274. package/dist/signature-pad/root.svelte +11 -5
  275. package/dist/signature-pad/segment-path.svelte +13 -7
  276. package/dist/signature-pad/segment.svelte +13 -7
  277. package/dist/slider/control.svelte +13 -7
  278. package/dist/slider/hidden-input.svelte +1 -1
  279. package/dist/slider/label.svelte +13 -7
  280. package/dist/slider/marker-group.svelte +13 -7
  281. package/dist/slider/marker.svelte +13 -7
  282. package/dist/slider/range.svelte +13 -7
  283. package/dist/slider/root.svelte +11 -5
  284. package/dist/slider/thumb.svelte +13 -7
  285. package/dist/slider/track.svelte +13 -7
  286. package/dist/slider/value-text.svelte +17 -11
  287. package/dist/splitter/panel.svelte +13 -7
  288. package/dist/splitter/resize-trigger.svelte +11 -6
  289. package/dist/splitter/root.svelte +11 -5
  290. package/dist/steps/completed-content.svelte +13 -7
  291. package/dist/steps/content.svelte +13 -7
  292. package/dist/steps/indicator.svelte +13 -7
  293. package/dist/steps/item.svelte +11 -6
  294. package/dist/steps/list.svelte +13 -7
  295. package/dist/steps/next-trigger.svelte +13 -7
  296. package/dist/steps/prev-trigger.svelte +13 -7
  297. package/dist/steps/progress.svelte +13 -7
  298. package/dist/steps/root.svelte +12 -6
  299. package/dist/steps/separator.svelte +13 -7
  300. package/dist/steps/trigger.svelte +13 -7
  301. package/dist/switch/control.svelte +13 -7
  302. package/dist/switch/hidden-input.svelte +1 -1
  303. package/dist/switch/label.svelte +13 -7
  304. package/dist/switch/root.svelte +11 -5
  305. package/dist/switch/thumb.svelte +13 -7
  306. package/dist/tabs/content.svelte +13 -7
  307. package/dist/tabs/list.svelte +13 -7
  308. package/dist/tabs/root.svelte +12 -6
  309. package/dist/tabs/trigger.svelte +13 -7
  310. package/dist/tags-input/clear-trigger.svelte +13 -7
  311. package/dist/tags-input/control.svelte +13 -7
  312. package/dist/tags-input/hidden-input.svelte +1 -1
  313. package/dist/tags-input/input.svelte +11 -5
  314. package/dist/tags-input/item-delete-trigger.svelte +13 -7
  315. package/dist/tags-input/item-input.svelte +11 -5
  316. package/dist/tags-input/item-preview.svelte +13 -7
  317. package/dist/tags-input/item-text.svelte +13 -7
  318. package/dist/tags-input/item.svelte +11 -13
  319. package/dist/tags-input/label.svelte +13 -7
  320. package/dist/tags-input/root.svelte +12 -6
  321. package/dist/time-picker/clear-trigger.svelte +13 -7
  322. package/dist/time-picker/column.svelte +13 -7
  323. package/dist/time-picker/content.svelte +13 -7
  324. package/dist/time-picker/control.svelte +13 -7
  325. package/dist/time-picker/hour-cell.svelte +13 -7
  326. package/dist/time-picker/input.svelte +11 -5
  327. package/dist/time-picker/label.svelte +13 -7
  328. package/dist/time-picker/minute-cell.svelte +13 -7
  329. package/dist/time-picker/period-cell.svelte +13 -7
  330. package/dist/time-picker/positioner.svelte +13 -7
  331. package/dist/time-picker/root.svelte +11 -5
  332. package/dist/time-picker/second-cell.svelte +13 -7
  333. package/dist/time-picker/spacer.svelte +13 -7
  334. package/dist/time-picker/trigger.svelte +13 -7
  335. package/dist/timer/action-trigger.svelte +13 -8
  336. package/dist/timer/item-label.svelte +13 -7
  337. package/dist/timer/item-value.svelte +17 -11
  338. package/dist/timer/item.svelte +13 -7
  339. package/dist/timer/root.svelte +11 -5
  340. package/dist/timer/separator.svelte +13 -7
  341. package/dist/toast/action-trigger.svelte +13 -7
  342. package/dist/toast/actor.svelte +6 -6
  343. package/dist/toast/actor.svelte.d.ts +3 -3
  344. package/dist/toast/close-trigger.svelte +13 -7
  345. package/dist/toast/description.svelte +17 -11
  346. package/dist/toast/ghost-after.svelte +18 -0
  347. package/dist/toast/ghost-after.svelte.d.ts +18 -0
  348. package/dist/toast/ghost-before.svelte +18 -0
  349. package/dist/toast/ghost-before.svelte.d.ts +18 -0
  350. package/dist/toast/index.d.ts +2 -0
  351. package/dist/toast/root.svelte +16 -14
  352. package/dist/toast/title.svelte +17 -11
  353. package/dist/toast/toast.d.ts +2 -0
  354. package/dist/toast/toast.js +2 -0
  355. package/dist/toast/toaster.svelte +6 -5
  356. package/dist/toggle-group/item.svelte +11 -6
  357. package/dist/toggle-group/root.svelte +12 -6
  358. package/dist/tooltip/arrow-tip.svelte +13 -7
  359. package/dist/tooltip/arrow.svelte +13 -7
  360. package/dist/tooltip/content.svelte +13 -7
  361. package/dist/tooltip/positioner.svelte +13 -7
  362. package/dist/tooltip/trigger.svelte +13 -7
  363. package/dist/tree-view/branch-content.svelte +13 -7
  364. package/dist/tree-view/branch-control.svelte +13 -7
  365. package/dist/tree-view/branch-indicator.svelte +13 -7
  366. package/dist/tree-view/branch-text.svelte +13 -7
  367. package/dist/tree-view/branch-trigger.svelte +13 -7
  368. package/dist/tree-view/branch.svelte +11 -13
  369. package/dist/tree-view/item-indicator.svelte +13 -7
  370. package/dist/tree-view/item-text.svelte +13 -7
  371. package/dist/tree-view/item.svelte +11 -13
  372. package/dist/tree-view/label.svelte +13 -7
  373. package/dist/tree-view/root.svelte +12 -6
  374. package/dist/tree-view/tree.svelte +13 -7
  375. package/dist/types.d.ts +8 -1
  376. package/dist/utils.svelte.d.ts +2 -5
  377. package/dist/utils.svelte.js +9 -9
  378. package/package.json +4 -3
  379. package/dist/color-picker/.gitkeep +0 -0
@@ -1,5 +1,5 @@
1
1
  <script lang="ts" module>
2
- import type {Assign, 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
  CreateToggleGroupProps,
@@ -8,12 +8,13 @@
8
8
 
9
9
  export interface ToggleGroupProps
10
10
  extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateToggleGroupProps> {
11
- children?: Snippet<[api: CreateToggleGroupReturn]>;
11
+ asChild?: AsChild<GenericHtmlProps, CreateToggleGroupReturn>;
12
+ children?: Snippet<[toggleGroup: CreateToggleGroupReturn]>;
12
13
  }
13
14
  </script>
14
15
 
15
16
  <script lang="ts">
16
- import {mergeProps} from '@zag-js/svelte';
17
+ import {mergeProps} from '../utils.svelte.js';
17
18
  import {toggleGroupContext} from './context.svelte.js';
18
19
  import {createToggleGroup} from './create-toggle-group.svelte.js';
19
20
 
@@ -27,6 +28,7 @@
27
28
  rovingFocus,
28
29
  orientation,
29
30
  onValueChange,
31
+ asChild,
30
32
  children,
31
33
  ...props
32
34
  }: ToggleGroupProps = $props();
@@ -48,6 +50,10 @@
48
50
  toggleGroupContext.set(toggleGroup);
49
51
  </script>
50
52
 
51
- <div {...attrs}>
52
- {@render children?.(toggleGroup)}
53
- </div>
53
+ {#if asChild}
54
+ {@render asChild(attrs, toggleGroup)}
55
+ {:else}
56
+ <div {...attrs}>
57
+ {@render children?.(toggleGroup)}
58
+ </div>
59
+ {/if}
@@ -1,20 +1,26 @@
1
1
  <script lang="ts" module>
2
- import type {HtmlProps} from '../types.js';
2
+ import type {AsChild, HtmlProps} from '../types.js';
3
3
 
4
- export interface TooltipArrowTipProps extends HtmlProps<'div'> {}
4
+ export interface TooltipArrowTipProps extends HtmlProps<'span'> {
5
+ asChild?: AsChild;
6
+ }
5
7
  </script>
6
8
 
7
9
  <script lang="ts">
8
- import {mergeProps} from '@zag-js/svelte';
10
+ import {mergeProps} from '../utils.svelte.js';
9
11
  import {tooltipContext} from './context.svelte.js';
10
12
 
11
- let {children, ...props}: TooltipArrowTipProps = $props();
13
+ let {asChild, children, ...props}: TooltipArrowTipProps = $props();
12
14
 
13
15
  let tooltip = tooltipContext.get();
14
16
 
15
17
  let attrs = $derived(mergeProps(props, tooltip.getArrowTipProps()));
16
18
  </script>
17
19
 
18
- <div {...attrs}>
19
- {@render children?.()}
20
- </div>
20
+ {#if asChild}
21
+ {@render asChild(attrs)}
22
+ {:else}
23
+ <span {...attrs}>
24
+ {@render children?.()}
25
+ </span>
26
+ {/if}
@@ -1,20 +1,26 @@
1
1
  <script lang="ts" module>
2
- import type {HtmlProps} from '../types.js';
2
+ import type {AsChild, HtmlProps} from '../types.js';
3
3
 
4
- export interface TooltipArrowProps extends HtmlProps<'div'> {}
4
+ export interface TooltipArrowProps extends HtmlProps<'span'> {
5
+ asChild?: AsChild;
6
+ }
5
7
  </script>
6
8
 
7
9
  <script lang="ts">
8
- import {mergeProps} from '@zag-js/svelte';
10
+ import {mergeProps} from '../utils.svelte.js';
9
11
  import {tooltipContext} from './context.svelte.js';
10
12
 
11
- let {children, ...props}: TooltipArrowProps = $props();
13
+ let {asChild, children, ...props}: TooltipArrowProps = $props();
12
14
 
13
15
  let tooltip = tooltipContext.get();
14
16
 
15
17
  let attrs = $derived(mergeProps(props, tooltip.getArrowProps()));
16
18
  </script>
17
19
 
18
- <div {...attrs}>
19
- {@render children?.()}
20
- </div>
20
+ {#if asChild}
21
+ {@render asChild(attrs)}
22
+ {:else}
23
+ <span {...attrs}>
24
+ {@render children?.()}
25
+ </span>
26
+ {/if}
@@ -1,20 +1,26 @@
1
1
  <script lang="ts" module>
2
- import type {HtmlProps} from '../types.js';
2
+ import type {AsChild, HtmlProps} from '../types.js';
3
3
 
4
- export interface TooltipContentProps extends HtmlProps<'div'> {}
4
+ export interface TooltipContentProps extends HtmlProps<'div'> {
5
+ asChild?: AsChild;
6
+ }
5
7
  </script>
6
8
 
7
9
  <script lang="ts">
8
- import {mergeProps} from '@zag-js/svelte';
10
+ import {mergeProps} from '../utils.svelte.js';
9
11
  import {tooltipContext} from './context.svelte.js';
10
12
 
11
- let {children, ...props}: TooltipContentProps = $props();
13
+ let {asChild, children, ...props}: TooltipContentProps = $props();
12
14
 
13
15
  let tooltip = tooltipContext.get();
14
16
 
15
17
  let attrs = $derived(mergeProps(props, tooltip.getContentProps()));
16
18
  </script>
17
19
 
18
- <div {...attrs}>
19
- {@render children?.()}
20
- </div>
20
+ {#if asChild}
21
+ {@render asChild(attrs)}
22
+ {:else}
23
+ <div {...attrs}>
24
+ {@render children?.()}
25
+ </div>
26
+ {/if}
@@ -1,20 +1,26 @@
1
1
  <script lang="ts" module>
2
- import type {HtmlProps} from '../types.js';
2
+ import type {AsChild, HtmlProps} from '../types.js';
3
3
 
4
- export interface TooltipPositionerProps extends HtmlProps<'div'> {}
4
+ export interface TooltipPositionerProps extends HtmlProps<'div'> {
5
+ asChild?: AsChild;
6
+ }
5
7
  </script>
6
8
 
7
9
  <script lang="ts">
8
- import {mergeProps} from '@zag-js/svelte';
10
+ import {mergeProps} from '../utils.svelte.js';
9
11
  import {tooltipContext} from './context.svelte.js';
10
12
 
11
- let {children, ...props}: TooltipPositionerProps = $props();
13
+ let {asChild, children, ...props}: TooltipPositionerProps = $props();
12
14
 
13
15
  let tooltip = tooltipContext.get();
14
16
 
15
17
  let attrs = $derived(mergeProps(props, tooltip.getPositionerProps()));
16
18
  </script>
17
19
 
18
- <div {...attrs}>
19
- {@render children?.()}
20
- </div>
20
+ {#if asChild}
21
+ {@render asChild(attrs)}
22
+ {:else}
23
+ <div {...attrs}>
24
+ {@render children?.()}
25
+ </div>
26
+ {/if}
@@ -1,20 +1,26 @@
1
1
  <script lang="ts" module>
2
- import type {HtmlProps} from '../types.js';
2
+ import type {AsChild, HtmlProps} from '../types.js';
3
3
 
4
- export interface TooltipTriggerProps extends HtmlProps<'button'> {}
4
+ export interface TooltipTriggerProps extends HtmlProps<'button'> {
5
+ asChild?: AsChild<HtmlProps<'button'>>;
6
+ }
5
7
  </script>
6
8
 
7
9
  <script lang="ts">
8
- import {mergeProps} from '@zag-js/svelte';
10
+ import {mergeProps} from '../utils.svelte.js';
9
11
  import {tooltipContext} from './context.svelte.js';
10
12
 
11
- let {children, ...props}: TooltipTriggerProps = $props();
13
+ let {asChild, children, ...props}: TooltipTriggerProps = $props();
12
14
 
13
15
  let tooltip = tooltipContext.get();
14
16
 
15
17
  let attrs = $derived(mergeProps(props, tooltip.getTriggerProps()));
16
18
  </script>
17
19
 
18
- <button type="button" {...attrs}>
19
- {@render children?.()}
20
- </button>
20
+ {#if asChild}
21
+ {@render asChild(attrs)}
22
+ {:else}
23
+ <button type="button" {...attrs}>
24
+ {@render children?.()}
25
+ </button>
26
+ {/if}
@@ -1,14 +1,16 @@
1
1
  <script lang="ts" module>
2
- import type {HtmlProps} from '../types.js';
2
+ import type {AsChild, HtmlProps} from '../types.js';
3
3
 
4
- export interface TreeViewBranchContentProps extends HtmlProps<'div'> {}
4
+ export interface TreeViewBranchContentProps extends HtmlProps<'div'> {
5
+ asChild?: AsChild;
6
+ }
5
7
  </script>
6
8
 
7
9
  <script lang="ts">
8
- import {mergeProps} from '@zag-js/svelte';
10
+ import {mergeProps} from '../utils.svelte.js';
9
11
  import {treeViewBranchPropsContext, treeViewContext} from './context.svelte.js';
10
12
 
11
- let {children, ...props}: TreeViewBranchContentProps = $props();
13
+ let {asChild, children, ...props}: TreeViewBranchContentProps = $props();
12
14
 
13
15
  let treeView = treeViewContext.get();
14
16
  let branchProps = treeViewBranchPropsContext.get();
@@ -16,6 +18,10 @@
16
18
  let attrs = $derived(mergeProps(props, treeView.getBranchContentProps(branchProps)));
17
19
  </script>
18
20
 
19
- <div {...attrs}>
20
- {@render children?.()}
21
- </div>
21
+ {#if asChild}
22
+ {@render asChild(attrs)}
23
+ {:else}
24
+ <div {...attrs}>
25
+ {@render children?.()}
26
+ </div>
27
+ {/if}
@@ -1,14 +1,16 @@
1
1
  <script lang="ts" module>
2
- import type {HtmlProps} from '../types.js';
2
+ import type {AsChild, HtmlProps} from '../types.js';
3
3
 
4
- export interface TreeViewBranchControlProps extends HtmlProps<'div'> {}
4
+ export interface TreeViewBranchControlProps extends HtmlProps<'div'> {
5
+ asChild?: AsChild;
6
+ }
5
7
  </script>
6
8
 
7
9
  <script lang="ts">
8
- import {mergeProps} from '@zag-js/svelte';
10
+ import {mergeProps} from '../utils.svelte.js';
9
11
  import {treeViewBranchPropsContext, treeViewContext} from './context.svelte.js';
10
12
 
11
- let {children, ...props}: TreeViewBranchControlProps = $props();
13
+ let {asChild, children, ...props}: TreeViewBranchControlProps = $props();
12
14
 
13
15
  let treeView = treeViewContext.get();
14
16
  let branchProps = treeViewBranchPropsContext.get();
@@ -16,6 +18,10 @@
16
18
  let attrs = $derived(mergeProps(props, treeView.getBranchControlProps(branchProps)));
17
19
  </script>
18
20
 
19
- <div {...attrs}>
20
- {@render children?.()}
21
- </div>
21
+ {#if asChild}
22
+ {@render asChild(attrs)}
23
+ {:else}
24
+ <div {...attrs}>
25
+ {@render children?.()}
26
+ </div>
27
+ {/if}
@@ -1,14 +1,16 @@
1
1
  <script lang="ts" module>
2
- import type {HtmlProps} from '../types.js';
2
+ import type {AsChild, HtmlProps} from '../types.js';
3
3
 
4
- export interface TreeViewBranchIndicatorProps extends HtmlProps<'span'> {}
4
+ export interface TreeViewBranchIndicatorProps extends HtmlProps<'span'> {
5
+ asChild?: AsChild;
6
+ }
5
7
  </script>
6
8
 
7
9
  <script lang="ts">
8
- import {mergeProps} from '@zag-js/svelte';
10
+ import {mergeProps} from '../utils.svelte.js';
9
11
  import {treeViewBranchPropsContext, treeViewContext} from './context.svelte.js';
10
12
 
11
- let {children, ...props}: TreeViewBranchIndicatorProps = $props();
13
+ let {asChild, children, ...props}: TreeViewBranchIndicatorProps = $props();
12
14
 
13
15
  let treeView = treeViewContext.get();
14
16
  let branchProps = treeViewBranchPropsContext.get();
@@ -16,6 +18,10 @@
16
18
  let attrs = $derived(mergeProps(props, treeView.getBranchIndicatorProps(branchProps)));
17
19
  </script>
18
20
 
19
- <span {...attrs}>
20
- {@render children?.()}
21
- </span>
21
+ {#if asChild}
22
+ {@render asChild(attrs)}
23
+ {:else}
24
+ <span {...attrs}>
25
+ {@render children?.()}
26
+ </span>
27
+ {/if}
@@ -1,14 +1,16 @@
1
1
  <script lang="ts" module>
2
- import type {HtmlProps} from '../types.js';
2
+ import type {AsChild, HtmlProps} from '../types.js';
3
3
 
4
- export interface TreeViewBranchTextProps extends HtmlProps<'span'> {}
4
+ export interface TreeViewBranchTextProps extends HtmlProps<'span'> {
5
+ asChild?: AsChild;
6
+ }
5
7
  </script>
6
8
 
7
9
  <script lang="ts">
8
- import {mergeProps} from '@zag-js/svelte';
10
+ import {mergeProps} from '../utils.svelte.js';
9
11
  import {treeViewBranchPropsContext, treeViewContext} from './context.svelte.js';
10
12
 
11
- let {children, ...props}: TreeViewBranchTextProps = $props();
13
+ let {asChild, children, ...props}: TreeViewBranchTextProps = $props();
12
14
 
13
15
  let treeView = treeViewContext.get();
14
16
  let branchProps = treeViewBranchPropsContext.get();
@@ -16,6 +18,10 @@
16
18
  let attrs = $derived(mergeProps(props, treeView.getBranchTextProps(branchProps)));
17
19
  </script>
18
20
 
19
- <span {...attrs}>
20
- {@render children?.()}
21
- </span>
21
+ {#if asChild}
22
+ {@render asChild(attrs)}
23
+ {:else}
24
+ <span {...attrs}>
25
+ {@render children?.()}
26
+ </span>
27
+ {/if}
@@ -1,14 +1,16 @@
1
1
  <script lang="ts" module>
2
- import type {HtmlProps} from '../types.js';
2
+ import type {AsChild, HtmlProps} from '../types.js';
3
3
 
4
- export interface TreeViewBranchTriggerProps extends HtmlProps<'div'> {}
4
+ export interface TreeViewBranchTriggerProps extends HtmlProps<'div'> {
5
+ asChild?: AsChild;
6
+ }
5
7
  </script>
6
8
 
7
9
  <script lang="ts">
8
- import {mergeProps} from '@zag-js/svelte';
10
+ import {mergeProps} from '../utils.svelte.js';
9
11
  import {treeViewBranchPropsContext, treeViewContext} from './context.svelte.js';
10
12
 
11
- let {children, ...props}: TreeViewBranchTriggerProps = $props();
13
+ let {asChild, children, ...props}: TreeViewBranchTriggerProps = $props();
12
14
 
13
15
  let treeView = treeViewContext.get();
14
16
  let branchProps = treeViewBranchPropsContext.get();
@@ -16,6 +18,10 @@
16
18
  let attrs = $derived(mergeProps(props, treeView.getBranchTriggerProps(branchProps)));
17
19
  </script>
18
20
 
19
- <div {...attrs}>
20
- {@render children?.()}
21
- </div>
21
+ {#if asChild}
22
+ {@render asChild(attrs)}
23
+ {:else}
24
+ <div {...attrs}>
25
+ {@render children?.()}
26
+ </div>
27
+ {/if}
@@ -1,26 +1,20 @@
1
1
  <script lang="ts" module>
2
- import type {Assign, HtmlProps} from '../types.js';
2
+ import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
3
3
  import type {BranchProps, BranchState} from '@zag-js/tree-view';
4
4
  import type {Snippet} from 'svelte';
5
5
 
6
6
  export interface TreeViewBranchProps
7
7
  extends Assign<Omit<HtmlProps<'div'>, 'children'>, BranchProps> {
8
+ asChild?: AsChild<GenericHtmlProps, BranchState>;
8
9
  children?: Snippet<[state: BranchState]>;
9
10
  }
10
11
  </script>
11
12
 
12
13
  <script lang="ts">
13
- import {mergeProps} from '@zag-js/svelte';
14
+ import {mergeProps} from '../utils.svelte.js';
14
15
  import {treeViewBranchPropsContext, treeViewContext} from './context.svelte.js';
15
16
 
16
- let {
17
- /**/
18
- depth,
19
- value,
20
- disabled,
21
- children,
22
- ...props
23
- }: TreeViewBranchProps = $props();
17
+ let {depth, value, disabled, asChild, children, ...props}: TreeViewBranchProps = $props();
24
18
 
25
19
  let treeView = treeViewContext.get();
26
20
  let branchProps: BranchProps = $derived({
@@ -35,6 +29,10 @@
35
29
  treeViewBranchPropsContext.set(() => branchProps);
36
30
  </script>
37
31
 
38
- <div {...attrs}>
39
- {@render children?.(state)}
40
- </div>
32
+ {#if asChild}
33
+ {@render asChild(attrs, state)}
34
+ {:else}
35
+ <div {...attrs}>
36
+ {@render children?.(state)}
37
+ </div>
38
+ {/if}
@@ -1,14 +1,16 @@
1
1
  <script lang="ts" module>
2
- import type {HtmlProps} from '../types.js';
2
+ import type {AsChild, HtmlProps} from '../types.js';
3
3
 
4
- export interface TreeViewItemIndicatorProps extends HtmlProps<'span'> {}
4
+ export interface TreeViewItemIndicatorProps extends HtmlProps<'span'> {
5
+ asChild?: AsChild;
6
+ }
5
7
  </script>
6
8
 
7
9
  <script lang="ts">
8
- import {mergeProps} from '@zag-js/svelte';
10
+ import {mergeProps} from '../utils.svelte.js';
9
11
  import {treeViewContext, treeViewItemPropsContext} from './context.svelte.js';
10
12
 
11
- let {children, ...props}: TreeViewItemIndicatorProps = $props();
13
+ let {asChild, children, ...props}: TreeViewItemIndicatorProps = $props();
12
14
 
13
15
  let treeView = treeViewContext.get();
14
16
  let itemProps = treeViewItemPropsContext.get();
@@ -16,6 +18,10 @@
16
18
  let attrs = $derived(mergeProps(props, treeView.getItemIndicatorProps(itemProps)));
17
19
  </script>
18
20
 
19
- <span {...attrs}>
20
- {@render children?.()}
21
- </span>
21
+ {#if asChild}
22
+ {@render asChild(attrs)}
23
+ {:else}
24
+ <span {...attrs}>
25
+ {@render children?.()}
26
+ </span>
27
+ {/if}
@@ -1,14 +1,16 @@
1
1
  <script lang="ts" module>
2
- import type {HtmlProps} from '../types.js';
2
+ import type {AsChild, HtmlProps} from '../types.js';
3
3
 
4
- export interface TreeViewItemTextProps extends HtmlProps<'span'> {}
4
+ export interface TreeViewItemTextProps extends HtmlProps<'span'> {
5
+ asChild?: AsChild;
6
+ }
5
7
  </script>
6
8
 
7
9
  <script lang="ts">
8
- import {mergeProps} from '@zag-js/svelte';
10
+ import {mergeProps} from '../utils.svelte.js';
9
11
  import {treeViewContext, treeViewItemPropsContext} from './context.svelte.js';
10
12
 
11
- let {children, ...props}: TreeViewItemTextProps = $props();
13
+ let {asChild, children, ...props}: TreeViewItemTextProps = $props();
12
14
 
13
15
  let treeView = treeViewContext.get();
14
16
  let itemProps = treeViewItemPropsContext.get();
@@ -16,6 +18,10 @@
16
18
  let attrs = $derived(mergeProps(props, treeView.getItemTextProps(itemProps)));
17
19
  </script>
18
20
 
19
- <span {...attrs}>
20
- {@render children?.()}
21
- </span>
21
+ {#if asChild}
22
+ {@render asChild(attrs)}
23
+ {:else}
24
+ <span {...attrs}>
25
+ {@render children?.()}
26
+ </span>
27
+ {/if}
@@ -1,25 +1,19 @@
1
1
  <script lang="ts" module>
2
- import type {Assign, HtmlProps} from '../types.js';
2
+ import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
3
3
  import type {ItemProps, ItemState} from '@zag-js/tree-view';
4
4
  import type {Snippet} from 'svelte';
5
5
 
6
6
  export interface TreeViewItemProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
7
+ asChild?: AsChild<GenericHtmlProps, ItemState>;
7
8
  children?: Snippet<[state: ItemState]>;
8
9
  }
9
10
  </script>
10
11
 
11
12
  <script lang="ts">
12
- import {mergeProps} from '@zag-js/svelte';
13
+ import {mergeProps} from '../utils.svelte.js';
13
14
  import {treeViewContext, treeViewItemPropsContext} from './context.svelte.js';
14
15
 
15
- let {
16
- /**/
17
- depth,
18
- value,
19
- disabled,
20
- children,
21
- ...props
22
- }: TreeViewItemProps = $props();
16
+ let {depth, value, disabled, asChild, children, ...props}: TreeViewItemProps = $props();
23
17
 
24
18
  let treeView = treeViewContext.get();
25
19
  let itemProps: ItemProps = $derived({
@@ -34,6 +28,10 @@
34
28
  treeViewItemPropsContext.set(() => itemProps);
35
29
  </script>
36
30
 
37
- <div {...attrs}>
38
- {@render children?.(state)}
39
- </div>
31
+ {#if asChild}
32
+ {@render asChild(attrs, state)}
33
+ {:else}
34
+ <div {...attrs}>
35
+ {@render children?.(state)}
36
+ </div>
37
+ {/if}
@@ -1,20 +1,26 @@
1
1
  <script lang="ts" module>
2
- import type {HtmlProps} from '../types.js';
2
+ import type {AsChild, HtmlProps} from '../types.js';
3
3
 
4
- export interface TreeViewLabelProps extends HtmlProps<'span'> {}
4
+ export interface TreeViewLabelProps extends HtmlProps<'span'> {
5
+ asChild?: AsChild;
6
+ }
5
7
  </script>
6
8
 
7
9
  <script lang="ts">
8
- import {mergeProps} from '@zag-js/svelte';
10
+ import {mergeProps} from '../utils.svelte.js';
9
11
  import {treeViewContext} from './context.svelte.js';
10
12
 
11
- let {children, ...props}: TreeViewLabelProps = $props();
13
+ let {asChild, children, ...props}: TreeViewLabelProps = $props();
12
14
 
13
15
  let treeView = treeViewContext.get();
14
16
 
15
17
  let attrs = $derived(mergeProps(props, treeView.getLabelProps()));
16
18
  </script>
17
19
 
18
- <span {...attrs}>
19
- {@render children?.()}
20
- </span>
20
+ {#if asChild}
21
+ {@render asChild(attrs)}
22
+ {:else}
23
+ <span {...attrs}>
24
+ {@render children?.()}
25
+ </span>
26
+ {/if}
@@ -1,16 +1,17 @@
1
1
  <script lang="ts" module>
2
- import type {Assign, 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 {CreateTreeViewProps, CreateTreeViewReturn} from './create-tree-view.svelte.js';
5
5
 
6
6
  export interface TreeViewProps
7
7
  extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateTreeViewProps> {
8
+ asChild?: AsChild<GenericHtmlProps, CreateTreeViewReturn>;
8
9
  children?: Snippet<[treeView: CreateTreeViewReturn]>;
9
10
  }
10
11
  </script>
11
12
 
12
13
  <script lang="ts">
13
- import {mergeProps} from '@zag-js/svelte';
14
+ import {mergeProps} from '../utils.svelte.js';
14
15
  import {treeViewContext} from './context.svelte.js';
15
16
  import {createTreeView} from './create-tree-view.svelte.js';
16
17
 
@@ -26,6 +27,7 @@
26
27
  onFocusChange,
27
28
  onExpandedChange,
28
29
  onSelectionChange,
30
+ asChild,
29
31
  children,
30
32
  ...props
31
33
  }: TreeViewProps = $props();
@@ -44,11 +46,15 @@
44
46
  onSelectionChange,
45
47
  });
46
48
 
47
- let attrs = $derived(mergeProps(props, treeView.getRootProps()));
49
+ let attrs = $derived(mergeProps<Record<string, any>>(props, treeView.getRootProps()));
48
50
 
49
51
  treeViewContext.set(treeView);
50
52
  </script>
51
53
 
52
- <div {...attrs}>
53
- {@render children?.(treeView)}
54
- </div>
54
+ {#if asChild}
55
+ {@render asChild(attrs, treeView)}
56
+ {:else}
57
+ <div {...attrs}>
58
+ {@render children?.(treeView)}
59
+ </div>
60
+ {/if}