@skeletonlabs/skeleton-svelte 1.5.1 → 2.0.0-next.1

package/dist/components/Modal/Modal.svelte

@@ -1,87 +0,0 @@
-<script lang="ts">
-	import { fly, fade } from 'svelte/transition';
-	import * as dialog from '@zag-js/dialog';
-	import { portal, normalizeProps, useMachine, mergeProps } from '@zag-js/svelte';
-	import type { ModalProps } from './types.js';
-
-	const {
-		// Base
-		base = '',
-		classes = '',
-		zIndex = 'auto',
-		// Trigger
-		triggerBase = '',
-		triggerBackground = '',
-		triggerClasses = '',
-		triggerAriaLabel = '',
-		// Backdrop
-		backdropBase = 'fixed top-0 left-0 right-0 bottom-0 z-[998]',
-		backdropBackground = 'bg-surface-50/75 dark:bg-surface-950/75',
-		backdropClasses = '',
-		// Positioner
-		positionerBase = 'fixed top-0 left-0 right-0 bottom-0 z-[999]',
-		positionerDisplay = 'flex',
-		positionerJustify = 'justify-center',
-		positionerAlign = 'items-center',
-		positionerPadding = 'p-4',
-		positionerClasses = '',
-		// Content
-		contentBase = '',
-		contentBackground = '',
-		contentClasses = '',
-		// Transitions
-		transitionsBackdropIn = { duration: 100 },
-		transitionsBackdropOut = { duration: 100 },
-		transitionsPositionerIn = { y: 50, duration: 200 },
-		transitionsPositionerOut = { y: 50, duration: 200 },
-		// Snippets
-		trigger,
-		content,
-		// Events
-		onclick,
-		// Zag ---
-		...zagProps
-	}: ModalProps = $props();
-
-	// Zag
-	const id = $props.id();
-	const service = useMachine(dialog.machine, () => ({
-		id: id,
-		...zagProps
-	}));
-	const api = $derived(dialog.connect(service, normalizeProps));
-	const triggerProps = $derived(mergeProps(api.getTriggerProps(), { onclick }));
-</script>
-
-<span class="{base} {classes}" data-testid="modal">
-	<!-- Trigger -->
-	{#if trigger}
-		<button {...triggerProps} class="{triggerBase} {triggerBackground} {triggerClasses}" type="button" aria-label={triggerAriaLabel}>
-			{@render trigger()}
-		</button>
-	{/if}
-
-	{#if api.open}
-		<!-- Backdrop -->
-		<div
-			use:portal
-			{...api.getBackdropProps()}
-			class="{backdropBase} {backdropBackground} {backdropClasses}"
-			in:fade={transitionsBackdropIn}
-			out:fade={transitionsBackdropOut}
-		></div>
-		<!-- Positioner -->
-		<div
-			use:portal
-			{...api.getPositionerProps()}
-			class="{positionerBase} {positionerDisplay} {positionerJustify} {positionerAlign} {positionerPadding} {positionerClasses}"
-			in:fly={transitionsPositionerIn}
-			out:fly={transitionsPositionerOut}
-		>
-			<!-- Content -->
-			<div {...api.getContentProps()} class="{contentBase} {contentBackground} {contentClasses}" style="z-index: {zIndex};">
-				{@render content?.()}
-			</div>
-		</div>
-	{/if}
-</span>

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

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

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

@@ -1,58 +0,0 @@
-import type { Snippet } from 'svelte';
-import * as dialog from '@zag-js/dialog';
-import type { FlyParams, FadeParams } from 'svelte/transition';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-export interface ModalProps extends Omit<dialog.Props, 'id'> {
-    /** Set base classes for the root element. */
-    base?: string;
-    /** Provide arbitrary classes for the root element. */
-    classes?: string;
-    /** Set a positioner style for z-index, ex: "10" */
-    zIndex?: string;
-    /** Set base classes for the trigger. */
-    triggerBase?: string;
-    /** Set background classes for the trigger. */
-    triggerBackground?: string;
-    /** Provide arbitrary classes for the trigger. */
-    triggerClasses?: string;
-    /** Set the aria-label for the trigger. */
-    triggerAriaLabel?: string;
-    /** Set base classes for the backdrop. */
-    backdropBase?: string;
-    /** Set background classes for the backdrop. */
-    backdropBackground?: string;
-    /** Provide arbitrary classes for the backdrop. */
-    backdropClasses?: string;
-    /** Set base classes for the positioner. */
-    positionerBase?: string;
-    /** Set display classes for the positioner. */
-    positionerDisplay?: string;
-    /** Set justify classes for the positioner. */
-    positionerJustify?: string;
-    /** Set align classes for the positioner. */
-    positionerAlign?: string;
-    /** Set padding classes for the positioner. */
-    positionerPadding?: string;
-    /** Provide arbitrary classes for the positioner. */
-    positionerClasses?: string;
-    /** Set base classes for the content. */
-    contentBase?: string;
-    /** Set background classes for the content. */
-    contentBackground?: string;
-    /** Provide arbitrary classes for the content. */
-    contentClasses?: string;
-    /** Provide transition for backdrop in */
-    transitionsBackdropIn?: FadeParams;
-    /** Provide transition for backdrop out */
-    transitionsBackdropOut?: FadeParams;
-    /** Provide transition for dialog in */
-    transitionsPositionerIn?: FlyParams;
-    /** Provide transition for dialog out */
-    transitionsPositionerOut?: FlyParams;
-    /** Provide the template contents inside the trigger button. */
-    trigger?: Snippet;
-    /** Provide the template contents of the dialog itself. */
-    content?: Snippet;
-    /** Handle the dialog button click event. */
-    onclick?: HTMLButtonAttributes['onclick'];
-}

package/dist/components/Modal/types.js

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

package/dist/components/Navigation/NavBar.svelte

@@ -1,48 +0,0 @@
-<script lang="ts">
-	import type { NavBarProps } from './types.js';
-	import { setNavigationContext } from './context.js';
-
-	const {
-		value,
-		// Root
-		base = 'flex flex-col',
-		background = 'preset-filled-surface-100-900',
-		width = 'min-w-[320px] w-full',
-		height = 'h-20',
-		padding = 'p-1',
-		classes = '',
-		// Tiles
-		tilesBase = 'flex-1 flex',
-		tilesFlexDirection = '',
-		tilesJustify = 'justify-center',
-		tilesItems = 'items-center',
-		tilesGap = 'gap-1',
-		tilesClasses = '',
-		// Events
-		onValueChange,
-		// Snippets
-		children
-	}: NavBarProps = $props();
-
-	// Context
-	setNavigationContext({
-		parent: 'bar',
-		get value() {
-			return value;
-		},
-		expanded: false,
-		get onValueChange() {
-			return onValueChange;
-		}
-	});
-</script>
-
-<!-- @component Provides a horizontal navigation interface. -->
-
-<aside class="{base} {background} {width} {height} {padding} {classes}" data-testid="nav-bar">
-	{#if children}
-		<nav class="{tilesBase} {tilesFlexDirection} {tilesJustify} {tilesItems} {tilesGap} {tilesClasses}" data-testid="nav-bar-tileset">
-			{@render children()}
-		</nav>
-	{/if}
-</aside>

package/dist/components/Navigation/NavBar.svelte.d.ts

@@ -1,5 +0,0 @@
-import type { NavBarProps } from './types.js';
-/** Provides a horizontal navigation interface. */
-declare const NavBar: import("svelte").Component<NavBarProps, {}, "">;
-type NavBar = ReturnType<typeof NavBar>;
-export default NavBar;

package/dist/components/Navigation/NavRail.svelte

@@ -1,90 +0,0 @@
-<script lang="ts">
-	import { setNavigationContext } from './context.js';
-	import type { NavRailProps } from './types.js';
-
-	const {
-		value = '',
-		expanded = false,
-		// Root
-		base = 'h-full flex flex-col',
-		background = 'preset-filled-surface-100-900',
-		padding = 'p-1',
-		width = 'w-24',
-		widthExpanded = 'w-64',
-		height = 'h-full',
-		classes = '',
-		// Header
-		headerBase = 'flex',
-		headerFlexDirection = 'flex-col',
-		headerJustify = 'justify-center',
-		headerItems = 'items-center',
-		headerGap = 'gap-1',
-		headerClasses = '',
-		// Tiles
-		tilesBase = 'flex-1 flex',
-		tilesFlexDirection = 'flex-col',
-		tilesJustify = 'justify-center',
-		tilesItems = 'items-center',
-		tilesGap = 'gap-1',
-		tilesClasses = '',
-		// Footer
-		footerBase = 'flex',
-		footerFlexDirection = 'flex-col',
-		footerJustify = 'justify-center',
-		footerItems = 'items-center',
-		footerGap = 'gap-1',
-		footerClasses = '',
-		// Events
-		onValueChange,
-		// Snippets
-		header,
-		tiles,
-		footer
-	}: NavRailProps = $props();
-
-	// Context
-	setNavigationContext({
-		parent: 'rail',
-		get value() {
-			return value;
-		},
-		get expanded() {
-			return expanded;
-		},
-		get onValueChange() {
-			return onValueChange;
-		}
-	});
-
-	// Reactive
-	let rxWidth = $derived(expanded ? widthExpanded : width);
-</script>
-
-<!-- @component Provides a vertical navigation interface. -->
-
-<aside class="{base} {background} {height} {padding} {rxWidth} {classes}" data-testid="nav-rail">
-	<!-- Header -->
-	{#if header}
-		<header
-			class="{headerBase} {headerFlexDirection} {headerJustify} {headerItems} {headerGap} {headerClasses}"
-			data-testid="nav-rail-header"
-		>
-			{@render header()}
-		</header>
-	{/if}
-	<!-- Tiles -->
-	{#if tiles}
-		<nav class="{tilesBase} {tilesFlexDirection} {tilesJustify} {tilesItems} {tilesGap} {tilesClasses}" data-testid="nav-rail-tiles">
-			{@render tiles()}
-		</nav>
-	{/if}
-	<!-- Footer -->
-	{#if footer}
-		<footer
-			class="{footerBase} {footerFlexDirection} {footerJustify} {footerItems} {footerGap} {footerClasses}"
-			data-testid="nav-rail-footer"
-		>
-			{@render footer()}
-		</footer>
-	{/if}
-</aside>

package/dist/components/Navigation/NavRail.svelte.d.ts

@@ -1,5 +0,0 @@
-import type { NavRailProps } from './types.js';
-/** Provides a vertical navigation interface. */
-declare const NavRail: import("svelte").Component<NavRailProps, {}, "">;
-type NavRail = ReturnType<typeof NavRail>;
-export default NavRail;

package/dist/components/Navigation/NavTile.svelte

@@ -1,87 +0,0 @@
-<script lang="ts">
-	import { getNavigationContext } from './context.js';
-	import type { NavTileProps } from './types.js';
-
-	const propsId = $props.id();
-
-	const {
-		id = propsId,
-		href,
-		target,
-		label,
-		labelExpanded,
-		title,
-		selected = undefined,
-		type = 'button',
-		// Root
-		base = 'flex items-center',
-		width = 'w-full',
-		aspect = 'aspect-square',
-		background = '',
-		hover = 'hover:preset-filled-surface-50-950',
-		active = 'preset-filled-primary-500',
-		padding = 'p-2',
-		gap = 'gap-1',
-		rounded = 'rounded-container',
-		classes = 'flex-col justify-center',
-		// Expanded
-		expandedPadding = 'py-3 px-4',
-		expandedGap = 'gap-4',
-		expandedClasses = '',
-		// Label (base)
-		labelBase = 'text-xs',
-		labelClasses = '',
-		// Label (expanded)
-		labelExpandedBase = '',
-		labelExpandedClasses = '',
-		// Events
-		onclick,
-		// Snippets
-		children
-	}: NavTileProps = $props();
-
-	// Context
-	const ctx = getNavigationContext();
-
-	// Reactive
-	const element = $derived(href ? 'a' : 'button');
-	const role = $derived(href ? undefined : 'button');
-	const rxSize = $derived(ctx.parent === 'bar' ? `h-full` : `${aspect}`);
-	const classesCollapsed = $derived(`${rxSize} ${padding} ${gap} ${classes}`);
-	const classesExtended = $derived(`${expandedPadding} ${expandedGap} ${expandedClasses}`);
-	const rxMode = $derived(ctx.expanded ? classesExtended : classesCollapsed);
-	const isActive = $derived(selected !== undefined ? selected : ctx.value === id);
-	const rxBackground = $derived(isActive ? active : `${background} ${hover}`);
-
-	function onClickHandler() {
-		if (onclick && !id) throw new Error('No ID was provided');
-		if (onclick && id) onclick(id);
-		ctx.onValueChange?.(id);
-	}
-</script>
-
-<!-- @component An individual Navigation component tile. -->
-
-<svelte:element
-	this={element}
-	class="{base} {width} {rounded} {rxBackground} {rxMode}"
-	{href}
-	{target}
-	type={element === 'button' ? type : undefined}
-	{title}
-	{role}
-	onclick={onClickHandler}
-	tabindex="0"
-	data-testid="nav-tile"
->
-	<!-- Icon -->
-	{#if children}<div>{@render children()}</div>{/if}
-	<!-- Label (base) -->
-	{#if label && !ctx.expanded}
-		<div class="{labelBase} {labelClasses}" data-testid="nav-tile-label">{label}</div>
-	{/if}
-	<!-- Label (expanded) -->
-	{#if labelExpanded && ctx.expanded}
-		<div class="{labelExpandedBase} {labelExpandedClasses}" data-testid="nav-tile-label-expanded">{labelExpanded}</div>
-	{/if}
-</svelte:element>

package/dist/components/Navigation/NavTile.svelte.d.ts

@@ -1,5 +0,0 @@
-import type { NavTileProps } from './types.js';
-/** An individual Navigation component tile. */
-declare const NavTile: import("svelte").Component<NavTileProps, {}, "">;
-type NavTile = ReturnType<typeof NavTile>;
-export default NavTile;

package/dist/components/Navigation/context.d.ts

@@ -1,2 +0,0 @@
-import type { NavContext } from './types.js';
-export declare const setNavigationContext: (value: NavContext) => NavContext, getNavigationContext: () => NavContext, key: symbol;

package/dist/components/Navigation/context.js

@@ -1,6 +0,0 @@
-import { createContext } from '../../internal/create-context.js';
-export const [setNavigationContext, getNavigationContext, key] = createContext({
-    parent: 'none',
-    value: '',
-    expanded: false
-});

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

@@ -1,6 +0,0 @@
-declare const _default: import("svelte").Component<import("./types").NavRailProps, {}, ""> & {
-    Rail: import("svelte").Component<import("./types").NavRailProps, {}, "">;
-    Bar: import("svelte").Component<import("./types").NavBarProps, {}, "">;
-    Tile: import("svelte").Component<import("./types").NavTileProps, {}, "">;
-};
-export default _default;

package/dist/components/Navigation/index.js

@@ -1,4 +0,0 @@
-import Bar from './NavBar.svelte';
-import Rail from './NavRail.svelte';
-import Tile from './NavTile.svelte';
-export default /* @__PURE__ */ Object.assign(Rail, { Rail, Bar, Tile });

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

@@ -1,132 +0,0 @@
-import type { Snippet } from 'svelte';
-export interface NavContext {
-    parent: 'bar' | 'rail' | 'none';
-    value?: string;
-    expanded: boolean;
-    onValueChange?: (id: string) => void;
-}
-export interface NavCommonProps {
-    value?: string;
-    /** Set base styles. */
-    base?: string;
-    /** Set background classes. */
-    background?: string;
-    /** Set padding classes. */
-    padding?: string;
-    /** Set width classes. */
-    width?: string;
-    /** Set width classes for expanded mode. */
-    widthExpanded?: string;
-    /** Set width classes. */
-    height?: string;
-    /** Provide arbitrary CSS classes. */
-    classes?: string;
-    /** Set base classes. */
-    tilesBase?: string;
-    /** Set flex direction classes. */
-    tilesFlexDirection?: string;
-    /** Set flex justify classes. */
-    tilesJustify?: string;
-    /** Set flex align classes. */
-    tilesItems?: string;
-    /** Set gap classes. */
-    tilesGap?: string;
-    /** Provide arbitrary CSS classes. */
-    tilesClasses?: string;
-    /** Triggers when selection occurs. */
-    onValueChange?: (id: string) => void;
-}
-export interface NavBarProps extends NavCommonProps {
-    /** The default children snippet. */
-    children?: Snippet;
-}
-export interface NavRailProps extends NavCommonProps {
-    /** Enabled expanded mode. */
-    expanded?: boolean;
-    /** Set base classes. */
-    headerBase?: string;
-    /** Set flex direction classes. */
-    headerFlexDirection?: string;
-    /** Set flex justify classes. */
-    headerJustify?: string;
-    /** Set flex align classes. */
-    headerItems?: string;
-    /** Set gap classes. */
-    headerGap?: string;
-    /** Provide arbitrary CSS classes. */
-    headerClasses?: string;
-    /** Set base classes. */
-    footerBase?: string;
-    /** Set flex direction classes. */
-    footerFlexDirection?: string;
-    /** Set flex justify classes. */
-    footerJustify?: string;
-    /** Set flex align classes. */
-    footerItems?: string;
-    /** Set gap classes. */
-    footerGap?: string;
-    /** Provide arbitrary CSS classes. */
-    footerClasses?: string;
-    /** The header snippet. */
-    header?: Snippet;
-    /** The tiles snippet. */
-    tiles?: Snippet;
-    /** The footer snippet. */
-    footer?: Snippet;
-}
-export interface NavTileProps {
-    /** Provide a unique ID. */
-    id?: string;
-    /** Provide an href link; turns Tiles into an anchor */
-    href?: string;
-    /** Set the href target attribute. */
-    target?: string;
-    /** Provide the label text. */
-    label?: string;
-    /** Provide a longer label in expanded mode. */
-    labelExpanded?: string;
-    /** Provile a title attribute. */
-    title?: string;
-    /** Enable the active selected state. */
-    selected?: boolean;
-    /** Set button type. */
-    type?: 'button' | 'submit' | 'reset';
-    /** Set base styles. */
-    base?: string;
-    /** Set width classes. */
-    width?: string;
-    /** Set aspect ratio classes. */
-    aspect?: string;
-    /** Set background classes. */
-    background?: string;
-    /** Set hover classes. */
-    hover?: string;
-    /** Set active classes. */
-    active?: string;
-    /** Set padding classes. */
-    padding?: string;
-    /** Set gap classes. */
-    gap?: string;
-    /** Set rounded classes. */
-    rounded?: string;
-    /** Provide arbitrary CSS classes. */
-    classes?: string;
-    /** Set padding classes for expanded mode. */
-    expandedPadding?: string;
-    /** Set gap classes for expanded mode. */
-    expandedGap?: string;
-    /** Provide arbitrary CSS classes for expanded mode. */
-    expandedClasses?: string;
-    /** Set base classes. */
-    labelBase?: string;
-    /** Provide arbitrary CSS classes. */
-    labelClasses?: string;
-    /** Set base classes. */
-    labelExpandedBase?: string;
-    /** Provide arbitrary CSS classes. */
-    labelExpandedClasses?: string;
-    /** Triggers when the tile is clicked. */
-    onclick?: (id: string) => void;
-    /** The default slot, used for icons. */
-    children?: Snippet;
-}

package/dist/components/Navigation/types.js

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