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

package/dist/components/toast/anatomy/root-context.svelte.d.ts

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

package/dist/components/toast/anatomy/root.svelte

@@ -0,0 +1,74 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes';
+	import type { PropsWithElement } from '../../../internal/props-with-element';
+	import type { Options } from '@zag-js/toast';
+
+	export interface ToastRootProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
+		toast: Options;
+	}
+</script>
+
+<script lang="ts">
+	import { useMachine, normalizeProps, mergeProps } from '@zag-js/svelte';
+	import { classesToast } from '@skeletonlabs/skeleton-common';
+	import { ToastRootContext } from '../modules/root-context';
+	import { ToastGroupContext } from '../modules/group-context';
+	import { connect, machine } from '@zag-js/toast';
+
+	const props: ToastRootProps = $props();
+
+	const group = ToastGroupContext.consume();
+
+	const { element, children, toast: toastProps, ...rest } = $derived(props);
+
+	const id = $props.id();
+	const service = useMachine(machine, () => ({
+		id: id,
+		parent: group(),
+		...toastProps
+	}));
+	const toast = $derived(connect(service, normalizeProps));
+
+	const attributes = $derived(
+		mergeProps(toast.getRootProps(), rest, {
+			class: classesToast.root
+		})
+	);
+
+	ToastRootContext.provide(() => toast);
+</script>
+
+<div {...toast.getGhostBeforeProps()}></div>
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}
+<div {...toast.getGhostAfterProps()}></div>
+
+<style>
+	[data-part='root'] {
+		translate: var(--x) var(--y);
+		scale: var(--scale);
+		z-index: var(--z-index);
+		height: var(--height);
+		opacity: var(--opacity);
+		will-change: translate, opacity, scale;
+	}
+	[data-part='root'] {
+		transition:
+			translate 400ms,
+			scale 400ms,
+			opacity 400ms;
+		transition-timing-function: cubic-bezier(0.21, 1.02, 0.73, 1);
+	}
+	[data-part='root'][data-state='closed'] {
+		transition:
+			translate 400ms,
+			scale 400ms,
+			opacity 200ms;
+		transition-timing-function: cubic-bezier(0.06, 0.71, 0.55, 1);
+	}
+</style>

package/dist/components/toast/anatomy/root.svelte.d.ts

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

package/dist/components/toast/anatomy/title.svelte

@@ -0,0 +1,32 @@
+<script lang="ts" module>
+	import type { PropsWithElement } from '../../../internal/props-with-element';
+	import type { HTMLAttributes } from '../../../internal/html-attributes';
+
+	export interface ToastTitleProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
+</script>
+
+<script lang="ts">
+	import { mergeProps } from '@zag-js/svelte';
+	import { classesToast } from '@skeletonlabs/skeleton-common';
+	import { ToastRootContext } from '../modules/root-context';
+
+	const props: ToastTitleProps = $props();
+
+	const toast = ToastRootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(toast().getTitleProps(), rest, {
+			class: classesToast.title
+		})
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/toast/anatomy/title.svelte.d.ts

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

package/dist/components/toast/index.d.ts

@@ -0,0 +1,9 @@
+export { Toast } from './modules/anatomy';
+export { createStore as createToaster } from '@zag-js/toast';
+export type { ToastGroupProps } from './anatomy/group.svelte';
+export type { ToastRootProps } from './anatomy/root.svelte';
+export type { ToastRootContextProps } from './anatomy/root-context.svelte';
+export type { ToastMessageProps } from './anatomy/message.svelte';
+export type { ToastTitleProps } from './anatomy/title.svelte';
+export type { ToastDescriptionProps } from './anatomy/description.svelte';
+export type { ToastCloseTriggerProps } from './anatomy/close-trigger.svelte';

package/dist/components/toast/index.js

@@ -0,0 +1,2 @@
+export { Toast } from './modules/anatomy';
+export { createStore as createToaster } from '@zag-js/toast';

