@skeletonlabs/skeleton-svelte 1.4.0 → 1.5.0

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 (54) hide show
  1. package/dist/components/Accordion/context.js +1 -2
  2. package/dist/components/Accordion/index.js +1 -1
  3. package/dist/components/Navigation/context.js +2 -3
  4. package/dist/components/Navigation/index.js +1 -1
  5. package/dist/components/Segment/context.js +2 -3
  6. package/dist/components/Segment/index.js +1 -1
  7. package/dist/components/Tabs/context.js +2 -3
  8. package/dist/components/Tabs/index.js +1 -1
  9. package/dist/components/Toast/create-toaster.js +1 -2
  10. package/dist/composed/accordion/anatomy/accordion-content.svelte +27 -0
  11. package/dist/composed/accordion/anatomy/accordion-content.svelte.d.ts +4 -0
  12. package/dist/composed/accordion/anatomy/accordion-heading.svelte +15 -0
  13. package/dist/composed/accordion/anatomy/accordion-heading.svelte.d.ts +4 -0
  14. package/dist/composed/accordion/anatomy/accordion-indicator.svelte +19 -0
  15. package/dist/composed/accordion/anatomy/accordion-indicator.svelte.d.ts +4 -0
  16. package/dist/composed/accordion/anatomy/accordion-item.svelte +33 -0
  17. package/dist/composed/accordion/anatomy/accordion-item.svelte.d.ts +4 -0
  18. package/dist/composed/accordion/anatomy/accordion-root.svelte +38 -0
  19. package/dist/composed/accordion/anatomy/accordion-root.svelte.d.ts +4 -0
  20. package/dist/composed/accordion/anatomy/accordion-trigger.svelte +28 -0
  21. package/dist/composed/accordion/anatomy/accordion-trigger.svelte.d.ts +4 -0
  22. package/dist/composed/accordion/index.d.ts +2 -0
  23. package/dist/composed/accordion/index.js +2 -0
  24. package/dist/composed/accordion/modules/anatomy.d.ts +8 -0
  25. package/dist/composed/accordion/modules/anatomy.js +14 -0
  26. package/dist/composed/accordion/modules/context.d.ts +12 -0
  27. package/dist/composed/accordion/modules/context.js +4 -0
  28. package/dist/composed/accordion/modules/types.d.ts +29 -0
  29. package/dist/composed/accordion/modules/types.js +1 -0
  30. package/dist/composed/avatar/anatomy/avatar-fallback.svelte +26 -0
  31. package/dist/composed/avatar/anatomy/avatar-fallback.svelte.d.ts +4 -0
  32. package/dist/composed/avatar/anatomy/avatar-image.svelte +24 -0
  33. package/dist/composed/avatar/anatomy/avatar-image.svelte.d.ts +4 -0
  34. package/dist/composed/avatar/anatomy/avatar-root.svelte +38 -0
  35. package/dist/composed/avatar/anatomy/avatar-root.svelte.d.ts +4 -0
  36. package/dist/composed/avatar/index.d.ts +2 -0
  37. package/dist/composed/avatar/index.js +2 -0
  38. package/dist/composed/avatar/modules/anatomy.d.ts +5 -0
  39. package/dist/composed/avatar/modules/anatomy.js +8 -0
  40. package/dist/composed/avatar/modules/context.d.ts +7 -0
  41. package/dist/composed/avatar/modules/context.js +3 -0
  42. package/dist/composed/avatar/modules/types.d.ts +14 -0
  43. package/dist/composed/avatar/modules/types.js +1 -0
  44. package/dist/composed/index.d.ts +2 -0
  45. package/dist/composed/index.js +2 -0
  46. package/dist/internal/create-context-new.d.ts +5 -0
  47. package/dist/internal/create-context-new.js +13 -0
  48. package/dist/internal/create-context.js +3 -3
  49. package/dist/internal/props-with-children.d.ts +5 -0
  50. package/dist/internal/props-with-children.js +1 -0
  51. package/dist/internal/props-with-element.d.ts +7 -0
  52. package/dist/internal/props-with-element.js +1 -0
  53. package/dist/internal/test-utils.js +2 -2
  54. package/package.json +9 -4
@@ -1,4 +1,3 @@
1
- var _a;
2
1
  import { createContext } from '../../internal/create-context.js';
