@dryui/ui 3.0.0 → 4.0.1

package/src/tooltip/index.ts

@@ -0,0 +1,15 @@
+export type { TooltipRootProps, TooltipTriggerProps, TooltipContentProps } from '@dryui/primitives';
+
+import TooltipRoot from './tooltip-root.svelte';
+import TooltipTrigger from './tooltip-trigger.svelte';
+import TooltipContent from './tooltip-content.svelte';
+
+export const Tooltip: {
+	Root: typeof TooltipRoot;
+	Trigger: typeof TooltipTrigger;
+	Content: typeof TooltipContent;
+} = {
+	Root: TooltipRoot,
+	Trigger: TooltipTrigger,
+	Content: TooltipContent
+};

package/src/tooltip/tooltip-content.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { type Placement } from '@dryui/primitives';
+	import { createAnchoredOverlayContent } from '../internal/anchored-overlay-content.svelte.js';
+	import { getTooltipCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		placement?: Placement;
+		offset?: number;
+		children: Snippet;
+	}
+
+	let {
+		placement = 'top',
+		offset = 8,
+		class: className,
+		children,
+		style,
+		...rest
+	}: Props = $props();
+
+	const ctx = getTooltipCtx();
+
+	let contentEl = $state<HTMLDivElement>();
+
+	const overlay = createAnchoredOverlayContent({
+		ctx,
+		contentEl: () => contentEl ?? null,
+		placement: () => placement,
+		offset: () => offset
+	});
+</script>
+
+<div
+	bind:this={contentEl}
+	use:overlay.applyPosition={style}
+	id={ctx.contentId}
+	role="tooltip"
+	popover="manual"
+	data-tooltip-content
+	data-state={ctx.open ? 'open' : 'closed'}
+	class={className}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	/* outer: var(--dry-radius-tooltip); children inside the padded region use var(--dry-radius-nested-tooltip). */
+	[data-tooltip-content] {
+		/* Reset UA popover defaults */
+		inset: unset;
+		margin: 0;
+
+		/* glass-tooltip recipe: 95% inverse surface + 5% transparent paired with backdrop-filter blur below */
+		background: var(
+			--dry-tooltip-bg,
+			color-mix(in srgb, var(--dry-color-bg-inverse) 95%, transparent)
+		);
+		color: var(--dry-tooltip-color, var(--dry-color-text-inverse));
+		border: 1px solid var(--dry-tooltip-border, var(--dry-color-stroke-inverse-weak));
+		border-radius: var(--dry-tooltip-radius, var(--dry-overlay-radius, var(--dry-radius-tooltip)));
+		display: inline-grid;
+		max-inline-size: 28ch;
+		padding: var(--dry-tooltip-padding-y, var(--dry-space-1))
+			var(--dry-tooltip-padding-x, var(--dry-padding-tooltip, var(--dry-space-2)));
+		font-family: var(--dry-font-sans);
+		font-size: var(--dry-tooltip-font-size, var(--dry-type-ui-caption-size));
+		font-weight: var(--dry-tooltip-font-weight, var(--dry-font-weight-medium));
+		line-height: var(--dry-tooltip-line-height, var(--dry-type-ui-caption-leading));
+		letter-spacing: var(--dry-tooltip-letter-spacing, var(--dry-tracking-normal));
+		white-space: normal;
+		overflow-wrap: anywhere;
+		pointer-events: none;
+		box-shadow: var(--dry-tooltip-shadow, var(--dry-overlay-shadow, var(--dry-shadow-overlay)));
+		backdrop-filter: blur(var(--dry-tooltip-backdrop-blur, var(--dry-space-2)));
+		-webkit-backdrop-filter: blur(var(--dry-tooltip-backdrop-blur, var(--dry-space-2)));
+
+		transition:
+			opacity var(--dry-duration-fast) var(--dry-ease-emphasized),
+			transform var(--dry-duration-fast) var(--dry-ease-emphasized);
+	}
+
+	[data-tooltip-content][data-state='closed'] {
+		transition-duration: calc(var(--dry-duration-fast) / 2);
+		transition-timing-function: var(--dry-ease-out);
+	}
+
+	[data-tooltip-content]:not(:popover-open) {
+		display: none;
+	}
+
+	[data-tooltip-content]:popover-open {
+		display: inline-grid;
+		opacity: 1;
+		transform: translateY(0);
+	}
+
+	@starting-style {
+		[data-tooltip-content]:popover-open {
+			opacity: 0;
+			transform: translateY(var(--dry-motion-distance-xs));
+		}
+	}
+</style>

