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
@@ -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 TimerSeparatorProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
4
+ export interface TimerSeparatorProps 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 {HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
4
  export interface ToastActionTriggerProps 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 {HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
4
  export interface ToastCloseTriggerProps 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 ToastDescriptionProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
4
+ export interface ToastDescriptionProps extends HtmlProps<'p'> {
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
+ <p {...attrs}>
25
24
  {#if children}
26
25
  {@render children?.()}
27
26
  {:else}
28
27
  {context.description}
29
28
  {/if}
30
- </div>
29
+ </p>
31
30
  {/if}
@@ -0,0 +1,18 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlProps} from '../types.js';
3
+
4
+ export interface ToastGhostAfterProps extends Omit<HtmlProps<'span'>, 'children'> {}
5
+ </script>
6
+
7
+ <script lang="ts">
8
+ import {mergeProps} from '../utils.svelte.js';
9
+ import {toastContext} from './context.svelte.js';
10
+
11
+ let {...props}: ToastGhostAfterProps = $props();
12
+
13
+ let context = toastContext.get();
14
+
15
+ let attrs = $derived(mergeProps(props, context.getGhostAfterProps()));
16
+ </script>
17
+
18
+ <span {...attrs}></span>
@@ -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 GhostAfter: $$__sveltets_2_IsomorphicComponent<ToastGhostAfterProps, {
15
+ [evt: string]: CustomEvent<any>;
16
+ }, {}, {}, "">;
17
+ type GhostAfter = InstanceType<typeof GhostAfter>;
18
+ export default GhostAfter;
@@ -0,0 +1,18 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlProps} from '../types.js';
3
+
4
+ export interface ToastGhostBeforeProps extends Omit<HtmlProps<'span'>, 'children'> {}
5
+ </script>
6
+
7
+ <script lang="ts">
8
+ import {mergeProps} from '../utils.svelte.js';
9
+ import {toastContext} from './context.svelte.js';
10
+
11
+ let {...props}: ToastGhostBeforeProps = $props();
12
+
13
+ let context = toastContext.get();
14
+
15
+ let attrs = $derived(mergeProps(props, context.getGhostBeforeProps()));
16
+ </script>
17
+
18
+ <span {...attrs}></span>
@@ -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 GhostBefore: $$__sveltets_2_IsomorphicComponent<ToastGhostBeforeProps, {
15
+ [evt: string]: CustomEvent<any>;
16
+ }, {}, {}, "">;
17
+ type GhostBefore = InstanceType<typeof GhostBefore>;
18
+ export default GhostBefore;
@@ -2,6 +2,8 @@ export * as Toast from './toast.js';
2
2
  export type { ToastActionTriggerProps } from './action-trigger.svelte';
3
3
  export type { ToastCloseTriggerProps } from './close-trigger.svelte';
4
4
  export type { ToastDescriptionProps } from './description.svelte';
5
+ export type { ToastGhostAfterProps } from './ghost-after.svelte';
6
+ export type { ToastGhostBeforeProps } from './ghost-before.svelte';
5
7
  export type { ToastProps } from './root.svelte';
6
8
  export type { ToastTitleProps } from './title.svelte';
7
9
  export { createToaster, type CreateToasterProps, type CreateToasterReturn, } from './create-toaster.svelte.js';
@@ -1,10 +1,10 @@
1
1
  <script lang="ts" module>
2
- import type {GenericHtmlProps, HtmlProps} from '../types.js';
2
+ import type {AsChild, GenericHtmlProps, HtmlProps} from '../types.js';
3
3
  import type {Snippet} from 'svelte';
4
4
  import type {CreateToastReturn} from './create-toast.svelte.js';
5
5
 
6
6
  export interface ToastProps extends Omit<HtmlProps<'div'>, 'children'> {
7
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, toast: CreateToastReturn]>;
7
+ asChild?: AsChild<GenericHtmlProps, CreateToastReturn>;
8
8
  children?: Snippet<[toast: CreateToastReturn]>;
9
9
  }
10
10
  </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
- export interface ToastTitleProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
4
+ export interface ToastTitleProps extends HtmlProps<'h2'> {
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
+ <h2 {...attrs}>
25
24
  {#if children}
26
25
  {@render children?.()}
27
26
  {:else}
28
27
  {context.title}
29
28
  {/if}
30
- </div>
29
+ </h2>
31
30
  {/if}
@@ -2,5 +2,7 @@ export { anatomy } from '@zag-js/toast';
2
2
  export { default as ActionTrigger } from './action-trigger.svelte';
3
3
  export { default as CloseTrigger } from './close-trigger.svelte';
4
4
  export { default as Description } from './description.svelte';
5
+ export { default as GhostAfter } from './ghost-after.svelte';
6
+ export { default as GhostBefore } from './ghost-before.svelte';
5
7
  export { default as Root } from './root.svelte';
6
8
  export { default as Title } from './title.svelte';
@@ -2,5 +2,7 @@ export { anatomy } from '@zag-js/toast';
2
2
  export { default as ActionTrigger } from './action-trigger.svelte';
3
3
  export { default as CloseTrigger } from './close-trigger.svelte';
4
4
  export { default as Description } from './description.svelte';
5
+ export { default as GhostAfter } from './ghost-after.svelte';
6
+ export { default as GhostBefore } from './ghost-before.svelte';
5
7
  export { default as Root } from './root.svelte';
6
8
  export { default as Title } from './title.svelte';
@@ -19,10 +19,10 @@
19
19
 
20
20
  let {toaster, children, ...props}: ToasterProps = $props();
21
21
 
22
- let [state, send] = useMachine(toaster.machine);
22
+ let [snapshot, send] = useMachine(toaster.machine);
23
23
 
24
- let placement = $derived(state.context.placement);
25
- let api = $derived(toast.group.connect(state, send, normalizeProps));
24
+ let placement = $derived(snapshot.context.placement);
25
+ let api = $derived(toast.group.connect(snapshot, send, normalizeProps));
26
26
  let toasts = $derived(api.getToastsByPlacement(placement));
27
27
  let attrs = $derived(mergeProps(props, api.getGroupProps({placement})));
28
28
  </script>
@@ -1,11 +1,11 @@
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 {ItemProps, ItemState} from '@zag-js/toggle-group';
4
4
  import type {Snippet} from 'svelte';
5
5
 
6
6
  export interface ToggleGroupItemProps
7
7
  extends Assign<Omit<HtmlProps<'button'>, 'children'>, ItemProps> {
8
- asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
8
+ asChild?: AsChild<HtmlProps<'button'>>;
9
9
  children?: Snippet<[state: ItemState]>;
10
10
  }
11
11
  </script>
@@ -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
  CreateToggleGroupProps,
@@ -8,9 +8,7 @@
8
8
 
9
9
  export interface ToggleGroupProps
10
10
  extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateToggleGroupProps> {
11
- asChild?: Snippet<
12
- [attrs: Omit<GenericHtmlProps, 'children'>, toggleGroup: CreateToggleGroupReturn]
13
- >;
11
+ asChild?: AsChild<GenericHtmlProps, CreateToggleGroupReturn>;
14
12
  children?: Snippet<[toggleGroup: CreateToggleGroupReturn]>;
15
13
  }
16
14
  </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
- export interface TooltipArrowTipProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
4
+ export interface TooltipArrowTipProps 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 TooltipArrowProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
4
+ export interface TooltipArrowProps 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
4
  export interface TooltipContentProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
5
+ asChild?: AsChild;
7
6
  }
8
7
  </script>
9
8
 
@@ -10,7 +10,7 @@ export function createTooltip(props) {
10
10
  ...props,
11
11
  id: props.id ?? createUniqueId(),
12
12
  dir: locale?.dir,
13
- open: props.defaultOpen,
13
+ open: props.defaultOpen ?? props.open,
14
14
  getRootNode: environment?.getRootNode,
15
15
  'open.controlled': props.open != null,
16
16
  }));