3
2
  // @ts-expect-error - Defaults for context don't make sense, `createContext` should just throw TBH
4
- export var setAccordionContext = (_a = createContext(), _a[0]), getAccordionContext = _a[1], key = _a[2];
3
+ export const [setAccordionContext, getAccordionContext, key] = createContext();
@@ -1,3 +1,3 @@
1
1
  import Accordion from './Accordion.svelte';
2
2
  import Item from './AccordionItem.svelte';
3
- export default /* @__PURE__ */ Object.assign(Accordion, { Item: Item });
3
+ export default /* @__PURE__ */ Object.assign(Accordion, { Item });
@@ -1,7 +1,6 @@
1
- var _a;
2
1
  import { createContext } from '../../internal/create-context.js';
3
- export var setNavigationContext = (_a = createContext({
2
+ export const [setNavigationContext, getNavigationContext, key] = createContext({
4
3
  parent: 'none',
5
4
  value: '',
6
5
  expanded: false
7
- }), _a[0]), getNavigationContext = _a[1], key = _a[2];
6
+ });
@@ -1,4 +1,4 @@
1
1
  import Bar from './NavBar.svelte';
2
2
  import Rail from './NavRail.svelte';
3
3
  import Tile from './NavTile.svelte';
4
- export default /* @__PURE__ */ Object.assign(Rail, { Rail: Rail, Bar: Bar, Tile: Tile });
4
+ export default /* @__PURE__ */ Object.assign(Rail, { Rail, Bar, Tile });
@@ -1,7 +1,6 @@
1
- var _a;
2
1
  import * as radio from '@zag-js/radio-group';
3
2
  import { createContext } from '../../internal/create-context.js';
4
- export var setSegmentContext = (_a = createContext({
3
+ export const [setSegmentContext, getSegmentContext, key] = createContext({
5
4
  api: {},
6
5
  indicatorText: ''
7
- }), _a[0]), getSegmentContext = _a[1], key = _a[2];
6
+ });
@@ -1,3 +1,3 @@
1
1
  import Segment from './Segment.svelte';
2
2
  import Item from './SegmentItem.svelte';
3
- export default /* @__PURE__ */ Object.assign(Segment, { Item: Item });
3
+ export default /* @__PURE__ */ Object.assign(Segment, { Item });
@@ -1,7 +1,6 @@
1
- var _a;
2
1
  import * as tabs from '@zag-js/tabs';
3
2
  import { createContext } from '../../internal/create-context.js';
4
- export var setTabContext = (_a = createContext({
3
+ export const [setTabContext, getTabContext, key] = createContext({
5
4
  fluid: false,
6
5
  api: {}
7
- }), _a[0]), getTabContext = _a[1], key = _a[2];
6
+ });
@@ -1,4 +1,4 @@
1
1
  import Tabs from './Tabs.svelte';
2
2
  import Control from './TabsControl.svelte';
3
3
  import Panel from './TabsPanel.svelte';
4
- export default /* @__PURE__ */ Object.assign(Tabs, { Control: Control, Panel: Panel });
4
+ export default /* @__PURE__ */ Object.assign(Tabs, { Control, Panel });
@@ -1,5 +1,4 @@
1
1
  import * as toast from '@zag-js/toast';
