@skeletonlabs/skeleton-svelte 1.0.0-next.9 → 1.1.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/Toast.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import * as toast from '@zag-js/toast';
+	import type { ToastProps } from './types.js';
+	import { normalizeProps, useMachine } from '@zag-js/svelte';
+
+	const props: ToastProps = $props();
+	const service = useMachine(toast.machine, () => ({
+		...props.toast,
+		parent: props.parent,
+		index: props.index
+	}));
+	const api = $derived(toast.connect(service, normalizeProps));
+	const rxState = $derived.by(() => {
+		switch (api.type) {
+			case 'success':
+				return props.stateSuccess;
+			case 'warning':
+				return props.stateWarning;
+			case 'error':
+				return props.stateError;
+			default:
+				return props.stateInfo;
+		}
+	});
+</script>
+
+<div
+	class="{props.base} {props.width} {props.padding} {props.rounded} {rxState} {props.classes}"
+	{...api.getRootProps()}
+	data-testid="toast-root"
+>
+	<!-- Text -->
+	<div class="{props.messageBase} {props.messageClasses}" data-testid="toast-message">
+		<!-- Title -->
+		<span class="{props.titleBase} {props.titleClasses}" {...api.getTitleProps()} data-testid="toast-title">{api.title}</span>
+		<!-- Description -->
+		<span class="{props.descriptionBase} {props.descriptionClasses}" {...api.getDescriptionProps()} data-testid="toast-description"
+			>{api.description}</span
+		>
+	</div>
+	<!-- Dismiss Button -->
+	<button class="{props.btnDismissBase} {props.btnDismissClasses}" onclick={api.dismiss} data-testid="toast-dismiss">&times;</button>
+</div>
+
+<style>
+	[data-part='root'] {
+		translate: var(--x) var(--y);
+		scale: var(--scale);
+		z-index: var(--z-index);
+		height: var(--height);
+		opacity: var(--opacity);
+		will-change: translate, opacity, scale;
+	}
+	[data-part='root'] {
+		transition:
+			translate 400ms,
+			scale 400ms,
+			opacity 400ms;
+		transition-timing-function: cubic-bezier(0.21, 1.02, 0.73, 1);
+	}
+	[data-part='root'][data-state='closed'] {
+		transition:
+			translate 400ms,
+			scale 400ms,
+			opacity 200ms;
+		transition-timing-function: cubic-bezier(0.06, 0.71, 0.55, 1);
+	}
+</style>

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

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

package/dist/components/Toast/Toaster.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { normalizeProps, useMachine } from '@zag-js/svelte';
+	import * as toast from '@zag-js/toast';
+	import Toast from './Toast.svelte';
+	import type { ToasterProps } from './types.js';
+
+	const {
+		// Toaster
+		toaster,
+		// Toast
+		base = 'flex justify-between items-center gap-3',
+		width = 'min-w-xs',
+		padding = 'p-3',
+		rounded = 'rounded-container',
+		classes = '',
+		// Message
+		messageBase = 'grid',
+		messageClasses = '',
+		// Title
+		titleBase = 'font-semibold',
+		titleClasses = '',
+		// Description
+		descriptionBase = 'text-sm',
+		descriptionClasses = '',
+		// Dismiss Button
+		btnDismissBase = 'btn-icon hover:preset-tonal',
+		btnDismissClasses = '',
+		// State
+		stateInfo = 'preset-outlined-surface-200-800 preset-filled-surface-50-950',
+		stateSuccess = 'preset-filled-success-500',
+		stateWarning = 'preset-filled-warning-500',
+		stateError = 'preset-filled-error-500'
+	}: ToasterProps = $props();
+
+	const id = $props.id();
+	const service = useMachine(toast.group.machine, () => ({
+		id: id,
+		store: toaster
+	}));
+	const api = $derived(toast.group.connect(service, normalizeProps));
+</script>
+
+<div {...api.getGroupProps()} data-testid="toaster-root">
+	{#each api.getToasts() as toast, index (toast.id)}
+		<Toast
+			{base}
+			{width}
+			{padding}
+			{rounded}
+			{classes}
+			{messageBase}
+			{messageClasses}
+			{titleBase}
+			{titleClasses}
+			{descriptionBase}
+			{descriptionClasses}
+			{btnDismissBase}
+			{btnDismissClasses}
+			{stateInfo}
+			{stateError}
+			{stateWarning}
+			{stateSuccess}
+			{toast}
+			{index}
+			parent={service}
+		></Toast>
+	{/each}
+</div>

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

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

package/dist/components/Toast/create-toaster.d.ts

@@ -0,0 +1,2 @@
+import * as toast from '@zag-js/toast';
+export declare function createToaster(options?: toast.StoreProps): toast.Store<any>;

package/dist/components/Toast/create-toaster.js

@@ -0,0 +1,5 @@
+import * as toast from '@zag-js/toast';
+export function createToaster(options) {
+    if (options === void 0) { options = {}; }
+    return toast.createStore(options);
+}

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

@@ -0,0 +1,43 @@
+import * as toast from '@zag-js/toast';
+export interface ToasterProps extends toast.StoreProps {
+    toaster: toast.Store;
+    /** Provide base classes for the root element. */
+    base?: string;
+    /** Provide width classes for the root element. */
+    width?: string;
+    /** Provide padding classes for the root element. */
+    padding?: string;
+    /** Provide border radius classes for the root element. */
+    rounded?: string;
+    /** Provide arbitrary classes for the toast cards. */
+    classes?: string;
+    /** Provide base classes for the message. */
+    messageBase?: string;
+    /** Provide classes for the message. */
+    messageClasses?: string;
+    /** Provide base classes for the title. */
+    titleBase?: string;
+    /** Provide classes for the title. */
+    titleClasses?: string;
+    /** Provide base classes for the description. */
+    descriptionBase?: string;
+    /** Provide classes for the description. */
+    descriptionClasses?: string;
+    /** Provide base classes for the dismiss button. */
+    btnDismissBase?: string;
+    /** Provide arbitrary classes for the dismiss button. */
+    btnDismissClasses?: string;
+    /** Provide base classes for info toasts. */
+    stateInfo?: string;
+    /** Provide base classes for success toasts. */
+    stateSuccess?: string;
+    /** Provide base classes for warning toasts. */
+    stateWarning?: string;
+    /** Provide base classes for error toasts. */
+    stateError?: string;
+}
+export interface ToastProps extends Omit<ToasterProps, 'toaster'> {
+    toast: toast.Options;
+    index: number;
+    parent: toast.GroupService;
+}

package/dist/components/Toast/types.js

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

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;