@skeletonlabs/skeleton-svelte 2.0.0-next.2 → 2.0.0-next.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (216) hide show
  1. package/dist/components/accordion/anatomy/content.svelte +34 -0
  2. package/dist/components/accordion/anatomy/content.svelte.d.ts +7 -0
  3. package/dist/components/accordion/anatomy/{accordion-heading.svelte → heading.svelte} +12 -13
  4. package/dist/components/accordion/anatomy/heading.svelte.d.ts +13 -0
  5. package/dist/components/accordion/anatomy/indicator.svelte +30 -0
  6. package/dist/components/accordion/anatomy/indicator.svelte.d.ts +7 -0
  7. package/dist/components/accordion/anatomy/item.svelte +38 -0
  8. package/dist/components/accordion/anatomy/item.svelte.d.ts +8 -0
  9. package/dist/components/accordion/anatomy/root-context.svelte +20 -0
  10. package/dist/components/accordion/anatomy/root-context.svelte.d.ts +8 -0
  11. package/dist/components/accordion/anatomy/root-provider.svelte +31 -0
  12. package/dist/components/accordion/anatomy/root-provider.svelte.d.ts +9 -0
  13. package/dist/components/accordion/anatomy/root.svelte +42 -0
  14. package/dist/components/accordion/anatomy/root.svelte.d.ts +8 -0
  15. package/dist/components/accordion/anatomy/trigger.svelte +34 -0
  16. package/dist/components/accordion/anatomy/trigger.svelte.d.ts +7 -0
  17. package/dist/components/accordion/index.d.ts +10 -11
  18. package/dist/components/accordion/index.js +2 -1
  19. package/dist/components/accordion/modules/anatomy.d.ts +9 -0
  20. package/dist/components/accordion/modules/anatomy.js +17 -0
  21. package/dist/components/accordion/modules/item-context.d.ts +6 -0
  22. package/dist/components/accordion/modules/item-context.js +2 -0
  23. package/dist/components/accordion/modules/root-context.js +2 -0
  24. package/dist/components/accordion/modules/use-accordion.svelte.js +7 -0
  25. package/dist/components/avatar/anatomy/fallback.svelte +32 -0
  26. package/dist/components/avatar/anatomy/fallback.svelte.d.ts +7 -0
  27. package/dist/components/avatar/anatomy/image.svelte +30 -0
  28. package/dist/components/avatar/anatomy/image.svelte.d.ts +7 -0
  29. package/dist/components/avatar/anatomy/root-context.svelte +20 -0
  30. package/dist/components/avatar/anatomy/root-context.svelte.d.ts +8 -0
  31. package/dist/components/avatar/anatomy/root-provider.svelte +35 -0
  32. package/dist/components/avatar/anatomy/root-provider.svelte.d.ts +9 -0
  33. package/dist/components/avatar/anatomy/root.svelte +42 -0
  34. package/dist/components/avatar/anatomy/root.svelte.d.ts +8 -0
  35. package/dist/components/avatar/index.d.ts +7 -6
  36. package/dist/components/avatar/index.js +2 -1
  37. package/dist/components/avatar/modules/anatomy.d.ts +6 -0
  38. package/dist/components/avatar/modules/anatomy.js +11 -0
  39. package/dist/components/avatar/modules/root-context.js +2 -0
  40. package/dist/components/avatar/modules/use-avatar.svelte.js +7 -0
  41. package/dist/components/progress-linear/anatomy/label.svelte +32 -0
  42. package/dist/components/progress-linear/anatomy/label.svelte.d.ts +7 -0
  43. package/dist/components/progress-linear/anatomy/range.svelte +32 -0
  44. package/dist/components/progress-linear/anatomy/range.svelte.d.ts +7 -0
  45. package/dist/components/progress-linear/anatomy/root-context.svelte +20 -0
  46. package/dist/components/progress-linear/anatomy/root-context.svelte.d.ts +8 -0
  47. package/dist/components/progress-linear/anatomy/root-provider.svelte +35 -0
  48. package/dist/components/progress-linear/anatomy/root-provider.svelte.d.ts +9 -0
  49. package/dist/components/progress-linear/anatomy/root.svelte +42 -0
  50. package/dist/components/progress-linear/anatomy/root.svelte.d.ts +8 -0
  51. package/dist/components/progress-linear/anatomy/track.svelte +32 -0
  52. package/dist/components/progress-linear/anatomy/track.svelte.d.ts +7 -0
  53. package/dist/components/progress-linear/index.d.ts +8 -0
  54. package/dist/components/progress-linear/index.js +2 -0
  55. package/dist/components/progress-linear/modules/anatomy.d.ts +6 -0
  56. package/dist/components/progress-linear/modules/anatomy.js +11 -0
  57. package/dist/components/{accordion/modules/accordion-item-context.js → progress-linear/modules/root-context.js} +1 -1
  58. package/dist/components/progress-linear/modules/use-progress-linear.svelte.js +7 -0
  59. package/dist/components/rating-group/anatomy/control.svelte +32 -0
  60. package/dist/components/rating-group/anatomy/control.svelte.d.ts +7 -0
  61. package/dist/components/rating-group/anatomy/hidden-input.svelte +30 -0
  62. package/dist/components/rating-group/anatomy/hidden-input.svelte.d.ts +7 -0
  63. package/dist/components/rating-group/anatomy/{rating-group-item.svelte → item.svelte} +15 -24
  64. package/dist/components/rating-group/anatomy/{rating-group-item.svelte.d.ts → item.svelte.d.ts} +6 -6
  65. package/dist/components/rating-group/anatomy/label.svelte +32 -0
  66. package/dist/components/rating-group/anatomy/label.svelte.d.ts +7 -0
  67. package/dist/components/rating-group/anatomy/root-context.svelte +20 -0
  68. package/dist/components/rating-group/anatomy/root-context.svelte.d.ts +8 -0
  69. package/dist/components/rating-group/anatomy/root-provider.svelte +35 -0
  70. package/dist/components/rating-group/anatomy/root-provider.svelte.d.ts +9 -0
  71. package/dist/components/rating-group/anatomy/root.svelte +42 -0
  72. package/dist/components/rating-group/anatomy/root.svelte.d.ts +8 -0
  73. package/dist/components/rating-group/index.d.ts +9 -10
  74. package/dist/components/rating-group/index.js +2 -1
  75. package/dist/components/rating-group/modules/anatomy.d.ts +8 -0
  76. package/dist/components/rating-group/modules/anatomy.js +15 -0
  77. package/dist/components/rating-group/modules/root-context.js +2 -0
  78. package/dist/components/rating-group/modules/use-rating-group.svelte.js +7 -0
  79. package/dist/components/switch/anatomy/control.svelte +32 -0
  80. package/dist/components/switch/anatomy/control.svelte.d.ts +7 -0
  81. package/dist/components/switch/anatomy/hidden-input.svelte +30 -0
  82. package/dist/components/switch/anatomy/hidden-input.svelte.d.ts +7 -0
  83. package/dist/components/switch/anatomy/label.svelte +32 -0
  84. package/dist/components/switch/anatomy/label.svelte.d.ts +7 -0
  85. package/dist/components/switch/anatomy/root-context.svelte +20 -0
  86. package/dist/components/switch/anatomy/root-context.svelte.d.ts +8 -0
  87. package/dist/components/switch/anatomy/root-provider.svelte +35 -0
  88. package/dist/components/switch/anatomy/root-provider.svelte.d.ts +9 -0
  89. package/dist/components/switch/anatomy/root.svelte +42 -0
  90. package/dist/components/switch/anatomy/root.svelte.d.ts +8 -0
  91. package/dist/components/switch/anatomy/thumb.svelte +32 -0
  92. package/dist/components/switch/anatomy/thumb.svelte.d.ts +7 -0
  93. package/dist/components/switch/index.d.ts +9 -0
  94. package/dist/components/switch/index.js +2 -0
  95. package/dist/components/switch/modules/anatomy.d.ts +8 -0
  96. package/dist/components/switch/modules/anatomy.js +15 -0
  97. package/dist/components/switch/modules/root-context.js +2 -0
  98. package/dist/components/switch/modules/use-switch.svelte.js +7 -0
  99. package/dist/components/tabs/anatomy/{tabs-content.svelte → content.svelte} +13 -14
  100. package/dist/components/tabs/anatomy/content.svelte.d.ts +8 -0
  101. package/dist/components/tabs/anatomy/indicator.svelte +30 -0
  102. package/dist/components/tabs/anatomy/indicator.svelte.d.ts +7 -0
  103. package/dist/components/tabs/anatomy/list.svelte +32 -0
  104. package/dist/components/tabs/anatomy/list.svelte.d.ts +7 -0
  105. package/dist/components/tabs/anatomy/root-context.svelte +20 -0
  106. package/dist/components/tabs/anatomy/root-context.svelte.d.ts +8 -0
  107. package/dist/components/tabs/anatomy/root-provider.svelte +34 -0
  108. package/dist/components/tabs/anatomy/root-provider.svelte.d.ts +9 -0
  109. package/dist/components/tabs/anatomy/root.svelte +41 -0
  110. package/dist/components/tabs/anatomy/root.svelte.d.ts +8 -0
  111. package/dist/components/tabs/anatomy/{tabs-trigger.svelte → trigger.svelte} +13 -14
  112. package/dist/components/tabs/anatomy/trigger.svelte.d.ts +8 -0
  113. package/dist/components/tabs/index.d.ts +9 -1
  114. package/dist/components/tabs/index.js +2 -1
  115. package/dist/components/tabs/modules/anatomy.d.ts +8 -0
  116. package/dist/components/tabs/modules/anatomy.js +15 -0
  117. package/dist/components/tabs/modules/root-context.js +2 -0
  118. package/dist/components/tabs/modules/use-tabs.svelte.js +7 -0
  119. package/dist/components/toast/anatomy/action-trigger.svelte +32 -0
  120. package/dist/components/toast/anatomy/action-trigger.svelte.d.ts +7 -0
  121. package/dist/components/toast/anatomy/close-trigger.svelte +37 -0
  122. package/dist/components/toast/anatomy/close-trigger.svelte.d.ts +7 -0
  123. package/dist/components/toast/anatomy/description.svelte +32 -0
  124. package/dist/components/toast/anatomy/description.svelte.d.ts +7 -0
  125. package/dist/components/toast/anatomy/group.svelte +47 -0
  126. package/dist/components/toast/anatomy/group.svelte.d.ts +11 -0
  127. package/dist/components/toast/anatomy/message.svelte +29 -0
  128. package/dist/components/toast/anatomy/message.svelte.d.ts +7 -0
  129. package/dist/components/toast/anatomy/root-context.svelte +20 -0
  130. package/dist/components/toast/anatomy/root-context.svelte.d.ts +8 -0
  131. package/dist/components/toast/anatomy/root.svelte +74 -0
  132. package/dist/components/toast/anatomy/root.svelte.d.ts +9 -0
  133. package/dist/components/toast/anatomy/title.svelte +32 -0
  134. package/dist/components/toast/anatomy/title.svelte.d.ts +7 -0
  135. package/dist/components/toast/index.d.ts +9 -0
  136. package/dist/components/toast/index.js +2 -0
  137. package/dist/components/toast/modules/anatomy.d.ts +9 -0
  138. package/dist/components/toast/modules/anatomy.js +17 -0
  139. package/dist/components/toast/modules/group-context.d.ts +6 -0
  140. package/dist/components/toast/modules/group-context.js +2 -0
  141. package/dist/components/toast/modules/root-context.d.ts +6 -0
  142. package/dist/components/toast/modules/root-context.js +2 -0
  143. package/dist/index.d.ts +7 -4
  144. package/dist/index.js +7 -4
  145. package/dist/internal/components/x.svelte +14 -0
  146. package/dist/internal/components/x.svelte.d.ts +26 -0
  147. package/dist/internal/html-attributes.d.ts +2 -0
  148. package/dist/internal/html-attributes.js +1 -0
  149. package/dist/internal/props-with-element.d.ts +4 -4
  150. package/package.json +20 -20
  151. package/dist/components/accordion/anatomy/accordion-content.svelte +0 -35
  152. package/dist/components/accordion/anatomy/accordion-content.svelte.d.ts +0 -7
  153. package/dist/components/accordion/anatomy/accordion-heading.svelte.d.ts +0 -13
  154. package/dist/components/accordion/anatomy/accordion-indicator.svelte +0 -35
  155. package/dist/components/accordion/anatomy/accordion-indicator.svelte.d.ts +0 -7
  156. package/dist/components/accordion/anatomy/accordion-item-context.svelte +0 -17
  157. package/dist/components/accordion/anatomy/accordion-item-context.svelte.d.ts +0 -9
  158. package/dist/components/accordion/anatomy/accordion-item.svelte +0 -45
  159. package/dist/components/accordion/anatomy/accordion-item.svelte.d.ts +0 -8
  160. package/dist/components/accordion/anatomy/accordion-root-context.svelte +0 -17
  161. package/dist/components/accordion/anatomy/accordion-root-context.svelte.d.ts +0 -9
  162. package/dist/components/accordion/anatomy/accordion-root.svelte +0 -49
  163. package/dist/components/accordion/anatomy/accordion-root.svelte.d.ts +0 -8
  164. package/dist/components/accordion/anatomy/accordion-trigger.svelte +0 -35
  165. package/dist/components/accordion/anatomy/accordion-trigger.svelte.d.ts +0 -7
  166. package/dist/components/accordion/modules/accordion-anatomy.d.ts +0 -9
  167. package/dist/components/accordion/modules/accordion-anatomy.js +0 -17
  168. package/dist/components/accordion/modules/accordion-item-context.d.ts +0 -10
  169. package/dist/components/accordion/modules/accordion-root-context.d.ts +0 -9
  170. package/dist/components/accordion/modules/accordion-root-context.js +0 -2
  171. package/dist/components/avatar/anatomy/avatar-fallback.svelte +0 -33
  172. package/dist/components/avatar/anatomy/avatar-fallback.svelte.d.ts +0 -7
  173. package/dist/components/avatar/anatomy/avatar-image.svelte +0 -31
  174. package/dist/components/avatar/anatomy/avatar-image.svelte.d.ts +0 -7
  175. package/dist/components/avatar/anatomy/avatar-root-context.svelte +0 -17
  176. package/dist/components/avatar/anatomy/avatar-root-context.svelte.d.ts +0 -9
  177. package/dist/components/avatar/anatomy/avatar-root.svelte +0 -46
  178. package/dist/components/avatar/anatomy/avatar-root.svelte.d.ts +0 -8
  179. package/dist/components/avatar/modules/avatar-anatomy.d.ts +0 -5
  180. package/dist/components/avatar/modules/avatar-anatomy.js +0 -9
  181. package/dist/components/avatar/modules/avatar-root-context.d.ts +0 -9
  182. package/dist/components/avatar/modules/avatar-root-context.js +0 -2
  183. package/dist/components/rating-group/anatomy/rating-group-control.svelte +0 -31
  184. package/dist/components/rating-group/anatomy/rating-group-control.svelte.d.ts +0 -7
  185. package/dist/components/rating-group/anatomy/rating-group-hidden-input.svelte +0 -33
  186. package/dist/components/rating-group/anatomy/rating-group-hidden-input.svelte.d.ts +0 -7
  187. package/dist/components/rating-group/anatomy/rating-group-item-context.svelte +0 -17
  188. package/dist/components/rating-group/anatomy/rating-group-item-context.svelte.d.ts +0 -9
  189. package/dist/components/rating-group/anatomy/rating-group-label.svelte +0 -31
  190. package/dist/components/rating-group/anatomy/rating-group-label.svelte.d.ts +0 -7
  191. package/dist/components/rating-group/anatomy/rating-group-root-context.svelte +0 -17
  192. package/dist/components/rating-group/anatomy/rating-group-root-context.svelte.d.ts +0 -9
  193. package/dist/components/rating-group/anatomy/rating-group-root.svelte +0 -52
  194. package/dist/components/rating-group/anatomy/rating-group-root.svelte.d.ts +0 -8
  195. package/dist/components/rating-group/modules/rating-group-anatomy.d.ts +0 -8
  196. package/dist/components/rating-group/modules/rating-group-anatomy.js +0 -15
  197. package/dist/components/rating-group/modules/rating-group-item-context.d.ts +0 -9
  198. package/dist/components/rating-group/modules/rating-group-item-context.js +0 -2
  199. package/dist/components/rating-group/modules/rating-group-root-context.d.ts +0 -9
  200. package/dist/components/rating-group/modules/rating-group-root-context.js +0 -2
  201. package/dist/components/tabs/anatomy/tabs-content.svelte.d.ts +0 -8
  202. package/dist/components/tabs/anatomy/tabs-indicator.svelte +0 -31
  203. package/dist/components/tabs/anatomy/tabs-indicator.svelte.d.ts +0 -7
  204. package/dist/components/tabs/anatomy/tabs-list.svelte +0 -33
  205. package/dist/components/tabs/anatomy/tabs-list.svelte.d.ts +0 -7
  206. package/dist/components/tabs/anatomy/tabs-root-context.svelte +0 -17
  207. package/dist/components/tabs/anatomy/tabs-root-context.svelte.d.ts +0 -9
  208. package/dist/components/tabs/anatomy/tabs-root.svelte +0 -49
  209. package/dist/components/tabs/anatomy/tabs-root.svelte.d.ts +0 -8
  210. package/dist/components/tabs/anatomy/tabs-trigger.svelte.d.ts +0 -8
  211. package/dist/components/tabs/modules/tabs-anatomy.d.ts +0 -7
  212. package/dist/components/tabs/modules/tabs-anatomy.js +0 -13
  213. package/dist/components/tabs/modules/tabs-root-context.d.ts +0 -9
  214. package/dist/components/tabs/modules/tabs-root-context.js +0 -2
  215. package/dist/internal/test-utils.d.ts +0 -3
  216. package/dist/internal/test-utils.js +0 -9
