npm - @skeletonlabs/skeleton-svelte - Versions diffs - 5.0.0-next.0 → 5.0.0-next.10 - Mend

@skeletonlabs/skeleton-svelte 5.0.0-next.0 → 5.0.0-next.10

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 (445) hide show

package/dist/components/popover/anatomy/arrow-tip.svelte CHANGED Viewed

@@ -6,12 +6,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { PopoverRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: PopoverArrowTipProps = $props();
-	const popover = RootContext.consume();
+	const popover = PopoverRootContext.consume();
 	const { element, children, ...rest } = $derived(props);

package/dist/components/popover/anatomy/arrow.svelte CHANGED Viewed

@@ -6,12 +6,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { PopoverRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: PopoverArrowProps = $props();
-	const popover = RootContext.consume();
+	const popover = PopoverRootContext.consume();
 	const { element, children, ...rest } = $derived(props);

package/dist/components/popover/anatomy/close-trigger.svelte CHANGED Viewed

@@ -6,12 +6,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { PopoverRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: PopoverCloseTriggerProps = $props();
-	const popover = RootContext.consume();
+	const popover = PopoverRootContext.consume();
 	const { element, children, ...rest } = $derived(props);

package/dist/components/popover/anatomy/content.svelte CHANGED Viewed

@@ -6,12 +6,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { PopoverRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: PopoverContentProps = $props();
-	const popover = RootContext.consume();
+	const popover = PopoverRootContext.consume();
 	const { element, children, ...rest } = $derived(props);

package/dist/components/popover/anatomy/description.svelte CHANGED Viewed

@@ -6,12 +6,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { PopoverRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: PopoverDescriptionProps = $props();
-	const popover = RootContext.consume();
+	const popover = PopoverRootContext.consume();
 	const { element, children, ...rest } = $derived(props);

package/dist/components/popover/anatomy/positioner.svelte CHANGED Viewed

@@ -6,12 +6,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { PopoverRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: PopoverPositionerProps = $props();
-	const popover = RootContext.consume();
+	const popover = PopoverRootContext.consume();
 	const { element, children, ...rest } = $derived(props);

package/dist/components/popover/anatomy/root-context.svelte CHANGED Viewed

@@ -8,11 +8,11 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { PopoverRootContext } from '../modules/root-context.js';
 	const props: PopoverRootContextProps = $props();
-	const popover = RootContext.consume();
+	const popover = PopoverRootContext.consume();
 	const { children } = $derived(props);
 </script>

package/dist/components/popover/anatomy/root-context.svelte.d.ts CHANGED Viewed

@@ -3,7 +3,6 @@ import type { Snippet } from 'svelte';
 export interface PopoverRootContextProps {
     children: Snippet<[ReturnType<typeof usePopover>]>;
 }
-import { RootContext } from '../modules/root-context.js';
 declare const RootContext: import("svelte").Component<PopoverRootContextProps, {}, "">;
 type RootContext = ReturnType<typeof RootContext>;
 export default RootContext;

package/dist/components/popover/anatomy/root-provider.svelte CHANGED Viewed

@@ -8,13 +8,13 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { PopoverRootContext } from '../modules/root-context.js';
 	const props: PopoverRootProviderProps = $props();
 	const { children, value: popover } = $derived(props);
-	RootContext.provide(() => popover());
+	PopoverRootContext.provide(() => popover());
 </script>
 {@render children?.()}

package/dist/components/popover/anatomy/root.svelte CHANGED Viewed

@@ -7,7 +7,7 @@
 <script lang="ts">
 	import { usePopover } from '../modules/provider.svelte';
-	import { RootContext } from '../modules/root-context.js';
+	import { PopoverRootContext } from '../modules/root-context.js';
 	import { splitProps } from '@zag-js/popover';
 	const props: PopoverRootProps = $props();
@@ -21,7 +21,7 @@
 		id: id,
 	}));
-	RootContext.provide(() => popover());
+	PopoverRootContext.provide(() => popover());
 </script>
 {@render children?.()}

package/dist/components/popover/anatomy/title.svelte CHANGED Viewed

@@ -6,12 +6,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { PopoverRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: PopoverTitleProps = $props();
-	const popover = RootContext.consume();
+	const popover = PopoverRootContext.consume();
 	const { element, children, ...rest } = $derived(props);

package/dist/components/popover/anatomy/trigger.svelte CHANGED Viewed

@@ -6,12 +6,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { PopoverRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: PopoverTriggerProps = $props();
-	const popover = RootContext.consume();
+	const popover = PopoverRootContext.consume();
 	const { element, children, ...rest } = $derived(props);

package/dist/components/popover/modules/provider.svelte.js CHANGED Viewed

@@ -1,7 +1,12 @@
+import { LocaleProviderRootContext } from '../../locale-provider/modules/root-context.js';
 import { connect, machine } from '@zag-js/popover';
 import { normalizeProps, useMachine } from '@zag-js/svelte';
 export function usePopover(props) {
-    const service = useMachine(machine, props);
+    const locale = LocaleProviderRootContext.consume();
+    const service = useMachine(machine, () => ({
+        dir: locale().dir,
+        ...(typeof props === 'function' ? props() : props),
+    }));
     const popover = $derived(connect(service, normalizeProps));
     return () => popover;
 }

package/dist/components/popover/modules/root-context.js CHANGED Viewed

@@ -1,2 +1,2 @@
 import { createContext } from '../../../internal/create-context.js';
-export const RootContext = createContext();
+export const PopoverRootContext = createContext();

package/dist/components/progress/anatomy/circle-range.svelte CHANGED Viewed

@@ -6,12 +6,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { ProgressRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: ProgressCircleRangeProps = $props();
-	const progress = RootContext.consume();
+	const progress = ProgressRootContext.consume();
 	const { element, ...rest } = $derived(props);

package/dist/components/progress/anatomy/circle-track.svelte CHANGED Viewed

@@ -6,12 +6,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { ProgressRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: ProgressCircleTrackProps = $props();
-	const progress = RootContext.consume();
+	const progress = ProgressRootContext.consume();
 	const { element, ...rest } = $derived(props);

package/dist/components/progress/anatomy/circle.svelte CHANGED Viewed

@@ -6,12 +6,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { ProgressRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: ProgressCircleProps = $props();
-	const progress = RootContext.consume();
+	const progress = ProgressRootContext.consume();
 	const { element, children, ...rest } = $derived(props);

package/dist/components/progress/anatomy/label.svelte CHANGED Viewed

@@ -6,12 +6,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { ProgressRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: ProgressLabelProps = $props();
-	const progress = RootContext.consume();
+	const progress = ProgressRootContext.consume();
 	const { element, children, ...rest } = $derived(props);

package/dist/components/progress/anatomy/range.svelte CHANGED Viewed

@@ -6,12 +6,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { ProgressRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: ProgressRangeProps = $props();
-	const progress = RootContext.consume();
+	const progress = ProgressRootContext.consume();
 	const { element, children, ...rest } = $derived(props);

package/dist/components/progress/anatomy/root-context.svelte CHANGED Viewed

@@ -8,11 +8,11 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { ProgressRootContext } from '../modules/root-context.js';
 	const props: ProgressRootContextProps = $props();
-	const progress = RootContext.consume();
+	const progress = ProgressRootContext.consume();
 	const { children } = $derived(props);
 </script>

package/dist/components/progress/anatomy/root-context.svelte.d.ts CHANGED Viewed

@@ -3,7 +3,6 @@ import type { Snippet } from 'svelte';
 export interface ProgressRootContextProps {
     children: Snippet<[ReturnType<typeof useProgress>]>;
 }
-import { RootContext } from '../modules/root-context.js';
 declare const RootContext: import("svelte").Component<ProgressRootContextProps, {}, "">;
 type RootContext = ReturnType<typeof RootContext>;
 export default RootContext;

package/dist/components/progress/anatomy/root-provider.svelte CHANGED Viewed

@@ -9,7 +9,7 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { ProgressRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: ProgressRootProviderProps = $props();
@@ -18,7 +18,7 @@
 	const attributes = $derived(mergeProps(avatar().getRootProps(), rest));
-	RootContext.provide(() => avatar());
+	ProgressRootContext.provide(() => avatar());
 </script>
 {#if element}

package/dist/components/progress/anatomy/root.svelte CHANGED Viewed

@@ -8,7 +8,7 @@
 <script lang="ts">
 	import { useProgress } from '../modules/provider.svelte';
-	import { RootContext } from '../modules/root-context.js';
+	import { ProgressRootContext } from '../modules/root-context.js';
 	import { splitProps } from '@zag-js/progress';
 	import { mergeProps } from '@zag-js/svelte';
@@ -25,7 +25,7 @@
 	const attributes = $derived(mergeProps(avatar().getRootProps(), rest));
-	RootContext.provide(() => avatar());
+	ProgressRootContext.provide(() => avatar());
 </script>
 {#if element}

package/dist/components/progress/anatomy/track.svelte CHANGED Viewed

@@ -6,12 +6,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { ProgressRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: ProgressTrackProps = $props();
-	const progress = RootContext.consume();
+	const progress = ProgressRootContext.consume();
 	const { element, children, ...rest } = $derived(props);

package/dist/components/progress/anatomy/value-text.svelte CHANGED Viewed

@@ -6,12 +6,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { ProgressRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: ProgressValueTextProps = $props();
-	const progress = RootContext.consume();
+	const progress = ProgressRootContext.consume();
 	const { element, children, ...rest } = $derived(props);

package/dist/components/progress/modules/provider.svelte.js CHANGED Viewed

@@ -1,7 +1,12 @@
+import { LocaleProviderRootContext } from '../../locale-provider/modules/root-context.js';
 import { connect, machine } from '@zag-js/progress';
 import { normalizeProps, useMachine } from '@zag-js/svelte';
 export function useProgress(props) {
-    const service = useMachine(machine, props);
+    const locale = LocaleProviderRootContext.consume();
+    const service = useMachine(machine, () => ({
+        dir: locale().dir,
+        ...(typeof props === 'function' ? props() : props),
+    }));
     const progress = $derived(connect(service, normalizeProps));
     return () => progress;
 }

package/dist/components/progress/modules/root-context.js CHANGED Viewed

@@ -1,2 +1,2 @@
 import { createContext } from '../../../internal/create-context.js';
-export const RootContext = createContext();
+export const ProgressRootContext = createContext();

package/dist/components/qr-code/anatomy/download-trigger.svelte ADDED Viewed

@@ -0,0 +1,28 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+	import type { DownloadTriggerProps } from '@zag-js/qr-code';
+	export interface QrCodeDownloadTriggerProps extends DownloadTriggerProps, PropsWithElement<'button'>, HTMLAttributes<'button'> {}
+</script>
+<script lang="ts">
+	import { QrCodeRootContext } from '../modules/root-context.js';
+	import { mergeProps } from '@zag-js/svelte';
+	const props: QrCodeDownloadTriggerProps = $props();
+	const qrCode = QrCodeRootContext.consume();
+	const { mimeType, fileName, quality, element, children, ...rest } = $derived(props);
+	const attributes = $derived(mergeProps(qrCode().getDownloadTriggerProps({ mimeType, fileName, quality }), rest));
+</script>
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<button {...attributes}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/components/qr-code/anatomy/download-trigger.svelte.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+import type { DownloadTriggerProps } from '@zag-js/qr-code';
+export interface QrCodeDownloadTriggerProps extends DownloadTriggerProps, PropsWithElement<'button'>, HTMLAttributes<'button'> {
+}
+declare const DownloadTrigger: import("svelte").Component<QrCodeDownloadTriggerProps, {}, "">;
+type DownloadTrigger = ReturnType<typeof DownloadTrigger>;
+export default DownloadTrigger;

package/dist/components/qr-code/anatomy/frame.svelte ADDED Viewed

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+	export interface QrCodeFrameProps extends PropsWithElement<'svg'>, HTMLAttributes<'svg'> {}
+</script>
+<script lang="ts">
+	import { QrCodeRootContext } from '../modules/root-context.js';
+	import { mergeProps } from '@zag-js/svelte';
+	const props: QrCodeFrameProps = $props();
+	const qrCode = QrCodeRootContext.consume();
+	const { element, children, ...rest } = $derived(props);
+	const attributes = $derived(mergeProps(qrCode().getFrameProps(), rest));
+</script>
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<svg {...attributes}>
+		{@render children?.()}
+	</svg>
+{/if}

package/dist/components/qr-code/anatomy/frame.svelte.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+export interface QrCodeFrameProps extends PropsWithElement<'svg'>, HTMLAttributes<'svg'> {
+}
+declare const Frame: import("svelte").Component<QrCodeFrameProps, {}, "">;
+type Frame = ReturnType<typeof Frame>;
+export default Frame;

package/dist/components/qr-code/anatomy/overlay.svelte ADDED Viewed

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+	export interface QrCodeOverlayProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
+</script>
+<script lang="ts">
+	import { QrCodeRootContext } from '../modules/root-context.js';
+	import { mergeProps } from '@zag-js/svelte';
+	const props: QrCodeOverlayProps = $props();
+	const qrCode = QrCodeRootContext.consume();
+	const { element, children, ...rest } = $derived(props);
+	const attributes = $derived(mergeProps(qrCode().getOverlayProps(), rest));
+</script>
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/qr-code/anatomy/overlay.svelte.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+export interface QrCodeOverlayProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
+}
+declare const Overlay: import("svelte").Component<QrCodeOverlayProps, {}, "">;
+type Overlay = ReturnType<typeof Overlay>;
+export default Overlay;

package/dist/components/qr-code/anatomy/pattern.svelte ADDED Viewed

@@ -0,0 +1,25 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+	export interface QrCodePatternProps extends PropsWithElement<'path'>, HTMLAttributes<'path'> {}
+</script>
+<script lang="ts">
+	import { QrCodeRootContext } from '../modules/root-context.js';
+	import { mergeProps } from '@zag-js/svelte';
+	const props: QrCodePatternProps = $props();
+	const qrCode = QrCodeRootContext.consume();
+	const { element, ...rest } = $derived(props);
+	const attributes = $derived(mergeProps(qrCode().getPatternProps(), rest));
+</script>
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<path {...attributes} />
+{/if}

package/dist/components/qr-code/anatomy/pattern.svelte.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+export interface QrCodePatternProps extends PropsWithElement<'path'>, HTMLAttributes<'path'> {
+}
+declare const Pattern: import("svelte").Component<QrCodePatternProps, {}, "">;
+type Pattern = ReturnType<typeof Pattern>;
+export default Pattern;

package/dist/components/qr-code/anatomy/root-context.svelte ADDED Viewed

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+	import type { useQrCode } from '../modules/provider.svelte';
+	import type { Snippet } from 'svelte';
+	export interface QrCodeRootContextProps {
+		children: Snippet<[ReturnType<typeof useQrCode>]>;
+	}
+</script>
+<script lang="ts">
+	import { QrCodeRootContext } from '../modules/root-context.js';
+	const props: QrCodeRootContextProps = $props();
+	const qrCode = QrCodeRootContext.consume();
+	const { children } = $derived(props);
+</script>
+{@render children(qrCode)}

package/dist/components/qr-code/anatomy/root-context.svelte.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import type { useQrCode } from '../modules/provider.svelte';
+import type { Snippet } from 'svelte';
+export interface QrCodeRootContextProps {
+    children: Snippet<[ReturnType<typeof useQrCode>]>;
+}
+declare const RootContext: import("svelte").Component<QrCodeRootContextProps, {}, "">;
+type RootContext = ReturnType<typeof RootContext>;
+export default RootContext;

package/dist/components/qr-code/anatomy/root-provider.svelte ADDED Viewed

@@ -0,0 +1,30 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+	import type { useQrCode } from '../modules/provider.svelte';
+	export interface QrCodeRootProviderProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
+		value: ReturnType<typeof useQrCode>;
+	}
+</script>
+<script lang="ts">
+	import { QrCodeRootContext } from '../modules/root-context.js';
+	import { mergeProps } from '@zag-js/svelte';
+	const props: QrCodeRootProviderProps = $props();
+	const { element, children, value: qrCode, ...rest } = $derived(props);
+	const attributes = $derived(mergeProps(qrCode().getRootProps(), rest));
+	QrCodeRootContext.provide(() => qrCode());
+</script>
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/qr-code/anatomy/root-provider.svelte.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+import type { useQrCode } from '../modules/provider.svelte';
+export interface QrCodeRootProviderProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
+    value: ReturnType<typeof useQrCode>;
+}
+declare const RootProvider: import("svelte").Component<QrCodeRootProviderProps, {}, "">;
+type RootProvider = ReturnType<typeof RootProvider>;
+export default RootProvider;