2
- export function createToaster(options) {
3
- if (options === void 0) { options = {}; }
2
+ export function createToaster(options = {}) {
4
3
  return toast.createStore(options);
5
4
  }
@@ -0,0 +1,27 @@
1
+ <script lang="ts">
2
+ import { mergeProps } from '@zag-js/svelte';
3
+ import { AccordionItemContext, AccordionRootContext } from '../modules/context.js';
4
+ import type { AccordionContentProps } from '../modules/types.js';
5
+
6
+ const rootContext = AccordionRootContext.consume();
7
+ const itemContext = AccordionItemContext.consume();
8
+ const props: AccordionContentProps = $props();
9
+ const { element, children, ...restAttributes } = $derived(props);
10
+ const attributes = $derived(
11
+ mergeProps(
12
+ rootContext.api.getItemContentProps(itemContext.itemProps),
13
+ {
14
+ class: 'skb:py-2 skb:px-4'
15
+ },
16
+ restAttributes
17
+ )
18
+ );
19
+ </script>
20
+
21
+ {#if element}
22
+ {@render element({ attributes })}
23
+ {:else}
24
+ <div {...attributes}>
25
+ {@render children?.()}
26
+ </div>
27
+ {/if}
@@ -0,0 +1,4 @@
1
+ import type { AccordionContentProps } from '../modules/types.js';
2
+ declare const AccordionContent: import("svelte").Component<AccordionContentProps, {}, "">;
3
+ type AccordionContent = ReturnType<typeof AccordionContent>;
4
+ export default AccordionContent;
@@ -0,0 +1,15 @@
1
+ <script lang="ts">
2
+ import type { AccordionHeadingProps } from '../modules/types.js';
3
+
4
+ const props: AccordionHeadingProps = $props();
5
+ const { level = 3, element, children, ...restAttributes } = $derived(props);
6
+ const tag = $derived(`h${level}`);
7
+ </script>
8
+
9
+ {#if element}
10
+ {@render element({ attributes: restAttributes })}
11
+ {:else}
12
+ <svelte:element this={tag} {...restAttributes}>
13
+ {@render children?.()}
14
+ </svelte:element>
15
+ {/if}
@@ -0,0 +1,4 @@
1
+ import type { AccordionHeadingProps } from '../modules/types.js';
2
+ declare const AccordionHeading: import("svelte").Component<AccordionHeadingProps, {}, "">;
3
+ type AccordionHeading = ReturnType<typeof AccordionHeading>;
4
+ export default AccordionHeading;
@@ -0,0 +1,19 @@
1
+ <script lang="ts">
2
+ import { mergeProps } from '@zag-js/svelte';
3
+ import { AccordionRootContext, AccordionItemContext } from '../modules/context.js';
4
+ import type { AccordionIndicatorProps } from '../modules/types.js';
5
+
6
+ const rootContext = AccordionRootContext.consume();
7
+ const itemContext = AccordionItemContext.consume();
8
+ const props: AccordionIndicatorProps = $props();
9
+ const { element, children, ...restAttributes } = $derived(props);
10
+ const attributes = $derived(mergeProps(rootContext.api.getItemIndicatorProps(itemContext.itemProps), restAttributes));
11
+ </script>
12
+
13
+ {#if element}
14
+ {@render element({ attributes })}
15
+ {:else}
16
+ <div {...attributes}>
17
+ {@render children?.()}
18
+ </div>
19
+ {/if}
@@ -0,0 +1,4 @@
1
+ import type { AccordionIndicatorProps } from '../modules/types.js';
2
+ declare const AccordionIndicator: import("svelte").Component<AccordionIndicatorProps, {}, "">;
3
+ type AccordionIndicator = ReturnType<typeof AccordionIndicator>;
4
+ export default AccordionIndicator;
@@ -0,0 +1,33 @@
1
+ <script lang="ts">
2
+ import { mergeProps } from '@zag-js/svelte';
3
+ import * as accordion from '@zag-js/accordion';
4
+ import { AccordionItemContext, AccordionRootContext } from '../modules/context.js';
5
+ import type { AccordionItemProps } from '../modules/types.js';
6
+
7
+ const rootContext = AccordionRootContext.consume();
8
+ const props: AccordionItemProps = $props();
9
+ const [itemProps, componentProps] = $derived(accordion.splitItemProps(props));
10
+ const { element, children, ...restAttributes } = $derived(componentProps);
11
+ const attributes = $derived(
12
+ mergeProps(
13
+ rootContext.api.getItemProps(itemProps),
14
+ {
15
+ class: 'skb:grid skb:gap-2'
16
+ },
17
+ restAttributes
18
+ )
19
+ );
20
+ AccordionItemContext.provide({
21
+ get itemProps() {
22
+ return itemProps;
23
+ }
24
+ });
25
+ </script>
26
+
27
+ {#if element}
28
+ {@render element({ attributes })}
29
+ {:else}
30
+ <div {...attributes}>
31
+ {@render children?.()}
32
+ </div>
33
+ {/if}
@@ -0,0 +1,4 @@
1
+ import type { AccordionItemProps } from '../modules/types.js';
2
+ declare const AccordionItem: import("svelte").Component<AccordionItemProps, {}, "">;
3
+ type AccordionItem = ReturnType<typeof AccordionItem>;
4
+ export default AccordionItem;
@@ -0,0 +1,38 @@
1
+ <script lang="ts">
2
+ import { mergeProps, normalizeProps, useMachine } from '@zag-js/svelte';
3
+ import * as accordion from '@zag-js/accordion';
4
+ import { AccordionRootContext } from '../modules/context.js';
5
+ import type { AccordionRootProps } from '../modules/types.js';
6
+
7
+ const props: AccordionRootProps = $props();
8
+ const [machineProps, componentProps] = $derived(accordion.splitProps(props));
9
+ const { element, children, ...restAttributes } = $derived(componentProps);
10
+ const id = $props.id();
11
+ const service = useMachine(accordion.machine, () => ({
12
+ id: id,
13
+ ...machineProps
14
+ }));
15
+ const api = $derived(accordion.connect(service, normalizeProps));
16
+ const attributes = $derived(
17
+ mergeProps(
18
+ api.getRootProps(),
19
+ {
20
+ class: 'skb:w-full skb:grid skb:gap-2'
21
+ },
22
+ restAttributes
23
+ )
24
+ );
25
+ AccordionRootContext.provide({
26
+ get api() {
27
+ return api;
28
+ }
29
+ });
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,4 @@
1
+ import type { AccordionRootProps } from '../modules/types.js';
2
+ declare const AccordionRoot: import("svelte").Component<AccordionRootProps, {}, "">;
3
+ type AccordionRoot = ReturnType<typeof AccordionRoot>;
4
+ export default AccordionRoot;
@@ -0,0 +1,28 @@
1
+ <script lang="ts">
2
+ import { mergeProps } from '@zag-js/svelte';
3
+ import { AccordionItemContext, AccordionRootContext } from '../modules/context.js';
4
+ import type { AccordionTriggerProps } from '../modules/types.js';
5
+
6
+ const rootContext = AccordionRootContext.consume();
7
+ const itemContext = AccordionItemContext.consume();
8
+ const props: AccordionTriggerProps = $props();
9
+ const { element, children, ...restAttributes } = $derived(props);
10
+ const attributes = $derived(
11
+ mergeProps(
12
+ rootContext.api.getItemTriggerProps(itemContext.itemProps),
13
+ {
14
+ class:
15
+ 'skb:w-full skb:grid skb:items-center skb:gap-4 skb:py-2 skb:px-4 skb:rounded-base skb:text-left skb:hover:preset-tonal-primary'
16
+ },
17
+ restAttributes
18
+ )
19
+ );
20
+ </script>
21
+
22
+ {#if element}
23
+ {@render element({ attributes })}
24
+ {:else}
25
+ <button {...attributes}>
26
+ {@render children?.()}
27
+ </button>
28
+ {/if}
@@ -0,0 +1,4 @@
1
+ import type { AccordionTriggerProps } from '../modules/types.js';
2
+ declare const AccordionTrigger: import("svelte").Component<AccordionTriggerProps, {}, "">;
3
+ type AccordionTrigger = ReturnType<typeof AccordionTrigger>;
4
+ export default AccordionTrigger;
@@ -0,0 +1,2 @@
1
+ export * from './modules/types.js';
2
+ export * from './modules/anatomy.js';
@@ -0,0 +1,2 @@
1
+ export * from './modules/types.js';
2
+ export * from './modules/anatomy.js';
@@ -0,0 +1,8 @@
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, {}, "">;
7
+ };
8
+ export { Accordion };
@@ -0,0 +1,14 @@
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
13
+ });
14
+ export { Accordion };
@@ -0,0 +1,12 @@
1
+ import type { AccordionItemContext as AccordionItemContextType, AccordionRootContext as AccordionRootContextType } from './types.js';
2
+ declare const AccordionRootContext: {
3
+ key: symbol;
4
+ consume(): AccordionRootContextType;
5
+ provide(value: AccordionRootContextType): AccordionRootContextType;
6
+ };
7
+ declare const AccordionItemContext: {
8
+ key: symbol;
9
+ consume(): AccordionItemContextType;
10
+ provide(value: AccordionItemContextType): AccordionItemContextType;
11
+ };
12
+ export { AccordionRootContext, AccordionItemContext };
@@ -0,0 +1,4 @@
1
+ import { createContext } from '../../../internal/create-context-new.js';
2
+ const AccordionRootContext = createContext();
3
+ const AccordionItemContext = createContext();
4
+ export { AccordionRootContext, AccordionItemContext };
@@ -0,0 +1,29 @@
1
+ import * as accordion from '@zag-js/accordion';
2
+ import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element.js';
4
+ import type { PropsWithChildren } from '../../../internal/props-with-children.js';
5
+ interface AccordionRootProps extends PropsWithElement, PropsWithChildren, Omit<accordion.Props, 'id'>, Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'defaultValue' | 'dir'> {
6
+ }
7
+ interface AccordionItemProps extends PropsWithElement, PropsWithChildren, accordion.ItemProps, HTMLAttributes<HTMLDivElement> {
8
+ }
9
+ interface AccordionHeadingProps extends PropsWithElement, PropsWithChildren, HTMLAttributes<HTMLHeadingElement> {
10
+ /**
11
+ * The level of the heading. This is used to determine the heading level for accessibility purposes.
12
+ *
13
+ * @defaultValue 3
14
+ */
15
+ level?: 1 | 2 | 3 | 4 | 5 | 6;
16
+ }
17
+ interface AccordionTriggerProps extends PropsWithElement, PropsWithChildren, HTMLButtonAttributes {
18
+ }
19
+ interface AccordionIndicatorProps extends PropsWithElement, PropsWithChildren, HTMLAttributes<HTMLDivElement> {
20
+ }
21
+ interface AccordionContentProps extends PropsWithElement, PropsWithChildren, HTMLAttributes<HTMLDivElement> {
22
+ }
23
+ interface AccordionRootContext {
24
+ api: accordion.Api;
25
+ }
26
+ interface AccordionItemContext {
27
+ itemProps: accordion.ItemProps;
28
+ }
29
+ export type { AccordionRootProps, AccordionItemProps, AccordionTriggerProps, AccordionHeadingProps, AccordionIndicatorProps, AccordionContentProps, AccordionRootContext, AccordionItemContext };
@@ -0,0 +1 @@
1
+ import * as accordion from '@zag-js/accordion';
@@ -0,0 +1,26 @@
1
+ <script lang="ts">
2
+ import { mergeProps } from '@zag-js/svelte';
3
+ import { AvatarRootContext } from '../modules/context.js';
4
+ import type { AvatarFallbackProps } from '../modules/types.js';
5
+
6
+ const rootContext = AvatarRootContext.consume();
7
+ const props: AvatarFallbackProps = $props();
8
+ const { element, children, ...restAttributes } = $derived(props);
9
+ const attributes = $derived(
10
+ mergeProps(
11
+ rootContext.api.getFallbackProps(),
12
+ {
13
+ class: 'skb:size-full skb:flex skb:justify-center skb:items-center'
14
+ },
15
+ restAttributes
16
+ )
17
+ );
18
+ </script>
19
+
20
+ {#if element}
21
+ {@render element({ attributes })}
22
+ {:else}
23
+ <span {...attributes}>
24
+ {@render children?.()}
25
+ </span>
26
+ {/if}
@@ -0,0 +1,4 @@
1
+ import type { AvatarFallbackProps } from '../modules/types.js';
2
+ declare const AvatarFallback: import("svelte").Component<AvatarFallbackProps, {}, "">;
3
+ type AvatarFallback = ReturnType<typeof AvatarFallback>;
4
+ export default AvatarFallback;
@@ -0,0 +1,24 @@
1
+ <script lang="ts">
2
+ import { mergeProps } from '@zag-js/svelte';
3
+ import { AvatarRootContext } from '../modules/context.js';
4
+ import type { AvatarImageProps } from '../modules/types.js';
5
+
6
+ const rootContext = AvatarRootContext.consume();
7
+ const props: AvatarImageProps = $props();
8
+ const { element, ...restAttributes } = $derived(props);
9
+ const attributes = $derived(
10
+ mergeProps(
11
+ rootContext.api.getImageProps(),
12
+ {
13
+ class: 'skb:w-full skb:object-cover'
14
+ },
15
+ restAttributes
16
+ )
17
+ );
18
+ </script>
19
+
20
+ {#if element}
21
+ {@render element({ attributes })}
22
+ {:else}
23
+ <img {...attributes} />
24
+ {/if}
@@ -0,0 +1,4 @@
1
+ import type { AvatarImageProps } from '../modules/types.js';
2
+ declare const AvatarImage: import("svelte").Component<AvatarImageProps, {}, "">;
3
+ type AvatarImage = ReturnType<typeof AvatarImage>;
4
+ export default AvatarImage;
@@ -0,0 +1,38 @@
1
+ <script lang="ts">
2
+ import * as avatar from '@zag-js/avatar';
3
+ import { useMachine, normalizeProps, mergeProps } from '@zag-js/svelte';
4
+ import { AvatarRootContext } from '../modules/context.js';
5
+ import type { AvatarRootProps } from '../modules/types.js';
6
+
7
+ const props: AvatarRootProps = $props();
8
+ const [machineProps, componentProps] = $derived(avatar.splitProps(props));
9
+ const { element, children, ...restAttributes } = $derived(componentProps);
10
+ const id = $props.id();
11
+ const service = useMachine(avatar.machine, () => ({
12
+ id: id,
13
+ ...machineProps
14
+ }));
15
+ const api = $derived(avatar.connect(service, normalizeProps));
16
+ const attributes = $derived(
17
+ mergeProps(
18
+ api.getRootProps(),
19
+ {
20
+ class: 'skb:isolate skb:bg-surface-400-600 skb:size-16 skb:rounded-full skb:overflow-hidden'
21
+ },
22
+ restAttributes
23
+ )
24
+ );
25
+ AvatarRootContext.provide({
26
+ get api() {
27
+ return api;
28
+ }
29
+ });
30
+ </script>
31
+
32
+ {#if element}
33
+ {@render element({ attributes: restAttributes })}
34
+ {:else}
35
+ <div {...attributes}>
36
+ {@render children?.()}
37
+ </div>
38
+ {/if}
@@ -0,0 +1,4 @@
1
+ import type { AvatarRootProps } from '../modules/types.js';
2
+ declare const AvatarRoot: import("svelte").Component<AvatarRootProps, {}, "">;
3
+ type AvatarRoot = ReturnType<typeof AvatarRoot>;
4
+ export default AvatarRoot;
@@ -0,0 +1,2 @@
1
+ export * from './modules/types.js';
2
+ export * from './modules/anatomy.js';
@@ -0,0 +1,2 @@
1
+ export * from './modules/types.js';
2
+ export * from './modules/anatomy.js';
@@ -0,0 +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, {}, "">;
4
+ };
5
+ export { Avatar };
@@ -0,0 +1,8 @@
1
+ import AvatarRoot from '../anatomy/avatar-root.svelte';
2
+ import AvatarImage from '../anatomy/avatar-image.svelte';
3
+ import AvatarFallback from '../anatomy/avatar-fallback.svelte';
4
+ const Avatar = Object.assign(AvatarRoot, {
5
+ Image: AvatarImage,
6
+ Fallback: AvatarFallback
7
+ });
8
+ export { Avatar };
@@ -0,0 +1,7 @@
1
+ import type { AvatarRootContext as AvatarRootContextType } from './types.js';
2
+ declare const AvatarRootContext: {
3
+ key: symbol;
4
+ consume(): AvatarRootContextType;
5
+ provide(value: AvatarRootContextType): AvatarRootContextType;
6
+ };
7
+ export { AvatarRootContext };
@@ -0,0 +1,3 @@
1
+ import { createContext } from '../../../internal/create-context-new.js';
2
+ const AvatarRootContext = createContext();
3
+ export { AvatarRootContext };
@@ -0,0 +1,14 @@
1
+ import * as avatar from '@zag-js/avatar';
2
+ import type { HTMLAttributes, HTMLImgAttributes } from 'svelte/elements';
3
+ import type { PropsWithChildren } from '../../../internal/props-with-children.js';
4
+ import type { PropsWithElement } from '../../../internal/props-with-element.js';
5
+ interface AvatarRootProps extends PropsWithElement, PropsWithChildren, Omit<avatar.Props, 'id'>, Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'dir'> {
6
+ }
7
+ interface AvatarImageProps extends PropsWithElement, HTMLImgAttributes {
8
+ }
9
+ interface AvatarFallbackProps extends PropsWithElement, PropsWithChildren, HTMLAttributes<HTMLSpanElement> {
10
+ }
11
+ interface AvatarRootContext {
12
+ api: avatar.Api;
13
+ }
14
+ export type { AvatarRootProps, AvatarImageProps, AvatarFallbackProps, AvatarRootContext };
@@ -0,0 +1 @@
1
+ import * as avatar from '@zag-js/avatar';
@@ -0,0 +1,2 @@
1
+ export * from './accordion/index.js';
2
+ export * from './avatar/index.js';
@@ -0,0 +1,2 @@
1
+ export * from './accordion/index.js';
2
+ export * from './avatar/index.js';
@@ -0,0 +1,5 @@
1
+ export declare function createContext<T>(): {
2
+ key: symbol;
3
+ consume(): T;
4
+ provide(value: T): T;
5
+ };
@@ -0,0 +1,13 @@
1
+ import { getContext, setContext } from 'svelte';
2
+ export function createContext() {
3
+ const key = Symbol();
4
+ return {
5
+ key: key,
6
+ consume() {
7
+ return getContext(key);
8
+ },
9
+ provide(value) {
10
+ return setContext(key, value);
11
+ }
12
+ };
13
+ }
@@ -5,8 +5,8 @@ import { getContext, setContext } from 'svelte';
5
5
  * @returns [set, get, key] The setter, getter and key for the context, the getter returns the default value if the context is not set
6
6
  */
7
7
  export function createContext(defaultValue) {
8
- var key = Symbol();
9
- var set = function (value) { return setContext(key, value); };
10
- var get = function () { var _a; return (_a = getContext(key)) !== null && _a !== void 0 ? _a : defaultValue; };
8
+ const key = Symbol();
9
+ const set = (value) => setContext(key, value);
10
+ const get = () => getContext(key) ?? defaultValue;
11
11
  return [set, get, key];
12
12
  }
@@ -0,0 +1,5 @@
1
+ import type { Snippet } from 'svelte';
2
+ interface PropsWithChildren {
3
+ children?: Snippet;
4
+ }
5
+ export type { PropsWithChildren };
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,7 @@
1
+ import type { Snippet } from 'svelte';
2
+ interface PropsWithElement {
3
+ element?: Snippet<[{
4
+ attributes: Record<string, unknown>;
5
+ }]>;
6
+ }
7
+ export type { PropsWithElement };
@@ -0,0 +1 @@
1
+ export {};
@@ -1,9 +1,9 @@
1
1
  import { createRawSnippet } from 'svelte';
2
2
  /** Use `mockSnippet(value)` to create `<span>{value}</span>` snippet content. */
3
3
  export function mockSnippet(key) {
4
- return createRawSnippet(function () {
4
+ return createRawSnippet(() => {
5
5
  return {
6
- render: function () { return "<span>".concat(key, "</span>"); }
6
+ render: () => `<span>${key}</span>`
7
7
  };
8
8
  });
9
9
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skeletonlabs/skeleton-svelte",
3
- "version": "1.4.0",
3
+ "version": "1.5.0",
4
4
  "description": "The Svelte package for Skeleton.",
5
5
  "author": "endigo9740 <chris@skeletonlabs.dev>",
6
6
  "types": "./dist/index.d.ts",
@@ -9,6 +9,11 @@
9
9
  "types": "./dist/index.d.ts",
10
10
  "svelte": "./dist/index.js",
11
11
  "default": "./dist/index.js"
12
+ },
13
+ "./composed": {
14
+ "types": "./dist/composed/index.d.ts",
15
+ "svelte": "./dist/composed/index.js",
16
+ "default": "./dist/composed/index.js"
12
17
  }
13
18
  },
14
19
  "files": [
@@ -55,12 +60,12 @@
55
60
  "typescript": "^5.8.3",
56
61
  "vite": "^7.0.4",
57
62
  "vitest": "3.2.4",
58
- "@skeletonlabs/skeleton": "3.1.8"
63
+ "@skeletonlabs/skeleton": "3.2.0"
59
64
  },
60
65
  "type": "module",
61
66
  "scripts": {
62
- "build": "svelte-package --input src --output dist",
63
- "dev": "svelte-package --input src --output dist --watch",
67
+ "build": "svelte-kit sync && svelte-package --input src --output dist",
68
+ "dev": "pnpm build --watch",
64
69
  "test": "vitest run",
65
70
  "test:watch": "vitest run --watch",
66
71
  "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"