package/src/tooltip/tooltip-root.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { setTooltipCtx } from './context.svelte.js';
+
+	interface Props {
+		openDelay?: number;
+		closeDelay?: number;
+		children: Snippet;
+	}
+
+	let { openDelay = 700, closeDelay = 300, children }: Props = $props();
+
+	let open = $state(false);
+
+	const uid = $props.id();
+	const triggerId = `tooltip-trigger-${uid}`;
+	const contentId = `tooltip-content-${uid}`;
+
+	let openTimeout: ReturnType<typeof setTimeout>;
+	let closeTimeout: ReturnType<typeof setTimeout>;
+
+	function show() {
+		clearTimeout(closeTimeout);
+		openTimeout = setTimeout(() => {
+			open = true;
+		}, openDelay);
+	}
+
+	function close() {
+		clearTimeout(openTimeout);
+		closeTimeout = setTimeout(() => {
+			open = false;
+		}, closeDelay);
+	}
+
+	function showImmediate() {
+		clearTimeout(closeTimeout);
+		clearTimeout(openTimeout);
+		open = true;
+	}
+
+	function closeImmediate() {
+		clearTimeout(closeTimeout);
+		clearTimeout(openTimeout);
+		open = false;
+	}
+
+	$effect(() => {
+		return () => {
+			clearTimeout(openTimeout);
+			clearTimeout(closeTimeout);
+		};
+	});
+
+	setTooltipCtx({
+		get open() {
+			return open;
+		},
+		get triggerId() {
+			return triggerId;
+		},
+		get contentId() {
+			return contentId;
+		},
+		triggerEl: null,
+		show,
+		close,
+		showImmediate,
+		closeImmediate
+	});
+</script>
+
+{@render children()}

package/src/tooltip/tooltip-trigger.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getTooltipCtx } from './context.svelte.js';
+
+	const TRIGGER_SELECTOR = [
+		'button',
+		'[href]',
+		'input:not([type="hidden"])',
+		'select',
+		'textarea',
+		'[tabindex]:not([tabindex="-1"])',
+		'[contenteditable="true"]',
+		'summary'
+	].join(', ');
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+
+	const ctx = getTooltipCtx();
+
+	let spanEl = $state<HTMLSpanElement>();
+
+	function getTriggerElement(wrapper: HTMLElement | null | undefined): HTMLElement | null {
+		if (!wrapper) return null;
+		if (wrapper.matches(TRIGGER_SELECTOR)) return wrapper;
+		return wrapper.querySelector<HTMLElement>(TRIGGER_SELECTOR);
+	}
+
+	$effect(() => {
+		const triggerEl = getTriggerElement(spanEl) ?? spanEl ?? null;
+
+		if (!triggerEl) {
+			return;
+		}
+
+		ctx.triggerEl = triggerEl;
+		triggerEl.id = ctx.triggerId;
+
+		if (ctx.open) {
+			triggerEl.setAttribute('aria-describedby', ctx.contentId);
+		} else {
+			triggerEl.removeAttribute('aria-describedby');
+		}
+
+		return () => {
+			if (ctx.triggerEl === triggerEl) {
+				ctx.triggerEl = null;
+			}
+		};
+	});
+</script>
+
+<span
+	bind:this={spanEl}
+	data-tooltip-trigger
+	class={className}
+	onmouseenter={() => ctx.show()}
+	onmouseleave={() => ctx.close()}
+	onfocusin={() => ctx.showImmediate()}
+	onfocusout={() => ctx.closeImmediate()}
+	{...rest}
+>
+	{@render children()}
+</span>
+
+<style>
+	[data-tooltip-trigger] {
+		display: inline-grid;
+	}
+</style>

package/src/tooltip/tooltip.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Tooltip',
+	description: 'Hover/focus popup with descriptive text',
+	category: 'overlay',
+	tags: ['hover', 'info', 'tooltip', 'hint']
+};

package/src/tour/index.ts

@@ -0,0 +1,12 @@
+export type { TourStep, TourRootProps, TourTooltipProps } from '@dryui/primitives';
+
+import TourRoot from './tour-root.svelte';
+import TourTooltip from './tour-tooltip-button.svelte';
+
+export const Tour: {
+	Root: typeof TourRoot;
+	Tooltip: typeof TourTooltip;
+} = {
+	Root: TourRoot,
+	Tooltip: TourTooltip
+};

