@skeletonlabs/skeleton-svelte 4.8.0 → 4.9.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 (35) hide show
  1. package/dist/components/carousel/anatomy/autoplay-trigger.svelte +27 -0
  2. package/dist/components/carousel/anatomy/autoplay-trigger.svelte.d.ts +7 -0
  3. package/dist/components/carousel/anatomy/control.svelte +27 -0
  4. package/dist/components/carousel/anatomy/control.svelte.d.ts +7 -0
  5. package/dist/components/carousel/anatomy/indicator-group.svelte +27 -0
  6. package/dist/components/carousel/anatomy/indicator-group.svelte.d.ts +7 -0
  7. package/dist/components/carousel/anatomy/indicator.svelte +30 -0
  8. package/dist/components/carousel/anatomy/indicator.svelte.d.ts +8 -0
  9. package/dist/components/carousel/anatomy/item-group.svelte +27 -0
  10. package/dist/components/carousel/anatomy/item-group.svelte.d.ts +7 -0
  11. package/dist/components/carousel/anatomy/item.svelte +30 -0
  12. package/dist/components/carousel/anatomy/item.svelte.d.ts +8 -0
  13. package/dist/components/carousel/anatomy/next-trigger.svelte +27 -0
  14. package/dist/components/carousel/anatomy/next-trigger.svelte.d.ts +7 -0
  15. package/dist/components/carousel/anatomy/prev-trigger.svelte +27 -0
  16. package/dist/components/carousel/anatomy/prev-trigger.svelte.d.ts +7 -0
  17. package/dist/components/carousel/anatomy/progress-text.svelte +27 -0
  18. package/dist/components/carousel/anatomy/progress-text.svelte.d.ts +7 -0
  19. package/dist/components/carousel/anatomy/root-context.svelte +20 -0
  20. package/dist/components/carousel/anatomy/root-context.svelte.d.ts +9 -0
  21. package/dist/components/carousel/anatomy/root-provider.svelte +29 -0
  22. package/dist/components/carousel/anatomy/root-provider.svelte.d.ts +9 -0
  23. package/dist/components/carousel/anatomy/root.svelte +37 -0
  24. package/dist/components/carousel/anatomy/root.svelte.d.ts +8 -0
  25. package/dist/components/carousel/index.d.ts +14 -0
  26. package/dist/components/carousel/index.js +2 -0
  27. package/dist/components/carousel/modules/anatomy.d.ts +13 -0
  28. package/dist/components/carousel/modules/anatomy.js +25 -0
  29. package/dist/components/carousel/modules/provider.svelte.d.ts +3 -0
  30. package/dist/components/carousel/modules/provider.svelte.js +7 -0
  31. package/dist/components/carousel/modules/root-context.d.ts +5 -0
  32. package/dist/components/carousel/modules/root-context.js +2 -0
  33. package/dist/index.d.ts +1 -0
  34. package/dist/index.js +1 -0
  35. package/package.json +30 -29
