@skeletonlabs/skeleton-svelte 2.0.0-next.1 → 2.0.0-next.3

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 (134) hide show
  1. package/dist/components/accordion/anatomy/content.svelte +32 -0
  2. package/dist/components/accordion/anatomy/content.svelte.d.ts +7 -0
  3. package/dist/components/accordion/anatomy/heading.svelte +33 -0
  4. package/dist/components/accordion/anatomy/heading.svelte.d.ts +13 -0
  5. package/dist/components/accordion/anatomy/indicator.svelte +32 -0
  6. package/dist/components/accordion/anatomy/indicator.svelte.d.ts +7 -0
  7. package/dist/components/accordion/anatomy/item-context.svelte +18 -0
  8. package/dist/components/accordion/anatomy/item-context.svelte.d.ts +8 -0
  9. package/dist/components/accordion/anatomy/item.svelte +41 -0
  10. package/dist/components/accordion/anatomy/item.svelte.d.ts +8 -0
  11. package/dist/components/accordion/anatomy/root-context.svelte +18 -0
  12. package/dist/components/accordion/anatomy/root-context.svelte.d.ts +8 -0
  13. package/dist/components/accordion/anatomy/root.svelte +44 -0
  14. package/dist/components/accordion/anatomy/root.svelte.d.ts +8 -0
  15. package/dist/components/accordion/anatomy/trigger.svelte +32 -0
  16. package/dist/components/accordion/anatomy/trigger.svelte.d.ts +7 -0
  17. package/dist/components/accordion/index.d.ts +11 -2
  18. package/dist/components/accordion/index.js +1 -2
  19. package/dist/components/accordion/modules/anatomy.d.ts +8 -7
  20. package/dist/components/accordion/modules/anatomy.js +16 -13
  21. package/dist/components/accordion/modules/item-context.d.ts +10 -0
  22. package/dist/components/accordion/modules/item-context.js +2 -0
  23. package/dist/components/accordion/modules/root-context.d.ts +9 -0
  24. package/dist/components/accordion/modules/root-context.js +2 -0
  25. package/dist/components/avatar/anatomy/fallback.svelte +28 -0
  26. package/dist/components/avatar/anatomy/fallback.svelte.d.ts +7 -0
  27. package/dist/components/avatar/anatomy/image.svelte +26 -0
  28. package/dist/components/avatar/anatomy/image.svelte.d.ts +7 -0
  29. package/dist/components/avatar/anatomy/root-context.svelte +18 -0
  30. package/dist/components/avatar/anatomy/root-context.svelte.d.ts +8 -0
  31. package/dist/components/avatar/anatomy/root.svelte +41 -0
  32. package/dist/components/avatar/anatomy/root.svelte.d.ts +8 -0
  33. package/dist/components/avatar/index.d.ts +6 -2
  34. package/dist/components/avatar/index.js +1 -2
  35. package/dist/components/avatar/modules/anatomy.d.ts +4 -4
  36. package/dist/components/avatar/modules/anatomy.js +8 -7
  37. package/dist/components/avatar/modules/root-context.d.ts +9 -0
  38. package/dist/components/avatar/modules/root-context.js +2 -0
  39. package/dist/components/progress-linear/anatomy/label.svelte +36 -0
  40. package/dist/components/progress-linear/anatomy/label.svelte.d.ts +7 -0
  41. package/dist/components/progress-linear/anatomy/range.svelte +36 -0
  42. package/dist/components/progress-linear/anatomy/range.svelte.d.ts +7 -0
  43. package/dist/components/progress-linear/anatomy/root-context.svelte +18 -0
  44. package/dist/components/progress-linear/anatomy/root-context.svelte.d.ts +8 -0
  45. package/dist/components/progress-linear/anatomy/root.svelte +53 -0
  46. package/dist/components/progress-linear/anatomy/root.svelte.d.ts +8 -0
  47. package/dist/components/progress-linear/anatomy/track.svelte +28 -0
  48. package/dist/components/progress-linear/anatomy/track.svelte.d.ts +7 -0
  49. package/dist/components/progress-linear/index.d.ts +7 -0
  50. package/dist/components/progress-linear/index.js +1 -0
  51. package/dist/components/progress-linear/modules/anatomy.d.ts +6 -0
  52. package/dist/components/progress-linear/modules/anatomy.js +11 -0
  53. package/dist/components/progress-linear/modules/root-context.d.ts +9 -0
  54. package/dist/components/progress-linear/modules/root-context.js +2 -0
  55. package/dist/components/rating-group/anatomy/control.svelte +26 -0
  56. package/dist/components/rating-group/anatomy/control.svelte.d.ts +7 -0
  57. package/dist/components/rating-group/anatomy/hidden-input.svelte +28 -0
  58. package/dist/components/rating-group/anatomy/hidden-input.svelte.d.ts +7 -0
  59. package/dist/components/rating-group/anatomy/item-context.svelte +18 -0
  60. package/dist/components/rating-group/anatomy/item-context.svelte.d.ts +8 -0
  61. package/dist/components/rating-group/anatomy/item.svelte +86 -0
  62. package/dist/components/rating-group/anatomy/item.svelte.d.ts +27 -0
  63. package/dist/components/rating-group/anatomy/label.svelte +26 -0
  64. package/dist/components/rating-group/anatomy/label.svelte.d.ts +7 -0
  65. package/dist/components/rating-group/anatomy/root-context.svelte +18 -0
  66. package/dist/components/rating-group/anatomy/root-context.svelte.d.ts +8 -0
  67. package/dist/components/rating-group/anatomy/root.svelte +47 -0
  68. package/dist/components/rating-group/anatomy/root.svelte.d.ts +8 -0
  69. package/dist/components/rating-group/index.d.ts +10 -0
  70. package/dist/components/rating-group/index.js +1 -0
  71. package/dist/components/rating-group/modules/anatomy.d.ts +8 -0
  72. package/dist/components/rating-group/modules/anatomy.js +15 -0
  73. package/dist/components/rating-group/modules/item-context.d.ts +9 -0
  74. package/dist/components/rating-group/modules/item-context.js +2 -0
  75. package/dist/components/rating-group/modules/root-context.d.ts +9 -0
  76. package/dist/components/rating-group/modules/root-context.js +2 -0
  77. package/dist/components/tabs/anatomy/content.svelte +31 -0
  78. package/dist/components/tabs/anatomy/content.svelte.d.ts +8 -0
  79. package/dist/components/tabs/anatomy/indicator.svelte +26 -0
  80. package/dist/components/tabs/anatomy/indicator.svelte.d.ts +7 -0
  81. package/dist/components/tabs/anatomy/list.svelte +28 -0
  82. package/dist/components/tabs/anatomy/list.svelte.d.ts +7 -0
  83. package/dist/components/tabs/anatomy/root-context.svelte +18 -0
  84. package/dist/components/tabs/anatomy/root-context.svelte.d.ts +8 -0
  85. package/dist/components/tabs/anatomy/root.svelte +44 -0
  86. package/dist/components/tabs/anatomy/root.svelte.d.ts +8 -0
  87. package/dist/components/tabs/anatomy/trigger.svelte +31 -0
  88. package/dist/components/tabs/anatomy/trigger.svelte.d.ts +8 -0
  89. package/dist/components/tabs/index.d.ts +1 -0
  90. package/dist/components/tabs/index.js +1 -0
  91. package/dist/components/tabs/modules/anatomy.d.ts +7 -0
  92. package/dist/components/tabs/modules/anatomy.js +13 -0
  93. package/dist/components/tabs/modules/root-context.d.ts +9 -0
  94. package/dist/components/tabs/modules/root-context.js +2 -0
  95. package/dist/index.d.ts +5 -2
  96. package/dist/index.js +5 -2
  97. package/dist/internal/components/star-empty.svelte +12 -0
  98. package/dist/internal/components/star-empty.svelte.d.ts +26 -0
  99. package/dist/internal/components/star-full.svelte +12 -0
  100. package/dist/internal/components/star-full.svelte.d.ts +26 -0
  101. package/dist/internal/components/star-half.svelte +19 -0
  102. package/dist/internal/components/star-half.svelte.d.ts +26 -0
  103. package/dist/internal/create-context.d.ts +5 -6
  104. package/dist/internal/create-context.js +10 -9
  105. package/dist/internal/props-with-element.d.ts +3 -0
  106. package/package.json +3 -4
  107. package/dist/components/accordion/anatomy/accordion-content.svelte +0 -28
  108. package/dist/components/accordion/anatomy/accordion-content.svelte.d.ts +0 -4
  109. package/dist/components/accordion/anatomy/accordion-heading.svelte +0 -25
  110. package/dist/components/accordion/anatomy/accordion-heading.svelte.d.ts +0 -4
  111. package/dist/components/accordion/anatomy/accordion-indicator.svelte +0 -28
  112. package/dist/components/accordion/anatomy/accordion-indicator.svelte.d.ts +0 -4
  113. package/dist/components/accordion/anatomy/accordion-item.svelte +0 -34
  114. package/dist/components/accordion/anatomy/accordion-item.svelte.d.ts +0 -4
  115. package/dist/components/accordion/anatomy/accordion-root.svelte +0 -39
  116. package/dist/components/accordion/anatomy/accordion-root.svelte.d.ts +0 -4
  117. package/dist/components/accordion/anatomy/accordion-trigger.svelte +0 -28
  118. package/dist/components/accordion/anatomy/accordion-trigger.svelte.d.ts +0 -4
  119. package/dist/components/accordion/modules/context.d.ts +0 -12
  120. package/dist/components/accordion/modules/context.js +0 -4
  121. package/dist/components/accordion/modules/types.d.ts +0 -29
  122. package/dist/components/accordion/modules/types.js +0 -1
  123. package/dist/components/avatar/anatomy/avatar-fallback.svelte +0 -27
  124. package/dist/components/avatar/anatomy/avatar-fallback.svelte.d.ts +0 -4
  125. package/dist/components/avatar/anatomy/avatar-image.svelte +0 -25
  126. package/dist/components/avatar/anatomy/avatar-image.svelte.d.ts +0 -4
  127. package/dist/components/avatar/anatomy/avatar-root.svelte +0 -39
  128. package/dist/components/avatar/anatomy/avatar-root.svelte.d.ts +0 -4
  129. package/dist/components/avatar/modules/context.d.ts +0 -7
  130. package/dist/components/avatar/modules/context.js +0 -3
  131. package/dist/components/avatar/modules/types.d.ts +0 -14
  132. package/dist/components/avatar/modules/types.js +0 -1
  133. package/dist/internal/create-context-new.d.ts +0 -5
  134. package/dist/internal/create-context-new.js +0 -13