package/src/tour/tour-root.css

@@ -0,0 +1,215 @@
+[data-tour-overlay] {
+	position: fixed;
+	inset: 0;
+	z-index: var(--dry-layer-tour-overlay);
+	pointer-events: auto;
+}
+
+[data-tour-spotlight] {
+	--dry-tour-overlay-color: var(--dry-color-overlay-backdrop-strong);
+	--dry-tour-spotlight-padding: 8px;
+	--dry-tour-spotlight-radius: 4px;
+	--dry-tour-spotlight-ring: color-mix(
+		in srgb,
+		var(--dry-color-fill-brand) 35%,
+		var(--dry-color-on-brand) 25%
+	);
+
+	position: fixed;
+	top: var(--dry-tour-spotlight-top);
+	left: var(--dry-tour-spotlight-left);
+	right: calc(100% - var(--dry-tour-spotlight-left) - var(--dry-tour-spotlight-width));
+	height: var(--dry-tour-spotlight-height);
+	border-radius: var(--dry-tour-spotlight-radius);
+	box-shadow:
+		0 0 0 1px var(--dry-tour-spotlight-ring),
+		0 0 0 9999px var(--dry-tour-overlay-color);
+	pointer-events: none;
+	z-index: var(--dry-layer-tour-spotlight);
+	transition:
+		top var(--dry-duration-normal) var(--dry-ease-out),
+		left var(--dry-duration-normal) var(--dry-ease-out),
+		right var(--dry-duration-normal) var(--dry-ease-out),
+		height var(--dry-duration-normal) var(--dry-ease-out);
+}
+
+[data-tour-tooltip] {
+	--dry-tour-tooltip-bg: var(--dry-color-bg-overlay);
+	--dry-tour-tooltip-radius: var(--dry-radius-xl);
+	--dry-tour-tooltip-shadow: var(--dry-shadow-overlay);
+	--dry-tour-tooltip-max-width: 20rem;
+	--dry-tour-arrow-size: var(--dry-space-3);
+
+	container-type: inline-size;
+	position: fixed;
+	top: var(--dry-tour-tooltip-top);
+	left: var(--dry-tour-tooltip-left);
+	z-index: var(--dry-layer-tour-tooltip);
+	pointer-events: auto;
+	display: grid;
+	grid-template-columns: minmax(
+		16rem,
+		min(var(--dry-tour-tooltip-max-width), calc(100vw - var(--dry-space-4)))
+	);
+	background: var(--dry-tour-tooltip-bg);
+	color: var(--dry-color-text-strong);
+	border: 1px solid var(--dry-color-stroke-weak);
+	border-radius: var(--dry-tour-tooltip-radius);
+	box-shadow: var(--dry-tour-tooltip-shadow);
+	padding: var(--dry-space-5);
+	transition:
+		top var(--dry-duration-normal) var(--dry-ease-out),
+		left var(--dry-duration-normal) var(--dry-ease-out),
+		opacity var(--dry-duration-fast) var(--dry-ease-out);
+}
+
+[data-tour-tooltip] [data-part='tooltipTitle'] {
+	font-family: var(--dry-font-sans);
+	font-size: var(--dry-type-small-size, var(--dry-text-base-size));
+	font-weight: 600;
+	color: var(--dry-color-text-strong);
+	margin: 0 0 var(--dry-space-2);
+	line-height: 1.3;
+}
+
+[data-tour-tooltip] [data-part='tooltipContent'] {
+	font-family: var(--dry-font-sans);
+	font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+	line-height: var(--dry-type-small-leading, var(--dry-text-sm-leading));
+	color: var(--dry-color-text-weak);
+	margin: 0 0 var(--dry-space-4);
+}
+
+[data-tour-tooltip] [data-part='tooltipFooter'] {
+	display: grid;
+	grid-template-columns: 1fr auto;
+	align-items: center;
+	gap: var(--dry-space-3);
+}
+
+[data-tour-tooltip] [data-part='tooltipCounter'] {
+	font-family: var(--dry-font-sans);
+	font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+	color: var(--dry-color-text-weak);
+}
+
+[data-tour-tooltip] [data-part='tooltipActions'] {
+	display: grid;
+	grid-auto-flow: column;
+	grid-auto-columns: max-content;
+	align-items: center;
+	gap: var(--dry-space-2);
+	justify-items: end;
+}
+
+[data-tour-tooltip] [data-part='skipButton'] {
+	font-family: var(--dry-font-sans);
+	font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+	color: var(--dry-color-text-weak);
+	background: none;
+	border: none;
+	padding: var(--dry-space-1) var(--dry-space-2);
+	cursor: pointer;
+	border-radius: var(--dry-radius-sm);
+	transition: color var(--dry-duration-fast);
+}
+
+[data-tour-tooltip] [data-part='skipButton']:hover {
+	color: var(--dry-color-text-strong);
+}
+
+[data-tour-tooltip] [data-part='skipButton']:focus-visible {
+	outline: var(--dry-focus-ring);
+	outline-offset: 2px;
+}
+
+[data-tour-tooltip] [data-part='prevButton'] {
+	font-family: var(--dry-font-sans);
+	font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+	color: var(--dry-color-text-strong);
+	background: var(--dry-color-fill-weak, transparent);
+	border: 1px solid var(--dry-color-stroke-weak);
+	padding: var(--dry-space-1) var(--dry-space-3);
+	border-radius: var(--dry-radius-md);
+	cursor: pointer;
+	transition: background var(--dry-duration-fast);
+}
+
+[data-tour-tooltip] [data-part='prevButton']:hover {
+	background: var(--dry-color-bg-raised);
+}
+
+[data-tour-tooltip] [data-part='prevButton']:focus-visible {
+	outline: var(--dry-focus-ring);
+	outline-offset: 2px;
+}
+
+[data-tour-tooltip] [data-part='nextButton'] {
+	font-family: var(--dry-font-sans);
+	font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+	color: var(--dry-color-on-brand);
+	background: var(--dry-color-fill-brand);
+	border: none;
+	padding: var(--dry-space-1) var(--dry-space-3);
+	border-radius: var(--dry-radius-md);
+	cursor: pointer;
+	transition: opacity var(--dry-duration-fast);
+}
+
+[data-tour-tooltip] [data-part='nextButton']:hover {
+	opacity: 0.9;
+}
+
+[data-tour-tooltip] [data-part='nextButton']:focus-visible {
+	outline: var(--dry-focus-ring);
+	outline-offset: 2px;
+}
+
+[data-tour-tooltip]::before {
+	content: '';
+	position: absolute;
+	height: var(--dry-tour-arrow-size);
+	aspect-ratio: 1;
+	background: var(--dry-tour-tooltip-bg);
+	border: 1px solid var(--dry-color-stroke-weak);
+	transform: translate(-50%, -50%) rotate(45deg);
+}
+
+[data-tour-tooltip][data-placement='bottom']::before {
+	top: 0;
+	left: var(--dry-tour-tooltip-arrow-offset, 50%);
+	border-right: none;
+	border-bottom: none;
+}
+
+[data-tour-tooltip][data-placement='top']::before {
+	top: 100%;
+	left: var(--dry-tour-tooltip-arrow-offset, 50%);
+	border-left: none;
+	border-top: none;
+}
+
+[data-tour-tooltip][data-placement='left']::before {
+	left: 100%;
+	top: var(--dry-tour-tooltip-arrow-offset, 50%);
+	border-left: none;
+	border-bottom: none;
+}
+
+[data-tour-tooltip][data-placement='right']::before {
+	left: 0;
+	top: var(--dry-tour-tooltip-arrow-offset, 50%);
+	border-right: none;
+	border-top: none;
+}
+
+@container (max-width: 480px) {
+	[data-tour-tooltip] {
+		grid-template-columns: minmax(0, min(16rem, calc(100vw - var(--dry-space-4))));
+	}
+
+	[data-tour-tooltip] [data-part='tooltipFooter'] {
+		grid-template-columns: 1fr;
+		align-items: stretch;
+	}
+}