@@ -0,0 +1,27 @@
1
+ <script lang="ts" module>
2
+ import type { HTMLAttributes } from '../../../internal/html-attributes.js';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element.js';
4
+
5
+ export interface CarouselAutoplayTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import { RootContext } from '../modules/root-context.js';
10
+ import { mergeProps } from '@zag-js/svelte';
11
+
12
+ const props: CarouselAutoplayTriggerProps = $props();
13
+
14
+ const carousel = RootContext.consume();
15
+
16
+ const { element, children, ...rest } = $derived(props);
17
+
18
+ const attributes = $derived(mergeProps(carousel().getAutoplayTriggerProps(), rest));
19
+ </script>
20
+
21
+ {#if element}
22
+ {@render element(attributes)}
23
+ {:else}
24
+ <button {...attributes}>
25
+ {@render children?.()}
26
+ </button>
27
+ {/if}
@@ -0,0 +1,7 @@
1
+ import type { HTMLAttributes } from '../../../internal/html-attributes.js';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element.js';
3
+ export interface CarouselAutoplayTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {
4
+ }
5
+ declare const AutoplayTrigger: import("svelte").Component<CarouselAutoplayTriggerProps, {}, "">;
6
+ type AutoplayTrigger = ReturnType<typeof AutoplayTrigger>;
7
+ export default AutoplayTrigger;
@@ -0,0 +1,27 @@
1
+ <script lang="ts" module>
2
+ import type { HTMLAttributes } from '../../../internal/html-attributes.js';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element.js';
4
+
5
+ export interface CarouselControlProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import { RootContext } from '../modules/root-context.js';
10
+ import { mergeProps } from '@zag-js/svelte';
11
+
12
+ const props: CarouselControlProps = $props();
13
+
14
+ const carousel = RootContext.consume();
15
+
16
+ const { element, children, ...rest } = $derived(props);
17
+
18
+ const attributes = $derived(mergeProps(carousel().getControlProps(), rest));
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,7 @@
1
+ import type { HTMLAttributes } from '../../../internal/html-attributes.js';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element.js';
3
+ export interface CarouselControlProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
4
+ }
5
+ declare const Control: import("svelte").Component<CarouselControlProps, {}, "">;
6
+ type Control = ReturnType<typeof Control>;
7
+ export default Control;
@@ -0,0 +1,27 @@
1
+ <script lang="ts" module>
2
+ import type { HTMLAttributes } from '../../../internal/html-attributes.js';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element.js';
4
+
5
+ export interface CarouselIndicatorGroupProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import { RootContext } from '../modules/root-context.js';
10
+ import { mergeProps } from '@zag-js/svelte';
11
+
12
+ const props: CarouselIndicatorGroupProps = $props();
13
+
14
+ const carousel = RootContext.consume();
15
+
16
+ const { element, children, ...rest } = $derived(props);
17
+
18
+ const attributes = $derived(mergeProps(carousel().getIndicatorGroupProps(), rest));
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,7 @@
1
+ import type { HTMLAttributes } from '../../../internal/html-attributes.js';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element.js';
3
+ export interface CarouselIndicatorGroupProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
4
+ }
5
+ declare const IndicatorGroup: import("svelte").Component<CarouselIndicatorGroupProps, {}, "">;
6
+ type IndicatorGroup = ReturnType<typeof IndicatorGroup>;
7
+ export default IndicatorGroup;
@@ -0,0 +1,30 @@
1
+ <script lang="ts" module>
2
+ import type { HTMLAttributes } from '../../../internal/html-attributes.js';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element.js';
4
+ import type { IndicatorProps } from '@zag-js/carousel';
5
+
6
+ export interface CarouselIndicatorProps extends IndicatorProps, PropsWithElement<'button'>, HTMLAttributes<'button'> {}
7
+ </script>
8
+
9
+ <script lang="ts">
10
+ import { RootContext } from '../modules/root-context.js';
11
+ import { splitIndicatorProps } from '@zag-js/carousel';
12
+ import { mergeProps } from '@zag-js/svelte';
13
+
14
+ const props: CarouselIndicatorProps = $props();
15
+
16
+ const carousel = RootContext.consume();
17
+
18
+ const [indicatorProps, componentProps] = $derived(splitIndicatorProps(props));
19
+ const { element, children, ...rest } = $derived(componentProps);
20
+
21
+ const attributes = $derived(mergeProps(carousel().getIndicatorProps(indicatorProps), rest));
22
+ </script>
23
+
24
+ {#if element}
25
+ {@render element(attributes)}
26
+ {:else}
27
+ <button {...attributes}>
28
+ {@render children?.()}
29
+ </button>
30
+ {/if}
@@ -0,0 +1,8 @@
1
+ import type { HTMLAttributes } from '../../../internal/html-attributes.js';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element.js';
3
+ import type { IndicatorProps } from '@zag-js/carousel';
4
+ export interface CarouselIndicatorProps extends IndicatorProps, PropsWithElement<'button'>, HTMLAttributes<'button'> {
5
+ }
6
+ declare const Indicator: import("svelte").Component<CarouselIndicatorProps, {}, "">;
7
+ type Indicator = ReturnType<typeof Indicator>;
8
+ export default Indicator;
@@ -0,0 +1,27 @@
1
+ <script lang="ts" module>
2
+ import type { HTMLAttributes } from '../../../internal/html-attributes.js';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element.js';
4
+
5
+ export interface CarouselItemGroupProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import { RootContext } from '../modules/root-context.js';
10
+ import { mergeProps } from '@zag-js/svelte';
11
+
12
+ const props: CarouselItemGroupProps = $props();
13
+
14
+ const carousel = RootContext.consume();
15
+
16
+ const { element, children, ...rest } = $derived(props);
17
+
18
+ const attributes = $derived(mergeProps(carousel().getItemGroupProps(), rest));
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,7 @@
1
+ import type { HTMLAttributes } from '../../../internal/html-attributes.js';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element.js';
3
+ export interface CarouselItemGroupProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
4
+ }
5
+ declare const ItemGroup: import("svelte").Component<CarouselItemGroupProps, {}, "">;
6
+ type ItemGroup = ReturnType<typeof ItemGroup>;
7
+ export default ItemGroup;
@@ -0,0 +1,30 @@
1
+ <script lang="ts" module>
2
+ import type { HTMLAttributes } from '../../../internal/html-attributes.js';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element.js';
4
+ import type { ItemProps } from '@zag-js/carousel';
5
+
6
+ export interface CarouselItemProps extends ItemProps, PropsWithElement<'div'>, HTMLAttributes<'div'> {}
7
+ </script>
8
+
9
+ <script lang="ts">
10
+ import { RootContext } from '../modules/root-context.js';
11
+ import { splitItemProps } from '@zag-js/carousel';
12
+ import { mergeProps } from '@zag-js/svelte';
13
+
14
+ const props: CarouselItemProps = $props();
15
+
16
+ const carousel = RootContext.consume();
17
+
18
+ const [itemProps, componentProps] = $derived(splitItemProps(props));
19
+ const { element, children, ...rest } = $derived(componentProps);
20
+
21
+ const attributes = $derived(mergeProps(carousel().getItemProps(itemProps), rest));
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,8 @@
1
+ import type { HTMLAttributes } from '../../../internal/html-attributes.js';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element.js';
3
+ import type { ItemProps } from '@zag-js/carousel';
4
+ export interface CarouselItemProps extends ItemProps, PropsWithElement<'div'>, HTMLAttributes<'div'> {
5
+ }
6
+ declare const Item: import("svelte").Component<CarouselItemProps, {}, "">;
7
+ type Item = ReturnType<typeof Item>;
8
+ export default Item;
@@ -0,0 +1,27 @@
1
+ <script lang="ts" module>
2
+ import type { HTMLAttributes } from '../../../internal/html-attributes.js';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element.js';
4
+
5
+ export interface CarouselNextTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import { RootContext } from '../modules/root-context.js';
10
+ import { mergeProps } from '@zag-js/svelte';
11
+
12
+ const props: CarouselNextTriggerProps = $props();
13
+
14
+ const carousel = RootContext.consume();
15
+
16
+ const { element, children, ...rest } = $derived(props);
17
+
18
+ const attributes = $derived(mergeProps(carousel().getNextTriggerProps(), rest));
19
+ </script>
20
+
21
+ {#if element}
22
+ {@render element(attributes)}
23
+ {:else}
24
+ <button {...attributes}>
25
+ {@render children?.()}
26
+ </button>
27
+ {/if}
@@ -0,0 +1,7 @@
1
+ import type { HTMLAttributes } from '../../../internal/html-attributes.js';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element.js';
3
+ export interface CarouselNextTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {
4
+ }
5
+ declare const NextTrigger: import("svelte").Component<CarouselNextTriggerProps, {}, "">;
6
+ type NextTrigger = ReturnType<typeof NextTrigger>;
7
+ export default NextTrigger;
@@ -0,0 +1,27 @@
1
+ <script lang="ts" module>
2
+ import type { HTMLAttributes } from '../../../internal/html-attributes.js';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element.js';
4
+
5
+ export interface CarouselPrevTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import { RootContext } from '../modules/root-context.js';
10
+ import { mergeProps } from '@zag-js/svelte';
11
+
12
+ const props: CarouselPrevTriggerProps = $props();
13
+
14
+ const carousel = RootContext.consume();
15
+
16
+ const { element, children, ...rest } = $derived(props);
17
+
18
+ const attributes = $derived(mergeProps(carousel().getPrevTriggerProps(), rest));
19
+ </script>
20
+
21
+ {#if element}
22
+ {@render element(attributes)}
23
+ {:else}
24
+ <button {...attributes}>
25
+ {@render children?.()}
26
+ </button>
27
+ {/if}
@@ -0,0 +1,7 @@
1
+ import type { HTMLAttributes } from '../../../internal/html-attributes.js';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element.js';
3
+ export interface CarouselPrevTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {
4
+ }
5
+ declare const PrevTrigger: import("svelte").Component<CarouselPrevTriggerProps, {}, "">;
6
+ type PrevTrigger = ReturnType<typeof PrevTrigger>;
7
+ export default PrevTrigger;
@@ -0,0 +1,27 @@
1
+ <script lang="ts" module>
2
+ import type { HTMLAttributes } from '../../../internal/html-attributes.js';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element.js';
4
+
5
+ export interface CarouselProgressTextProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import { RootContext } from '../modules/root-context.js';
10
+ import { mergeProps } from '@zag-js/svelte';
11
+
12
+ const props: CarouselProgressTextProps = $props();
13
+
14
+ const carousel = RootContext.consume();
15
+
16
+ const { element, children, ...rest } = $derived(props);
17
+
18
+ const attributes = $derived(mergeProps(carousel().getProgressTextProps(), rest));
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,7 @@
1
+ import type { HTMLAttributes } from '../../../internal/html-attributes.js';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element.js';
3
+ export interface CarouselProgressTextProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
4
+ }
5
+ declare const ProgressText: import("svelte").Component<CarouselProgressTextProps, {}, "">;
6
+ type ProgressText = ReturnType<typeof ProgressText>;
7
+ export default ProgressText;
@@ -0,0 +1,20 @@
1
+ <script lang="ts" module>
2
+ import type { useCarousel } from '../modules/provider.svelte';
3
+ import type { Snippet } from 'svelte';
4
+
5
+ export interface CarouselRootContextProps {
6
+ children: Snippet<[ReturnType<typeof useCarousel>]>;
7
+ }
8
+ </script>
9
+
10
+ <script lang="ts">
11
+ import { RootContext } from '../modules/root-context.js';
12
+
13
+ const props: CarouselRootContextProps = $props();
14
+
15
+ const carousel = RootContext.consume();
16
+
17
+ const { children } = $derived(props);
18
+ </script>
19
+
20
+ {@render children(carousel)}
@@ -0,0 +1,9 @@
1
+ import type { useCarousel } from '../modules/provider.svelte';
2
+ import type { Snippet } from 'svelte';
3
+ export interface CarouselRootContextProps {
4
+ children: Snippet<[ReturnType<typeof useCarousel>]>;
5
+ }
6
+ import { RootContext } from '../modules/root-context.js';
7
+ declare const RootContext: import("svelte").Component<CarouselRootContextProps, {}, "">;
8
+ type RootContext = ReturnType<typeof RootContext>;
9
+ export default RootContext;
@@ -0,0 +1,29 @@
1
+ <script lang="ts" module>
2
+ import type { HTMLAttributes } from '../../../internal/html-attributes.js';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element.js';
4
+ import type { useCarousel } from '../modules/provider.svelte';
5
+
6
+ export interface CarouselRootProviderProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
7
+ value: ReturnType<typeof useCarousel>;
8
+ }
9
+ </script>
10
+
11
+ <script lang="ts">
12
+ import { RootContext } from '../modules/root-context.js';
13
+ import { mergeProps } from '@zag-js/svelte';
14
+
15
+ const props: CarouselRootProviderProps = $props();
16
+ const { element, children, value: carousel, ...rest } = $derived(props);
17
+
18
+ const attributes = $derived(mergeProps(carousel().getRootProps(), rest));
19
+
20
+ RootContext.provide(() => carousel());
21
+ </script>
22
+
23
+ {#if element}
24
+ {@render element(attributes)}
25
+ {:else}
26
+ <div {...attributes}>
27
+ {@render children?.()}
28
+ </div>
29
+ {/if}
@@ -0,0 +1,9 @@
1
+ import type { HTMLAttributes } from '../../../internal/html-attributes.js';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element.js';
3
+ import type { useCarousel } from '../modules/provider.svelte';
4
+ export interface CarouselRootProviderProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
5
+ value: ReturnType<typeof useCarousel>;
6
+ }
7
+ declare const RootProvider: import("svelte").Component<CarouselRootProviderProps, {}, "">;
8
+ type RootProvider = ReturnType<typeof RootProvider>;
9
+ export default RootProvider;
@@ -0,0 +1,37 @@
1
+ <script lang="ts" module>
2
+ import type { HTMLAttributes } from '../../../internal/html-attributes.js';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element.js';
4
+ import type { Props } from '@zag-js/carousel';
5
+
6
+ export interface CarouselRootProps extends Omit<Props, 'id'>, PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {}
7
+ </script>
8
+
9
+ <script lang="ts">
10
+ import { useCarousel } from '../modules/provider.svelte';
11
+ import { RootContext } from '../modules/root-context.js';
12
+ import { splitProps } from '@zag-js/carousel';
13
+ import { mergeProps } from '@zag-js/svelte';
14
+
15
+ const props: CarouselRootProps = $props();
16
+ const [carouselProps, componentProps] = $derived(splitProps(props));
17
+ const { element, children, ...rest } = $derived(componentProps);
18
+
19
+ const id = $props.id();
20
+ const carousel = useCarousel(() => ({
21
+ ...carouselProps,
22
+ slideCount: props.slideCount,
23
+ id: id,
24
+ }));
25
+
26
+ const attributes = $derived(mergeProps(carousel().getRootProps(), rest));
27
+
28
+ RootContext.provide(() => carousel());
29
+ </script>
30
+
31
+ {#if element}
32
+ {@render element(attributes)}
33
+ {:else}
34
+ <div {...attributes}>
35
+ {@render children?.()}
36
+ </div>
37
+ {/if}
@@ -0,0 +1,8 @@
1
+ import type { HTMLAttributes } from '../../../internal/html-attributes.js';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element.js';
3
+ import type { Props } from '@zag-js/carousel';
4
+ export interface CarouselRootProps extends Omit<Props, 'id'>, PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
5
+ }
6
+ declare const Root: import("svelte").Component<CarouselRootProps, {}, "">;
7
+ type Root = ReturnType<typeof Root>;
8
+ export default Root;
@@ -0,0 +1,14 @@
1
+ export type { CarouselAutoplayTriggerProps } from './anatomy/autoplay-trigger.svelte';
2
+ export type { CarouselControlProps } from './anatomy/control.svelte';
3
+ export type { CarouselIndicatorGroupProps } from './anatomy/indicator-group.svelte';
4
+ export type { CarouselIndicatorProps } from './anatomy/indicator.svelte';
5
+ export type { CarouselItemGroupProps } from './anatomy/item-group.svelte';
6
+ export type { CarouselItemProps } from './anatomy/item.svelte';
7
+ export type { CarouselNextTriggerProps } from './anatomy/next-trigger.svelte';
8
+ export type { CarouselPrevTriggerProps } from './anatomy/prev-trigger.svelte';
9
+ export type { CarouselProgressTextProps } from './anatomy/progress-text.svelte';
10
+ export type { CarouselRootProps } from './anatomy/root.svelte';
11
+ export type { CarouselRootContextProps } from './anatomy/root-context.svelte';
12
+ export type { CarouselRootProviderProps } from './anatomy/root-provider.svelte';
13
+ export { Carousel } from './modules/anatomy.js';
14
+ export { useCarousel } from './modules/provider.svelte.js';
@@ -0,0 +1,2 @@
1
+ export { Carousel } from './modules/anatomy.js';
2
+ export { useCarousel } from './modules/provider.svelte.js';
@@ -0,0 +1,13 @@
1
+ export declare const Carousel: import("svelte").Component<import("../anatomy/root.svelte").CarouselRootProps, {}, ""> & {
2
+ Provider: import("svelte").Component<import("../anatomy/root-provider.svelte").CarouselRootProviderProps, {}, "">;
3
+ Context: import("svelte").Component<import("../anatomy/root-context.svelte").CarouselRootContextProps, {}, "">;
4
+ Control: import("svelte").Component<import("../anatomy/control.svelte").CarouselControlProps, {}, "">;
5
+ ItemGroup: import("svelte").Component<import("../anatomy/item-group.svelte").CarouselItemGroupProps, {}, "">;
6
+ Item: import("svelte").Component<import("../anatomy/item.svelte").CarouselItemProps, {}, "">;
7
+ PrevTrigger: import("svelte").Component<import("../anatomy/prev-trigger.svelte").CarouselPrevTriggerProps, {}, "">;
8
+ NextTrigger: import("svelte").Component<import("../anatomy/next-trigger.svelte").CarouselNextTriggerProps, {}, "">;
9
+ AutoplayTrigger: import("svelte").Component<import("../anatomy/autoplay-trigger.svelte").CarouselAutoplayTriggerProps, {}, "">;
10
+ IndicatorGroup: import("svelte").Component<import("../anatomy/indicator-group.svelte").CarouselIndicatorGroupProps, {}, "">;
11
+ Indicator: import("svelte").Component<import("../anatomy/indicator.svelte").CarouselIndicatorProps, {}, "">;
12
+ ProgressText: import("svelte").Component<import("../anatomy/progress-text.svelte").CarouselProgressTextProps, {}, "">;
13
+ };
@@ -0,0 +1,25 @@
1
+ import AutoplayTrigger from '../anatomy/autoplay-trigger.svelte';
2
+ import Control from '../anatomy/control.svelte';
3
+ import Indicator from '../anatomy/indicator.svelte';
4
+ import IndicatorGroup from '../anatomy/indicator-group.svelte';
5
+ import Item from '../anatomy/item.svelte';
6
+ import ItemGroup from '../anatomy/item-group.svelte';
7
+ import NextTrigger from '../anatomy/next-trigger.svelte';
8
+ import PrevTrigger from '../anatomy/prev-trigger.svelte';
9
+ import ProgressText from '../anatomy/progress-text.svelte';
10
+ import RootContext from '../anatomy/root-context.svelte';
11
+ import RootProvider from '../anatomy/root-provider.svelte';
12
+ import Root from '../anatomy/root.svelte';
13
+ export const Carousel = Object.assign(Root, {
14
+ Provider: RootProvider,
15
+ Context: RootContext,
16
+ Control: Control,
17
+ ItemGroup: ItemGroup,
18
+ Item: Item,
19
+ PrevTrigger: PrevTrigger,
20
+ NextTrigger: NextTrigger,
21
+ AutoplayTrigger: AutoplayTrigger,
22
+ IndicatorGroup: IndicatorGroup,
23
+ Indicator: Indicator,
24
+ ProgressText: ProgressText,
25
+ });
@@ -0,0 +1,3 @@
1
+ import { type PropTypes } from '@zag-js/svelte';
2
+ import type { Api, Props } from '@zag-js/carousel';
3
+ export declare function useCarousel(props: Props | (() => Props)): () => Api<PropTypes>;
@@ -0,0 +1,7 @@
1
+ import { normalizeProps, useMachine } from '@zag-js/svelte';
2
+ import { connect, machine } from '@zag-js/carousel';
3
+ export function useCarousel(props) {
4
+ const service = useMachine(machine, props);
5
+ const carousel = $derived(connect(service, normalizeProps));
6
+ return () => carousel;
7
+ }
@@ -0,0 +1,5 @@
1
+ export declare const RootContext: {
2
+ key: symbol;
3
+ consume(): () => import("@zag-js/carousel", { with: { "resolution-mode": "require" } }).Api<import("@zag-js/svelte").PropTypes>;
4
+ provide(value: () => import("@zag-js/carousel", { with: { "resolution-mode": "require" } }).Api<import("@zag-js/svelte").PropTypes>): () => import("@zag-js/carousel", { with: { "resolution-mode": "require" } }).Api<import("@zag-js/svelte").PropTypes>;
5
+ };
@@ -0,0 +1,2 @@
1
+ import { createContext } from '../../../internal/create-context.js';
2
+ export const RootContext = createContext();
package/dist/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  export * from './components/accordion/index.js';
2
2
  export * from './components/app-bar/index.js';
