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

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

@@ -1,5 +0,0 @@
-import type { AppBarProps } from './types.js';
-/** A header element for the top of a page layout. */
-declare const AppBar: import("svelte").Component<AppBarProps, {}, "">;
-type AppBar = ReturnType<typeof AppBar>;
-export default AppBar;

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

@@ -1,61 +0,0 @@
-import type { Snippet } from 'svelte';
-export interface AppBarProps {
-    /** Set base styles. */
-    base?: string;
-    /** Set background styles. */
-    background?: string;
-    /** Set vertical spacing styles. */
-    spaceY?: string;
-    /** Set border styles. */
-    border?: string;
-    /** Set padding styles. */
-    padding?: string;
-    /** Set shadow styles. */
-    shadow?: string;
-    /** Provide arbitrary CSS classes. */
-    classes?: string;
-    /** Sets toolbar's base styles. */
-    toolbarBase?: string;
-    /** Sets toolbar's grid columns styles. */
-    toolbarGridCols?: string;
-    /** Sets toolbar's gap styles. */
-    toolbarGap?: string;
-    /** Provide arbitrary CSS classes to the toolbar. */
-    toolbarClasses?: string;
-    /** Sets the lead snippet element's base styles. */
-    leadBase?: string;
-    /** Sets the lead snippet element's horizontal spacing styles. */
-    leadSpaceX?: string;
-    /** Sets the lead snippet element's padding styles. */
-    leadPadding?: string;
-    /** Provide arbitrary CSS classes to the lead snippet. */
-    leadClasses?: string;
-    /** Sets the center snippet element's base styles. */
-    centerBase?: string;
-    /** Sets the center snippet element's alignment styles. */
-    centerAlign?: string;
-    /** Sets the center snippet element's padding styles. */
-    centerPadding?: string;
-    /** Provide arbitrary CSS classes to the center snippet. */
-    centerClasses?: string;
-    /** Sets the trail snippet element's base styles. */
-    trailBase?: string;
-    /** Sets the trail snippet element's horizontal spacing styles. */
-    trailSpaceX?: string;
-    /** Sets the trail snippet element's padding styles. */
-    trailPadding?: string;
-    /** Provide arbitrary CSS classes to the trail snippet. */
-    trailClasses?: string;
-    /** Sets the headline snippet element's base styles. */
-    headlineBase?: string;
-    /** Provide arbitrary CSS classes to the headline snippet. */
-    headlineClasses?: string;
-    /** The center slot. */
-    children?: Snippet;
-    /** The lead slot. */
-    lead?: Snippet;
-    /** The trail slot. */
-    trail?: Snippet;
-    /** The headline slot. */
-    headline?: Snippet;
-}

package/dist/components/AppBar/types.js

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

package/dist/components/Avatar/Avatar.svelte

