@skeletonlabs/skeleton-svelte 1.0.0-next.8 → 1.0.0

package/dist/components/Tabs/Tabs.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import * as tabs from '@zag-js/tabs';
+	import { useMachine, normalizeProps } from '@zag-js/svelte';
+	import type { TabsProps } from './types.js';
+	import { setTabContext } from './context.js';
+
+	const {
+		fluid = false,
+		// Root
+		base = 'w-full',
+		classes = '',
+		// List
+		listBase = 'flex',
+		listJustify = 'justify-start',
+		listBorder = 'border-b-[1px] border-surface-200-800',
+		listMargin = 'mb-4',
+		listGap = 'gap-2',
+		listClasses = '',
+		// Content
+		contentBase = '',
+		contentClasses = '',
+		// Snippets
+		list,
+		content,
+		// Zag
+		...zagProps
+	}: TabsProps = $props();
+
+	// Zag
+	const id = $props.id();
+	const service = useMachine(tabs.machine, () => ({
+		id: id,
+		...zagProps
+	}));
+	const api = $derived(tabs.connect(service, normalizeProps));
+
+	// Set Context
+	setTabContext({
+		get api() {
+			return api;
+		},
+		get fluid() {
+			return fluid;
+		}
+	});
+</script>
+
+<!-- @component Use tabs to quickly switch between different views and pages. -->
+
+<div {...api.getRootProps()} class="{base} {classes}" data-testid="tabs">
+	<!-- List -->
+	<div {...api.getListProps()} class="{listBase} {listJustify} {listBorder} {listMargin} {listGap} {listClasses}" data-testid="tabs-list">
+		{@render list?.()}
+	</div>
+	<!-- Content -->
+	<div class="{contentBase} {contentClasses}" data-testid="tabs-content">
+		{@render content?.()}
+	</div>
+</div>

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

