@skeletonlabs/skeleton-svelte 1.0.0-next.9 → 1.1.0

package/dist/components/Combobox/Combobox.svelte

@@ -0,0 +1,144 @@
+<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',
+		contentBackground = 'preset-outlined-surface-200-800 bg-surface-50-950',
+		contentSpaceY = 'space-y-1',
+		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 = $state.raw(data);
+	const collection = $derived(
+		combobox.collection({
+			items: data,
+			// Map data structure
+			itemToValue: (item) => item.value,
+			itemToString: (item) => item.label
+		})
+	);
+
+	const id = $props.id();
+	const service = useMachine(combobox.machine, () => ({
+		id: id,
+		collection: collection,
+		...zagProps,
+		onOpenChange(event) {
+			options = data;
+			zagProps.onOpenChange?.(event);
+		},
+		onInputValueChange(event) {
+			const filtered = data.filter((item) => item.label.toLowerCase().includes(event.inputValue.toLowerCase()));
+			collection.setItems(filtered);
+			options = filtered;
+			zagProps.onInputValueChange?.(event);
+		}
+	}));
+	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}"
+					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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,64 @@
+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 z-index for the positioner. */
+    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;
+    /** 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

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

package/dist/components/FileUpload/FileUpload.svelte

@@ -1,65 +1,72 @@
-<script lang="ts">import * as fileUpload from "@zag-js/file-upload";
-import { useMachine, normalizeProps } from "@zag-js/svelte";
-import { useId } from "../../internal/use-id.js";
-let {
-  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 = "type-scale-1 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",
-  fileClasses = "",
-  // File (content)
-  fileIcon = "",
-  fileName = "type-scale-2 flex items-center gap-4",
-  fileSize = "type-scale-1 opacity-60",
-  fileButton = "",
-  // State
-  stateInvalid = "border-error-500",
-  stateDisabled = "disabled",
-  stateDragging = "preset-filled-primary-500",
-  // Children
-  children,
-  iconInterface,
-  iconFile,
-  iconFileRemove,
-  // Zag
-  internalApi = $bindable(),
-  ...zagProps
-} = $props();
-const [snapshot, send] = useMachine(
-  fileUpload.machine({
-    id: useId()
-  }),
-  { context: { ...zagProps } }
-);
-const api = $derived(fileUpload.connect(snapshot, send, normalizeProps));
-$effect(() => {
-  internalApi = api;
-});
-const rxDisabled = $derived(snapshot.context.disabled ? stateDisabled : "");
-const rxInvalid = $derived(api.rejectedFiles.length > 0 ? stateInvalid : interfaceBorderColor);
-const rxDragging = $derived(api.dragging && !children ? stateDragging : "");
+<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. -->
@@ -94,7 +101,7 @@ const rxDragging = $derived(api.dragging && !children ? stateDragging : "");
 	{#if !children}
 		<ul {...api.getItemGroupProps()} class="{filesListBase} {filesListClasses}" data-testid="uploader-files-list">
 			<!-- Loop Files -->
-			{#each api.acceptedFiles as file}
+			{#each api.acceptedFiles as file (file)}
 				<!-- File -->
 				<li
 					{...api.getItemProps({ file })}

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

@@ -1,17 +1,5 @@
 import type { FileUploadProps } from './types.js';
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports;
-    z_$$bindings?: Bindings;
-}
 /** A form component for handling file uploads. */
-declare const FileUpload: $$__sveltets_2_IsomorphicComponent<FileUploadProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "internalApi">;
-type FileUpload = InstanceType<typeof FileUpload>;
+declare const FileUpload: import("svelte").Component<FileUploadProps, {}, "">;
+type FileUpload = ReturnType<typeof FileUpload>;
 export default FileUpload;

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

@@ -1,9 +1,8 @@
 import type { Snippet } from 'svelte';
 import * as fileUpload from '@zag-js/file-upload';
 import type { PropTypes } from '@zag-js/svelte';
-export interface FileUploadApi extends fileUpload.Api<PropTypes> {
-}
-export interface FileUploadProps extends Omit<fileUpload.Context, 'id' | 'value'> {
+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. */
@@ -71,5 +70,5 @@ export interface FileUploadProps extends Omit<fileUpload.Context, 'id' | 'value'
     /** Provide an icon for the remove file action. */
     iconFileRemove?: Snippet;
     /** Binds the Zag API for external use. */
-    internalApi?: FileUploadApi;
+    onApiReady?: (api: FileUploadApi) => void;
 }

package/dist/components/Modal/Modal.svelte

@@ -0,0 +1,87 @@
+<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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,57 @@
+import type { Snippet } from 'svelte';
+import * as dialog from '@zag-js/dialog';
+import type { FlyParams, FadeParams } from 'svelte/transition';
+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 z-index for the positioner. */
+    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?: () => void;
+}

package/dist/components/Modal/types.js

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

package/dist/components/Navigation/NavBar.svelte

@@ -0,0 +1,48 @@
+<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

@@ -0,0 +1,5 @@
+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;