@@ -0,0 +1,34 @@
1
+ <script lang="ts" module>
2
+ import type { PropsWithElement } from '../../../internal/props-with-element';
3
+ import type { HTMLAttributes } from '../../../internal/html-attributes';
4
+
5
+ export interface AccordionContentProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import { mergeProps } from '@zag-js/svelte';
10
+ import { classesAccordion } from '@skeletonlabs/skeleton-common';
11
+ import { AccordionRootContext } from '../modules/root-context';
12
+ import { AccordionItemContext } from '../modules/item-context';
13
+
14
+ const props: AccordionContentProps = $props();
15
+
16
+ const accordion = AccordionRootContext.consume();
17
+ const itemProps = AccordionItemContext.consume();
18
+
19
+ const { element, children, ...rest } = $derived(props);
20
+
21
+ const attributes = $derived(
22
+ mergeProps(accordion().getItemContentProps(itemProps()), rest, {
23
+ class: classesAccordion.content
24
+ })
25
+ );
26
+ </script>
27
+
28
+ {#if element}
29
+ {@render element(attributes)}
30
+ {:else}
31
+ <div {...attributes}>
32
+ {@render children?.()}
33
+ </div>
34
+ {/if}
@@ -0,0 +1,7 @@
1
+ import type { PropsWithElement } from '../../../internal/props-with-element';
2
+ import type { HTMLAttributes } from '../../../internal/html-attributes';
3
+ export interface AccordionContentProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
4
+ }
5
+ declare const Content: import("svelte").Component<AccordionContentProps, {}, "">;
6
+ type Content = ReturnType<typeof Content>;
7
+ export default Content;
@@ -1,10 +1,10 @@
1
1
  <script lang="ts" module>