@@ -1,68 +0,0 @@
-<script lang="ts">
-	import * as avatar from '@zag-js/avatar';
-	import { useMachine, normalizeProps } from '@zag-js/svelte';
-	import type { AvatarProps } from './types.js';
-
-	const {
-		src,
-		srcset,
-		name,
-		initials = [0, -1],
-		// Root
-		base = 'overflow-hidden isolate',
-		background = 'bg-surface-400-600',
-		size = 'size-16',
-		font = '',
-		border = '',
-		rounded = 'rounded-full',
-		shadow = '',
-		classes = '',
-		// Image
-		imageBase = 'w-full object-cover',
-		imageClasses = '',
-		style = '',
-		// Fallback
-		fallbackBase = 'w-full h-full flex justify-center items-center',
-		fallbackClasses = '',
-		// Snippets
-		children,
-		// Zag
-		...zagProps
-	}: AvatarProps = $props();
-
-	// Zag
-	const id = $props.id();
-	const service = useMachine(avatar.machine, () => ({
-		id: id,
-		...zagProps
-	}));
-	const api = $derived(avatar.connect(service, normalizeProps));
-
-	// Generate Initials
-	function getInitials() {
-		const lettersArr = initials.map((index) => name.split(' ').at(index)?.charAt(0).toUpperCase());
-		return lettersArr.join('');
-	}
-</script>
-
-<!-- @component An image with a fallback for representing a single user. -->
-
-<figure
-	{...api.getRootProps()}
-	class="{base} {background} {size} {font} {border} {rounded} {shadow} {classes}"
-	{style}
-	data-testid="avatar"
->
-	<!-- Fallback -->
-	<span {...api.getFallbackProps()} class="{fallbackBase} {fallbackClasses}" data-testid="avatar-fallback">
-		{#if children}
-			{@render children()}
-		{:else}
-			{getInitials()}
-		{/if}
-	</span>
-	<!-- Image -->
-	{#if src || srcset}
-		<img {...api.getImageProps()} {src} {srcset} alt={name} class="{imageBase} {imageClasses}" data-testid="avatar-image" />
-	{/if}
-</figure>

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

@@ -1,5 +0,0 @@
-import type { AvatarProps } from './types.js';
-/** An image with a fallback for representing a single user. */
-declare const Avatar: import("svelte").Component<AvatarProps, {}, "">;
-type Avatar = ReturnType<typeof Avatar>;
-export default Avatar;

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

@@ -1,39 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-import type { Snippet } from 'svelte';
-import type * as avatar from '@zag-js/avatar';
-export interface AvatarProps extends Omit<avatar.Props, 'id'>, Pick<HTMLAttributes<HTMLElement>, 'style'> {
-    /** Set avatar image source URL. */
-    src?: string;
-    /** The source set of the avatar image. */
-    srcset?: string;
-    /** Provide a name or username for the avatar. */
-    name: string;
-    /** Initials will be generated based on the name and this index array. */
-    initials?: number[];
-    /** Set base styles. */
-    base?: string;
-    /** Set background styles. */
-    background?: string;
-    /** Set size styles. */
-    size?: string;
-    /** Set font styles. */
-    font?: string;
-    /** Set border styles. */
-    border?: string;
-    /** Set border radius styles. */
-    rounded?: string;
-    /** Set shadow styles. */
-    shadow?: string;
-    /** Provide arbitrary CSS classes. */
-    classes?: string;
-    /** Set avatar image base styles. */
-    imageBase?: string;
-    /** Provide avatar image arbitrary CSS classes. */
-    imageClasses?: string;
-    /** Set base classes for the fallback element. */
-    fallbackBase?: string;
-    /** Provide arbitrary CSS classes to fallback element. */
-    fallbackClasses?: string;
-    /** The default child slot. */
-    children?: Snippet;
-}

package/dist/components/Avatar/types.js

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

package/dist/components/Combobox/Combobox.svelte

@@ -1,154 +0,0 @@
-<script lang="ts" generics="T extends ComboboxItem">
-	import { fade } from 'svelte/transition';
-	import * as combobox from '@zag-js/combobox';
-	import { useMachine, normalizeProps, mergeProps } from '@zag-js/svelte';
-	import type { ComboboxProps, ComboboxItem } from './types.js';
-
-	const {
-		data = [],
-		label = '',
-		zIndex = 'auto',
-		// Base
-		base = '',
-		width = '',
-		classes = '',
-		// Label
-		labelBase = 'label',
-		labelText = 'label-text',
-		labelClasses = '',
-		// Input
-		inputGroupBase = 'input-group grid-cols-[1fr_auto]',
-		inputGroupInput = 'ig-input',
-		inputGroupButton = 'ig-btn hover:preset-tonal',
-		inputGroupArrow = '',
-		inputGroupClasses = '',
-		// Positioner
-		positionerBase = '',
-		positionerClasses = '',
-		// Content
-		contentBase = 'card p-2 overflow-y-auto',
-		contentBackground = 'preset-outlined-surface-200-800 bg-surface-50-950',
-		contentSpaceY = 'space-y-1',
-		contentMaxHeight = 'max-h-80',
-		contentClasses = '',
-		// Option
-		optionBase = 'btn justify-start w-full',
-		optionHover = 'hover:preset-tonal',
-		optionActive = 'preset-filled-primary-500',
-		optionClasses = '',
-		// Snippets
-		arrow,
-		item,
-		// Events
-		onclick,
-		// Zag ---
-		...zagProps
-	}: ComboboxProps<T> = $props();
-
-	// Zag
-	let options = $derived(data);
-
-	const collection = $derived(
-		combobox.collection({
-			items: options,
-			// Map data structure
-			itemToValue: (item) => item.value,
-			itemToString: (item) => item.label
-		})
-	);
-
-	const id = $props.id();
-	const service = useMachine(combobox.machine, () => ({
-		id: id,
-		get collection() {
-			return collection;
-		},
-		...zagProps,
-		async onOpenChange(event) {
-			if (zagProps.onOpenChange) {
-				zagProps.onOpenChange(event);
-				return;
-			}
-			options = data;
-		},
-		async onInputValueChange(event) {
-			if (zagProps.onInputValueChange) {
-				zagProps.onInputValueChange(event);
-				return;
-			}
-			const filtered = data.filter((item) => item.label.toLowerCase().includes(event.inputValue.toLowerCase()));
-			options = filtered;
-		}
-	}));
-
-	const api = $derived(combobox.connect(service, normalizeProps));
-	const triggerProps = $derived(mergeProps(api.getTriggerProps(), { onclick }));
-</script>
-
-<span {...api.getRootProps()} class="{base} {width} {classes}" data-testid="combobox">
-	<!-- Label -->
-	<label {...api.getLabelProps()} class="{labelBase} {labelClasses}">
-		{#if label}<span class={labelText}>{label}</span>{/if}
-		<!-- Input Group -->
-		<div {...api.getControlProps()} class="{inputGroupBase} {inputGroupClasses}">
-			<!-- Input -->
-			<input {...api.getInputProps()} class={inputGroupInput} />
-			<!-- Arrow -->
-			<button {...triggerProps} class={inputGroupButton}>
-				{#if arrow}
-					{@render arrow()}
-				{:else}
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						width="16"
-						height="16"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						style="opacity: 0.5"
-						class={inputGroupArrow}
-					>
-						<path d="m6 9 6 6 6-6" />
-					</svg>
-				{/if}
-			</button>
-		</div>
-	</label>
-	<!-- Menu -->
-	{#if api.open}
-		<div {...api.getPositionerProps()} transition:fade={{ duration: 100 }} class="{positionerBase} {positionerClasses}">
-			{#if options.length > 0}
-				<!-- Content (list) -->
-				<nav
-					{...api.getContentProps()}
-					class="{contentBase} {contentBackground} {contentSpaceY} {contentClasses} {contentMaxHeight}"
-					style="z-index: {zIndex}"
-				>
-					{#each options as option (option.label)}
-						{@const isChecked = api.getItemProps({ item: option })['data-state'] === 'checked'}
-						{@const displayClass = isChecked ? optionActive : optionHover}
-						<!-- Option -->
-						<!-- ZagJs should have set button type to "button" here. -->
-						<!-- See https://github.com/skeletonlabs/skeleton/pull/2998#discussion_r1855511385 -->
-						<button {...api.getItemProps({ item: option })} class="{optionBase} {displayClass} {optionClasses}" type="button">
-							{#if item}
-								{@render item(option)}
-							{:else}
-								{option.label}
-							{/if}
-						</button>
-					{/each}
-				</nav>
-			{/if}
-		</div>
-	{/if}
-</span>
-
-<style>
-	[data-part='item'][data-highlighted]:not([data-state='checked']) {
-		background-color: var(--color-surface-200-800);
-	}
-</style>

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

@@ -1,18 +0,0 @@
-import type { ComboboxProps, ComboboxItem } from './types.js';
-declare class __sveltets_Render<T extends ComboboxItem> {
-    props(): ComboboxProps<T>;
-    events(): {};
-    slots(): {};
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T extends ComboboxItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends ComboboxItem>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Combobox: $$IsomorphicComponent;
-type Combobox<T extends ComboboxItem> = InstanceType<typeof Combobox<T>>;
-export default Combobox;

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

@@ -1,66 +0,0 @@
-import type { Snippet } from 'svelte';
-import * as combobox from '@zag-js/combobox';
-export interface ComboboxProps<T extends ComboboxItem> extends Omit<combobox.Props, 'id' | 'collection'> {
-    /** Provide the list of label and value data */
-    data?: T[];
-    /** Set the label to display. */
-    label?: string;
-    /** Set a positioner style for z-index, ex: "10" */
-    zIndex?: string;
-    /** Set base classes for the root element. */
-    base?: string;
-    /** Set width classes for the root element. */
-    width?: string;
-    /** Provide arbitrary classes for the root element. */
-    classes?: string;
-    /** Set base classes for the label. */
-    labelBase?: string;
-    /** Set text and font classes for the label. */
-    labelText?: string;
-    /** Provide arbitrary classes for the label. */
-    labelClasses?: string;
-    /** Set base classes for the input group. */
-    inputGroupBase?: string;
-    /** Set input classes for the input group. */
-    inputGroupInput?: string;
-    /** Set button classes for the input group. */
-    inputGroupButton?: string;
-    /** Set arrow classes for the input group. */
-    inputGroupArrow?: string;
-    /** Provide arbitrary classes for the input group. */
-    inputGroupClasses?: 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;
-    /** Set space-y classes for the content. */
-    contentSpaceY?: string;
-    /** Set max-h classes for the content. */
-    contentMaxHeight?: string;
-    /** Provide arbitrary classes for the content. */
-    contentClasses?: string;
-    /** Set base classes for the option. */
-    optionBase?: string;
-    /** Set focus classes for the option. */
-    optionFocus?: string;
-    /** Set hover classes for the option. */
-    optionHover?: string;
-    /** Set active classes for the option. */
-    optionActive?: string;
-    /** Provide arbitrary classes for the option. */
-    optionClasses?: string;
-    /** Provide a custom arrow icon. */
-    arrow?: Snippet;
-    /** Provide a custom template for the option. */
-    item?: Snippet<[T]>;
-    /** Handle the combobox dropdown button click event. */
-    onclick?: (event: Event) => void;
-}
-export interface ComboboxItem {
-    label: string;
-    value: string;
-}

package/dist/components/Combobox/types.js

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

package/dist/components/FileUpload/FileUpload.svelte

@@ -1,132 +0,0 @@
-<script lang="ts">
-	import * as fileUpload from '@zag-js/file-upload';
-	import { useMachine, normalizeProps } from '@zag-js/svelte';
-
-	import type { FileUploadProps } from './types.js';
-
-	// Props
-	const {
-		label = `Select file or drag here`,
-		subtext = '',
-		// Root
-		base = '',
-		classes = '',
-		// Interface
-		interfaceBase = 'flex flex-col items-center gap-2 hover:cursor-pointer',
-		interfaceBg = 'hover:preset-tonal',
-		interfaceBorder = 'border-[1px] border-dashed',
-		interfaceBorderColor = 'border-surface-200-800',
-		interfacePadding = 'p-4 py-10',
-		interfaceRounded = 'rounded-container',
-		interfaceClasses = '',
-		// Interface (content)
-		interfaceIcon = '',
-		interfaceText = '',
-		interfaceSubtext = 'text-xs opacity-60',
-		// Files List
-		filesListBase = 'mt-2 space-y-2',
-		filesListClasses = '',
-		// File
-		fileBase = 'grid grid-cols-[auto_1fr_auto] rtl:grid-cols-[1fr_auto_auto] items-center',
-		fileBg = 'preset-tonal',
-		fileGap = 'gap-4 px-4',
-		filePadding = 'py-2',
-		fileRounded = 'rounded-base',
-		fileClasses = '',
-		// File (content)
-		fileIcon = '',
-		fileName = 'text-sm flex items-center gap-4',
-		fileSize = 'text-xs opacity-60',
-		fileButton = '',
-		// State
-		stateInvalid = 'border-error-500',
-		stateDisabled = 'disabled',
-		stateDragging = 'preset-filled-primary-500',
-		// Children
-		children,
-		iconInterface,
-		iconFile,
-		iconFileRemove,
-		// Zag
-		...zagProps
-	}: FileUploadProps = $props();
-
-	// Zag
-	const id = $props.id();
-	const service = useMachine(fileUpload.machine, () => ({
-		id: id,
-		...zagProps
-	}));
-	const api = $derived(fileUpload.connect(service, normalizeProps));
-
-	$effect.pre(() => {
-		zagProps.onApiReady?.(api);
-	});
-
-	// Reactive
-	const rxDisabled = $derived(service.prop('disabled') ? stateDisabled : '');
-	const rxInvalid = $derived(api.rejectedFiles.length > 0 ? stateInvalid : interfaceBorderColor);
-	const rxDragging = $derived(api.dragging && !children ? stateDragging : '');
-</script>
-
-<!-- @component A form component for handling file uploads. -->
-
-<div
-	{...api.getRootProps()}
-	class="{base} {rxDisabled} {classes}"
-	style:display={children ? 'inline-block' : 'block'}
-	data-testid="uploader"
->
-	<div {...api.getDropzoneProps()}>
-		<!-- Hidden Input -->
-		<input {...api.getHiddenInputProps()} data-testid="uploader-input" />
-		<!-- Interface -->
-		{#if children}
-			{@render children()}
-		{:else}
-			<div
-				class="{interfaceBase} {interfaceBg} {interfaceBorder} {interfacePadding} {interfaceRounded} {rxInvalid} {rxDragging} {interfaceClasses}"
-				data-testid="uploader-interface"
-			>
-				<!-- Icon -->
-				{#if iconInterface}<span class={interfaceIcon} data-testid="uploader-interface-icon">{@render iconInterface()}</span>{/if}
-				<!-- Label -->
-				{#if label}<p class={interfaceText} data-testid="uploader-interface-label">{label}</p>{/if}
-				<!-- Subtext -->
-				{#if subtext}<small class={interfaceSubtext} data-testid="uploader-interface-subtext">{subtext}</small>{/if}
-			</div>
-		{/if}
-	</div>
-	<!-- Files (list) -->
-	{#if !children}
-		<ul {...api.getItemGroupProps()} class="{filesListBase} {filesListClasses}" data-testid="uploader-files-list">
-			<!-- Loop Files -->
-			{#each api.acceptedFiles as file (file)}
-				<!-- File -->
-				<li
-					{...api.getItemProps({ file })}
-					class="{fileBase} {fileBg} {fileGap} {filePadding} {fileRounded} {fileClasses}"
-					data-testid="uploader-file"
-				>
-					<!-- Name -->
-					<p {...api.getItemNameProps({ file })} class={fileName} data-testid="uploader-file-name">
-						{#if iconFile}<span class={fileIcon} data-testid="uploader-file-icon">{@render iconFile()}</span>{/if}
-						<span>{file.name}</span>
-					</p>
-					<!-- Size -->
-					<p {...api.getItemNameProps({ file })} class={fileSize} data-testid="uploader-file-size">
-						{api.getFileSize(file)}
-					</p>
-					<!-- Button -->
-					<button {...api.getItemDeleteTriggerProps({ file })} class={fileButton} data-testid="uploader-file-button">
-						{#if iconFileRemove}
-							{@render iconFileRemove()}
-						{:else}
-							<span>&#x2715;</span>
-						{/if}
-					</button>
-				</li>
-			{/each}
-		</ul>
-	{/if}
-</div>

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

@@ -1,5 +0,0 @@
-import type { FileUploadProps } from './types.js';
-/** A form component for handling file uploads. */
-declare const FileUpload: import("svelte").Component<FileUploadProps, {}, "">;
-type FileUpload = ReturnType<typeof FileUpload>;
-export default FileUpload;

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

@@ -1,74 +0,0 @@
-import type { Snippet } from 'svelte';
-import * as fileUpload from '@zag-js/file-upload';
-import type { PropTypes } from '@zag-js/svelte';
-export type FileUploadApi = fileUpload.Api<PropTypes>;
-export interface FileUploadProps extends Omit<fileUpload.Props, 'id'> {
-    /** Set the interface text value. */
-    label?: string;
-    /** Set the interface subtext value. */
-    subtext?: string;
-    /** Set root base classes */
-    base?: string;
-    /** Set root arbitrary classes */
-    classes?: string;
-    /** Set interface base classes */
-    interfaceBase?: string;
-    /** Set interface background classes */
-    interfaceBg?: string;
-    /** Set interface border classes */
-    interfaceBorder?: string;
-    /** Set interface border color classes */
-    interfaceBorderColor?: string;
-    /** Set interface border classes */
-    interfacePadding?: string;
-    /** Set interface border radius classes */
-    interfaceRounded?: string;
-    /** Set interface arbitrary classes */
-    interfaceClasses?: string;
-    /** Set interface icon classes */
-    interfaceIcon?: string;
-    /** Set interface text classes */
-    interfaceText?: string;
-    /** Set interface subtext classes */
-    interfaceSubtext?: string;
-    /** Set file list base classes */
-    filesListBase?: string;
-    /** Set file list arbitrary classes */
-    filesListClasses?: string;
-    /** Set file base classes */
-    fileBase?: string;
-    /** Set file background classes */
-    fileBg?: string;
-    /** Set file gap classes */
-    fileGap?: string;
-    /** Set file padding classes */
-    filePadding?: string;
-    /** Set file border-radius classes */
-    fileRounded?: string;
-    /** Set file arbitrary classes */
-    fileClasses?: string;
-    /** Set file icon classes */
-    fileIcon?: string;
-    /** Set file name classes */
-    fileName?: string;
-    /** Set file size classes */
-    fileSize?: string;
-    /** Set file button classes */
-    fileButton?: string;
-    /** Set disabled state classes for the root. */
-    stateDisabled?: string;
-    /** Set invalid state classes for the interface. */
-    stateInvalid?: string;
-    /** Set dragging state classes for the interface. */
-    stateDragging?: string;
-    /** The default children content. */
-    children?: Snippet;
-    /** Provide an icon for the interface. */
-    iconInterface?: Snippet;
-    /** Provide an icon proceeding each file. */
-    iconFile?: Snippet;
-    /** Provide an icon for the remove file action. */
-    iconFileRemove?: Snippet;
-    /** Binds the Zag API for external use. */
-    onApiReady?: (api: FileUploadApi) => void;
-}

package/dist/components/FileUpload/types.js

@@ -1 +0,0 @@
-import * as fileUpload from '@zag-js/file-upload';