package/src/tour/tour-root.css.d.ts

@@ -0,0 +1,2 @@
+declare const css: void;
+export default css;

package/src/tour/tour-root.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import './tour-root.css';
+
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { Tour as TourPrimitive, type TourStep } from '@dryui/primitives/tour';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		steps: TourStep[];
+		active?: boolean;
+		onComplete?: () => void;
+		onSkip?: () => void;
+		children: Snippet;
+	}
+
+	let { active = $bindable(false), children, ...rest }: Props = $props();
+</script>
+
+<TourPrimitive.Root bind:active data-part="root" {children} {...rest} />

package/src/tour/tour-tooltip-button.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { Tour as TourPrimitive, type TourStep } from '@dryui/primitives/tour';
+
+	interface TooltipSnippetParams {
+		step: TourStep;
+		currentStep: number;
+		totalSteps: number;
+		next: () => void;
+		prev: () => void;
+		skip: () => void;
+	}
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+		children?: Snippet<[TooltipSnippetParams]>;
+	}
+
+	let { children, ...rest }: Props = $props();
+</script>
+
+{#if children}
+	<TourPrimitive.Tooltip data-part="tooltip" {children} {...rest} />
+{:else}
+	<TourPrimitive.Tooltip data-part="tooltip" {...rest}>
+		{#snippet children(ctx)}
+			<div data-part="tooltipTitle">{ctx.step.title}</div>
+			<div data-part="tooltipContent">{ctx.step.content}</div>
+			<div data-part="tooltipFooter">
+				<span data-part="tooltipCounter">{ctx.currentStep + 1} of {ctx.totalSteps}</span>
+				<div data-part="tooltipActions">
+					<Button variant="ghost" size="sm" data-part="skipButton" onclick={() => ctx.skip()}
+						>Skip</Button
+					>
+					{#if ctx.currentStep > 0}
+						<Button variant="outline" size="sm" data-part="prevButton" onclick={() => ctx.prev()}
+							>Previous</Button
+						>
+					{/if}
+					<Button variant="solid" size="sm" data-part="nextButton" onclick={() => ctx.next()}
+						>{ctx.currentStep === ctx.totalSteps - 1 ? 'Finish' : 'Next'}</Button
+					>
+				</div>
+			</div>
+		{/snippet}
+	</TourPrimitive.Tooltip>
+{/if}

package/src/tour/tour.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Tour',
+	description: 'Step-by-step guided tour overlay with spotlight',
+	category: 'overlay',
+	tags: ['tour', 'guide', 'spotlight', 'onboarding', 'walkthrough']
+};

package/src/transfer/context.svelte.ts

@@ -0,0 +1,31 @@
+import { createContext } from '@dryui/primitives';
+
+export interface TransferItem {
+	key: string;
+	label: string;
+	disabled?: boolean;
+}
+
+export interface TransferContext {
+	readonly sourceItems: TransferItem[];
+	readonly targetItems: TransferItem[];
+	readonly selectedSource: Set<string>;
+	readonly selectedTarget: Set<string>;
+	readonly sourceCount: number;
+	readonly targetCount: number;
+	readonly selectedSourceCount: number;
+	readonly selectedTargetCount: number;
+	toggleSourceSelection: (key: string) => void;
+	toggleTargetSelection: (key: string) => void;
+	selectAllSource: () => void;
+	selectAllTarget: () => void;
+	deselectAllSource: () => void;
+	deselectAllTarget: () => void;
+	moveToTarget: () => void;
+	moveToSource: () => void;
+	moveAllToTarget: () => void;
+	moveAllToSource: () => void;
+	isSourceAllSelected: () => boolean;
+	isTargetAllSelected: () => boolean;
+}
+export const [setTransferCtx, getTransferCtx] = createContext<TransferContext>('transfer');

package/src/transfer/index.ts

@@ -0,0 +1,29 @@
+import type { Snippet } from 'svelte';
+import type {
+	TransferListProps as PrimitiveTransferListProps,
+	TransferItem as TransferItemType
+} from '@dryui/primitives';
+
+export type { TransferRootProps, TransferItemProps, TransferActionsProps } from '@dryui/primitives';
+
+export interface TransferListProps extends PrimitiveTransferListProps {
+	filterable?: boolean;
+	content?: Snippet<[{ items: TransferItemType[] }]>;
+}
+
+import TransferRoot from './transfer-root.svelte';
+import TransferList from './transfer-list-input.svelte';
+import TransferItem from './transfer-item.svelte';
+import TransferActions from './transfer-actions-button.svelte';
+
+export const Transfer: {
+	Root: typeof TransferRoot;
+	List: typeof TransferList;
+	Item: typeof TransferItem;
+	Actions: typeof TransferActions;
+} = {
+	Root: TransferRoot,
+	List: TransferList,
+	Item: TransferItem,
+	Actions: TransferActions
+};