@@ -0,0 +1,32 @@
1
+ <script lang="ts" module>
2
+ import type { HTMLAttributes } from 'svelte/elements';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element';
4
+
5
+ export interface AccordionContentProps extends PropsWithElement, HTMLAttributes<HTMLDivElement> {}
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 rootContext = AccordionRootContext.consume();
17
+ const itemContext = AccordionItemContext.consume();
18
+
19
+ const { element, children, ...restAttributes } = $derived(props);
20
+
21
+ const attributes = $derived(
22
+ mergeProps(rootContext.api.getItemContentProps(itemContext.itemProps), { class: classesAccordion.content }, restAttributes)
23
+ );
24
+ </script>
25
+
26
+ {#if element}
27
+ {@render element({ attributes })}
28
+ {:else}
29
+ <div {...attributes}>
30
+ {@render children?.()}
31
+ </div>
32
+ {/if}
@@ -0,0 +1,7 @@
1
+ import type { HTMLAttributes } from 'svelte/elements';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element';
3
+ export interface AccordionContentProps extends PropsWithElement, HTMLAttributes<HTMLDivElement> {
4
+ }
5
+ declare const Content: import("svelte").Component<AccordionContentProps, {}, "">;
6
+ type Content = ReturnType<typeof Content>;
7
+ export default Content;
@@ -0,0 +1,33 @@
1
+ <script lang="ts" module>
2
+ import type { HTMLAttributes } from 'svelte/elements';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element';
4
+
5
+ export interface AccordionHeadingProps extends PropsWithElement, HTMLAttributes<HTMLHeadingElement> {
6
+ /**
7
+ * The level of the heading.
8
+ *
9
+ * @default 3
10
+ */
11
+ level?: 1 | 2 | 3 | 4 | 5 | 6;
12
+ }
13
+ </script>
14
+
15
+ <script lang="ts">
16
+ import { mergeProps } from '@zag-js/svelte';
17
+ import { classesAccordion } from '@skeletonlabs/skeleton-common';
18
+
19
+ const props: AccordionHeadingProps = $props();
20
+ const { level = 3, element, children, ...restAttributes } = $derived(props);
21
+
22
+ const tag = $derived(`h${level}`);
23
+
24
+ const attributes = $derived(mergeProps({ class: classesAccordion.heading }, restAttributes));
25
+ </script>
26
+
27
+ {#if element}
28
+ {@render element({ attributes })}
29
+ {:else}
30
+ <svelte:element this={tag} {...attributes}>
31
+ {@render children?.()}
32
+ </svelte:element>
33
+ {/if}
@@ -0,0 +1,13 @@
1
+ import type { HTMLAttributes } from 'svelte/elements';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element';
3
+ export interface AccordionHeadingProps extends PropsWithElement, HTMLAttributes<HTMLHeadingElement> {
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,32 @@
1
+ <script lang="ts" module>
2
+ import type { PropsWithElement } from '../../../internal/props-with-element';
3
+ import type { HTMLAttributes } from 'svelte/elements';
4
+
5
+ export interface AccordionIndicatorProps extends PropsWithElement, HTMLAttributes<HTMLDivElement> {}
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 rootContext = AccordionRootContext.consume();
17
+ const itemContext = AccordionItemContext.consume();
18
+
19
+ const { element, children, ...restAttributes } = $derived(props);
20
+
21
+ const attributes = $derived(
22
+ mergeProps(rootContext.api.getItemIndicatorProps(itemContext.itemProps), { class: classesAccordion.indicator }, restAttributes)
23
+ );
24
+ </script>
25
+
26
+ {#if element}
27
+ {@render element({ attributes })}
28
+ {:else}
29
+ <div {...attributes}>
30
+ {@render children?.()}
31
+ </div>
32
+ {/if}
@@ -0,0 +1,7 @@
1
+ import type { PropsWithElement } from '../../../internal/props-with-element';
2
+ import type { HTMLAttributes } from 'svelte/elements';
3
+ export interface AccordionIndicatorProps extends PropsWithElement, HTMLAttributes<HTMLDivElement> {
4
+ }
5
+ declare const Indicator: import("svelte").Component<AccordionIndicatorProps, {}, "">;
6
+ type Indicator = ReturnType<typeof Indicator>;
7
+ export default Indicator;
@@ -0,0 +1,18 @@
1
+ <script lang="ts" module>
2
+ import type { Snippet } from 'svelte';
3
+ import type { AccordionItemContextType } from '../modules/item-context';
4
+
5
+ export interface AccordionItemContextProps {
6
+ children: Snippet<[AccordionItemContextType]>;
7
+ }
8
+ </script>
9
+
10
+ <script lang="ts">
11
+ import { AccordionItemContext } from '../modules/item-context';
12
+
13
+ const props: AccordionItemContextProps = $props();
14
+
15
+ const itemContext = AccordionItemContext.consume();
16
+ </script>
17
+
18
+ {@render props.children(itemContext)}
@@ -0,0 +1,8 @@
1
+ import type { Snippet } from 'svelte';
2
+ import type { AccordionItemContextType } from '../modules/item-context';
3
+ export interface AccordionItemContextProps {
4
+ children: Snippet<[AccordionItemContextType]>;
5
+ }
6
+ declare const ItemContext: import("svelte").Component<AccordionItemContextProps, {}, "">;
7
+ type ItemContext = ReturnType<typeof ItemContext>;
8
+ export default ItemContext;
@@ -0,0 +1,41 @@
1
+ <script lang="ts" module>
2
+ import type { HTMLAttributes } from 'svelte/elements';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element';
4
+ import type { ItemProps } from '@zag-js/accordion';
5
+
6
+ export interface AccordionItemProps extends PropsWithElement, ItemProps, HTMLAttributes<HTMLDivElement> {}
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 rootContext = AccordionRootContext.consume();
19
+
20
+ const [itemProps, componentProps] = $derived(splitItemProps(props));
21
+ const { element, children, ...restAttributes } = $derived(componentProps);
22
+
23
+ const attributes = $derived(mergeProps(rootContext.api.getItemProps(itemProps), { class: classesAccordion.item }, restAttributes));
24
+
25
+ AccordionItemContext.provide({
26
+ get itemProps() {
27
+ return itemProps;
28
+ },
29
+ get itemState() {
30
+ return rootContext.api.getItemState(itemProps);
31
+ }
32
+ });
33
+ </script>
34
+
35
+ {#if element}
36
+ {@render element({ attributes })}
37
+ {:else}
38
+ <div {...attributes}>
39
+ {@render children?.()}
40
+ </div>
41
+ {/if}
@@ -0,0 +1,8 @@
1
+ import type { HTMLAttributes } from 'svelte/elements';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element';
3
+ import type { ItemProps } from '@zag-js/accordion';
4
+ export interface AccordionItemProps extends PropsWithElement, ItemProps, HTMLAttributes<HTMLDivElement> {
5
+ }
6
+ declare const Item: import("svelte").Component<AccordionItemProps, {}, "">;
7
+ type Item = ReturnType<typeof Item>;
8
+ export default Item;
@@ -0,0 +1,18 @@
1
+ <script lang="ts" module>
2
+ import type { Snippet } from 'svelte';
3
+ import type { AccordionRootContextType } from '../modules/root-context';
4
+
5
+ export interface AccordionRootContextProps {
6
+ children: Snippet<[AccordionRootContextType]>;
7
+ }
8
+ </script>
9
+
10
+ <script lang="ts">
11
+ import { AccordionRootContext } from '../modules/root-context';
12
+
13
+ const props: AccordionRootContextProps = $props();
14
+
15
+ const rootContext = AccordionRootContext.consume();
16
+ </script>
17
+
18
+ {@render props.children(rootContext)}
@@ -0,0 +1,8 @@
1
+ import type { Snippet } from 'svelte';
2
+ import type { AccordionRootContextType } from '../modules/root-context';
3
+ export interface AccordionRootContextProps {
4
+ children: Snippet<[AccordionRootContextType]>;
5
+ }
6
+ declare const RootContext: import("svelte").Component<AccordionRootContextProps, {}, "">;
7
+ type RootContext = ReturnType<typeof RootContext>;
8
+ export default RootContext;
@@ -0,0 +1,44 @@
1
+ <script lang="ts" module>
2
+ import type { Props } from '@zag-js/accordion';
3
+ import type { HTMLAttributes } from 'svelte/elements';
4
+ import type { PropsWithElement } from '../../../internal/props-with-element';
5
+
6
+ export interface AccordionRootProps
7
+ extends PropsWithElement,
8
+ Omit<Props, 'id'>,
9
+ Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'defaultValue' | 'dir'> {}
10
+ </script>
11
+
12
+ <script lang="ts">
13
+ import { mergeProps, normalizeProps, useMachine } from '@zag-js/svelte';
14
+ import { machine, connect, splitProps } from '@zag-js/accordion';
15
+ import { classesAccordion } from '@skeletonlabs/skeleton-common';
16
+ import { AccordionRootContext } from '../modules/root-context';
17
+
18
+ const props: AccordionRootProps = $props();
19
+ const [machineProps, componentProps] = $derived(splitProps(props));
20
+ const { element, children, ...restAttributes } = $derived(componentProps);
21
+
22
+ const id = $props.id();
23
+ const service = useMachine(machine, () => ({
24
+ id: id,
25
+ ...machineProps
26
+ }));
27
+ const api = $derived(connect(service, normalizeProps));
28
+
29
+ const attributes = $derived(mergeProps(api.getRootProps(), { class: classesAccordion.root }, restAttributes));
30
+
31
+ AccordionRootContext.provide({
32
+ get api() {
33
+ return api;
34
+ }
35
+ });
36
+ </script>
37
+
38
+ {#if element}
39
+ {@render element({ attributes })}
40
+ {:else}
41
+ <div {...attributes}>
42
+ {@render children?.()}
43
+ </div>
44
+ {/if}
@@ -0,0 +1,8 @@
1
+ import type { Props } from '@zag-js/accordion';
2
+ import type { HTMLAttributes } from 'svelte/elements';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element';
4
+ export interface AccordionRootProps extends PropsWithElement, Omit<Props, 'id'>, Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'defaultValue' | 'dir'> {
5
+ }
6
+ declare const Root: import("svelte").Component<AccordionRootProps, {}, "">;
7
+ type Root = ReturnType<typeof Root>;
8
+ export default Root;
@@ -0,0 +1,32 @@
1
+ <script lang="ts" module>
2
+ import type { HTMLButtonAttributes } from 'svelte/elements';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element';
4
+
5
+ export interface AccordionTriggerProps extends PropsWithElement, HTMLButtonAttributes {}
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 rootContext = AccordionRootContext.consume();
17
+ const itemContext = AccordionItemContext.consume();
18
+
19
+ const { element, children, ...restAttributes } = $derived(props);
20
+
21
+ const attributes = $derived(
22
+ mergeProps(rootContext.api.getItemTriggerProps(itemContext.itemProps), { class: classesAccordion.trigger }, restAttributes)
23
+ );
24
+ </script>
25
+
26
+ {#if element}
27
+ {@render element({ attributes })}
28
+ {:else}
29
+ <button {...attributes}>
30
+ {@render children?.()}
31
+ </button>
32
+ {/if}
@@ -0,0 +1,7 @@
1
+ import type { HTMLButtonAttributes } from 'svelte/elements';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element';
3
+ export interface AccordionTriggerProps extends PropsWithElement, HTMLButtonAttributes {
4
+ }
5
+ declare const Trigger: import("svelte").Component<AccordionTriggerProps, {}, "">;
6
+ type Trigger = ReturnType<typeof Trigger>;
7
+ export default Trigger;
@@ -1,2 +1,11 @@
1
- export * from './modules/types.js';
2
- export * from './modules/anatomy.js';
1
+ export { Accordion } from './modules/anatomy';
2
+ export type { AccordionRootProps } from './anatomy/root.svelte';
3
+ export type { AccordionRootContextProps } from './anatomy/root-context.svelte';
4
+ export type { AccordionItemProps } from './anatomy/item.svelte';
5
+ export type { AccordionItemContextProps } from './anatomy/item-context.svelte';
6
+ export type { AccordionHeadingProps } from './anatomy/heading.svelte';
7
+ export type { AccordionTriggerProps } from './anatomy/trigger.svelte';
8
+ export type { AccordionIndicatorProps } from './anatomy/indicator.svelte';
9
+ export type { AccordionContentProps } from './anatomy/content.svelte';
10
+ export type { AccordionRootContextType as AccordionRootContext } from './modules/root-context';
11
+ export type { AccordionItemContextType as AccordionItemContext } from './modules/item-context';
@@ -1,2 +1 @@
1
- export * from './modules/types.js';
2
- export * from './modules/anatomy.js';
1
+ export { Accordion } from './modules/anatomy';
@@ -1,8 +1,9 @@
1
- declare const Accordion: import("svelte").Component<import("./types").AccordionRootProps, {}, ""> & {
2
- Item: import("svelte").Component<import("./types").AccordionItemProps, {}, "">;
3
- Heading: import("svelte").Component<import("./types").AccordionHeadingProps, {}, "">;
4
- Trigger: import("svelte").Component<import("./types").AccordionTriggerProps, {}, "">;
5
- Indicator: import("svelte").Component<import("./types").AccordionIndicatorProps, {}, "">;
6
- Content: import("svelte").Component<import("./types").AccordionContentProps, {}, "">;
1
+ export declare const Accordion: import("svelte").Component<import("../anatomy/root.svelte").AccordionRootProps, {}, ""> & {
2
+ Context: import("svelte").Component<import("../anatomy/root-context.svelte").AccordionRootContextProps, {}, "">;
3
+ Item: import("svelte").Component<import("../anatomy/item.svelte").AccordionItemProps, {}, "">;
4
+ ItemContext: import("svelte").Component<import("../anatomy/item-context.svelte").AccordionItemContextProps, {}, "">;
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, {}, "">;
7
9
  };
8
- export { Accordion };
@@ -1,14 +1,17 @@
1
- import AccordionRoot from '../anatomy/accordion-root.svelte';
2
- import AccordionItem from '../anatomy/accordion-item.svelte';
3
- import AccordionHeading from '../anatomy/accordion-heading.svelte';
4
- import AccordionTrigger from '../anatomy/accordion-trigger.svelte';
5
- import AccordionIndicator from '../anatomy/accordion-indicator.svelte';
6
- import AccordionContent from '../anatomy/accordion-content.svelte';
7
- const Accordion = Object.assign(AccordionRoot, {
8
- Item: AccordionItem,
9
- Heading: AccordionHeading,
10
- Trigger: AccordionTrigger,
11
- Indicator: AccordionIndicator,
12
- Content: AccordionContent
1
+ import Root from '../anatomy/root.svelte';
2
+ import RootContext from '../anatomy/root-context.svelte';
3
+ import Item from '../anatomy/item.svelte';
4
+ import ItemContext from '../anatomy/item-context.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
+ Context: RootContext,
11
+ Item: Item,
12
+ ItemContext: ItemContext,
13
+ Heading: Heading,
14
+ Trigger: Trigger,
15
+ Indicator: Indicator,
16
+ Content: Content
13
17
  });
14
- export { Accordion };
@@ -0,0 +1,10 @@
1
+ import type { ItemProps, ItemState } from '@zag-js/accordion';
2
+ export interface AccordionItemContextType {
3
+ itemProps: ItemProps;
4
+ itemState: ItemState;
5
+ }
6
+ export declare const AccordionItemContext: {
7
+ key: symbol;
8
+ consume(): AccordionItemContextType;
9
+ provide(value: AccordionItemContextType): AccordionItemContextType;
10
+ };
@@ -0,0 +1,2 @@
1
+ import { createContext } from '../../../internal/create-context';
2
+ export const AccordionItemContext = createContext();
@@ -0,0 +1,9 @@
1
+ import type { Api } from '@zag-js/accordion';
2
+ export interface AccordionRootContextType {
3
+ api: Api;
4
+ }
5
+ export declare const AccordionRootContext: {
6
+ key: symbol;
7
+ consume(): AccordionRootContextType;
8
+ provide(value: AccordionRootContextType): AccordionRootContextType;
9
+ };
@@ -0,0 +1,2 @@
1
+ import { createContext } from '../../../internal/create-context';
2
+ export const AccordionRootContext = createContext();
@@ -0,0 +1,28 @@
1
+ <script lang="ts" module>
2
+ import type { PropsWithElement } from '../../../internal/props-with-element';
3
+ import type { HTMLAttributes } from 'svelte/elements';
4
+
5
+ export interface AvatarFallbackProps extends PropsWithElement, HTMLAttributes<HTMLSpanElement> {}
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 rootContext = AvatarRootContext.consume();
16
+
17
+ const { element, children, ...restAttributes } = $derived(props);
18
+
19
+ const attributes = $derived(mergeProps(rootContext.api.getFallbackProps(), { class: classesAvatar.fallback }, restAttributes));
20
+ </script>
21
+
22
+ {#if element}
23
+ {@render element({ attributes })}
24
+ {:else}
25
+ <span {...attributes}>
26
+ {@render children?.()}
27
+ </span>
28
+ {/if}
@@ -0,0 +1,7 @@
1
+ import type { PropsWithElement } from '../../../internal/props-with-element';
2
+ import type { HTMLAttributes } from 'svelte/elements';
3
+ export interface AvatarFallbackProps extends PropsWithElement, HTMLAttributes<HTMLSpanElement> {
4
+ }
5
+ declare const Fallback: import("svelte").Component<AvatarFallbackProps, {}, "">;
6
+ type Fallback = ReturnType<typeof Fallback>;
7
+ export default Fallback;
@@ -0,0 +1,26 @@
1
+ <script lang="ts" module>
2
+ import type { PropsWithElement } from '../../../internal/props-with-element';
3
+ import type { HTMLImgAttributes } from 'svelte/elements';
4
+
5
+ export interface AvatarImageProps extends PropsWithElement, HTMLImgAttributes {}
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 rootContext = AvatarRootContext.consume();
16
+
17
+ const { element, ...restAttributes } = $derived(props);
18
+
19
+ const attributes = $derived(mergeProps(rootContext.api.getImageProps(), { class: classesAvatar.image }, restAttributes));
20
+ </script>
21
+
22
+ {#if element}
23
+ {@render element({ attributes })}
24
+ {:else}
25
+ <img {...attributes} />
26
+ {/if}
@@ -0,0 +1,7 @@
1
+ import type { PropsWithElement } from '../../../internal/props-with-element';
2
+ import type { HTMLImgAttributes } from 'svelte/elements';
3
+ export interface AvatarImageProps extends PropsWithElement, HTMLImgAttributes {
4
+ }
5
+ declare const Image: import("svelte").Component<AvatarImageProps, {}, "">;
6
+ type Image = ReturnType<typeof Image>;
7
+ export default Image;
@@ -0,0 +1,18 @@
1
+ <script lang="ts" module>
2
+ import type { Snippet } from 'svelte';
3
+ import type { AvatarRootContextType } from '../modules/root-context';
4
+
5
+ export interface AvatarRootContextProps {
6
+ children: Snippet<[AvatarRootContextType]>;
7
+ }
8
+ </script>
9
+
10
+ <script lang="ts">
11
+ import { AvatarRootContext } from '../modules/root-context';
12
+
13
+ const props: AvatarRootContextProps = $props();
14
+
15
+ const rootContext = AvatarRootContext.consume();
16
+ </script>
17
+
18
+ {@render props.children(rootContext)}
@@ -0,0 +1,8 @@
1
+ import type { Snippet } from 'svelte';
2
+ import type { AvatarRootContextType } from '../modules/root-context';
3
+ export interface AvatarRootContextProps {
4
+ children: Snippet<[AvatarRootContextType]>;
5
+ }
6
+ declare const RootContext: import("svelte").Component<AvatarRootContextProps, {}, "">;
7
+ type RootContext = ReturnType<typeof RootContext>;
8
+ export default RootContext;
@@ -0,0 +1,41 @@
1
+ <script lang="ts" module>
2
+ import type { HTMLAttributes } from 'svelte/elements';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element';
4
+ import type { Props } from '@zag-js/avatar';
5
+
6
+ export interface AvatarRootProps extends PropsWithElement, Omit<Props, 'id'>, Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'dir'> {}
7
+ </script>
8
+
9
+ <script lang="ts">
10
+ import { useMachine, normalizeProps, mergeProps } from '@zag-js/svelte';
11
+ import { classesAvatar } from '@skeletonlabs/skeleton-common';
12
+ import { AvatarRootContext } from '../modules/root-context';
13
+ import { connect, machine, splitProps } from '@zag-js/avatar';
14
+
15
+ const props: AvatarRootProps = $props();
16
+ const [machineProps, componentProps] = $derived(splitProps(props));
17
+ const { element, children, ...restAttributes } = $derived(componentProps);
18
+
19
+ const id = $props.id();
20
+ const service = useMachine(machine, () => ({
21
+ id: id,
22
+ ...machineProps
23
+ }));
24
+ const api = $derived(connect(service, normalizeProps));
25
+
26
+ const attributes = $derived(mergeProps(api.getRootProps(), { class: classesAvatar.root }, restAttributes));
27
+
28
+ AvatarRootContext.provide({
29
+ get api() {
30
+ return api;
31
+ }
32
+ });
33
+ </script>
34
+
35
+ {#if element}
36
+ {@render element({ attributes: restAttributes })}
37
+ {:else}
38
+ <div {...attributes}>
39
+ {@render children?.()}
40
+ </div>
41
+ {/if}
@@ -0,0 +1,8 @@
1
+ import type { HTMLAttributes } from 'svelte/elements';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element';
3
+ import type { Props } from '@zag-js/avatar';
4
+ export interface AvatarRootProps extends PropsWithElement, Omit<Props, 'id'>, Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'dir'> {
5
+ }
6
+ declare const Root: import("svelte").Component<AvatarRootProps, {}, "">;
7
+ type Root = ReturnType<typeof Root>;
8
+ export default Root;
@@ -1,2 +1,6 @@
1
- export * from './modules/types.js';
2
- export * from './modules/anatomy.js';
1
+ export { Avatar } from './modules/anatomy';
2
+ export type { AvatarRootProps } from './anatomy/root.svelte';
3
+ export type { AvatarRootContextProps } from './anatomy/root-context.svelte';
4
+ export type { AvatarImageProps } from './anatomy/image.svelte';
5
+ export type { AvatarFallbackProps } from './anatomy/fallback.svelte';
6
+ export type { AvatarRootContextType as AvatarRootContext } from './modules/root-context';
@@ -1,2 +1 @@
1
- export * from './modules/types.js';
2
- export * from './modules/anatomy.js';
1
+ export { Avatar } from './modules/anatomy';
@@ -1,5 +1,5 @@
1
- declare const Avatar: import("svelte").Component<import("./types").AvatarRootProps, {}, ""> & {
2
- Image: import("svelte").Component<import("./types").AvatarImageProps, {}, "">;
3
- Fallback: import("svelte").Component<import("./types").AvatarFallbackProps, {}, "">;
1
+ export declare const Avatar: import("svelte").Component<import("../anatomy/root.svelte").AvatarRootProps, {}, ""> & {
2
+ Context: import("svelte").Component<import("../anatomy/root-context.svelte").AvatarRootContextProps, {}, "">;
3
+ Image: import("svelte").Component<import("../anatomy/image.svelte").AvatarImageProps, {}, "">;
4
+ Fallback: import("svelte").Component<import("../anatomy/fallback.svelte").AvatarFallbackProps, {}, "">;
4
5
  };
5
- export { Avatar };