ui-ingredients 0.0.11 → 0.0.12

Sign up to get free protection for your applications and to get access to all the features.
Files changed (288) hide show
  1. package/README.md +1 -1
  2. package/dist/accordion/context.svelte.d.ts +2 -2
  3. package/dist/accordion/context.svelte.js +2 -2
  4. package/dist/accordion/item-content.svelte +28 -27
  5. package/dist/accordion/item-indicator.svelte +28 -27
  6. package/dist/accordion/item-trigger.svelte +28 -27
  7. package/dist/accordion/item.svelte +48 -48
  8. package/dist/accordion/root.svelte +68 -63
  9. package/dist/avatar/fallback.svelte +20 -20
  10. package/dist/avatar/image.svelte +18 -18
  11. package/dist/avatar/root.svelte +53 -48
  12. package/dist/carousel/indicator-group.svelte +21 -21
  13. package/dist/carousel/indicator.svelte +30 -30
  14. package/dist/carousel/item-group.svelte +20 -20
  15. package/dist/carousel/item.svelte +27 -27
  16. package/dist/carousel/next-trigger.svelte +21 -21
  17. package/dist/carousel/prev-trigger.svelte +21 -21
  18. package/dist/carousel/root.svelte +65 -60
  19. package/dist/carousel/viewport.svelte +20 -20
  20. package/dist/checkbox/control.svelte +20 -20
  21. package/dist/checkbox/hidden-input.svelte +19 -19
  22. package/dist/checkbox/indicator.svelte +20 -20
  23. package/dist/checkbox/label.svelte +20 -20
  24. package/dist/checkbox/root.svelte +69 -64
  25. package/dist/clipboard/control.svelte +20 -20
  26. package/dist/clipboard/indicator.svelte +22 -22
  27. package/dist/clipboard/input.svelte +18 -18
  28. package/dist/clipboard/label.svelte +20 -20
  29. package/dist/clipboard/root.svelte +56 -53
  30. package/dist/clipboard/trigger.svelte +21 -21
  31. package/dist/collapsible/content.svelte +20 -20
  32. package/dist/collapsible/root.svelte +64 -59
  33. package/dist/collapsible/trigger.svelte +19 -19
  34. package/dist/combobox/clear-trigger.svelte +21 -21
  35. package/dist/combobox/content.svelte +20 -20
  36. package/dist/combobox/context.svelte.d.ts +4 -4
  37. package/dist/combobox/context.svelte.js +4 -4
  38. package/dist/combobox/control.svelte +20 -20
  39. package/dist/combobox/input.svelte +18 -18
  40. package/dist/combobox/item-group-label.svelte +33 -32
  41. package/dist/combobox/item-group.svelte +32 -32
  42. package/dist/combobox/item-indicator.svelte +28 -27
  43. package/dist/combobox/item-text.svelte +29 -30
  44. package/dist/combobox/item.svelte +48 -48
  45. package/dist/combobox/label.svelte +20 -20
  46. package/dist/combobox/list.svelte +20 -20
  47. package/dist/combobox/positioner.svelte +20 -20
  48. package/dist/combobox/root.svelte +129 -124
  49. package/dist/combobox/trigger.svelte +20 -20
  50. package/dist/dialog/backdrop.svelte +20 -20
  51. package/dist/dialog/close-trigger.svelte +21 -21
  52. package/dist/dialog/content.svelte +20 -20
  53. package/dist/dialog/description.svelte +20 -20
  54. package/dist/dialog/positioner.svelte +20 -20
  55. package/dist/dialog/root.svelte +35 -28
  56. package/dist/dialog/title.svelte +20 -20
  57. package/dist/dialog/trigger.svelte +20 -20
  58. package/dist/editable/area.svelte +20 -20
  59. package/dist/editable/cancel-trigger.svelte +21 -21
  60. package/dist/editable/control.svelte +20 -20
  61. package/dist/editable/edit-trigger.svelte +21 -21
  62. package/dist/editable/input.svelte +18 -18
  63. package/dist/editable/label.svelte +20 -20
  64. package/dist/editable/preview.svelte +24 -24
  65. package/dist/editable/root.svelte +36 -29
  66. package/dist/editable/submit-trigger.svelte +21 -21
  67. package/dist/environment-provider/context.svelte.d.ts +14 -0
  68. package/dist/environment-provider/context.svelte.js +25 -0
  69. package/dist/environment-provider/index.d.ts +2 -0
  70. package/dist/environment-provider/index.js +2 -0
  71. package/dist/environment-provider/root.svelte +21 -0
  72. package/dist/environment-provider/root.svelte.d.ts +23 -0
  73. package/dist/hover-card/arrow-tip.svelte +20 -20
  74. package/dist/hover-card/arrow.svelte +20 -20
  75. package/dist/hover-card/content.svelte +20 -20
  76. package/dist/hover-card/positioner.svelte +21 -21
  77. package/dist/hover-card/root.svelte +39 -32
  78. package/dist/hover-card/trigger.svelte +20 -20
  79. package/dist/index.d.ts +2 -0
  80. package/dist/index.js +2 -0
  81. package/dist/locale-provider/context.svelte.d.ts +11 -0
  82. package/dist/locale-provider/context.svelte.js +23 -0
  83. package/dist/locale-provider/index.d.ts +2 -0
  84. package/dist/locale-provider/index.js +2 -0
  85. package/dist/locale-provider/root.svelte +20 -0
  86. package/dist/locale-provider/root.svelte.d.ts +23 -0
  87. package/dist/menu/arrow-tip.svelte.d.ts +26 -0
  88. package/dist/menu/arrow.svelte +0 -0
  89. package/dist/menu/arrow.svelte.d.ts +26 -0
  90. package/dist/menu/content.svelte +0 -0
  91. package/dist/menu/content.svelte.d.ts +26 -0
  92. package/dist/menu/context-trigger.svelte +0 -0
  93. package/dist/menu/context-trigger.svelte.d.ts +26 -0
  94. package/dist/menu/context.svelte.d.ts +10 -0
  95. package/dist/menu/context.svelte.js +20 -0
  96. package/dist/menu/index.d.ts +1 -0
  97. package/dist/menu/index.js +1 -0
  98. package/dist/menu/indicator.svelte +0 -0
  99. package/dist/menu/indicator.svelte.d.ts +26 -0
  100. package/dist/menu/item-group-label.svelte +0 -0
  101. package/dist/menu/item-group-label.svelte.d.ts +26 -0
  102. package/dist/menu/item-group.svelte +0 -0
  103. package/dist/menu/item-group.svelte.d.ts +26 -0
  104. package/dist/menu/item-indicator.svelte +0 -0
  105. package/dist/menu/item-indicator.svelte.d.ts +26 -0
  106. package/dist/menu/item-text.svelte +0 -0
  107. package/dist/menu/item-text.svelte.d.ts +26 -0
  108. package/dist/menu/item.svelte +0 -0
  109. package/dist/menu/item.svelte.d.ts +26 -0
  110. package/dist/menu/menu.d.ts +1 -0
  111. package/dist/menu/menu.js +1 -0
  112. package/dist/menu/option-item.svelte +0 -0
  113. package/dist/menu/option-item.svelte.d.ts +26 -0
  114. package/dist/menu/positioner.svelte +0 -0
  115. package/dist/menu/positioner.svelte.d.ts +26 -0
  116. package/dist/menu/root.svelte +0 -0
  117. package/dist/menu/root.svelte.d.ts +26 -0
  118. package/dist/menu/separator.svelte +0 -0
  119. package/dist/menu/separator.svelte.d.ts +26 -0
  120. package/dist/menu/trigger-item.svelte +0 -0
  121. package/dist/menu/trigger-item.svelte.d.ts +26 -0
  122. package/dist/menu/trigger.svelte +0 -0
  123. package/dist/menu/trigger.svelte.d.ts +26 -0
  124. package/dist/number-input/control.svelte +21 -21
  125. package/dist/number-input/decrement-trigger.svelte +21 -21
  126. package/dist/number-input/increment-trigger.svelte +21 -21
  127. package/dist/number-input/input.svelte +18 -18
  128. package/dist/number-input/label.svelte +20 -20
  129. package/dist/number-input/root.svelte +100 -95
  130. package/dist/number-input/scrubber.svelte +21 -21
  131. package/dist/pagination/ellipsis.svelte +22 -22
  132. package/dist/pagination/item.svelte +30 -30
  133. package/dist/pagination/next-trigger.svelte +21 -21
  134. package/dist/pagination/prev-trigger.svelte +21 -21
  135. package/dist/pagination/root.svelte +70 -65
  136. package/dist/pin-input/clear-trigger.svelte +25 -25
  137. package/dist/pin-input/hidden-input.svelte +19 -19
  138. package/dist/pin-input/input.svelte +20 -20
  139. package/dist/pin-input/label.svelte +20 -20
  140. package/dist/pin-input/root.svelte +89 -84
  141. package/dist/popover/arrow-tip.svelte +20 -20
  142. package/dist/popover/arrow.svelte +20 -20
  143. package/dist/popover/close-trigger.svelte +21 -21
  144. package/dist/popover/content.svelte +20 -20
  145. package/dist/popover/description.svelte +20 -20
  146. package/dist/popover/positioner.svelte +20 -20
  147. package/dist/popover/root.svelte +35 -28
  148. package/dist/popover/title.svelte +20 -20
  149. package/dist/popover/trigger.svelte +20 -20
  150. package/dist/portal/root.svelte +20 -20
  151. package/dist/presence/root.svelte +46 -46
  152. package/dist/progress/circle-range.svelte +21 -21
  153. package/dist/progress/circle-track.svelte +21 -21
  154. package/dist/progress/circle.svelte +20 -20
  155. package/dist/progress/label.svelte +20 -20
  156. package/dist/progress/range.svelte +20 -20
  157. package/dist/progress/root.svelte +61 -56
  158. package/dist/progress/track.svelte +20 -20
  159. package/dist/progress/value-text.svelte +24 -24
  160. package/dist/qr-code/frame.svelte +20 -20
  161. package/dist/qr-code/overlay.svelte +20 -20
  162. package/dist/qr-code/pattern.svelte +20 -20
  163. package/dist/qr-code/root.svelte +55 -50
  164. package/dist/radio-group/context.svelte.d.ts +2 -2
  165. package/dist/radio-group/context.svelte.js +2 -2
  166. package/dist/radio-group/indicator.svelte +21 -21
  167. package/dist/radio-group/item-control.svelte +28 -27
  168. package/dist/radio-group/item-hidden-input.svelte +26 -25
  169. package/dist/radio-group/item-text.svelte +26 -27
  170. package/dist/radio-group/item.svelte +58 -58
  171. package/dist/radio-group/label.svelte +20 -20
  172. package/dist/radio-group/root.svelte +68 -63
  173. package/dist/rating-group/context.svelte.d.ts +0 -2
  174. package/dist/rating-group/context.svelte.js +0 -6
  175. package/dist/rating-group/control.svelte +20 -20
  176. package/dist/rating-group/hidden-input.svelte +19 -19
  177. package/dist/rating-group/item.svelte +27 -27
  178. package/dist/rating-group/label.svelte +20 -20
  179. package/dist/rating-group/root.svelte +78 -73
  180. package/dist/segment-group/context.svelte.d.ts +10 -0
  181. package/dist/segment-group/context.svelte.js +43 -0
  182. package/dist/segment-group/index.d.ts +9 -2
  183. package/dist/segment-group/index.js +2 -2
  184. package/dist/segment-group/indicator.svelte +21 -0
  185. package/dist/segment-group/indicator.svelte.d.ts +21 -0
  186. package/dist/segment-group/item-control.svelte +28 -0
  187. package/dist/segment-group/item-control.svelte.d.ts +21 -0
  188. package/dist/segment-group/item-hidden-input.svelte +26 -0
  189. package/dist/segment-group/item-hidden-input.svelte.d.ts +21 -0
  190. package/dist/segment-group/item-text.svelte +26 -0
  191. package/dist/segment-group/item-text.svelte.d.ts +21 -0
  192. package/dist/segment-group/item.svelte +58 -0
  193. package/dist/segment-group/item.svelte.d.ts +24 -0
  194. package/dist/segment-group/label.svelte +20 -0
  195. package/dist/segment-group/label.svelte.d.ts +21 -0
  196. package/dist/segment-group/root.svelte +68 -0
  197. package/dist/segment-group/root.svelte.d.ts +24 -0
  198. package/dist/segment-group/segment-group.d.ts +7 -0
  199. package/dist/segment-group/segment-group.js +7 -0
  200. package/dist/select/clear-trigger.svelte +21 -21
  201. package/dist/select/content.svelte +20 -20
  202. package/dist/select/context.svelte.d.ts +4 -7
  203. package/dist/select/context.svelte.js +4 -4
  204. package/dist/select/control.svelte +20 -20
  205. package/dist/select/hidden-select.svelte +21 -21
  206. package/dist/select/indicator.svelte +20 -20
  207. package/dist/select/item-group-label.svelte +31 -30
  208. package/dist/select/item-group.svelte +32 -32
  209. package/dist/select/item-indicator.svelte +28 -24
  210. package/dist/select/item-text.svelte +29 -27
  211. package/dist/select/item.svelte +48 -45
  212. package/dist/select/label.svelte +20 -20
  213. package/dist/select/list.svelte +20 -20
  214. package/dist/select/positioner.svelte +20 -20
  215. package/dist/select/root.svelte +103 -98
  216. package/dist/select/trigger.svelte +20 -20
  217. package/dist/select/value-text.svelte +26 -26
  218. package/dist/slider/context.svelte.d.ts +2 -2
  219. package/dist/slider/context.svelte.js +2 -2
  220. package/dist/slider/control.svelte +20 -20
  221. package/dist/slider/hidden-input.svelte +26 -22
  222. package/dist/slider/label.svelte +20 -20
  223. package/dist/slider/marker-group.svelte +20 -20
  224. package/dist/slider/marker.svelte +29 -29
  225. package/dist/slider/range.svelte +20 -20
  226. package/dist/slider/root.svelte +91 -86
  227. package/dist/slider/thumb.svelte +38 -35
  228. package/dist/slider/track.svelte +20 -20
  229. package/dist/slider/value-text.svelte +24 -24
  230. package/dist/steps/content.svelte +22 -22
  231. package/dist/steps/context.svelte.d.ts +2 -2
  232. package/dist/steps/context.svelte.js +2 -2
  233. package/dist/steps/indicator.svelte +22 -23
  234. package/dist/steps/item.svelte +29 -29
  235. package/dist/steps/list.svelte +20 -20
  236. package/dist/steps/next-trigger.svelte +21 -21
  237. package/dist/steps/prev-trigger.svelte +21 -21
  238. package/dist/steps/progress.svelte +20 -20
  239. package/dist/steps/root.svelte +62 -58
  240. package/dist/steps/separator.svelte +22 -23
  241. package/dist/steps/trigger.svelte +22 -21
  242. package/dist/switch/control.svelte +20 -20
  243. package/dist/switch/hidden-input.svelte +19 -19
  244. package/dist/switch/label.svelte +20 -20
  245. package/dist/switch/root.svelte +71 -66
  246. package/dist/switch/thumb.svelte +20 -20
  247. package/dist/tabs/content.svelte +22 -22
  248. package/dist/tabs/list.svelte +20 -20
  249. package/dist/tabs/root.svelte +67 -62
  250. package/dist/tabs/trigger.svelte +24 -24
  251. package/dist/tags-input/clear-trigger.svelte +21 -21
  252. package/dist/tags-input/context.svelte.d.ts +2 -2
  253. package/dist/tags-input/context.svelte.js +2 -2
  254. package/dist/tags-input/control.svelte +20 -20
  255. package/dist/tags-input/hidden-input.svelte +19 -19
  256. package/dist/tags-input/input.svelte +18 -18
  257. package/dist/tags-input/item-delete-trigger.svelte +28 -27
  258. package/dist/tags-input/item-input.svelte +24 -25
  259. package/dist/tags-input/item-preview.svelte +28 -27
  260. package/dist/tags-input/item-text.svelte +25 -26
  261. package/dist/tags-input/item.svelte +58 -52
  262. package/dist/tags-input/label.svelte +20 -20
  263. package/dist/tags-input/root.svelte +104 -99
  264. package/dist/timer/action-trigger.svelte +24 -24
  265. package/dist/timer/context.svelte.d.ts +2 -2
  266. package/dist/timer/context.svelte.js +2 -2
  267. package/dist/timer/item-label.svelte +22 -23
  268. package/dist/timer/item-value.svelte +26 -27
  269. package/dist/timer/item.svelte +24 -24
  270. package/dist/timer/root.svelte +59 -56
  271. package/dist/timer/separator.svelte +20 -20
  272. package/dist/toast/action-trigger.svelte +21 -21
  273. package/dist/toast/close-trigger.svelte +21 -21
  274. package/dist/toast/create-toaster.svelte.js +12 -1
  275. package/dist/toast/description.svelte +24 -24
  276. package/dist/toast/root.svelte +29 -29
  277. package/dist/toast/title.svelte +24 -24
  278. package/dist/toast/toaster.svelte +40 -40
  279. package/dist/toggle-group/item.svelte +29 -29
  280. package/dist/toggle-group/root.svelte +68 -63
  281. package/dist/tooltip/arrow-tip.svelte +20 -20
  282. package/dist/tooltip/arrow.svelte +20 -20
  283. package/dist/tooltip/content.svelte +20 -20
  284. package/dist/tooltip/positioner.svelte +20 -20
  285. package/dist/tooltip/root.svelte +35 -28
  286. package/dist/tooltip/trigger.svelte +20 -20
  287. package/package.json +3 -2
  288. /package/dist/menu/{.gitkeep → arrow-tip.svelte} +0 -0