3
3
  export * from './components/avatar/index.js';
4
+ export * from './components/carousel/index.js';
4
5
  export * from './components/collapsible/index.js';
5
6
  export * from './components/combobox/index.js';
6
7
  export * from './components/date-picker/index.js';
package/dist/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  export * from './components/accordion/index.js';
2
2
  export * from './components/app-bar/index.js';
3
3
  export * from './components/avatar/index.js';
4
+ export * from './components/carousel/index.js';
4
5
  export * from './components/collapsible/index.js';
5
6
  export * from './components/combobox/index.js';
6
7
  export * from './components/date-picker/index.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skeletonlabs/skeleton-svelte",
3
- "version": "4.8.0",
3
+ "version": "4.9.0",
4
4
  "description": "The Svelte package for Skeleton.",
5
5
  "author": "endigo9740 <chris@skeletonlabs.dev>",
6
6
  "repository": {
@@ -21,34 +21,35 @@
21
21
  ],
22
22
  "sideEffects": false,
23
23
  "dependencies": {
24
- "@internationalized/date": "3.10.0",
25
- "@zag-js/accordion": "1.31.0",
26
- "@zag-js/avatar": "1.31.0",
27
- "@zag-js/collapsible": "1.31.0",
28
- "@zag-js/collection": "1.31.0",
29
- "@zag-js/combobox": "1.31.0",
30
- "@zag-js/date-picker": "1.31.0",
31
- "@zag-js/dialog": "1.31.0",
32
- "@zag-js/file-upload": "1.31.0",
33
- "@zag-js/floating-panel": "1.31.0",
34
- "@zag-js/listbox": "1.31.0",
35
- "@zag-js/menu": "1.31.0",
36
- "@zag-js/pagination": "1.31.0",
37
- "@zag-js/popover": "1.31.0",
38
- "@zag-js/progress": "1.31.0",
39
- "@zag-js/radio-group": "1.31.0",
40
- "@zag-js/rating-group": "1.31.0",
41
- "@zag-js/slider": "1.31.0",
42
- "@zag-js/steps": "1.31.0",
43
- "@zag-js/svelte": "1.31.0",
44
- "@zag-js/switch": "1.31.0",
45
- "@zag-js/tabs": "1.31.0",
46
- "@zag-js/tags-input": "1.31.0",
47
- "@zag-js/toast": "1.31.0",
48
- "@zag-js/toggle-group": "1.31.0",
49
- "@zag-js/tooltip": "1.31.0",
50
- "@zag-js/tree-view": "1.31.0",
51
- "@skeletonlabs/skeleton-common": "4.8.0"
24
+ "@internationalized/date": "3.10.1",
25
+ "@zag-js/accordion": "1.31.1",
26
+ "@zag-js/avatar": "1.31.1",
27
+ "@zag-js/carousel": "1.31.1",
28
+ "@zag-js/collapsible": "1.31.1",
29
+ "@zag-js/collection": "1.31.1",
30
+ "@zag-js/combobox": "1.31.1",
31
+ "@zag-js/date-picker": "1.31.1",
32
+ "@zag-js/dialog": "1.31.1",
33
+ "@zag-js/file-upload": "1.31.1",
34
+ "@zag-js/floating-panel": "1.31.1",
35
+ "@zag-js/listbox": "1.31.1",
36
+ "@zag-js/menu": "1.31.1",
37
+ "@zag-js/pagination": "1.31.1",
38
+ "@zag-js/popover": "1.31.1",
39
+ "@zag-js/progress": "1.31.1",
40
+ "@zag-js/radio-group": "1.31.1",
41
+ "@zag-js/rating-group": "1.31.1",
42
+ "@zag-js/slider": "1.31.1",
43
+ "@zag-js/steps": "1.31.1",
44
+ "@zag-js/svelte": "1.31.1",
45
+ "@zag-js/switch": "1.31.1",
46
+ "@zag-js/tabs": "1.31.1",
47
+ "@zag-js/tags-input": "1.31.1",
48
+ "@zag-js/toast": "1.31.1",
49
+ "@zag-js/toggle-group": "1.31.1",
50
+ "@zag-js/tooltip": "1.31.1",
51
+ "@zag-js/tree-view": "1.31.1",
52
+ "@skeletonlabs/skeleton-common": "4.9.0"
52
53
  },
53
54
  "peerDependencies": {
54
55
  "svelte": "^5.29.0"