2
- import type { HTMLAttributes } from 'svelte/elements';
3
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
2
+ import type { HTMLAttributes } from '../../../internal/html-attributes';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element';
4
4
 
5
- export interface AccordionHeadingProps extends PropsWithElement, HTMLAttributes<HTMLHeadingElement> {
5
+ export interface AccordionHeadingProps extends PropsWithElement<'h3'>, HTMLAttributes<'h3'> {
6
6
  /**
7
- * The level of the heading. This is used to determine the heading level for accessibility purposes.
7
+ * The level of the heading.
8
8
  *
9
9
  * @default 3
10
10
  */
@@ -17,20 +17,19 @@
17
17
  import { classesAccordion } from '@skeletonlabs/skeleton-common';
18
18
 
19
19
  const props: AccordionHeadingProps = $props();
20
- const { level = 3, element, children, ...restAttributes } = $derived(props);
20
+ const { level = 3, element, children, ...rest } = $derived(props);
21
+
22
+ const tag = $derived(`h${level}`);
23
+
21
24
  const attributes = $derived(
22
- mergeProps(
23
- {
24
- class: classesAccordion.heading
25
- },
26
- restAttributes
27
- )
25
+ mergeProps(rest, {
26
+ class: classesAccordion.heading
27
+ })
28
28
  );
29
- const tag = $derived(`h${level}`);
30
29
  </script>
31
30
 
32
31
  {#if element}
33
- {@render element({ attributes })}
32
+ {@render element(attributes)}
34
33
  {:else}
35
34
  <svelte:element this={tag} {...attributes}>
36
35
  {@render children?.()}
@@ -0,0 +1,13 @@
1
+ import type { HTMLAttributes } from '../../../internal/html-attributes';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element';
3
+ export interface AccordionHeadingProps extends PropsWithElement<'h3'>, HTMLAttributes<'h3'> {
4
+ /**
5
+ * The level of the heading.
6
+ *
7
+ * @default 3
8
+ */
9
+ level?: 1 | 2 | 3 | 4 | 5 | 6;
10
+ }
11
+ declare const Heading: import("svelte").Component<AccordionHeadingProps, {}, "">;
12
+ type Heading = ReturnType<typeof Heading>;
13
+ export default Heading;
@@ -0,0 +1,30 @@
1
+ <script lang="ts" module>
2
+ import type { PropsWithElement } from '../../../internal/props-with-element';
3
+ import type { HTMLAttributes } from '../../../internal/html-attributes';
4
+
5
+ export interface AccordionIndicatorProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import { mergeProps } from '@zag-js/svelte';
10
+ import { classesAccordion } from '@skeletonlabs/skeleton-common';
11
+ import { AccordionRootContext } from '../modules/root-context';
12
+ import { AccordionItemContext } from '../modules/item-context';
13
+
14
+ const props: AccordionIndicatorProps = $props();
15
+
16
+ const accordion = AccordionRootContext.consume();
17
+ const itemProps = AccordionItemContext.consume();
18
+
19
+ const { element, children, ...rest } = $derived(props);
20
+
21
+ const attributes = $derived(mergeProps(accordion().getItemIndicatorProps(itemProps()), rest, { class: classesAccordion.indicator }));
22
+ </script>
23
+
24
+ {#if element}
25
+ {@render element(attributes)}
26
+ {:else}
27
+ <div {...attributes}>
28
+ {@render children?.()}
29
+ </div>
30
+ {/if}
@@ -0,0 +1,7 @@
1
+ import type { PropsWithElement } from '../../../internal/props-with-element';
2
+ import type { HTMLAttributes } from '../../../internal/html-attributes';
3
+ export interface AccordionIndicatorProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
4
+ }
5
+ declare const Indicator: import("svelte").Component<AccordionIndicatorProps, {}, "">;
6
+ type Indicator = ReturnType<typeof Indicator>;
7
+ export default Indicator;
@@ -0,0 +1,38 @@
1
+ <script lang="ts" module>
2
+ import type { HTMLAttributes } from '../../../internal/html-attributes';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element';
4
+ import type { ItemProps } from '@zag-js/accordion';
5
+
6
+ export interface AccordionItemProps extends ItemProps, PropsWithElement<'div'>, HTMLAttributes<'div'> {}
7
+ </script>
8
+
9
+ <script lang="ts">
10
+ import { mergeProps } from '@zag-js/svelte';
11
+ import { splitItemProps } from '@zag-js/accordion';
12
+ import { classesAccordion } from '@skeletonlabs/skeleton-common';
13
+ import { AccordionRootContext } from '../modules/root-context';
14
+ import { AccordionItemContext } from '../modules/item-context';
15
+
16
+ const props: AccordionItemProps = $props();
17
+
18
+ const accordion = AccordionRootContext.consume();
19
+
20
+ const [itemProps, componentProps] = $derived(splitItemProps(props));
21
+ const { element, children, ...rest } = $derived(componentProps);
22
+
23
+ const attributes = $derived(
24
+ mergeProps(accordion().getItemProps(itemProps), rest, {
25
+ class: classesAccordion.item
26
+ })
27
+ );
28
+
29
+ AccordionItemContext.provide(() => itemProps);
30
+ </script>
31
+
32
+ {#if element}
33
+ {@render element(attributes)}
34
+ {:else}
35
+ <div {...attributes}>
36
+ {@render children?.()}
37
+ </div>
38
+ {/if}
@@ -0,0 +1,8 @@
1
+ import type { HTMLAttributes } from '../../../internal/html-attributes';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element';
3
+ import type { ItemProps } from '@zag-js/accordion';
4
+ export interface AccordionItemProps extends ItemProps, PropsWithElement<'div'>, HTMLAttributes<'div'> {
5
+ }
6
+ declare const Item: import("svelte").Component<AccordionItemProps, {}, "">;
7
+ type Item = ReturnType<typeof Item>;
8
+ export default Item;
@@ -0,0 +1,20 @@
1
+ <script lang="ts" module>
2
+ import type { Snippet } from 'svelte';
3
+ import type { useAccordion } from '../modules/use-accordion.svelte';
4
+
5
+ export interface AccordionRootContextProps {
6
+ children: Snippet<[ReturnType<typeof useAccordion>]>;
7
+ }
8
+ </script>
9
+
10
+ <script lang="ts">
11
+ import { AccordionRootContext } from '../modules/root-context';
12
+
13
+ const props: AccordionRootContextProps = $props();
14
+
15
+ const accordion = AccordionRootContext.consume();
16
+
17
+ const { children } = $derived(props);
18
+ </script>
19
+
20
+ {@render children(accordion)}
@@ -0,0 +1,8 @@
1
+ import type { Snippet } from 'svelte';
2
+ import type { useAccordion } from '../modules/use-accordion.svelte';
3
+ export interface AccordionRootContextProps {
4
+ children: Snippet<[ReturnType<typeof useAccordion>]>;
5
+ }
6
+ declare const RootContext: import("svelte").Component<AccordionRootContextProps, {}, "">;
7
+ type RootContext = ReturnType<typeof RootContext>;
8
+ export default RootContext;
@@ -0,0 +1,31 @@
1
+ <script lang="ts" module>
2
+ import type { HTMLAttributes } from '../../../internal/html-attributes';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element';
4
+ import type { useAccordion } from '../modules/use-accordion.svelte';
5
+
6
+ export interface AccordionRootProviderProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
7
+ value: ReturnType<typeof useAccordion>;
8
+ }
9
+ </script>
10
+
11
+ <script lang="ts">
12
+ import { mergeProps } from '@zag-js/svelte';
13
+ import { classesAccordion } from '@skeletonlabs/skeleton-common';
14
+ import { AccordionRootContext } from '../modules/root-context';
15
+
16
+ const props: AccordionRootProviderProps = $props();
17
+
18
+ const { element, children, value: accordion, ...rest } = $derived(props);
19
+
20
+ const attributes = $derived(mergeProps(accordion().getRootProps(), { class: classesAccordion.root }, rest));
21
+
22
+ AccordionRootContext.provide(() => accordion());
23
+ </script>
24
+
25
+ {#if element}
26
+ {@render element(attributes)}
27
+ {:else}
28
+ <div {...attributes}>
29
+ {@render children?.()}
30
+ </div>
31
+ {/if}
@@ -0,0 +1,9 @@
1
+ import type { HTMLAttributes } from '../../../internal/html-attributes';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element';
3
+ import type { useAccordion } from '../modules/use-accordion.svelte';
4
+ export interface AccordionRootProviderProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
5
+ value: ReturnType<typeof useAccordion>;
6
+ }
7
+ declare const RootProvider: import("svelte").Component<AccordionRootProviderProps, {}, "">;
8
+ type RootProvider = ReturnType<typeof RootProvider>;
9
+ export default RootProvider;
@@ -0,0 +1,42 @@
1
+ <script lang="ts" module>
2
+ import type { Props } from '@zag-js/accordion';
3
+ import type { HTMLAttributes } from '../../../internal/html-attributes';
4
+ import type { PropsWithElement } from '../../../internal/props-with-element';
5
+
6
+ export interface AccordionRootProps extends Omit<Props, 'id'>, PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {}
7
+ </script>
8
+
9
+ <script lang="ts">
10
+ import { mergeProps } from '@zag-js/svelte';
11
+ import { splitProps } from '@zag-js/accordion';
12
+ import { classesAccordion } from '@skeletonlabs/skeleton-common';
13
+ import { AccordionRootContext } from '../modules/root-context';
14
+ import { useAccordion } from '../modules/use-accordion.svelte';
15
+
16
+ const props: AccordionRootProps = $props();
17
+
18
+ const [accordionProps, componentProps] = $derived(splitProps(props));
19
+ const { element, children, ...rest } = $derived(componentProps);
20
+
21
+ const id = $props.id();
22
+ const accordion = useAccordion(() => ({
23
+ id: id,
24
+ ...accordionProps
25
+ }));
26
+
27
+ const attributes = $derived(
28
+ mergeProps(accordion().getRootProps(), rest, {
29
+ class: classesAccordion.root
30
+ })
31
+ );
32
+
33
+ AccordionRootContext.provide(() => accordion());
34
+ </script>
35
+
36
+ {#if element}
37
+ {@render element(attributes)}
38
+ {:else}
39
+ <div {...attributes}>
40
+ {@render children?.()}
41
+ </div>
42
+ {/if}
@@ -0,0 +1,8 @@
1
+ import type { Props } from '@zag-js/accordion';
2
+ import type { HTMLAttributes } from '../../../internal/html-attributes';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element';
4
+ export interface AccordionRootProps extends Omit<Props, 'id'>, PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
5
+ }
6
+ declare const Root: import("svelte").Component<AccordionRootProps, {}, "">;
7
+ type Root = ReturnType<typeof Root>;
8
+ export default Root;
@@ -0,0 +1,34 @@
1
+ <script lang="ts" module>
2
+ import type { HTMLAttributes } from '../../../internal/html-attributes';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element';
4
+
5
+ export interface AccordionTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import { mergeProps } from '@zag-js/svelte';
10
+ import { classesAccordion } from '@skeletonlabs/skeleton-common';
11
+ import { AccordionRootContext } from '../modules/root-context';
12
+ import { AccordionItemContext } from '../modules/item-context';
13
+
14
+ const props: AccordionTriggerProps = $props();
15
+
16
+ const accordion = AccordionRootContext.consume();
17
+ const itemProps = AccordionItemContext.consume();
18
+
19
+ const { element, children, ...rest } = $derived(props);
20
+
21
+ const attributes = $derived(
22
+ mergeProps(accordion().getItemTriggerProps(itemProps()), rest, {
23
+ class: classesAccordion.trigger
24
+ })
25
+ );
26
+ </script>
27
+
28
+ {#if element}
29
+ {@render element(attributes)}
30
+ {:else}
31
+ <button {...attributes}>
32
+ {@render children?.()}
33
+ </button>
34
+ {/if}
@@ -0,0 +1,7 @@
1
+ import type { HTMLAttributes } from '../../../internal/html-attributes';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element';
3
+ export interface AccordionTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {
4
+ }
5
+ declare const Trigger: import("svelte").Component<AccordionTriggerProps, {}, "">;
6
+ type Trigger = ReturnType<typeof Trigger>;
7
+ export default Trigger;
@@ -1,11 +1,10 @@
1
- export { Accordion } from './modules/accordion-anatomy';
2
- export type { AccordionRootProps } from './anatomy/accordion-root.svelte';
3
- export type { AccordionRootContextProps } from './anatomy/accordion-root-context.svelte';
4
- export type { AccordionItemProps } from './anatomy/accordion-item.svelte';
5
- export type { AccordionItemContextProps } from './anatomy/accordion-item-context.svelte';
6
- export type { AccordionHeadingProps } from './anatomy/accordion-heading.svelte';
7
- export type { AccordionTriggerProps } from './anatomy/accordion-trigger.svelte';
8
- export type { AccordionIndicatorProps } from './anatomy/accordion-indicator.svelte';
9
- export type { AccordionContentProps } from './anatomy/accordion-content.svelte';
10
- export type { AccordionRootContextType as AccordionRootContext } from './modules/accordion-root-context.js';
11
- export type { AccordionItemContextType as AccordionItemContext } from './modules/accordion-item-context.js';
1
+ export { Accordion } from './modules/anatomy';
2
+ export { useAccordion } from './modules/use-accordion.svelte';
3
+ export type { AccordionRootProps } from './anatomy/root.svelte';
4
+ export type { AccordionRootProviderProps } from './anatomy/root-provider.svelte';
5
+ export type { AccordionRootContextProps } from './anatomy/root-context.svelte';
6
+ export type { AccordionItemProps } from './anatomy/item.svelte';
7
+ export type { AccordionHeadingProps } from './anatomy/heading.svelte';
8
+ export type { AccordionTriggerProps } from './anatomy/trigger.svelte';
9
+ export type { AccordionIndicatorProps } from './anatomy/indicator.svelte';
10
+ export type { AccordionContentProps } from './anatomy/content.svelte';
@@ -1 +1,2 @@
1
- export { Accordion } from './modules/accordion-anatomy';
1
+ export { Accordion } from './modules/anatomy';
2
+ export { useAccordion } from './modules/use-accordion.svelte';
@@ -0,0 +1,9 @@
1
+ export declare const Accordion: import("svelte").Component<import("../anatomy/root.svelte").AccordionRootProps, {}, ""> & {
2
+ Provider: import("svelte").Component<import("../anatomy/root-provider.svelte").AccordionRootProviderProps, {}, "">;
3
+ Context: import("svelte").Component<import("../anatomy/root-context.svelte").AccordionRootContextProps, {}, "">;
4
+ Item: import("svelte").Component<import("../anatomy/item.svelte").AccordionItemProps, {}, "">;
5
+ Heading: import("svelte").Component<import("../anatomy/heading.svelte").AccordionHeadingProps, {}, "">;
6
+ Trigger: import("svelte").Component<import("../anatomy/trigger.svelte").AccordionTriggerProps, {}, "">;
7
+ Indicator: import("svelte").Component<import("../anatomy/indicator.svelte").AccordionIndicatorProps, {}, "">;
8
+ Content: import("svelte").Component<import("../anatomy/content.svelte").AccordionContentProps, {}, "">;
9
+ };
@@ -0,0 +1,17 @@
1
+ import Root from '../anatomy/root.svelte';
2
+ import RootProvider from '../anatomy/root-provider.svelte';
3
+ import RootContext from '../anatomy/root-context.svelte';
4
+ import Item from '../anatomy/item.svelte';
5
+ import Heading from '../anatomy/heading.svelte';
6
+ import Trigger from '../anatomy/trigger.svelte';
7
+ import Indicator from '../anatomy/indicator.svelte';
8
+ import Content from '../anatomy/content.svelte';
9
+ export const Accordion = Object.assign(Root, {
10
+ Provider: RootProvider,
11
+ Context: RootContext,
12
+ Item: Item,
13
+ Heading: Heading,
14
+ Trigger: Trigger,
15
+ Indicator: Indicator,
16
+ Content: Content
17
+ });
@@ -0,0 +1,6 @@
1
+ import type { ItemProps } from '@zag-js/accordion';
2
+ export declare const AccordionItemContext: {
3
+ key: symbol;
4
+ consume(): () => ItemProps;
5
+ provide(value: () => ItemProps): () => ItemProps;
6
+ };
@@ -0,0 +1,2 @@
1
+ import { createContext } from '../../../internal/create-context';
2
+ export const AccordionItemContext = createContext();
@@ -0,0 +1,2 @@
1
+ import { createContext } from '../../../internal/create-context';
2
+ export const AccordionRootContext = createContext();
@@ -0,0 +1,7 @@
1
+ import { connect, machine } from '@zag-js/accordion';
2
+ import { useMachine, normalizeProps } from '@zag-js/svelte';
3
+ export function useAccordion(props) {
4
+ const service = useMachine(machine, props);
5
+ const accordion = $derived(connect(service, normalizeProps));
6
+ return () => accordion;
7
+ }
@@ -0,0 +1,32 @@
1
+ <script lang="ts" module>
2
+ import type { PropsWithElement } from '../../../internal/props-with-element';
3
+ import type { HTMLAttributes } from '../../../internal/html-attributes';
4
+
5
+ export interface AvatarFallbackProps extends PropsWithElement<'span'>, HTMLAttributes<'span'> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import { mergeProps } from '@zag-js/svelte';
10
+ import { classesAvatar } from '@skeletonlabs/skeleton-common';
11
+ import { AvatarRootContext } from '../modules/root-context';
12
+
13
+ const props: AvatarFallbackProps = $props();
14
+
15
+ const avatar = AvatarRootContext.consume();
16
+
17
+ const { element, children, ...rest } = $derived(props);
18
+
19
+ const attributes = $derived(
20
+ mergeProps(avatar().getFallbackProps(), rest, {
21
+ class: classesAvatar.fallback
22
+ })
23
+ );
24
+ </script>
25
+
26
+ {#if element}
27
+ {@render element(attributes)}
28
+ {:else}
29
+ <span {...attributes}>
30
+ {@render children?.()}
31
+ </span>
32
+ {/if}
@@ -0,0 +1,7 @@
1
+ import type { PropsWithElement } from '../../../internal/props-with-element';
2
+ import type { HTMLAttributes } from '../../../internal/html-attributes';
3
+ export interface AvatarFallbackProps extends PropsWithElement<'span'>, HTMLAttributes<'span'> {
4
+ }
5
+ declare const Fallback: import("svelte").Component<AvatarFallbackProps, {}, "">;
6
+ type Fallback = ReturnType<typeof Fallback>;
7
+ export default Fallback;
@@ -0,0 +1,30 @@
1
+ <script lang="ts" module>
2
+ import type { PropsWithElement } from '../../../internal/props-with-element';
3
+ import type { HTMLAttributes } from '../../../internal/html-attributes';
4
+
5
+ export interface AvatarImageProps extends PropsWithElement<'img'>, HTMLAttributes<'img'> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import { mergeProps } from '@zag-js/svelte';
10
+ import { classesAvatar } from '@skeletonlabs/skeleton-common';
11
+ import { AvatarRootContext } from '../modules/root-context';
12
+
13
+ const props: AvatarImageProps = $props();
14
+
15
+ const avatar = AvatarRootContext.consume();
16
+
17
+ const { element, ...rest } = $derived(props);
18
+
19
+ const attributes = $derived(
20
+ mergeProps(avatar().getImageProps(), rest, {
21
+ class: classesAvatar.image
22
+ })
23
+ );
24
+ </script>
25
+
26
+ {#if element}
27
+ {@render element(attributes)}
28
+ {:else}
29
+ <img {...attributes} />
30
+ {/if}
@@ -0,0 +1,7 @@
1
+ import type { PropsWithElement } from '../../../internal/props-with-element';
2
+ import type { HTMLAttributes } from '../../../internal/html-attributes';
3
+ export interface AvatarImageProps extends PropsWithElement<'img'>, HTMLAttributes<'img'> {
4
+ }
5
+ declare const Image: import("svelte").Component<AvatarImageProps, {}, "">;
6
+ type Image = ReturnType<typeof Image>;
7
+ export default Image;
@@ -0,0 +1,20 @@
1
+ <script lang="ts" module>
2
+ import type { Snippet } from 'svelte';
3
+ import type { useAvatar } from '../modules/use-avatar.svelte';
4
+
5
+ export interface AvatarRootContextProps {
6
+ children: Snippet<[ReturnType<typeof useAvatar>]>;
7
+ }
8
+ </script>
9
+
10
+ <script lang="ts">
11
+ import { AvatarRootContext } from '../modules/root-context';
12
+
13
+ const props: AvatarRootContextProps = $props();
14
+
15
+ const avatar = AvatarRootContext.consume();
16
+
17
+ const { children } = $derived(props);
18
+ </script>
19
+
20
+ {@render children(avatar)}
@@ -0,0 +1,8 @@
1
+ import type { Snippet } from 'svelte';
2
+ import type { useAvatar } from '../modules/use-avatar.svelte';
3
+ export interface AvatarRootContextProps {
4
+ children: Snippet<[ReturnType<typeof useAvatar>]>;
5
+ }
6
+ declare const RootContext: import("svelte").Component<AvatarRootContextProps, {}, "">;
7
+ type RootContext = ReturnType<typeof RootContext>;
8
+ export default RootContext;
@@ -0,0 +1,35 @@
1
+ <script lang="ts" module>
2
+ import type { HTMLAttributes } from '../../../internal/html-attributes';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element';
4
+ import type { useAvatar } from '../modules/use-avatar.svelte';
5
+
6
+ export interface AvatarRootProviderProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
7
+ value: ReturnType<typeof useAvatar>;
8
+ }
9
+ </script>
10
+
11
+ <script lang="ts">
12
+ import { mergeProps } from '@zag-js/svelte';
13
+ import { classesAvatar } from '@skeletonlabs/skeleton-common';
14
+ import { AvatarRootContext } from '../modules/root-context';
15
+
16
+ const props: AvatarRootProviderProps = $props();
17
+
18
+ const { element, children, value: api, ...rest } = $derived(props);
19
+
20
+ const attributes = $derived(
21
+ mergeProps(api().getRootProps(), rest, {
22
+ class: classesAvatar.root
23
+ })
24
+ );
25
+
26
+ AvatarRootContext.provide(() => api());
27
+ </script>
28
+
29
+ {#if element}
30
+ {@render element(attributes)}
31
+ {:else}
32
+ <div {...attributes}>
33
+ {@render children?.()}
34
+ </div>
35
+ {/if}
@@ -0,0 +1,9 @@
1
+ import type { HTMLAttributes } from '../../../internal/html-attributes';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element';
3
+ import type { useAvatar } from '../modules/use-avatar.svelte';
4
+ export interface AvatarRootProviderProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
5
+ value: ReturnType<typeof useAvatar>;
6
+ }
7
+ declare const RootProvider: import("svelte").Component<AvatarRootProviderProps, {}, "">;
8
+ type RootProvider = ReturnType<typeof RootProvider>;
9
+ export default RootProvider;