@@ -1,22 +1,22 @@
1
- <script lang="ts" context="module">
2
- import type {Assign, HtmlIngredientProps} from '../types.js';
3
- import type {EllipsisProps} from '@zag-js/pagination';
4
-
5
- export interface PaginationEllipsisProps
6
- extends Assign<HtmlIngredientProps<'span'>, EllipsisProps> {}
7
- </script>
8
-
9
- <script lang="ts">
10
- import {mergeProps} from '@zag-js/svelte';
11
- import {usePaginationContext} from './context.svelte.js';
12
-
13
- let {index, children, ...props}: PaginationEllipsisProps = $props();
14
-
15
- let context = usePaginationContext();
16
-
17
- let attrs = $derived(mergeProps(props, context.getEllipsisProps({index})));
18
- </script>
19
-
20
- <span {...attrs}>
21
- {@render children?.()}
22
- </span>
1
+ <script lang="ts" context="module">
2
+ import type {Assign, HtmlIngredientProps} from '../types.js';
3
+ import type {EllipsisProps} from '@zag-js/pagination';
4
+
5
+ export interface PaginationEllipsisProps
6
+ extends Assign<HtmlIngredientProps<'span'>, EllipsisProps> {}
7
+ </script>
8
+
9
+ <script lang="ts">
10
+ import {mergeProps} from '@zag-js/svelte';
11
+ import {usePaginationContext} from './context.svelte.js';
12
+
13
+ let {index, children, ...props}: PaginationEllipsisProps = $props();
14
+
15
+ let context = usePaginationContext();
16
+
17
+ let attrs = $derived(mergeProps(props, context.getEllipsisProps({index})));
18
+ </script>
19
+
20
+ <span {...attrs}>
21
+ {@render children?.()}
22
+ </span>
@@ -1,30 +1,30 @@
1
- <script lang="ts" context="module">
2
- import type {Assign, HtmlIngredientProps} from '../types.js';
3
- import type {ItemProps} from '@zag-js/pagination';
4
-
5
- export interface PaginationItemProps
6
- extends Assign<HtmlIngredientProps<'button'>, Omit<ItemProps, 'type'>> {}
7
- </script>
8
-
9
- <script lang="ts">
10
- import {mergeProps} from '@zag-js/svelte';
11
- import {usePaginationContext} from './context.svelte.js';
12
-
13
- let {value, children, ...props}: PaginationItemProps = $props();
14
-
15
- let context = usePaginationContext();
16
-
17
- let attrs = $derived(
18
- mergeProps(
19
- props,
20
- context.getItemProps({
21
- type: 'page',
22
- value,
23
- }),
24
- ),
25
- );
26
- </script>
27
-
28
- <button type="button" {...attrs}>
29
- {@render children?.()}
30
- </button>
1
+ <script lang="ts" context="module">
2
+ import type {Assign, HtmlIngredientProps} from '../types.js';
3
+ import type {ItemProps} from '@zag-js/pagination';
4
+
5
+ export interface PaginationItemProps
6
+ extends Assign<HtmlIngredientProps<'button'>, Omit<ItemProps, 'type'>> {}
7
+ </script>
8
+
9
+ <script lang="ts">
10
+ import {mergeProps} from '@zag-js/svelte';
11
+ import {usePaginationContext} from './context.svelte.js';
12
+
13
+ let {value, children, ...props}: PaginationItemProps = $props();
14
+
15
+ let context = usePaginationContext();
16
+
17
+ let attrs = $derived(
18
+ mergeProps(
19
+ props,
20
+ context.getItemProps({
21
+ type: 'page',
22
+ value,
23
+ }),
24
+ ),
25
+ );
26
+ </script>
27
+
28
+ <button type="button" {...attrs}>
29
+ {@render children?.()}
30
+ </button>
@@ -1,21 +1,21 @@
1
- <script lang="ts" context="module">
2
- import type {HtmlIngredientProps} from '../types.js';
3
-
4
- export interface PaginationNextTriggerProps
5
- extends HtmlIngredientProps<'button'> {}
6
- </script>
7
-
8
- <script lang="ts">
9
- import {mergeProps} from '@zag-js/svelte';
10
- import {usePaginationContext} from './context.svelte.js';
11
-
12
- let {children, ...props}: PaginationNextTriggerProps = $props();
13
-
14
- let context = usePaginationContext();
15
-
16
- let attrs = $derived(mergeProps(props, context.getNextTriggerProps()));
17
- </script>
18
-
19
- <button type="button" {...attrs}>
20
- {@render children?.()}
21
- </button>
1
+ <script lang="ts" context="module">
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface PaginationNextTriggerProps
5
+ extends HtmlIngredientProps<'button'> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '@zag-js/svelte';
10
+ import {usePaginationContext} from './context.svelte.js';
11
+
12
+ let {children, ...props}: PaginationNextTriggerProps = $props();
13
+
14
+ let context = usePaginationContext();
15
+
16
+ let attrs = $derived(mergeProps(props, context.getNextTriggerProps()));
17
+ </script>
18
+
19
+ <button type="button" {...attrs}>
20
+ {@render children?.()}
21
+ </button>
@@ -1,21 +1,21 @@
1
- <script lang="ts" context="module">
2
- import type {HtmlIngredientProps} from '../types.js';
3
-
4
- export interface PaginationPrevTriggerProps
5
- extends HtmlIngredientProps<'button'> {}
6
- </script>
7
-
8
- <script lang="ts">
9
- import {mergeProps} from '@zag-js/svelte';
10
- import {usePaginationContext} from './context.svelte.js';
11
-
12
- let {children, ...props}: PaginationPrevTriggerProps = $props();
13
-
14
- let context = usePaginationContext();
15
-
16
- let attrs = $derived(mergeProps(props, context.getPrevTriggerProps()));
17
- </script>
18
-
19
- <button type="button" {...attrs}>
20
- {@render children?.()}
21
- </button>
1
+ <script lang="ts" context="module">
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface PaginationPrevTriggerProps
5
+ extends HtmlIngredientProps<'button'> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '@zag-js/svelte';
10
+ import {usePaginationContext} from './context.svelte.js';
11
+
12
+ let {children, ...props}: PaginationPrevTriggerProps = $props();
13
+
14
+ let context = usePaginationContext();
15
+
16
+ let attrs = $derived(mergeProps(props, context.getPrevTriggerProps()));
17
+ </script>
18
+
19
+ <button type="button" {...attrs}>
20
+ {@render children?.()}
21
+ </button>
@@ -1,65 +1,70 @@
1
- <script lang="ts" context="module">
2
- import type {Assign, HtmlIngredientProps} from '../types.js';
3
- import type {Snippet} from 'svelte';
4
- import type {
5
- CreatePaginationContextProps,
6
- CreatePaginationContextReturn,
7
- } from './context.svelte.js';
8
-
9
- export interface PaginationProps
10
- extends Assign<
11
- Omit<HtmlIngredientProps<'div'>, 'children'>,
12
- Omit<CreatePaginationContextProps, 'id'>
13
- > {
14
- children?: Snippet<[context: CreatePaginationContextReturn]>;
15
- }
16
- </script>
17
-
18
- <script lang="ts">
19
- import {uuid} from '../utils.svelte.js';
20
- import {mergeProps} from '@zag-js/svelte';
21
- import {
22
- createPaginationContext,
23
- setPaginationContext,
24
- } from './context.svelte.js';
25
-
26
- let {
27
- id,
28
- ids,
29
- dir,
30
- type,
31
- page,
32
- pageSize,
33
- count,
34
- siblingCount,
35
- translations,
36
- onPageChange,
37
- onPageSizeChange,
38
- getRootNode,
39
- children,
40
- ...props
41
- }: PaginationProps = $props();
42
-
43
- let context = createPaginationContext({
44
- id: id ?? uuid(),
45
- ids,
46
- dir,
47
- type,
48
- page,
49
- pageSize,
50
- count,
51
- siblingCount,
52
- translations,
53
- onPageChange,
54
- onPageSizeChange,
55
- getRootNode,
56
- });
57
-
58
- let attrs = $derived(mergeProps(props, context.getRootProps()));
59
-
60
- setPaginationContext(context);
61
- </script>
62
-
63
- <div {...attrs}>
64
- {@render children?.(context)}
65
- </div>
1
+ <script lang="ts" context="module">
2
+ import type {Assign, HtmlIngredientProps} from '../types.js';
3
+ import type {Snippet} from 'svelte';
4
+ import type {
5
+ CreatePaginationContextProps,
6
+ CreatePaginationContextReturn,
7
+ } from './context.svelte.js';
8
+
9
+ export interface PaginationProps
10
+ extends Assign<
11
+ Omit<HtmlIngredientProps<'div'>, 'children'>,
12
+ Omit<CreatePaginationContextProps, 'id'>
13
+ > {
14
+ children?: Snippet<[context: CreatePaginationContextReturn]>;
15
+ }
16
+ </script>
17
+
18
+ <script lang="ts">
19
+ import {useEnvironmentContext} from '../environment-provider/index.js';
20
+ import {useLocaleContext} from '../locale-provider/index.js';
21
+ import {uuid} from '../utils.svelte.js';
22
+ import {mergeProps} from '@zag-js/svelte';
23
+ import {
24
+ createPaginationContext,
25
+ setPaginationContext,
26
+ } from './context.svelte.js';
27
+
28
+ let {
29
+ id,
30
+ ids,
31
+ dir,
32
+ type,
33
+ page,
34
+ pageSize,
35
+ count,
36
+ siblingCount,
37
+ translations,
38
+ onPageChange,
39
+ onPageSizeChange,
40
+ getRootNode,
41
+ children,
42
+ ...props
43
+ }: PaginationProps = $props();
44
+
45
+ let localeContext = useLocaleContext();
46
+ let environmentContext = useEnvironmentContext();
47
+
48
+ let context = createPaginationContext({
49
+ id: id ?? uuid(),
50
+ ids,
51
+ dir: dir ?? localeContext?.dir,
52
+ type,
53
+ page,
54
+ pageSize,
55
+ count,
56
+ siblingCount,
57
+ translations,
58
+ onPageChange,
59
+ onPageSizeChange,
60
+ getRootNode: getRootNode ?? environmentContext?.getRootNode,
61
+ });
62
+
63
+ let attrs = $derived(mergeProps(props, context.getRootProps()));
64
+
65
+ setPaginationContext(context);
66
+ </script>
67
+
68
+ <div {...attrs}>
69
+ {@render children?.(context)}
70
+ </div>
@@ -1,25 +1,25 @@
1
- <script lang="ts" context="module">
2
- import type {HtmlIngredientProps} from '../types.js';
3
-
4
- export interface PinInputClearTriggerProps
5
- extends HtmlIngredientProps<'button'> {}
6
- </script>
7
-
8
- <script lang="ts">
9
- import {usePinInputContext} from './context.svelte.js';
10
-
11
- let {children, onclick, ...props}: PinInputClearTriggerProps = $props();
12
-
13
- let context = usePinInputContext();
14
- </script>
15
-
16
- <button
17
- type="button"
18
- onclick={(e) => {
19
- onclick?.(e);
20
- context.clearValue();
21
- }}
22
- {...props}
23
- >
24
- {@render children?.()}
25
- </button>
1
+ <script lang="ts" context="module">
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface PinInputClearTriggerProps
5
+ extends HtmlIngredientProps<'button'> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {usePinInputContext} from './context.svelte.js';
10
+
11
+ let {children, onclick, ...props}: PinInputClearTriggerProps = $props();
12
+
13
+ let context = usePinInputContext();
14
+ </script>
15
+
16
+ <button
17
+ type="button"
18
+ onclick={(e) => {
19
+ onclick?.(e);
20
+ context.clearValue();
21
+ }}
22
+ {...props}
23
+ >
24
+ {@render children?.()}
25
+ </button>
@@ -1,19 +1,19 @@
1
- <script lang="ts" context="module">
2
- import type {HtmlIngredientProps} from '../types.js';
3
-
4
- export interface PinInputHiddenInputProps
5
- extends HtmlIngredientProps<'input'> {}
6
- </script>
7
-
8
- <script lang="ts">
9
- import {mergeProps} from '@zag-js/svelte';
10
- import {usePinInputContext} from './context.svelte.js';
11
-
12
- let {...props}: PinInputHiddenInputProps = $props();
13
-
14
- let context = usePinInputContext();
15
-
16
- let attrs = $derived(mergeProps(props, context.getHiddenInputProps()));
17
- </script>
18
-
19
- <input {...attrs} />
1
+ <script lang="ts" context="module">
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface PinInputHiddenInputProps
5
+ extends HtmlIngredientProps<'input'> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '@zag-js/svelte';
10
+ import {usePinInputContext} from './context.svelte.js';
11
+
12
+ let {...props}: PinInputHiddenInputProps = $props();
13
+
14
+ let context = usePinInputContext();
15
+
16
+ let attrs = $derived(mergeProps(props, context.getHiddenInputProps()));
17
+ </script>
18
+
19
+ <input {...attrs} />
@@ -1,20 +1,20 @@
1
- <script lang="ts" context="module">
2
- import type {Assign, HtmlIngredientProps} from '../types.js';
3
- import type {InputProps} from '@zag-js/pin-input';
4
-
5
- export interface PinInputInputProps
6
- extends Assign<HtmlIngredientProps<'input'>, InputProps> {}
7
- </script>
8
-
9
- <script lang="ts">
10
- import {mergeProps} from '@zag-js/svelte';
11
- import {usePinInputContext} from './context.svelte.js';
12
-
13
- let {index, ...props}: PinInputInputProps = $props();
14
-
15
- let context = usePinInputContext();
16
-
17
- let attrs = $derived(mergeProps(props, context.getInputProps({index})));
18
- </script>
19
-
20
- <input {...attrs} />
1
+ <script lang="ts" context="module">
2
+ import type {Assign, HtmlIngredientProps} from '../types.js';
3
+ import type {InputProps} from '@zag-js/pin-input';
4
+
5
+ export interface PinInputInputProps
6
+ extends Assign<HtmlIngredientProps<'input'>, InputProps> {}
7
+ </script>
8
+
9
+ <script lang="ts">
10
+ import {mergeProps} from '@zag-js/svelte';
11
+ import {usePinInputContext} from './context.svelte.js';
12
+
13
+ let {index, ...props}: PinInputInputProps = $props();
14
+
15
+ let context = usePinInputContext();
16
+
17
+ let attrs = $derived(mergeProps(props, context.getInputProps({index})));
18
+ </script>
19
+
20
+ <input {...attrs} />
@@ -1,20 +1,20 @@
1
- <script lang="ts" context="module">
2
- import type {HtmlIngredientProps} from '../types.js';
3
-
4
- export interface PinInputLabelProps extends HtmlIngredientProps<'label'> {}
5
- </script>
6
-
7
- <script lang="ts">
8
- import {mergeProps} from '@zag-js/svelte';
9
- import {usePinInputContext} from './context.svelte.js';
10
-
11
- let {children, ...props}: PinInputLabelProps = $props();
12
-
13
- let context = usePinInputContext();
14
-
15
- let attrs = $derived(mergeProps(props, context.getLabelProps()));
16
- </script>
17
-
18
- <label {...attrs}>
19
- {@render children?.()}
20
- </label>
1
+ <script lang="ts" context="module">
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface PinInputLabelProps extends HtmlIngredientProps<'label'> {}
5
+ </script>
6
+
7
+ <script lang="ts">
8
+ import {mergeProps} from '@zag-js/svelte';
9
+ import {usePinInputContext} from './context.svelte.js';
10
+
11
+ let {children, ...props}: PinInputLabelProps = $props();
12
+
13
+ let context = usePinInputContext();
14
+
15
+ let attrs = $derived(mergeProps(props, context.getLabelProps()));
16
+ </script>
17
+
18
+ <label {...attrs}>
19
+ {@render children?.()}
20
+ </label>