@@ -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 TooltipPositionerProps 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 TooltipTriggerProps 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
4
  export interface TreeViewBranchContentProps 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 TreeViewBranchControlProps 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 TreeViewBranchIndicatorProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
4
+ export interface TreeViewBranchIndicatorProps 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 TreeViewBranchTextProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
4
+ export interface TreeViewBranchTextProps 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
4
  export interface TreeViewBranchTriggerProps 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 {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?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, state: BranchState]>;
8
+ asChild?: AsChild<GenericHtmlProps, BranchState>;
9
9
  children?: Snippet<[state: BranchState]>;
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
- export interface TreeViewItemIndicatorProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
4
+ export interface TreeViewItemIndicatorProps 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 TreeViewItemTextProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
4
+ export interface TreeViewItemTextProps 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/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?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, state: 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 {GenericHtmlProps, HtmlProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
2
+ import type {AsChild, HtmlProps} from '../types.js';
4
3
 
5
- export interface TreeViewLabelProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
4
+ export interface TreeViewLabelProps 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,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 {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?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, treeView: CreateTreeViewReturn]>;
8
+ asChild?: AsChild<GenericHtmlProps, CreateTreeViewReturn>;
9
9
  children?: Snippet<[treeView: CreateTreeViewReturn]>;
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 TreeViewTreeProps extends HtmlProps<'div'> {
6
- asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
5
+ asChild?: AsChild;
7
6
  }
8
7
  </script>
9
8
 
package/dist/types.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import type { Snippet } from 'svelte';
1
2
  import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
2
3
  export type Assign<Target, Source> = Omit<Target, keyof Source> & Source;
3
4
  type IntrinsicElements = keyof {
@@ -5,4 +6,9 @@ type IntrinsicElements = keyof {
5
6
  };
6
7
  export type HtmlProps<T extends IntrinsicElements> = SvelteHTMLElements[T];
7
8
  export type GenericHtmlProps = HTMLAttributes<HTMLElement>;
9
+ type GenericObject = Record<string, any>;
10
+ type WithoutChildren<T> = Assign<T, {
11
+ children?: never;
12
+ }>;
13
+ export type AsChild<T extends GenericObject = GenericHtmlProps, C = never> = [C] extends [never] ? Snippet<[attrs: WithoutChildren<T>]> : Snippet<[attrs: WithoutChildren<T>, context: C]>;
8
14
  export {};
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ui-ingredients",
3
3
  "type": "module",
4
- "version": "0.0.26",
4
+ "version": "0.0.28",
5
5
  "packageManager": "pnpm@9.7.0",
6
6
  "svelte": "./dist/index.js",
7
7
  "types": "./dist/index.d.ts",