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

package/dist/components/Pagination/Pagination.svelte

@@ -1,146 +0,0 @@
-<script lang="ts">
-	import * as pagination from '@zag-js/pagination';
-	import { normalizeProps, useMachine } from '@zag-js/svelte';
-	import type { PaginationProps } from './types.js';
-
-	const {
-		data = [],
-		alternative = false,
-		textSeparator = 'of',
-		showFirstLastButtons = false,
-		// Root
-		base = 'inline-flex items-stretch overflow-hidden',
-		background = 'preset-outlined-surface-200-800',
-		border = '',
-		gap = 'gap-2',
-		padding = 'p-2',
-		rounded = 'rounded-container',
-		classes = '',
-		// Titles
-		titleFirst,
-		titlePrevious,
-		titleNumeral,
-		titleNext,
-		titleLast,
-		// Buttons
-		buttonBase = 'btn',
-		buttonActive = 'preset-filled',
-		buttonInactive = 'preset-tonal',
-		buttonHover = 'hover:preset-filled',
-		buttonClasses = '',
-		// Children
-		labelFirst,
-		labelPrevious,
-		labelEllipsis,
-		labelNext,
-		labelLast,
-		// Zag ---
-		...zagProps
-	}: PaginationProps = $props();
-
-	// Zag
-	const id = $props.id();
-	const service = useMachine(pagination.machine, () => ({
-		id: id,
-		count: zagProps.count ?? data.length,
-		...zagProps
-	}));
-	const api = $derived(pagination.connect(service, normalizeProps));
-
-	// Reactive
-	const rxButtonActive = (page: { value: number }) => {
-		return service.prop('page') === page.value ? buttonActive : `${buttonInactive} ${buttonHover}`;
-	};
-</script>
-
-{#if api.totalPages > 1}
-	<div {...api.getRootProps()} class="{base} {background} {border} {gap} {padding} {rounded} {classes}" data-testid="pagination">
-		<!-- Button: First Page -->
-		{#if showFirstLastButtons}
-			<button
-				type="button"
-				onclick={api.goToFirstPage}
-				class="{buttonBase} {buttonInactive} {buttonHover} {buttonClasses}"
-				title={titleFirst}
-				disabled={api.page === 1}
-				data-testid="pagination-button-first"
-			>
-				{#if labelFirst}{@render labelFirst()}{:else}&laquo;{/if}
-			</button>
-		{/if}
-		<!-- Button: Previous Page -->
-		<button
-			type="button"
-			{...api.getPrevTriggerProps()}
-			class="{buttonBase} {buttonInactive} {buttonHover} {buttonClasses}"
-			title={titlePrevious}
-			disabled={api.page === 1}
-			data-testid="pagination-button-previous"
-		>
-			{#if labelPrevious}{@render labelPrevious()}{:else}&larr;{/if}
-		</button>
-		<!-- Numeral List -->
-		{#if !alternative}
-			{#each api.pages as page, i}
-				{#if page.type === 'page'}
-					<!-- Numeral -->
-					<button
-						type="button"
-						{...api.getItemProps(page)}
-						class="{buttonBase} {rxButtonActive(page)} {buttonClasses}"
-						title={titleNumeral && `${titleNumeral} ${page.value}`}
-						data-testid="pagination-button-numeral"
-					>
-						{page.value}
-					</button>
-				{:else}
-					<!-- Ellipsis -->
-					<span
-						{...api.getEllipsisProps({ index: i })}
-						class="{buttonBase} {buttonInactive} {buttonClasses}"
-						data-testid="pagination-ellipsis"
-					>
-						{#if labelEllipsis}{@render labelEllipsis()}{:else}&ctdot;{/if}
-					</span>
-				{/if}
-			{/each}
-		{/if}
-		<!-- Alternative Interface -->
-		{#if alternative}
-			<span class="{buttonBase} {buttonInactive} {buttonClasses}" data-testid="pagination-alt-ui">
-				<span>
-					{api.pageRange.start + 1} - {api.pageRange.end}
-				</span>
-				<span class="opacity-60">
-					{api.page}
-					{textSeparator}
-					{api.totalPages}
-				</span>
-			</span>
-		{/if}
-		<!-- Button: Next Page -->
-		<button
-			type="button"
-			{...api.getNextTriggerProps()}
-			class="{buttonBase} {buttonInactive} {buttonHover} {buttonClasses}"
-			title={titleNext}
-			disabled={!api.nextPage}
-			data-testid="pagination-button-next"
-		>
-			{#if labelNext}{@render labelNext()}{:else}&rarr;{/if}
-		</button>
-		<!-- Button: Last Page -->
-		{#if showFirstLastButtons}
-			<button
-				type="button"
-				onclick={api.goToLastPage}
-				class="{buttonBase} {buttonInactive} {buttonHover} {buttonClasses}"
-				title={titleLast}
-				disabled={!api.nextPage}
-				data-testid="pagination-button-last"
-			>
-				{#if labelLast}{@render labelLast()}{:else}&raquo;{/if}
-			</button>
-		{/if}
-	</div>
-{/if}

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

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

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

@@ -1,56 +0,0 @@
-import type { Snippet } from 'svelte';
-import * as pagination from '@zag-js/pagination';
-export interface PaginationProps extends Omit<pagination.Props, 'id'> {
-    /** Provide source data as an array. */
-    data: unknown[];
-    /** Enables alternative display with stats and first/last buttons. */
-    alternative?: boolean;
-    /** Set the separator text or character, such as "of" in "X of Y". */
-    textSeparator?: string;
-    /** Show first and last page button. */
-    showFirstLastButtons?: boolean;
-    /** Sets base classes for the list. */
-    base?: string;
-    /** Sets background classes for the list. */
-    background?: string;
-    /** Sets border classes for the list. */
-    border?: string;
-    /** Sets gap classes for the list. */
-    gap?: string;
-    /** Sets padding classes for the list. */
-    padding?: string;
-    /** Sets border radius classes for the list. */
-    rounded?: string;
-    /** Provide arbitrary CSS classes for the root. */
-    classes?: string;
-    /** Set an optional title for the first button. */
-    titleFirst?: string;
-    /** Set an optional title for the previous button. */
-    titlePrevious?: string;
-    /** Set an optional title for the numeral buttons (ex: Page 1). */
-    titleNumeral?: string;
-    /** Set an optional title for the next button. */
-    titleNext?: string;
-    /** Set an optional title for the last button. */
-    titleLast?: string;
-    /** Sets base classes for buttons. */
-    buttonBase?: string;
-    /** Sets active state classes for buttons. */
-    buttonActive?: string;
-    /** Sets inactive state classes for buttons. */
-    buttonInactive?: string;
-    /** Sets hover state classes for buttons. */
-    buttonHover?: string;
-    /** Provide arbitrary CSS classes for buttons. */
-    buttonClasses?: string;
-    /** Set button icon or label for first button. */
-    labelFirst?: Snippet;
-    /** Set button icon or label for previous button. */
-    labelPrevious?: Snippet;
-    /** Set button icon or label for ellipsis. */
-    labelEllipsis?: Snippet;
-    /** Set button icon or label for next button. */
-    labelNext?: Snippet;
-    /** Set button icon or label for last button. */
-    labelLast?: Snippet;
-}

package/dist/components/Pagination/types.js

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

package/dist/components/Popover/Popover.svelte

@@ -1,74 +0,0 @@
-<script lang="ts">
-	import { fade } from 'svelte/transition';
-
-	import * as popover from '@zag-js/popover';
-	import { portal, useMachine, normalizeProps, mergeProps } from '@zag-js/svelte';
-	import type { PopoverProps } 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 = '',
-		arrowClasses = '',
-		// Snippets
-		trigger,
-		content,
-		// Events
-		onclick,
-		// Zag ---
-		...zagProps
-	}: PopoverProps = $props();
-
-	// Zag
-	const id = $props.id();
-	const service = useMachine(popover.machine, () => ({
-		id: id,
-		...zagProps
-	}));
-	const api = $derived(popover.connect(service, normalizeProps));
-	const triggerProps = $derived(mergeProps(api.getTriggerProps(), { onclick }));
-</script>
-
-<span class="{base} {classes}" data-testid="popover">
-	<!-- Snippet: Trigger -->
-	{#if trigger}
-		<button {...triggerProps} class="{triggerBase} {triggerBackground} {triggerClasses}" type="button" aria-label={triggerAriaLabel}>
-			{@render trigger()}
-		</button>
-	{/if}
-	<!-- Portal -->
-	<div use:portal={{ disabled: !api.portalled }} {...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/Popover/Popover.svelte.d.ts

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

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

@@ -1,45 +0,0 @@
-import type { Snippet } from 'svelte';
-import * as popover from '@zag-js/popover';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-export interface PopoverProps extends Omit<popover.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 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 positioner. */
-    positionerBase?: 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;
-    /** 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 popover itself. */
-    content?: Snippet;
-    /** Handle the popover button click event. */
-    onclick?: HTMLButtonAttributes['onclick'];
-}

package/dist/components/Popover/types.js

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

package/dist/components/Progress/Progress.svelte

@@ -1,63 +0,0 @@
-<script lang="ts">
-	import * as progress from '@zag-js/progress';
-	import { normalizeProps, useMachine } from '@zag-js/svelte';
-	import type { ProgressProps } from './types.js';
-
-	// Props
-	const {
-		// Root
-		base = 'flex items-center gap-4',
-		height = 'h-2',
-		width = 'w-full',
-		classes = '',
-		// Label
-		labelBase = 'whitespace-nowrap',
-		labelText = 'text-xs',
-		labelClasses = '',
-		// Track
-		trackBase = 'h-full w-full overflow-x-hidden',
-		trackBg = 'bg-surface-200-800',
-		trackRounded = 'rounded-base',
-		trackClasses = '',
-		// Meter
-		meterBase = 'h-full w-full',
-		meterBg = 'bg-surface-950-50',
-		meterRounded = 'rounded-base',
-		meterTransition = 'transition-[width]',
-		meterAnimate = 'animate-progress-indeterminate',
-		meterClasses = '',
-		// Snippets
-		children,
-		// Zag
-		...zagProps
-	}: ProgressProps = $props();
-
-	// Zag
-	const id = $props.id();
-	const service = useMachine(progress.machine, () => ({
-		id: id,
-		...zagProps
-	}));
-	const api = $derived(progress.connect(service, normalizeProps));
-
-	// Reactive
-	const rxIndeterminate = $derived(api.indeterminate ? meterAnimate : '');
-</script>
-
-<!-- @component A linear progress bar. -->
-
-<figure {...api.getRootProps()} class="{base} {height} {width} {classes}" data-testid="progress">
-	<!-- Label -->
-	{#if children}
-		<div {...api.getLabelProps()} class="{labelBase} {labelText} {labelClasses}" data-testid="progress-label">{@render children()}</div>
-	{/if}
-	<!-- Track -->
-	<div {...api.getTrackProps()} class="{trackBase} {trackBg} {trackRounded} {trackClasses}" data-testid="progress-track">
-		<!-- Meter -->
-		<div
-			{...api.getRangeProps()}
-			class="{meterBase} {meterBg} {meterRounded} {meterTransition} {rxIndeterminate} {meterClasses}"
-			data-testid="progress-meter"
-		></div>
-	</div>
-</figure>

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

@@ -1,5 +0,0 @@
-import type { ProgressProps } from './types.js';
-/** A linear progress bar. */
-declare const Progress: import("svelte").Component<ProgressProps, {}, "">;
-type Progress = ReturnType<typeof Progress>;
-export default Progress;

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

@@ -1,44 +0,0 @@
-import * as progress from '@zag-js/progress';
-import type { Snippet } from 'svelte';
-export interface ProgressProps extends Omit<progress.Props, 'id'> {
-    /** Set root base classes */
-    base?: string;
-    /** Set root background classes  */
-    bg?: string;
-    /** Set root width classes */
-    width?: string;
-    /** Set root height classes */
-    height?: string;
-    /** Set root rounded classes */
-    rounded?: string;
-    /** Set root arbitrary classes */
-    classes?: string;
-    /** Set label base classes. */
-    labelBase?: string;
-    /** Set label text classes. */
-    labelText?: string;
-    /** Set label classes. */
-    labelClasses?: string;
-    /** Set the track base classes. */
-    trackBase?: string;
-    /** Set the track background classes. */
-    trackBg?: string;
-    /** Set the track border radius classes. */
-    trackRounded?: string;
-    /** Set arbitrary track classes. */
-    trackClasses?: string;
-    /** Set meter base classes. */
-    meterBase?: string;
-    /** Set meter bg classes */
-    meterBg?: string;
-    /** Set meter rounded classes. */
-    meterRounded?: string;
-    /** Set meter transition classes. */
-    meterTransition?: string;
-    /** Set meter animation classes for indeterminate mode. (value === undefined) */
-    meterAnimate?: string;
-    /** Set meter arbitrary classes. */
-    meterClasses?: string;
-    /** Set the label */
-    children?: Snippet;
-}

package/dist/components/Progress/types.js

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

package/dist/components/ProgressRing/ProgressRing.svelte

@@ -1,98 +0,0 @@
-<script lang="ts">
-	import * as progress from '@zag-js/progress';
-	import { normalizeProps, useMachine } from '@zag-js/svelte';
-
-	import type { ProgressRingProps } from './types.js';
-
-	const {
-		label,
-		showLabel = false,
-		strokeWidth = '10px',
-		strokeLinecap = 'round',
-		// Root
-		base = 'relative',
-		size = 'size-32',
-		classes = '',
-		// Slot
-		childrenBase = 'absolute top-0 left-0 z-[1] flex justify-center items-center',
-		childrenClasses = '',
-		// SVG
-		svgBase = 'absolute top-0 left-0 size-full rounded-full',
-		svgClasses = '',
-		// Track
-		trackBase = 'fill-none',
-		trackStroke = 'stroke-surface-200-800',
-		trackClasses = '',
-		// Meter
-		meterBase = 'fill-none',
-		meterStroke = 'stroke-primary-500',
-		meterTransition = 'transition-[stroke-dashoffset] transition-[stroke-dashoffset]',
-		meterAnimate = 'animate-ring-indeterminate',
-		meterDuration = 'duration-200',
-		meterClasses = '',
-		// Label
-		labelBase = '',
-		labelFill = 'fill-surface-950-50',
-		labelFontSize = 24, // px
-		labelFontWeight = 'bold',
-		labelClasses = '',
-		// Snippets
-		children,
-		// Zag
-		...zagProps
-	}: ProgressRingProps = $props();
-
-	// Zag
-	const id = $props.id();
-	const service = useMachine(progress.machine, () => ({
-		id: id,
-		...zagProps
-	}));
-	const api = $derived(progress.connect(service, normalizeProps));
-
-	// Reactive Classes
-	const rxAnimCircle = $derived(api.indeterminate ? 'animate-spin' : '');
-	const rxAnimMeter = $derived(api.indeterminate ? meterAnimate : '');
-</script>
-
-<!-- @component A circular progress bar. -->
-
-<figure {...api.getRootProps()} class="{base} {size} {classes}" data-testid="progress-ring">
-	<!-- Children -->
-	<div {...api.getLabelProps()} class="{childrenBase} {size} {childrenClasses}" data-testid="progress-ring-children">
-		{@render children?.()}
-	</div>
-	<!-- SVG -->
-	<svg
-		{...api.getCircleProps()}
-		viewBox="0 0 100 100"
-		class="{svgBase} {svgClasses} {rxAnimCircle}"
-		style="--size:100px;--thickness:{strokeWidth};"
-		data-testid="progress-ring-svg"
-	>
-		<!-- Track -->
-		<circle {...api.getCircleTrackProps()} class="{trackBase} {trackStroke} {trackClasses}" data-testid="progress-ring-track" />
-		<!-- Meter -->
-		<circle
-			{...api.getCircleRangeProps()}
-			class="{meterBase} {meterStroke} {meterTransition} {meterDuration} {meterClasses} {rxAnimMeter}"
-			stroke-linecap={strokeLinecap}
-			data-testid="progress-ring-meter"
-		/>
-		<!-- Label -->
-		{#if api.value !== null && !children && showLabel}
-			<text
-				class="{labelBase} {labelFill} {labelClasses}"
-				x="50%"
-				y="50%"
-				font-size={labelFontSize}
-				font-weight={labelFontWeight}
-				text-anchor="middle"
-				dominant-baseline="central"
-				data-testid="progress-label"
-			>
-				{label ?? api.value}%
-			</text>
-		{/if}
-	</svg>
-</figure>

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

@@ -1,5 +0,0 @@
-import type { ProgressRingProps } from './types.js';
-/** A circular progress bar. */
-declare const ProgressRing: import("svelte").Component<ProgressRingProps, {}, "">;
-type ProgressRing = ReturnType<typeof ProgressRing>;
-export default ProgressRing;

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

@@ -1,56 +0,0 @@
-import type { Snippet } from 'svelte';
-import * as progress from '@zag-js/progress';
-export interface ProgressRingProps extends Omit<progress.Props, 'id'> {
-    /** Set the text for the scalable label */
-    label?: string;
-    /** When enabled, show a text label with the percentage amount */
-    showLabel?: boolean;
-    /** Set the stroke size (ex: 15px) */
-    strokeWidth?: string;
-    /** Defines the shape of the meter */
-    strokeLinecap?: 'inherit' | 'butt' | 'round' | 'square';
-    /** Set the root base classes */
-    base?: string;
-    /** Set the root size classes */
-    size?: string;
-    /** Provide arbitrary classes to the root element */
-    classes?: string;
-    /** Set the nested children base classes */
-    childrenBase?: string;
-    /** Provide arbitrary classes to the nested children. */
-    childrenClasses?: string;
-    /** Set the SVG element base classes */
-    svgBase?: string;
-    /** Provide arbitrary classes to the SVG element */
-    svgClasses?: string;
-    /** Set the track base classes */
-    trackBase?: string;
-    /** Set the track stroke color classes  */
-    trackStroke?: string;
-    /** Provide arbitrary classes to the track element */
-    trackClasses?: string;
-    /** Set the meter base classes */
-    meterBase?: string;
-    /** Set the meter stroke color classes */
-    meterStroke?: string;
-    /** Set the meter transition classes */
-    meterTransition?: string;
-    /** Set the meter animation classes */
-    meterAnimate?: string;
-    /** Set the meter transition duration classes */
-    meterDuration?: string;
-    /** Provide arbitrary classes to the meter element */
-    meterClasses?: string;
-    /** Set the label classes */
-    labelBase?: string;
-    /** Set the label fill color classes */
-    labelFill?: string;
-    /** Set the label font size */
-    labelFontSize?: number;
-    /** Set the label font weight */
-    labelFontWeight?: string;
-    /** Provide arbitrary classes to the label element */
-    labelClasses?: string;
-    /** The default child slot. */
-    children?: Snippet;
-}

package/dist/components/ProgressRing/types.js

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