package/dist/components/toast/modules/anatomy.d.ts

@@ -0,0 +1,9 @@
+export declare const Toast: import("svelte").Component<import("../anatomy/root.svelte").ToastRootProps, {}, ""> & {
+    Context: import("svelte").Component<import("../anatomy/root-context.svelte").ToastRootContextProps, {}, "">;
+    Group: import("svelte").Component<import("../anatomy/group.svelte").ToastGroupProps, {}, "">;
+    Message: import("svelte").Component<import("../anatomy/message.svelte").ToastMessageProps, {}, "">;
+    Title: import("svelte").Component<import("../anatomy/title.svelte").ToastTitleProps, {}, "">;
+    Description: import("svelte").Component<import("../anatomy/description.svelte").ToastDescriptionProps, {}, "">;
+    ActionTrigger: import("svelte").Component<import("../anatomy/action-trigger.svelte").ToastActionTriggerProps, {}, "">;
+    CloseTrigger: import("svelte").Component<import("../anatomy/close-trigger.svelte").ToastCloseTriggerProps, {}, "">;
+};

package/dist/components/toast/modules/anatomy.js

@@ -0,0 +1,17 @@
+import Root from '../anatomy/root.svelte';
+import RootContext from '../anatomy/root-context.svelte';
+import Group from '../anatomy/group.svelte';
+import Message from '../anatomy/message.svelte';
+import Title from '../anatomy/title.svelte';
+import Description from '../anatomy/description.svelte';
+import ActionTrigger from '../anatomy/action-trigger.svelte';
+import CloseTrigger from '../anatomy/close-trigger.svelte';
+export const Toast = Object.assign(Root, {
+    Context: RootContext,
+    Group: Group,
+    Message: Message,
+    Title: Title,
+    Description: Description,
+    ActionTrigger: ActionTrigger,
+    CloseTrigger: CloseTrigger
+});

package/dist/components/toast/modules/group-context.d.ts

@@ -0,0 +1,6 @@
+import type { GroupService } from '@zag-js/toast';
+export declare const ToastGroupContext: {
+    key: symbol;
+    consume(): () => GroupService;
+    provide(value: () => GroupService): () => GroupService;
+};

package/dist/components/toast/modules/group-context.js

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

package/dist/components/toast/modules/root-context.d.ts

@@ -0,0 +1,6 @@
+import type { Api } from '@zag-js/toast';
+export declare const ToastRootContext: {
+    key: symbol;
+    consume(): () => Api;
+    provide(value: () => Api): () => Api;
+};

package/dist/components/toast/modules/root-context.js

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

package/dist/index.d.ts

@@ -2,4 +2,6 @@ export * from './components/accordion/index';
 export * from './components/avatar/index';
 export * from './components/progress-linear/index';
 export * from './components/rating-group/index';
+export * from './components/switch/index';
 export * from './components/tabs/index';
+export * from './components/toast/index';

package/dist/index.js

@@ -2,4 +2,6 @@ export * from './components/accordion/index';
 export * from './components/avatar/index';
 export * from './components/progress-linear/index';
 export * from './components/rating-group/index';
+export * from './components/switch/index';
 export * from './components/tabs/index';
+export * from './components/toast/index';

package/dist/internal/components/x.svelte

@@ -0,0 +1,14 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+>
+	<path d="M18 6 6 18" />
+	<path d="m6 6 12 12" />
+</svg>

package/dist/internal/components/x.svelte.d.ts

@@ -0,0 +1,26 @@
+export default X;
+type X = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const X: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/internal/html-attributes.d.ts

@@ -0,0 +1,2 @@
+import type { SvelteHTMLElements } from 'svelte/elements';
+export type HTMLAttributes<T extends keyof SvelteHTMLElements, U extends keyof SvelteHTMLElements[T] = never> = Omit<SvelteHTMLElements[T], U>;

