@skeletonlabs/skeleton-svelte 1.6.0-next.0 → 2.0.0-next.2

package/dist/components/Toast/Toaster.svelte

@@ -1,72 +0,0 @@
-<script lang="ts">
-	import { normalizeProps, useMachine } from '@zag-js/svelte';
-	import * as toast from '@zag-js/toast';
-	import Toast from './Toast.svelte';
-	import type { ToasterProps } from './types.js';
-
-	const {
-		// Toaster
-		toaster,
-		// Toast
-		base = 'flex justify-between items-center gap-3',
-		width = 'min-w-xs',
-		padding = 'p-3',
-		rounded = 'rounded-container',
-		classes = '',
-		// Message
-		messageBase = 'grid',
-		messageClasses = '',
-		// Title
-		titleBase = 'font-semibold',
-		titleClasses = '',
-		// Description
-		descriptionBase = 'text-sm',
-		descriptionClasses = '',
-		// Dismiss Button
-		btnDismissBase = 'btn-icon hover:preset-tonal',
-		btnDismissClasses = '',
-		btnDismissTitle = 'Dismiss',
-		btnDismissAriaLabel = 'Dismiss',
-		// State
-		stateInfo = 'preset-outlined-surface-200-800 preset-filled-surface-50-950',
-		stateSuccess = 'preset-filled-success-500',
-		stateWarning = 'preset-filled-warning-500',
-		stateError = 'preset-filled-error-500'
-	}: ToasterProps = $props();
-
-	const id = $props.id();
-	const service = useMachine(toast.group.machine, () => ({
-		id: id,
-		store: toaster
-	}));
-	const api = $derived(toast.group.connect(service, normalizeProps));
-</script>
-
-<div {...api.getGroupProps()} data-testid="toaster-root">
-	{#each api.getToasts() as toast, index (toast.id)}
-		<Toast
-			{base}
-			{width}
-			{padding}
-			{rounded}
-			{classes}
-			{messageBase}
-			{messageClasses}
-			{titleBase}
-			{titleClasses}
-			{descriptionBase}
-			{descriptionClasses}
-			{btnDismissBase}
-			{btnDismissClasses}
-			{btnDismissTitle}
-			{btnDismissAriaLabel}
-			{stateInfo}
-			{stateError}
-			{stateWarning}
-			{stateSuccess}
-			{toast}
-			{index}
-			parent={service}
-		></Toast>
-	{/each}
-</div>

package/dist/components/Toast/Toaster.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { ToasterProps } from './types.js';
-declare const Toaster: import("svelte").Component<ToasterProps, {}, "">;
-type Toaster = ReturnType<typeof Toaster>;
-export default Toaster;

package/dist/components/Toast/create-toaster.d.ts

@@ -1,2 +0,0 @@
-import * as toast from '@zag-js/toast';
-export declare function createToaster(options?: toast.StoreProps): toast.Store<any>;

package/dist/components/Toast/create-toaster.js

@@ -1,4 +0,0 @@
-import * as toast from '@zag-js/toast';
-export function createToaster(options = {}) {
-    return toast.createStore(options);
-}

package/dist/components/Toast/types.d.ts

@@ -1,47 +0,0 @@
-import * as toast from '@zag-js/toast';
-export interface ToasterProps extends toast.StoreProps {
-    toaster: toast.Store;
-    /** Provide base classes for the root element. */
-    base?: string;
-    /** Provide width classes for the root element. */
-    width?: string;
-    /** Provide padding classes for the root element. */
-    padding?: string;
-    /** Provide border radius classes for the root element. */
-    rounded?: string;
-    /** Provide arbitrary classes for the toast cards. */
-    classes?: string;
-    /** Provide base classes for the message. */
-    messageBase?: string;
-    /** Provide classes for the message. */
-    messageClasses?: string;
-    /** Provide base classes for the title. */
-    titleBase?: string;
-    /** Provide classes for the title. */
-    titleClasses?: string;
-    /** Provide base classes for the description. */
-    descriptionBase?: string;
-    /** Provide classes for the description. */
-    descriptionClasses?: string;
-    /** Provide base classes for the dismiss button. */
-    btnDismissBase?: string;
-    /** Provide arbitrary classes for the dismiss button. */
-    btnDismissClasses?: string;
-    /** Provide the title attribute for the dismiss button. */
-    btnDismissTitle?: string;
-    /** Provide the aria-label attribute for the dismiss button. */
-    btnDismissAriaLabel?: string;
-    /** Provide base classes for info toasts. */
-    stateInfo?: string;
-    /** Provide base classes for success toasts. */
-    stateSuccess?: string;
-    /** Provide base classes for warning toasts. */
-    stateWarning?: string;
-    /** Provide base classes for error toasts. */
-    stateError?: string;
-}
-export interface ToastProps extends Omit<ToasterProps, 'toaster'> {
-    toast: toast.Options;
-    index: number;
-    parent: toast.GroupService;
-}

package/dist/components/Toast/types.js

@@ -1 +0,0 @@
-import * as toast from '@zag-js/toast';

package/dist/components/Tooltip/Tooltip.svelte

@@ -1,78 +0,0 @@
-<script lang="ts">
-	import { fade } from 'svelte/transition';
-
-	import * as tooltip from '@zag-js/tooltip';
-	import { useMachine, normalizeProps, mergeProps } from '@zag-js/svelte';
-	import type { TooltipProps } from './types.js';
-
-	const {
-		zIndex = 'auto',
-		// Arrow
-		arrow = false,
-		arrowBackground = 'var(--color-surface-950-50)',
-		arrowSize = '10px',
-		// Base
-		base = '',
-		classes = '',
-		// Trigger
-		triggerBase = '',
-		triggerBackground = '',
-		triggerClasses = '',
-		triggerAriaLabel = '',
-		// Positioner
-		positionerBase = '',
-		positionerClasses = '',
-		// Content
-		contentBase = '',
-		contentBackground = '',
-		contentClasses = '',
-		// Arrow
-		arrowBase = '',
-		// arrowBackground = '',
-		arrowClasses = '',
-		// Snippets
-		trigger,
-		content,
-		// Events
-		onmouseover,
-		onclick,
-		// Zag ---
-		...zagProps
-	}: TooltipProps = $props();
-
-	// Zag
-	const id = $props.id();
-	const service = useMachine(tooltip.machine, () => ({
-		id: id,
-		...zagProps
-	}));
-	const api = $derived(tooltip.connect(service, normalizeProps));
-	const triggerProps = $derived(mergeProps(api.getTriggerProps(), { onmouseover, onclick }));
-</script>
-
-<span class="{base} {classes}" data-testid="tooltip">
-	<!-- Snippet: Trigger -->
-	{#if trigger}
-		<button {...triggerProps} class="{triggerBase} {triggerBackground} {triggerClasses}" type="button" aria-label={triggerAriaLabel}>
-			{@render trigger()}
-		</button>
-	{/if}
-	<!-- Tooltip Content -->
-	<div {...api.getPositionerProps()} class="{positionerBase} {positionerClasses}">
-		<!-- Popover -->
-		{#if api.open}
-			<div {...api.getContentProps()} transition:fade={{ duration: 100 }} style="z-index: {zIndex};">
-				<!-- Arrow -->
-				{#if arrow}
-					<div {...api.getArrowProps()} style:--arrow-size={arrowSize}>
-						<div {...api.getArrowTipProps()} class="{arrowBase} {arrowClasses}" style:--arrow-background={arrowBackground}></div>
-					</div>
-				{/if}
-				<!-- Snippet Content -->
-				<div class="{contentBase} {contentBackground} {contentClasses}">
-					{@render content?.()}
-				</div>
-			</div>
-		{/if}
-	</div>
-</span>

package/dist/components/Tooltip/Tooltip.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { TooltipProps } from './types.js';
-declare const Tooltip: import("svelte").Component<TooltipProps, {}, "">;
-type Tooltip = ReturnType<typeof Tooltip>;
-export default Tooltip;

package/dist/components/Tooltip/types.d.ts

@@ -1,47 +0,0 @@
-import type { Snippet } from 'svelte';
-import * as tooltip from '@zag-js/tooltip';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-export interface TooltipProps extends Omit<tooltip.Props, 'id'> {
-    /** Set a positioner style for z-index, ex: "10" */
-    zIndex?: string;
-    /** Enable display of the popover arrow. */
-    arrow?: boolean;
-    /** Set a style value for --arrow-background, ex: "var(--color-surface-50-950)" */
-    arrowBackground?: string;
-    /** Set a style value for --arrow-size, ex: "10px" */
-    arrowSize?: string;
-    /** Set base classes for the root element. */
-    base?: string;
-    /** Provide arbitrary classes for the root element. */
-    classes?: string;
-    /** Set base styles for the trigger. */
-    triggerBase?: string;
-    /** Set background styles for the trigger. */
-    triggerBackground?: string;
-    /** Provide arbitrary styles for the trigger. */
-    triggerClasses?: string;
-    /** Set the aria-label for the trigger. */
-    triggerAriaLabel?: string;
-    /** Set base classes for the positioner. */
-    positionerBase?: string;
-    /** Provide arbitrary classes for the positioner. */
-    positionerClasses?: string;
-    /** Set base styles for the content. */
-    contentBase?: string;
-    /** Set background styles for the content. */
-    contentBackground?: string;
-    /** Provide arbitrary styles for the content. */
-    contentClasses?: string;
-    /** Set base classes for the arrow. */
-    arrowBase?: string;
-    /** Provide arbitrary classes for the arrow. */
-    arrowClasses?: string;
-    /** Provide the template contents inside the trigger button. */
-    trigger?: Snippet;
-    /** Provide the template contents of the tooltip itself. */
-    content?: Snippet;
-    /** Handle the tooltip button hover event. */
-    onmouseover?: HTMLButtonAttributes['onmouseover'];
-    /** Handle the tooltip button click event. */
-    onclick?: HTMLButtonAttributes['onclick'];
-}

package/dist/components/Tooltip/types.js

@@ -1 +0,0 @@
-import * as tooltip from '@zag-js/tooltip';

package/dist/composed/accordion/anatomy/accordion-content.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { AccordionContentProps } from '../modules/types.js';
-declare const AccordionContent: import("svelte").Component<AccordionContentProps, {}, "">;
-type AccordionContent = ReturnType<typeof AccordionContent>;
-export default AccordionContent;

package/dist/composed/accordion/anatomy/accordion-heading.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { AccordionHeadingProps } from '../modules/types.js';
-declare const AccordionHeading: import("svelte").Component<AccordionHeadingProps, {}, "">;
-type AccordionHeading = ReturnType<typeof AccordionHeading>;
-export default AccordionHeading;

package/dist/composed/accordion/anatomy/accordion-indicator.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { AccordionIndicatorProps } from '../modules/types.js';
-declare const AccordionIndicator: import("svelte").Component<AccordionIndicatorProps, {}, "">;
-type AccordionIndicator = ReturnType<typeof AccordionIndicator>;
-export default AccordionIndicator;

package/dist/composed/accordion/anatomy/accordion-item.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-	import { mergeProps } from '@zag-js/svelte';
-	import * as accordion from '@zag-js/accordion';
-	import { classesAccordion } from '@skeletonlabs/skeleton-common';
-	import { AccordionItemContext, AccordionRootContext } from '../modules/context.js';
-	import type { AccordionItemProps } from '../modules/types.js';
-
-	const rootContext = AccordionRootContext.consume();
-	const props: AccordionItemProps = $props();
-	const [itemProps, componentProps] = $derived(accordion.splitItemProps(props));
-	const { element, children, ...restAttributes } = $derived(componentProps);
-	const attributes = $derived(
-		mergeProps(
-			rootContext.api.getItemProps(itemProps),
-			{
-				class: classesAccordion.item
-			},
-			restAttributes
-		)
-	);
-	AccordionItemContext.provide({
-		get itemProps() {
-			return itemProps;
-		}
-	});
-</script>
-
-{#if element}
-	{@render element({ attributes })}
-{:else}
-	<div {...attributes}>
-		{@render children?.()}
-	</div>
-{/if}

package/dist/composed/accordion/anatomy/accordion-item.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { AccordionItemProps } from '../modules/types.js';
-declare const AccordionItem: import("svelte").Component<AccordionItemProps, {}, "">;
-type AccordionItem = ReturnType<typeof AccordionItem>;
-export default AccordionItem;

package/dist/composed/accordion/anatomy/accordion-root.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-	import { mergeProps, normalizeProps, useMachine } from '@zag-js/svelte';
-	import * as accordion from '@zag-js/accordion';
-	import { classesAccordion } from '@skeletonlabs/skeleton-common';
-	import { AccordionRootContext } from '../modules/context.js';
-	import type { AccordionRootProps } from '../modules/types.js';
-
-	const props: AccordionRootProps = $props();
-	const [machineProps, componentProps] = $derived(accordion.splitProps(props));
-	const { element, children, ...restAttributes } = $derived(componentProps);
-	const id = $props.id();
-	const service = useMachine(accordion.machine, () => ({
-		id: id,
-		...machineProps
-	}));
-	const api = $derived(accordion.connect(service, normalizeProps));
-	const attributes = $derived(
-		mergeProps(
-			api.getRootProps(),
-			{
-				class: classesAccordion.root
-			},
-			restAttributes
-		)
-	);
-	AccordionRootContext.provide({
-		get api() {
-			return api;
-		}
-	});
-</script>
-
-{#if element}
-	{@render element({ attributes })}
-{:else}
-	<div {...attributes}>
-		{@render children?.()}
-	</div>
-{/if}

package/dist/composed/accordion/anatomy/accordion-root.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { AccordionRootProps } from '../modules/types.js';
-declare const AccordionRoot: import("svelte").Component<AccordionRootProps, {}, "">;
-type AccordionRoot = ReturnType<typeof AccordionRoot>;
-export default AccordionRoot;

package/dist/composed/accordion/anatomy/accordion-trigger.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { AccordionTriggerProps } from '../modules/types.js';
-declare const AccordionTrigger: import("svelte").Component<AccordionTriggerProps, {}, "">;
-type AccordionTrigger = ReturnType<typeof AccordionTrigger>;
-export default AccordionTrigger;

package/dist/composed/accordion/index.d.ts

@@ -1,2 +0,0 @@
-export * from './modules/types.js';
-export * from './modules/anatomy.js';

package/dist/composed/accordion/index.js

@@ -1,2 +0,0 @@
-export * from './modules/types.js';
-export * from './modules/anatomy.js';

package/dist/composed/accordion/modules/anatomy.d.ts

@@ -1,8 +0,0 @@
-declare const Accordion: import("svelte").Component<import("./types").AccordionRootProps, {}, ""> & {
-    Item: import("svelte").Component<import("./types").AccordionItemProps, {}, "">;
-    Heading: import("svelte").Component<import("./types").AccordionHeadingProps, {}, "">;
-    Trigger: import("svelte").Component<import("./types").AccordionTriggerProps, {}, "">;
-    Indicator: import("svelte").Component<import("./types").AccordionIndicatorProps, {}, "">;
-    Content: import("svelte").Component<import("./types").AccordionContentProps, {}, "">;
-};
-export { Accordion };

package/dist/composed/accordion/modules/context.d.ts

@@ -1,12 +0,0 @@
-import type { AccordionItemContext as AccordionItemContextType, AccordionRootContext as AccordionRootContextType } from './types.js';
-declare const AccordionRootContext: {
-    key: symbol;
-    consume(): AccordionRootContextType;
-    provide(value: AccordionRootContextType): AccordionRootContextType;
-};
-declare const AccordionItemContext: {
-    key: symbol;
-    consume(): AccordionItemContextType;
-    provide(value: AccordionItemContextType): AccordionItemContextType;
-};
-export { AccordionRootContext, AccordionItemContext };

package/dist/composed/accordion/modules/context.js

@@ -1,4 +0,0 @@
-import { createContext } from '../../../internal/create-context-new.js';
-const AccordionRootContext = createContext();
-const AccordionItemContext = createContext();
-export { AccordionRootContext, AccordionItemContext };

package/dist/composed/accordion/modules/types.d.ts

@@ -1,29 +0,0 @@
-import * as accordion from '@zag-js/accordion';
-import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
-import type { PropsWithElement } from '../../../internal/props-with-element.js';
-import type { PropsWithChildren } from '../../../internal/props-with-children.js';
-interface AccordionRootProps extends PropsWithElement, PropsWithChildren, Omit<accordion.Props, 'id'>, Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'defaultValue' | 'dir'> {
-}
-interface AccordionItemProps extends PropsWithElement, PropsWithChildren, accordion.ItemProps, HTMLAttributes<HTMLDivElement> {
-}
-interface AccordionHeadingProps extends PropsWithElement, PropsWithChildren, HTMLAttributes<HTMLHeadingElement> {
-    /**
-     * The level of the heading. This is used to determine the heading level for accessibility purposes.
-     *
-     * @defaultValue 3
-     */
-    level?: 1 | 2 | 3 | 4 | 5 | 6;
-}
-interface AccordionTriggerProps extends PropsWithElement, PropsWithChildren, HTMLButtonAttributes {
-}
-interface AccordionIndicatorProps extends PropsWithElement, PropsWithChildren, HTMLAttributes<HTMLDivElement> {
-}
-interface AccordionContentProps extends PropsWithElement, PropsWithChildren, HTMLAttributes<HTMLDivElement> {
-}
-interface AccordionRootContext {
-    api: accordion.Api;
-}
-interface AccordionItemContext {
-    itemProps: accordion.ItemProps;
-}
-export type { AccordionRootProps, AccordionItemProps, AccordionTriggerProps, AccordionHeadingProps, AccordionIndicatorProps, AccordionContentProps, AccordionRootContext, AccordionItemContext };

package/dist/composed/accordion/modules/types.js

@@ -1 +0,0 @@
-import * as accordion from '@zag-js/accordion';

package/dist/composed/avatar/anatomy/avatar-fallback.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { AvatarFallbackProps } from '../modules/types.js';
-declare const AvatarFallback: import("svelte").Component<AvatarFallbackProps, {}, "">;
-type AvatarFallback = ReturnType<typeof AvatarFallback>;
-export default AvatarFallback;

package/dist/composed/avatar/anatomy/avatar-image.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { AvatarImageProps } from '../modules/types.js';
-declare const AvatarImage: import("svelte").Component<AvatarImageProps, {}, "">;
-type AvatarImage = ReturnType<typeof AvatarImage>;
-export default AvatarImage;

package/dist/composed/avatar/anatomy/avatar-root.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { AvatarRootProps } from '../modules/types.js';
-declare const AvatarRoot: import("svelte").Component<AvatarRootProps, {}, "">;
-type AvatarRoot = ReturnType<typeof AvatarRoot>;
-export default AvatarRoot;

package/dist/composed/avatar/index.d.ts

@@ -1,2 +0,0 @@
-export * from './modules/types.js';
-export * from './modules/anatomy.js';

package/dist/composed/avatar/index.js

@@ -1,2 +0,0 @@
-export * from './modules/types.js';
-export * from './modules/anatomy.js';

package/dist/composed/avatar/modules/anatomy.d.ts

@@ -1,5 +0,0 @@
-declare const Avatar: import("svelte").Component<import("./types").AvatarRootProps, {}, ""> & {
-    Image: import("svelte").Component<import("./types").AvatarImageProps, {}, "">;
-    Fallback: import("svelte").Component<import("./types").AvatarFallbackProps, {}, "">;
-};
-export { Avatar };

package/dist/composed/avatar/modules/context.d.ts

@@ -1,7 +0,0 @@
-import type { AvatarRootContext as AvatarRootContextType } from './types.js';
-declare const AvatarRootContext: {
-    key: symbol;
-    consume(): AvatarRootContextType;
-    provide(value: AvatarRootContextType): AvatarRootContextType;
-};
-export { AvatarRootContext };

package/dist/composed/avatar/modules/context.js

@@ -1,3 +0,0 @@
-import { createContext } from '../../../internal/create-context-new.js';
-const AvatarRootContext = createContext();
-export { AvatarRootContext };

package/dist/composed/avatar/modules/types.d.ts

@@ -1,14 +0,0 @@
-import * as avatar from '@zag-js/avatar';
-import type { HTMLAttributes, HTMLImgAttributes } from 'svelte/elements';
-import type { PropsWithChildren } from '../../../internal/props-with-children.js';
-import type { PropsWithElement } from '../../../internal/props-with-element.js';
-interface AvatarRootProps extends PropsWithElement, PropsWithChildren, Omit<avatar.Props, 'id'>, Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'dir'> {
-}
-interface AvatarImageProps extends PropsWithElement, HTMLImgAttributes {
-}
-interface AvatarFallbackProps extends PropsWithElement, PropsWithChildren, HTMLAttributes<HTMLSpanElement> {
-}
-interface AvatarRootContext {
-    api: avatar.Api;
-}
-export type { AvatarRootProps, AvatarImageProps, AvatarFallbackProps, AvatarRootContext };

package/dist/composed/avatar/modules/types.js

@@ -1 +0,0 @@
-import * as avatar from '@zag-js/avatar';

package/dist/composed/index.d.ts

@@ -1,2 +0,0 @@
-export * from './accordion/index.js';
-export * from './avatar/index.js';

package/dist/composed/index.js

@@ -1,2 +0,0 @@
-export * from './accordion/index.js';
-export * from './avatar/index.js';

package/dist/internal/create-context-new.d.ts

@@ -1,5 +0,0 @@
-export declare function createContext<T>(): {
-    key: symbol;
-    consume(): T;
-    provide(value: T): T;
-};

package/dist/internal/create-context-new.js

@@ -1,13 +0,0 @@
-import { getContext, setContext } from 'svelte';
-export function createContext() {
-    const key = Symbol();
-    return {
-        key: key,
-        consume() {
-            return getContext(key);
-        },
-        provide(value) {
-            return setContext(key, value);
-        }
-    };
-}