@@ -0,0 +1,5 @@
+import type { TabsProps } from './types.js';
+/** Use tabs to quickly switch between different views and pages. */
+declare const Tabs: import("svelte").Component<TabsProps, {}, "">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/components/Tabs/TabsControl.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { getTabContext } from './context.js';
+	import type { TabsControlProps } from './types.js';
+
+	const {
+		// Root
+		base = 'border-b-[1px] border-transparent',
+		padding = 'pb-2',
+		translateX = 'translate-y-[1px]',
+		classes = '',
+		// Label
+		labelBase = 'btn hover:preset-tonal-primary',
+		labelClasses = '',
+		// State
+		stateInactive = '[&:not(:hover)]:opacity-50',
+		stateActive = 'border-b-surface-950-50 opacity-100',
+		stateLabelInactive = '',
+		stateLabelActive = '',
+		// Snippets
+		lead,
+		children,
+		// Zag
+		...zagProps
+	}: TabsControlProps = $props();
+
+	// Get Context
+	const ctx = getTabContext();
+	const state = $derived(ctx.api.getTriggerState(zagProps));
+
+	// Reactive
+	const rxActive = $derived(state.selected ? stateActive : stateInactive);
+	const rxLabelActive = $derived(state.selected ? stateLabelActive : stateLabelInactive);
+
+	// Styles
+	const commonWidth = $derived(ctx.fluid ? '100%' : '');
+</script>
+
+<!-- @component A individual tab trigger element. -->
+
+<button
+	{...ctx.api.getTriggerProps(zagProps)}
+	class="{base} {padding} {translateX} {rxActive} {classes}"
+	style:width={commonWidth}
+	data-testid="tabs-control"
+>
+	<!-- Label -->
+	<div class="{labelBase} {rxLabelActive} {labelClasses}" style:width={commonWidth} data-testid="tabs-control-label">
+		{#if lead}<span>{@render lead()}</span>{/if}
+		<span>{@render children?.()}</span>
+	</div>
+</button>

package/dist/components/Tabs/TabsControl.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { TabsControlProps } from './types.js';
+/** A individual tab trigger element. */
+declare const TabsControl: import("svelte").Component<TabsControlProps, {}, "">;
+type TabsControl = ReturnType<typeof TabsControl>;
+export default TabsControl;

package/dist/components/Tabs/TabsPanel.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { getTabContext } from './context.js';
+	import type { TabsPanelProps } from './types.js';
+
+	const {
+		// Root
+		base = '',
+		classes = '',
+		// Children
+		children,
+		// Zag
+		...zagProps
+	}: TabsPanelProps = $props();
+
+	// Get Context
+	const ctx = getTabContext();
+</script>
+
+<!-- @component A individual tab panel of content. -->
+
+<div {...ctx.api.getContentProps(zagProps)} class="{base} {classes}" data-testid="tabs-panel">
+	{@render children?.()}
+</div>

package/dist/components/Tabs/TabsPanel.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { TabsPanelProps } from './types.js';
+/** A individual tab panel of content. */
+declare const TabsPanel: import("svelte").Component<TabsPanelProps, {}, "">;
+type TabsPanel = ReturnType<typeof TabsPanel>;
+export default TabsPanel;

package/dist/components/{Tab → Tabs}/context.js

@@ -1,6 +1,7 @@
+var _a;
 import * as tabs from '@zag-js/tabs';
 import { createContext } from '../../internal/create-context.js';
-export const [setTabContext, getTabContext, key] = createContext({
+export var setTabContext = (_a = createContext({
     fluid: false,
     api: {}
-});
+}), _a[0]), getTabContext = _a[1], key = _a[2];

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

@@ -0,0 +1,5 @@
+declare const _default: import("svelte").Component<import("./types").TabsProps, {}, ""> & {
+    Control: import("svelte").Component<import("./types").TabsControlProps, {}, "">;
+    Panel: import("svelte").Component<import("./types").TabsPanelProps, {}, "">;
+};
+export default _default;

package/dist/components/{Tab → Tabs}/index.js

@@ -1,4 +1,4 @@
 import Tabs from './Tabs.svelte';
 import Control from './TabsControl.svelte';
 import Panel from './TabsPanel.svelte';
-export default Object.assign(Tabs, { Control, Panel });
+export default /* @__PURE__ */ Object.assign(Tabs, { Control: Control, Panel: Panel });

package/dist/components/{Tab → Tabs}/types.d.ts

@@ -4,9 +4,7 @@ export interface TabsContextState {
     fluid: boolean;
     api: ReturnType<typeof tabs.connect>;
 }
-export interface TabsProps extends Omit<tabs.Context, 'id' | 'orientation' | 'onValueChange'> {
-    /** Set the active value. */
-    value?: string;
+export interface TabsProps extends Omit<tabs.Props, 'id' | 'orientation'> {
     /** Set tabs to stretch to fill the available width. */
     fluid?: boolean;
     /** Set base classes for the root element. */

package/dist/components/TagsInput/TagsInput.svelte

@@ -1,56 +1,50 @@
-<script lang="ts">import * as tagsInput from "@zag-js/tags-input";
-import { useMachine, normalizeProps } from "@zag-js/svelte";
-import { useId } from "../../internal/use-id.js";
-let {
-  value = $bindable(),
-  placeholder = "",
-  // Root
-  base = "grid input",
-  gap = "gap-2",
-  padding = "p-3",
-  classes = "",
-  // Input: Add
-  inputBase = "input-ghost",
-  inputClasses = "",
-  // Tag List
-  tagListBase = "flex gap-2",
-  tagListClasses = "",
-  // Tag
-  tagBase = "chip",
-  tagBackground = "preset-filled",
-  tagClasses = "",
-  // Input: Edit
-  inputEditBase = "chip-input -translate-y-0.25",
-  tagEditBackground = "preset-outlined-surface-200-800",
-  inputEditClasses,
-  // Delete Button
-  buttonDeleteBase = "",
-  buttonDeleteClasses = "",
-  // State
-  stateDisabled = "disabled",
-  // Snippets
-  buttonDelete,
-  // Zag
-  ...zagProps
-} = $props();
-const [snapshot, send] = useMachine(
-  tagsInput.machine({
-    id: useId(),
-    onValueChange: (details) => {
-      value = details.value;
-    }
-  }),
-  {
-    context: {
-      ...zagProps,
-      get value() {
-        return $state.snapshot(value);
-      }
-    }
-  }
-);
-const api = $derived(tagsInput.connect(snapshot, send, normalizeProps));
-const rxDisabled = $derived(snapshot.context.disabled ? stateDisabled : "");
+<script lang="ts">
+	import * as tagsInput from '@zag-js/tags-input';
+	import { useMachine, normalizeProps } from '@zag-js/svelte';
+	import type { TagsInputProps } from './types.js';
+
+	// Props
+	const {
+		placeholder = '',
+		// Root
+		base = 'grid input !h-auto',
+		gap = 'gap-2',
+		padding = 'p-3',
+		classes = '',
+		// Input: Add
+		inputBase = 'input-ghost',
+		inputClasses = '',
+		// Tag List
+		tagListBase = 'flex flex-wrap gap-1',
+		tagListClasses = '',
+		// Tag
+		tagBase = 'chip',
+		tagBackground = 'preset-filled',
+		tagClasses = '',
+		// Input: Edit
+		tagEditInputBase = 'input',
+		tagEditInputClasses = '',
+		// Delete Button
+		buttonDeleteBase = '',
+		buttonDeleteClasses = '',
+		// State
+		stateDisabled = 'disabled',
+		// Snippets
+		buttonDelete,
+		// Zag
+		...zagProps
+	}: TagsInputProps = $props();
+
+	// Zag
+	const id = $props.id();
+	const service = useMachine(tagsInput.machine, () => ({
+		id: id,
+		...zagProps
+	}));
+	const api = $derived(tagsInput.connect(service, normalizeProps));
+
+	// Reactive
+	const rxDisabled = $derived(service.prop('disabled') ? stateDisabled : '');
 </script>
 
 <!-- @component Capture a set of values from users via input and suggestions. -->
@@ -89,7 +83,7 @@ const rxDisabled = $derived(snapshot.context.disabled ? stateDisabled : "");
 					<!-- Editing -->
 					<input
 						{...api.getItemInputProps({ index, value })}
-						class="{inputEditBase} {tagEditBackground} {inputEditClasses}"
+						class="{tagEditInputBase} {tagEditInputClasses}"
 						style:display={itemState.editing ? '' : 'none'}
 						data-testid="tags-input-edit"
 					/>

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

@@ -1,17 +1,5 @@
 import type { TagsInputProps } 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;
-}
 /** Capture a set of values from users via input and suggestions. */
-declare const TagsInput: $$__sveltets_2_IsomorphicComponent<TagsInputProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "value">;
-type TagsInput = InstanceType<typeof TagsInput>;
+declare const TagsInput: import("svelte").Component<TagsInputProps, {}, "">;
+type TagsInput = ReturnType<typeof TagsInput>;
 export default TagsInput;

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

@@ -1,8 +1,6 @@
 import * as tagsInput from '@zag-js/tags-input';
 import type { Snippet } from 'svelte';
-export interface TagsInputProps extends Omit<tagsInput.Context, 'id' | 'value'> {
-    /** Set the tag values. */
-    value?: tagsInput.Context['value'];
+export interface TagsInputProps extends Omit<tagsInput.Props, 'id'> {
     /** Set the add tag input placeholder. */
     placeholder?: string;
     /** Set base classes for the root. */
@@ -28,11 +26,9 @@ export interface TagsInputProps extends Omit<tagsInput.Context, 'id' | 'value'>
     /** Provide arbitrary classes to each tag. */
     tagClasses?: string;
     /** Set base classes for the edit tag input. */
-    inputEditBase?: string;
-    /** Set background classes for the edit tag input. */
-    tagEditBackground?: string;
+    tagEditInputBase?: string;
     /** Provide arbitrary classes to the edit tag input. */
-    inputEditClasses?: string;
+    tagEditInputClasses?: string;
     /** Set base classes for the delete button. */
     buttonDeleteBase?: string;
     /** Provide arbitrary classes to the delete button. */

package/dist/components/Toast/ToastProvider.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import { setContext } from 'svelte';
+	import { flip } from 'svelte/animate';
+	import { fade } from 'svelte/transition';
+
+	import type { PlacementStyles, Toast, ToastProviderProps } from './types.js';
+
+	const {
+		placement = 'bottom-end',
+		offset = '16px',
+		dismissLabel = '',
+		// Group
+		base = 'fixed flex flex-col items-end',
+		gap = 'gap-4',
+		zIndex = 'z-[888]',
+		classes = '',
+		// Toast
+		toastBase = 'card py-2 px-3 grid grid-cols-[1fr_auto] items-center',
+		toastPadding = 'py-2 px-3',
+		toastGap = 'gap-4',
+		toastShadow = 'shadow-xl',
+		toastClasses = '',
+		// Message
+		messageBase = 'grid grid-cols-1 max-w-xs text-xs',
+		messageTitle = 'font-bold',
+		messageDescription = '',
+		messageClasses = '',
+		// Dismiss Button
+		buttonDismissBase = 'btn-icon btn-icon-sm text-base',
+		buttonDimissPreset = '',
+		buttonDismissHover = 'hover:preset-tonal',
+		buttonDismissClasses = '',
+		// State
+		stateInfo = 'preset-filled',
+		stateError = 'preset-filled-error-500',
+		stateSuccess = 'preset-filled-success-500',
+		// Snippets
+		children
+	}: ToastProviderProps = $props();
+
+	// Local
+	const defaults: Record<string, Toast> = {
+		info: { duration: 5000 },
+		error: { duration: 5000 },
+		success: { duration: 2000 }
+	};
+	const placementOptions: Record<string, PlacementStyles> = {
+		'top-start': { top: offset, left: offset, 'align-items': 'flex-start' },
+		'top-end': { top: offset, right: offset, 'align-items': 'flex-end' },
+		'bottom-start': { bottom: offset, left: offset, 'align-items': 'flex-start' },
+		'bottom-end': { bottom: offset, right: offset, 'align-items': 'flex-end' }
+	};
+
+	// State
+	let toastQueue: Toast[] = $state([]);
+
+	// Context
+	const id = $props.id();
+	setContext('toast', {
+		create: (toast: Toast) => {
+			// Set default settings
+			toast = {
+				...defaults[String(toast.type || 'info')],
+				...toast,
+				id: id
+			};
+			// Push to Queue
+			toastQueue.push(toast);
+			// Set duration timeout
+			setTimeout(() => {
+				dismiss(toast.id);
+			}, toast.duration);
+		}
+	});
+
+	function formatStyleAttr(style: PlacementStyles) {
+		return Object.entries(style)
+			.map(([k, v]) => `${k}:${v}`)
+			.join(';');
+	}
+
+	function dismiss(id: string | undefined) {
+		if (!id) return;
+		toastQueue = toastQueue.filter((t) => t.id !== id);
+	}
+
+	function getStateClasses(type?: string) {
+		// prettier-ignore
+		switch (type) {
+			case 'error': return stateError;
+			case 'success': return stateSuccess;
+			default: return stateInfo;
+		}
+	}
+</script>
+
+<!-- Toast Group -->
+{#if toastQueue.length}
+	<div
+		class="{base} {gap} {zIndex} {classes}"
+		style={formatStyleAttr(placementOptions[placement])}
+		data-part="root"
+		data-testid="toast-provider"
+	>
+		{#each toastQueue as toast, i (toast)}
+			{@const stateClasses = getStateClasses(toast.type)}
+			<!-- Toast -->
+			<div
+				data-index={i}
+				data-type={toast.type}
+				class="{toastBase} {toastPadding} {toastGap} {toastShadow} {toastClasses} {stateClasses}"
+				animate:flip={{ duration: 200 }}
+				transition:fade={{ duration: 200 }}
+			>
+				<!-- Message -->
+				<div class="{messageBase} {messageClasses}">
+					{#if toast.title}<div class={messageTitle}>{toast.title}</div>{/if}
+					<div class={messageDescription}>{toast.description}</div>
+				</div>
+				<!-- Dismiss -->
+				<button
+					type="button"
+					class="{buttonDismissBase} {buttonDimissPreset} {buttonDismissHover} {buttonDismissClasses}"
+					onclick={() => dismiss(toast.id)}
+				>
+					{#if dismissLabel}{dismissLabel}{:else}&times;{/if}
+				</button>
+			</div>
+		{/each}
+	</div>
+{/if}
+
+{@render children?.()}

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

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

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

@@ -0,0 +1,87 @@
+import type { Snippet } from 'svelte';
+export interface PlacementStyles {
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    'align-items'?: string;
+}
+export interface Toast {
+    /** The unique toast ID. */
+    id?: string;
+    /** The unique toast title text. */
+    title?: string;
+    /** The unique toast description text. */
+    description?: string;
+    /**
+     * Define the toast type.
+     * @default info
+     */
+    type?: 'info' | 'error' | 'success';
+    /** The duration of the toast. Default varies by type. */
+    duration?: number;
+}
+/** Provides access to the Toast Context API. */
+export interface ToastContext {
+    /** Used to create display a new Toast instance. */
+    create: (toast: Toast) => void;
+}
+export interface ToastProviderProps {
+    /**
+     * Offset from the viewport edge.
+     * @default bottom-end
+     */
+    placement?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+    /**
+     * Offset from the viewport edge.
+     * @default 16px
+     */
+    offset?: string;
+    /**
+     * The dismiss button label text.
+     * @default ×
+     */
+    dismissLabel?: string;
+    /** Provide base classes for the root element. */
+    base?: string;
+    /** Provide gap classes for the root element. */
+    gap?: string;
+    /** Provide z-index classes for the root element. */
+    zIndex?: string;
+    /** Provide arbitrary classes for the root element. */
+    classes?: string;
+    /** Provide base classes for the toast cards. */
+    toastBase?: string;
+    /** Provide padding classes for the toast cards. */
+    toastPadding?: string;
+    /** Provide gap classes for the toast cards. */
+    toastGap?: string;
+    /** Provide shadow classes for the toast cards. */
+    toastShadow?: string;
+    /** Provide arbitrary classes for the toast cards. */
+    toastClasses?: string;
+    /** Provide base classes for the message region. */
+    messageBase?: string;
+    /** Provide classes for the message title text. */
+    messageTitle?: string;
+    /** Provide classes for the message description text. */
+    messageDescription?: string;
+    /** Provide arbitrary classes for the message region. */
+    messageClasses?: string;
+    /** Provide base classes for the dismiss button. */
+    buttonDismissBase?: string;
+    /** Provide preset classes for the dismiss button. */
+    buttonDimissPreset?: string;
+    /** Provide hover classes for the dismiss button. */
+    buttonDismissHover?: string;
+    /** Provide arbitrary classes for the dismiss button. */
+    buttonDismissClasses?: string;
+    /** Provide base classes for info toasts. */
+    stateInfo?: string;
+    /** Provide base classes for error toasts. */
+    stateError?: string;
+    /** Provide base classes for success toasts. */
+    stateSuccess?: string;
+    /** The default child slot for the toast provider. */
+    children?: Snippet;
+}

package/dist/components/Tooltip/Tooltip.svelte

@@ -0,0 +1,79 @@
+<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 {
+		arrow = false,
+		zIndex = 'auto',
+		// Base
+		base = '',
+		classes = '',
+		// Trigger
+		triggerBase = '',
+		triggerBackground = '',
+		triggerClasses = '',
+		triggerAriaLabel = '',
+		// Positioner
+		positionerBase = '',
+		positionerClasses = '',
+		// Content
+		contentBase = '',
+		contentBackground = '',
+		contentClasses = '',
+		// Arrow
+		arrowBase = '',
+		arrowBackground = '!bg-white',
+		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 -->
+	{#if api.open}
+		<div {...api.getPositionerProps()} transition:fade={{ duration: 100 }} class="{positionerBase} {positionerClasses}">
+			<!-- Arrow -->
+			{#if arrow}
+				<div {...api.getArrowProps()}>
+					<div {...api.getArrowTipProps()} class="{arrowBase} {arrowBackground} {arrowClasses}"></div>
+				</div>
+			{/if}
+			<!-- Snippet Content -->
+			<div {...api.getContentProps()} class="{contentBase} {contentBackground} {contentClasses}" style="z-index: {zIndex};">
+				{@render content?.()}
+			</div>
+		</div>
+	{/if}
+</span>
+
+<style>
+	:global([data-part='arrow']) {
+		--arrow-size: 10px;
+		--arrow-background: white;
+	}
+</style>

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

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