package/dist/internal/html-attributes.js

@@ -0,0 +1 @@
+export {};

package/dist/internal/props-with-element.d.ts

@@ -1,10 +1,10 @@
 import type { Snippet } from 'svelte';
-interface PropsWithElement {
+import type { HTMLAttributes } from './html-attributes';
+import type { SvelteHTMLElements } from 'svelte/elements';
+interface PropsWithElement<T extends keyof SvelteHTMLElements> {
     /**
      * Render the element yourself
      */
-    element?: Snippet<[{
-        attributes: Record<string, unknown>;
-    }]>;
+    element?: Snippet<[HTMLAttributes<T>]>;
 }
 export type { PropsWithElement };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skeletonlabs/skeleton-svelte",
-  "version": "2.0.0-next.3",
+  "version": "2.0.0-next.4",
   "description": "The Svelte package for Skeleton.",
   "author": "endigo9740 <chris@skeletonlabs.dev>",
   "types": "./dist/index.d.ts",
@@ -16,24 +16,24 @@
     "dist"
   ],
   "dependencies": {
-    "@zag-js/accordion": "^1.22.1",
-    "@zag-js/avatar": "^1.22.1",
-    "@zag-js/combobox": "^1.22.1",
-    "@zag-js/dialog": "^1.22.1",
-    "@zag-js/file-upload": "^1.22.1",
-    "@zag-js/pagination": "^1.22.1",
-    "@zag-js/popover": "^1.22.1",
-    "@zag-js/progress": "^1.22.1",
-    "@zag-js/radio-group": "^1.22.1",
-    "@zag-js/rating-group": "^1.22.1",
-    "@zag-js/slider": "^1.22.1",
-    "@zag-js/svelte": "^1.22.1",
-    "@zag-js/switch": "^1.22.1",
-    "@zag-js/tabs": "^1.22.1",
-    "@zag-js/tags-input": "^1.22.1",
-    "@zag-js/toast": "^1.22.1",
-    "@zag-js/tooltip": "^1.22.1",
-    "@skeletonlabs/skeleton-common": "1.0.0-next.3"
+    "@zag-js/accordion": "^1.23.0",
+    "@zag-js/avatar": "^1.23.0",
+    "@zag-js/combobox": "^1.23.0",
+    "@zag-js/dialog": "^1.23.0",
+    "@zag-js/file-upload": "^1.23.0",
+    "@zag-js/pagination": "^1.23.0",
+    "@zag-js/popover": "^1.23.0",
+    "@zag-js/progress": "^1.23.0",
+    "@zag-js/radio-group": "^1.23.0",
+    "@zag-js/rating-group": "^1.23.0",
+    "@zag-js/slider": "^1.23.0",
+    "@zag-js/svelte": "^1.23.0",
+    "@zag-js/switch": "^1.23.0",
+    "@zag-js/tabs": "^1.23.0",
+    "@zag-js/tags-input": "^1.23.0",
+    "@zag-js/toast": "^1.23.0",
+    "@zag-js/tooltip": "^1.23.0",
+    "@skeletonlabs/skeleton-common": "1.0.0-next.4"
   },
   "peerDependencies": {
     "svelte": "^5.20.0"

package/dist/components/accordion/anatomy/item-context.svelte

@@ -1,18 +0,0 @@
-<script lang="ts" module>
-	import type { Snippet } from 'svelte';
-	import type { AccordionItemContextType } from '../modules/item-context';
-
-	export interface AccordionItemContextProps {
-		children: Snippet<[AccordionItemContextType]>;
-	}
-</script>
-
-<script lang="ts">
-	import { AccordionItemContext } from '../modules/item-context';
-
-	const props: AccordionItemContextProps = $props();
-
-	const itemContext = AccordionItemContext.consume();
-</script>
-
-{@render props.children(itemContext)}

package/dist/components/accordion/anatomy/item-context.svelte.d.ts

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

package/dist/components/accordion/modules/root-context.d.ts

@@ -1,9 +0,0 @@
-import type { Api } from '@zag-js/accordion';
-export interface AccordionRootContextType {
-    api: Api;
-}
-export declare const AccordionRootContext: {
-    key: symbol;
-    consume(): AccordionRootContextType;
-    provide(value: AccordionRootContextType): AccordionRootContextType;
-};

package/dist/components/avatar/modules/root-context.d.ts

@@ -1,9 +0,0 @@
-import type { Api } from '@zag-js/avatar';
-export interface AvatarRootContextType {
-    api: Api;
-}
-export declare const AvatarRootContext: {
-    key: symbol;
-    consume(): AvatarRootContextType;
-    provide(value: AvatarRootContextType): AvatarRootContextType;
-};

package/dist/components/progress-linear/modules/root-context.d.ts

@@ -1,9 +0,0 @@
-import type { Api } from '@zag-js/progress';
-export interface ProgressLinearRootContextType {
-    api: Api;
-}
-export declare const ProgressLinearRootContext: {
-    key: symbol;
-    consume(): ProgressLinearRootContextType;
-    provide(value: ProgressLinearRootContextType): ProgressLinearRootContextType;
-};

package/dist/components/rating-group/anatomy/item-context.svelte

@@ -1,18 +0,0 @@
-<script lang="ts" module>
-	import type { Snippet } from 'svelte';
-	import type { RatingGroupItemContextType } from '../modules/item-context';
-
-	export interface RatingGroupItemContextProps {
-		children: Snippet<[RatingGroupItemContextType]>;
-	}
-</script>
-
-<script lang="ts">
-	import { RatingGroupItemContext } from '../modules/item-context';
-
-	const props: RatingGroupItemContextProps = $props();
-
-	const itemContext = RatingGroupItemContext.consume();
-</script>
-
-{@render props.children(itemContext)}

package/dist/components/rating-group/anatomy/item-context.svelte.d.ts

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

package/dist/components/rating-group/modules/item-context.d.ts

@@ -1,9 +0,0 @@
-import type { ItemState } from '@zag-js/rating-group';
-export interface RatingGroupItemContextType {
-    itemState: ItemState;
-}
-export declare const RatingGroupItemContext: {
-    key: symbol;
-    consume(): RatingGroupItemContextType;
-    provide(value: RatingGroupItemContextType): RatingGroupItemContextType;
-};

package/dist/components/rating-group/modules/root-context.d.ts

@@ -1,9 +0,0 @@
-import type { Api } from '@zag-js/rating-group';
-export interface RatingGroupRootContextType {
-    api: Api;
-}
-export declare const RatingGroupRootContext: {
-    key: symbol;
-    consume(): RatingGroupRootContextType;
-    provide(value: RatingGroupRootContextType): RatingGroupRootContextType;
-};

package/dist/components/tabs/modules/root-context.d.ts

@@ -1,9 +0,0 @@
-import type { Api } from '@zag-js/tabs';
-export interface TabsRootContextType {
-    api: Api;
-}
-export declare const TabsRootContext: {
-    key: symbol;
-    consume(): TabsRootContextType;
-    provide(value: TabsRootContextType): TabsRootContextType;
-};

package/dist/internal/test-utils.d.ts

@@ -1,3 +0,0 @@
-import type { Snippet } from 'svelte';
-/** Use `mockSnippet(value)` to create `<span>{value}</span>` snippet content. */
-export declare function mockSnippet(key: string): Snippet<[]>;

package/dist/internal/test-utils.js

@@ -1,9 +0,0 @@
-import { createRawSnippet } from 'svelte';
-/** Use `mockSnippet(value)` to create `<span>{value}</span>` snippet content. */
-export function mockSnippet(key) {
-    return createRawSnippet(() => {
-        return {
-            render: () => `<span>${key}</span>`
-        };
-    });
-}