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

package/dist/components/Switch/Switch.svelte

@@ -1,102 +0,0 @@
-<script lang="ts">
-	import { normalizeProps, useMachine } from '@zag-js/svelte';
-	import * as zagSwitch from '@zag-js/switch';
-	import type { SwitchProps } from './types.js';
-
-	const {
-		compact = false,
-		// Root (Track)
-		base = 'inline-flex items-center gap-4',
-		classes = '',
-		// State
-		stateFocused = 'data-[focus-visible]:focused',
-		// Control
-		controlBase = 'cursor-pointer transition duration-200',
-		controlInactive = 'preset-filled-surface-200-800',
-		controlActive = 'preset-filled-primary-500',
-		controlDisabled = 'opacity-50 cursor-not-allowed',
-		controlWidth = 'w-10',
-		controlHeight = 'h-6',
-		controlPadding = 'p-0.5',
-		controlRounded = 'rounded-full',
-		controlHover = 'hover:brightness-90 dark:hover:brightness-110',
-		controlClasses = '',
-		// Thumb
-		thumbBase = 'right-0 aspect-square h-full flex justify-center items-center text-right cursor-pointer',
-		thumbInactive = 'preset-filled-surface-50-950',
-		thumbActive = 'bg-surface-50 text-surface-contrast-50',
-		thumbRounded = 'rounded-full',
-		thumbTranslateX = 'translate-x-4 rtl:-translate-x-4',
-		thumbTransition = 'transition',
-		thumbEase = 'ease-in-out',
-		thumbDuration = 'duration-200',
-		thumbClasses = '',
-		// Label
-		labelBase = '',
-		labelClasses = '',
-		// Icons
-		iconInactiveBase = 'pointer-events-none',
-		iconActiveBase = 'pointer-events-none',
-		// Snippets
-		children,
-		inactiveChild,
-		activeChild,
-		// ZagProps
-		...zagProps
-	}: SwitchProps = $props();
-
-	// Zag
-	const id = $props.id();
-	const service = useMachine(zagSwitch.machine, () => ({
-		id: id,
-		...zagProps
-	}));
-	const api = $derived(zagSwitch.connect(service, normalizeProps));
-
-	const rxControlBase = $derived(compact ? thumbBase : controlBase);
-	const rxControlHeight = $derived(compact ? '' : controlHeight);
-	const rxControlPadding = $derived(compact ? '' : controlPadding);
-	const rxThumbInactive = $derived(compact ? controlInactive : thumbInactive);
-	const rxThumbActive = $derived(compact ? controlActive : thumbActive);
-	const rxThumbTranslateX = $derived(compact ? '' : thumbTranslateX);
-
-	const rxTrackState = $derived(api.checked ? controlActive : controlInactive);
-	const rxThumbState = $derived(api.checked ? `${rxThumbActive} ${rxThumbTranslateX}` : rxThumbInactive);
-	const rxDisabled = $derived(api.disabled ? controlDisabled : '');
-	const rxFocused = $derived(api.focused ? stateFocused : '');
-</script>
-
-<!-- @component A control for toggling between checked states. -->
-
-<label {...api.getRootProps()} class="{base} {classes}" data-testid="switch">
-	<!-- Input -->
-	<input {...api.getHiddenInputProps()} data-testid="switch-input" />
-	<!-- Control -->
-	<span
-		{...api.getControlProps()}
-		class="{rxControlBase} {rxTrackState} {rxFocused} {controlWidth} {rxControlHeight} {rxControlPadding} {controlRounded} {controlHover} {rxDisabled} {controlClasses}"
-		data-testid="switch-control"
-	>
-		<!-- Thumb -->
-		<span
-			{...api.getThumbProps()}
-			class="{thumbBase} {rxThumbState} {thumbRounded} {thumbTransition} {thumbEase} {thumbDuration} {thumbClasses}"
-			data-testid="switch-thumb"
-		>
-			<!-- Icon: Inactive -->
-			{#if !api.checked && inactiveChild}
-				<span class={iconInactiveBase} data-testid="switch-icon-inactive">{@render inactiveChild()}</span>
-			{/if}
-			<!-- Icon: Active -->
-			{#if api.checked && activeChild}
-				<span class={iconActiveBase} data-testid="switch-icon-active">{@render activeChild()}</span>
-			{/if}
-		</span>
-	</span>
-	<!-- Label -->
-	{#if children}
-		<span {...api.getLabelProps()} class="{labelBase} {labelClasses}" data-testid="switch-label">
-			{@render children()}
-		</span>
-	{/if}
-</label>

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

@@ -1,5 +0,0 @@
-import type { SwitchProps } from './types.js';
-/** A control for toggling between checked states. */
-declare const Switch: import("svelte").Component<SwitchProps, {}, "">;
-type Switch = ReturnType<typeof Switch>;
-export default Switch;

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

@@ -1,64 +0,0 @@
-import * as zagSwitch from '@zag-js/switch';
-import type { Snippet } from 'svelte';
-export interface SwitchProps extends Omit<zagSwitch.Props, 'id'> {
-    /** Set the compact display mode. */
-    compact?: boolean;
-    /** Set base classes for the root element. */
-    base?: string;
-    /** Provide arbitrary classes to the root element. */
-    classes?: string;
-    /** Set classes for the focus state. */
-    stateFocused?: string;
-    /** Set base classes for the control element. */
-    controlBase?: string;
-    /** Set inactive state classes for the control element. */
-    controlInactive?: string;
-    /** Set active state classes for the control element. */
-    controlActive?: string;
-    /** Set disabled state classes for the control element. */
-    controlDisabled?: string;
-    /** Set width classes for the control element. */
-    controlWidth?: string;
-    /** Set height classes for the control element. */
-    controlHeight?: string;
-    /** Set padding classes for the control element. */
-    controlPadding?: string;
-    /** Set rounded classes for the control element. */
-    controlRounded?: string;
-    /** Set hover classes for the control element. */
-    controlHover?: string;
-    /** Provide arbitrary classes to the control element. */
-    controlClasses?: string;
-    /** Set base classes for the thumb element. */
-    thumbBase?: string;
-    /** Set inactive classes for the thumb element. */
-    thumbInactive?: string;
-    /** Set active classes for the thumb element. */
-    thumbActive?: string;
-    /** Set rounded classes for the thumb element. */
-    thumbRounded?: string;
-    /** Set animation X-axis translate classes for the thumb element. */
-    thumbTranslateX?: string;
-    /** Set animation transition classes for the thumb element. */
-    thumbTransition?: string;
-    /** Set animation easing classes for the thumb element. */
-    thumbEase?: string;
-    /** Set animation duration classes for the thumb element. */
-    thumbDuration?: string;
-    /** Provide arbitrary classes to the thumb element. */
-    thumbClasses?: string;
-    /** Set base classes for the label element. */
-    labelBase?: string;
-    /** Provide arbitrary classes to the label element. */
-    labelClasses?: string;
-    /** Set base classes for the inactive icon child. */
-    iconInactiveBase?: string;
-    /** Set base classes for the active icon child. */
-    iconActiveBase?: string;
-    /** The default children snippet. */
-    children?: Snippet;
-    /** The inactive state snippet. */
-    inactiveChild?: Snippet;
-    /** The active state snippet. */
-    activeChild?: Snippet;
-}

package/dist/components/Switch/types.js

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

package/dist/components/Tabs/Tabs.svelte

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

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

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

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

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

@@ -1,5 +0,0 @@
-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/Tabs/context.d.ts

@@ -1,2 +0,0 @@
-import type { TabsContextState } from './types.js';
-export declare const setTabContext: (value: TabsContextState) => TabsContextState, getTabContext: () => TabsContextState, key: symbol;

package/dist/components/Tabs/context.js

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

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

@@ -1,5 +0,0 @@
-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/Tabs/index.js

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

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

@@ -1,68 +0,0 @@
-import type { Snippet } from 'svelte';
-import * as tabs from '@zag-js/tabs';
-export interface TabsContextState {
-    fluid: boolean;
-    api: ReturnType<typeof tabs.connect>;
-}
-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. */
-    base?: string;
-    /** Provide arbitrary classes for the root element. */
-    classes?: string;
-    /** Set base classes for the list element. */
-    listBase?: string;
-    /** Set justify classes for the list element. */
-    listJustify?: string;
-    /** Set border classes for the list element. */
-    listBorder?: string;
-    /** Set margin classes for the list element. */
-    listMargin?: string;
-    /** Set gap classes for the list element. */
-    listGap?: string;
-    /** Provide arbitrary classes for the list element. */
-    listClasses?: string;
-    /** Set base classes for the panel group element. */
-    contentBase?: string;
-    /** Provide arbitrary classes for the panel group element. */
-    contentClasses?: string;
-    /** Slot containing the list of tab controls. */
-    list?: Snippet;
-    /** Slot containing the list of panels. */
-    content?: Snippet;
-}
-export interface TabsControlProps extends tabs.TriggerProps {
-    /** Set base classes for the control element. */
-    base?: string;
-    /** Set padding classes for the control element. */
-    padding?: string;
-    /** Set x-axis translate classes for the control element. */
-    translateX?: string;
-    /** Provide arbitrary classes for the control element. */
-    classes?: string;
-    /** Set base classes for the label element. */
-    labelBase?: string;
-    /** Provide arbitrary classes for the label element. */
-    labelClasses?: string;
-    /** Set inactive classes for the control element. */
-    stateInactive?: string;
-    /** Set active classes for the control element. */
-    stateActive?: string;
-    /** Set inactive classes for the label element. */
-    stateLabelInactive?: string;
-    /** Set active classes for the label element. */
-    stateLabelActive?: string;
-    /** The lead slot. */
-    lead?: Snippet;
-    /** The default child slot. */
-    children?: Snippet;
-}
-export interface TabsPanelProps extends tabs.ContentProps {
-    /** Set base classes for the panel element. */
-    base?: string;
-    /** Provide arbitrary classes for the panel element. */
-    classes?: string;
-    /** The default child slot. */
-    children?: Snippet;
-}

package/dist/components/Tabs/types.js

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

package/dist/components/TagsInput/TagsInput.svelte

@@ -1,96 +0,0 @@
-<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. -->
-
-<div {...api.getRootProps()} class="{base} {padding} {gap} {rxDisabled} {classes}" data-testid="tags">
-	<!-- Input -->
-	<input {...api.getInputProps()} {placeholder} class="{inputBase} {inputClasses}" data-testid="tags-input-add" />
-	<!-- Hidden Input -->
-	<input {...api.getHiddenInputProps()} data-testid="tags-input" />
-	<!-- Tag List -->
-	{#if api.value.length > 0}
-		<div class="{tagListBase} {tagListClasses}" data-testid="tags-list">
-			{#each api.value as value, index (value)}
-				{@const itemState = api.getItemState({ index, value })}
-				<!-- Tag -->
-				<div {...api.getItemProps({ value, index })} data-testid="tags-tag">
-					<!-- Display -->
-					<div
-						{...api.getItemPreviewProps({ index, value })}
-						class="{tagBase} {tagBackground} {tagClasses}"
-						style:display={itemState.editing ? 'none' : ''}
-						data-testid="tag-display"
-					>
-						<span>{value}</span>
-						<!-- Delete Button -->
-						<button
-							{...api.getItemDeleteTriggerProps({ index, value })}
-							class="{buttonDeleteBase} {buttonDeleteClasses}"
-							data-testid="tag-delete"
-						>
-							{#if buttonDelete}
-								{@render buttonDelete()}
-							{:else}
-								<strong>&times;</strong>
-							{/if}
-						</button>
-					</div>
-					<!-- Editing -->
-					<input
-						{...api.getItemInputProps({ index, value })}
-						class="{tagEditInputBase} {tagEditInputClasses}"
-						style:display={itemState.editing ? '' : 'none'}
-						data-testid="tags-input-edit"
-					/>
-				</div>
-			{/each}
-		</div>
-	{/if}
-</div>

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

@@ -1,5 +0,0 @@
-import type { TagsInputProps } from './types.js';
-/** Capture a set of values from users via input and suggestions. */
-declare const TagsInput: import("svelte").Component<TagsInputProps, {}, "">;
-type TagsInput = ReturnType<typeof TagsInput>;
-export default TagsInput;

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

@@ -1,40 +0,0 @@
-import * as tagsInput from '@zag-js/tags-input';
-import type { Snippet } from 'svelte';
-export interface TagsInputProps extends Omit<tagsInput.Props, 'id'> {
-    /** Set the add tag input placeholder. */
-    placeholder?: string;
-    /** Set base classes for the root. */
-    base?: string;
-    /** Set gap classes for the root. */
-    gap?: string;
-    /** Set padding classes for the root. */
-    padding?: string;
-    /** Provide arbitrary classes to the root. */
-    classes?: string;
-    /** Set base classes for the add tag input. */
-    inputBase?: string;
-    /** Provide arbitrary classes to the add tag input. */
-    inputClasses?: string;
-    /** Set base classes for the tag list. */
-    tagListBase?: string;
-    /** Provide arbitrary classes to the tag list. */
-    tagListClasses?: string;
-    /** Set base classes for each tag. */
-    tagBase?: string;
-    /** Set background classes for each tag. */
-    tagBackground?: string;
-    /** Provide arbitrary classes to each tag. */
-    tagClasses?: string;
-    /** Set base classes for the edit tag input. */
-    tagEditInputBase?: string;
-    /** Provide arbitrary classes to the edit tag input. */
-    tagEditInputClasses?: string;
-    /** Set base classes for the delete button. */
-    buttonDeleteBase?: string;
-    /** Provide arbitrary classes to the delete button. */
-    buttonDeleteClasses?: string;
-    /** Set the component disabled state. */
-    stateDisabled?: string;
-    /** The delete button label snippet. */
-    buttonDelete?: Snippet;
-}

package/dist/components/TagsInput/types.js

@@ -1 +0,0 @@
-import * as tagsInput from '@zag-js/tags-input';

package/dist/components/Toast/Toast.svelte

@@ -1,76 +0,0 @@
-<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>
-	{#if api.closable}
-		<!-- Dismiss Button -->
-		<button
-			class="{props.btnDismissBase} {props.btnDismissClasses}"
-			title={props.btnDismissTitle}
-			aria-label={props.btnDismissAriaLabel}
-			{...api.getCloseTriggerProps()}
-			data-testid="toast-dismiss">&times;</button
-		>
-	{/if}
-</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

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