@dryui/ui 3.0.0 → 4.0.1

package/src/timeline/timeline-item.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<div role="listitem" data-part="item" class={className} {...rest}>
+	{@render children()}
+</div>
+
+<style>
+	[data-part='item'] {
+		--_timeline-item-pl: var(--dry-timeline-item-pl, var(--dry-space-4));
+		--_timeline-dot-size: var(--dry-timeline-dot-size, 0.875rem);
+		--_timeline-line-w: var(--dry-timeline-line-w, 1px);
+		--_timeline-content-lh: var(--dry-timeline-content-line-height, 1.5rem);
+		--_timeline-gap: var(--dry-timeline-gap, var(--dry-space-4));
+
+		position: relative;
+		display: grid;
+		grid-template-columns: var(--dry-timeline-item-columns, auto minmax(0, 1fr));
+		align-items: start;
+		gap: var(--dry-timeline-item-gap, var(--dry-space-3));
+		padding-left: var(--_timeline-item-pl);
+		padding-top: var(--dry-timeline-item-pt, 0);
+	}
+
+	[data-part='item']::before {
+		content: '';
+		position: absolute;
+		left: var(
+			--dry-timeline-line-left,
+			calc(var(--_timeline-item-pl) + var(--_timeline-dot-size) / 2 - var(--_timeline-line-w) / 2)
+		);
+		top: var(
+			--dry-timeline-line-top,
+			calc((var(--_timeline-content-lh) + var(--_timeline-dot-size)) / 2 + var(--dry-space-1))
+		);
+		bottom: var(
+			--dry-timeline-line-bottom,
+			calc(-1 * (var(--_timeline-gap) + var(--_timeline-content-lh) / 2 - var(--dry-space-1)))
+		);
+		right: var(--dry-timeline-line-right, auto);
+		height: var(--dry-timeline-line-h, auto);
+		border-left: var(--_timeline-line-w) solid
+			var(--dry-timeline-line-color, var(--dry-color-stroke-weak));
+	}
+
+	[data-part='item']:last-child::before {
+		display: none;
+	}
+</style>

package/src/timeline/timeline-root.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		orientation?: 'vertical' | 'horizontal';
+		children: Snippet;
+	}
+
+	let { orientation = 'vertical', class: className, children, ...rest }: Props = $props();
+</script>
+
+<div role="list" data-part="root" data-orientation={orientation} class={className} {...rest}>
+	{@render children()}
+</div>
+
+<style>
+	[data-part='root'] {
+		display: grid;
+		gap: var(--dry-timeline-gap, var(--dry-space-4));
+		color: var(--dry-color-text-strong);
+	}
+
+	[data-part='root'][data-orientation='horizontal'] {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		gap: var(--dry-timeline-gap, var(--dry-space-4));
+		overflow-x: auto;
+		padding-bottom: var(--dry-space-1);
+
+		--dry-timeline-item-columns: 1fr;
+		--dry-timeline-item-min-w: 16rem;
+		--dry-timeline-item-pl: 0;
+		--dry-timeline-item-pt: var(--dry-space-4);
+		--dry-timeline-line-left: 0;
+		--dry-timeline-line-top: calc(var(--dry-space-4) + var(--dry-timeline-dot-size, 0.875rem) / 2);
+		--dry-timeline-line-right: calc(var(--dry-space-1) * -1);
+		--dry-timeline-line-bottom: auto;
+		--dry-timeline-line-w: auto;
+		--dry-timeline-line-h: 1px;
+	}
+</style>

package/src/timeline/timeline-time.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLTimeElement> {
+		datetime?: string;
+		children: Snippet;
+	}
+
+	let { class: className, datetime, children, ...rest }: Props = $props();
+</script>
+
+<time data-part="time" class={className} {datetime} {...rest}>
+	{@render children()}
+</time>
+
+<style>
+	[data-part='time'] {
+		color: var(--dry-color-text-weak);
+		font-size: var(--dry-type-small-size, var(--dry-type-small-size));
+	}
+</style>

package/src/timeline/timeline-title.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLHeadingElement> {
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+		children: Snippet;
+	}
+
+	let { level = 3, class: className, children, ...rest }: Props = $props();
+</script>
+
+{#if level === 1}
+	<h1 data-part="title" data-level={level} class={className} {...rest}>{@render children()}</h1>
+{:else if level === 2}
+	<h2 data-part="title" data-level={level} class={className} {...rest}>{@render children()}</h2>
+{:else if level === 3}
+	<h3 data-part="title" data-level={level} class={className} {...rest}>{@render children()}</h3>
+{:else if level === 4}
+	<h4 data-part="title" data-level={level} class={className} {...rest}>{@render children()}</h4>
+{:else if level === 5}
+	<h5 data-part="title" data-level={level} class={className} {...rest}>{@render children()}</h5>
+{:else}
+	<h6 data-part="title" data-level={level} class={className} {...rest}>{@render children()}</h6>
+{/if}
+
+<style>
+	[data-part='title'] {
+		margin: 0;
+		color: var(--dry-color-text-strong);
+		line-height: 1.25;
+		letter-spacing: -0.02em;
+	}
+
+	[data-part='title'][data-level='1'] {
+		font-size: var(--dry-type-heading-1-size, var(--dry-type-heading-1-size, 1.875rem));
+	}
+
+	[data-part='title'][data-level='2'] {
+		font-size: var(--dry-type-heading-2-size, var(--dry-type-heading-2-size, 1.5rem));
+	}
+
+	[data-part='title'][data-level='3'] {
+		font-size: var(--dry-type-heading-3-size, var(--dry-type-heading-3-size, 1.25rem));
+	}
+
+	[data-part='title'][data-level='4'] {
+		font-size: var(--dry-type-heading-4-size, var(--dry-type-heading-4-size, 1.125rem));
+	}
+
+	[data-part='title'][data-level='5'],
+	[data-part='title'][data-level='6'] {
+		font-size: var(--dry-type-small-size, var(--dry-type-small-size));
+	}
+</style>

package/src/timeline/timeline.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Timeline',
+	description: 'Vertical timeline for activity feeds and history',
+	category: 'display',
+	tags: ['timeline', 'activity', 'feed', 'history', 'events']
+};

package/src/toast/context.svelte.ts

@@ -0,0 +1,7 @@
+import { createContext } from '@dryui/primitives';
+
+interface ToastContext {
+	readonly id: string;
+	readonly variant: 'info' | 'success' | 'warning' | 'error';
+}
+export const [setToastCtx, getToastCtx] = createContext<ToastContext>('toast');

package/src/toast/index.ts

@@ -0,0 +1,33 @@
+export { toastStore, createToastStore } from '@dryui/primitives';
+export type {
+	ToastData,
+	ToastProviderProps,
+	ToastRootProps,
+	ToastActionProps,
+	ToastTitleProps,
+	ToastDescriptionProps,
+	ToastCloseProps
+} from '@dryui/primitives';
+
+import ToastProvider from './toast-provider.svelte';
+import ToastRoot from './toast-root.svelte';
+import ToastTitle from './toast-title.svelte';
+import ToastDescription from './toast-description.svelte';
+import ToastClose from './toast-close-button.svelte';
+import ToastAction from './toast-action-button.svelte';
+
+export const Toast: {
+	Provider: typeof ToastProvider;
+	Root: typeof ToastRoot;
+	Title: typeof ToastTitle;
+	Description: typeof ToastDescription;
+	Close: typeof ToastClose;
+	Action: typeof ToastAction;
+} = {
+	Provider: ToastProvider,
+	Root: ToastRoot,
+	Title: ToastTitle,
+	Description: ToastDescription,
+	Close: ToastClose,
+	Action: ToastAction
+};

package/src/toast/toast-action-button.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+
+	interface Props extends HTMLAttributes<HTMLButtonElement> {
+		children: Snippet;
+		onclick?: () => void;
+	}
+
+	let { children, ...rest }: Props = $props();
+</script>
+
+<Button variant="trigger" size="sm" type="button" data-toast-action {...rest}>
+	{@render children()}
+</Button>

package/src/toast/toast-close-button.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { toastStore } from '@dryui/primitives';
+	import CloseButtonBase from '../internal/close-button-base.svelte';
+	import { getToastCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		children: Snippet;
+	}
+
+	let { children, ...rest }: Props = $props();
+
+	const ctx = getToastCtx();
+</script>
+
+<span data-part="toast-close">
+	<CloseButtonBase
+		aria-label="Close notification"
+		{...rest}
+		onclick={() => toastStore.remove(ctx.id)}
+	>
+		{@render children()}
+	</CloseButtonBase>
+</span>
+
+<style>
+	[data-part='toast-close'] {
+		position: absolute;
+		top: var(--dry-space-3);
+		right: var(--dry-space-3);
+		display: inline-grid;
+		--dry-btn-font-size: var(--dry-type-heading-3-size, var(--dry-text-xl-size));
+	}
+</style>

package/src/toast/toast-description.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLParagraphElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<p data-part="description" class={className} {...rest}>
+	{@render children()}
+</p>
+
+<style>
+	[data-part='description'] {
+		font-family: var(--dry-font-sans);
+		font-size: var(--dry-type-tiny-size);
+		line-height: var(--dry-type-tiny-leading);
+		color: var(--dry-color-text-weak);
+		margin: 0;
+	}
+</style>

package/src/toast/toast-provider.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { toastStore, tryShowPopover, tryHidePopover } from '@dryui/primitives';
+	import ToastRoot from './toast-root.svelte';
+	import ToastTitle from './toast-title.svelte';
+	import ToastDescription from './toast-description.svelte';
+	import ToastClose from './toast-close-button.svelte';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		position?:
+			| 'top-right'
+			| 'top-left'
+			| 'bottom-right'
+			| 'bottom-left'
+			| 'top-center'
+			| 'bottom-center';
+		children?: Snippet;
+	}
+
+	let { class: className, position = 'bottom-right', children, ...rest }: Props = $props();
+	const visible = $derived(Boolean(children) || toastStore.toasts.length > 0);
+
+	let panelEl = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (!panelEl) return;
+		if (visible) tryShowPopover(panelEl);
+		else tryHidePopover(panelEl);
+	});
+</script>
+
+<div
+	bind:this={panelEl}
+	popover="manual"
+	role="region"
+	aria-label="Notifications"
+	data-part="provider"
+	data-dry-stagger
+	data-position={position}
+	class={className}
+	{...rest}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		{#each toastStore.toasts as toast (toast.id)}
+			<ToastRoot id={toast.id} variant={toast.variant} persistent={toast.persistent}>
+				<div data-part="content">
+					{#if toast.title}
+						<ToastTitle>{toast.title}</ToastTitle>
+					{/if}
+					{#if toast.description}
+						<ToastDescription>{toast.description}</ToastDescription>
+					{/if}
+				</div>
+				<ToastClose>
+					<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+						<path
+							d="M12 4L4 12M4 4l8 8"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+				</ToastClose>
+			</ToastRoot>
+		{/each}
+	{/if}
+</div>
+
+<style>
+	[data-part='provider'] {
+		position: fixed;
+		z-index: var(--dry-layer-overlay);
+		display: grid;
+		grid-template-columns: minmax(0, min(420px, calc(100vw - var(--dry-space-8))));
+		gap: var(--dry-space-3);
+		padding: 0;
+		margin: 0;
+		border: none;
+		background: transparent;
+		color: inherit;
+		overflow: visible;
+		container-type: inline-size;
+
+		&[data-position='top-right'] {
+			inset: var(--dry-space-4) var(--dry-space-4) auto auto;
+		}
+
+		&[data-position='top-left'] {
+			inset: var(--dry-space-4) auto auto var(--dry-space-4);
+		}
+
+		&[data-position='bottom-right'] {
+			inset: auto var(--dry-space-4) var(--dry-space-4) auto;
+		}
+
+		&[data-position='bottom-left'] {
+			inset: auto auto var(--dry-space-4) var(--dry-space-4);
+		}
+
+		&[data-position='top-center'] {
+			inset: var(--dry-space-4) auto auto 50%;
+			transform: translateX(-50%);
+		}
+
+		&[data-position='bottom-center'] {
+			inset: auto auto var(--dry-space-4) 50%;
+			transform: translateX(-50%);
+		}
+	}
+
+	[data-part='content'] {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+		gap: var(--dry-space-1);
+	}
+</style>

package/src/toast/toast-root.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setToastCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		id: string;
+		variant?: 'info' | 'success' | 'warning' | 'error';
+		persistent?: boolean;
+		progress?: number;
+		children: Snippet;
+	}
+
+	let {
+		id,
+		variant = 'info',
+		persistent,
+		progress,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	const role = $derived(variant === 'error' || variant === 'warning' ? 'alert' : 'status');
+	const live = $derived(variant === 'error' || variant === 'warning' ? 'assertive' : 'polite');
+
+	setToastCtx({
+		get id() {
+			return id;
+		},
+		get variant() {
+			return variant;
+		}
+	});
+
+	let progressEl = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (!progressEl) return;
+		progressEl.style.setProperty('--progress-width', `${progress}%`);
+	});
+</script>
+
+<div
+	{role}
+	aria-live={live}
+	data-part="root"
+	data-variant={variant}
+	data-toast-id={id}
+	data-persistent={persistent ? '' : undefined}
+	class={className}
+	{...rest}
+>
+	{@render children()}
+	{#if progress !== undefined}
+		<div bind:this={progressEl} data-part="progress"></div>
+	{/if}
+</div>
+
+<style>
+	/* outer: var(--dry-radius-toast); children inside the padded region use var(--dry-radius-nested-toast). */
+	[data-part='root'] {
+		--dry-toast-accent: var(--dry-color-fill-info);
+		--dry-radius-nested: max(
+			var(--dry-radius-sm),
+			calc(var(--dry-radius-toast) - var(--dry-space-4))
+		);
+		--dry-btn-radius: var(--dry-radius-nested);
+
+		position: relative;
+		background: var(--dry-toast-bg, var(--dry-color-bg-overlay));
+		border: 1px solid var(--dry-toast-border, var(--dry-color-stroke-weak));
+		border-radius: var(--dry-radius-toast);
+		box-shadow: var(--dry-shadow-lg);
+		padding: var(--dry-space-4);
+		padding-right: calc(var(--dry-space-4) + var(--dry-space-12) + var(--dry-space-2));
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+		align-items: start;
+		gap: var(--dry-space-2);
+		animation: slideIn var(--dry-duration-normal) var(--dry-ease-out);
+
+		&[data-variant='info'] {
+			--dry-toast-accent: var(--dry-color-fill-info);
+			--dry-toast-bg: var(--dry-color-fill-info-weak);
+			--dry-toast-border: var(--dry-color-stroke-info);
+			--dry-toast-action-hover-bg: var(--dry-color-fill-info-weak);
+		}
+
+		&[data-variant='success'] {
+			--dry-toast-accent: var(--dry-color-fill-success);
+			--dry-toast-bg: var(--dry-color-fill-success-weak);
+			--dry-toast-border: var(--dry-color-stroke-success);
+			--dry-toast-action-hover-bg: var(--dry-color-fill-success-weak);
+		}
+
+		&[data-variant='warning'] {
+			--dry-toast-accent: var(--dry-color-fill-warning);
+			--dry-toast-bg: var(--dry-color-fill-warning-weak);
+			--dry-toast-border: var(--dry-color-stroke-warning);
+			--dry-toast-action-hover-bg: var(--dry-color-fill-warning-weak);
+		}
+
+		&[data-variant='error'] {
+			--dry-toast-accent: var(--dry-color-fill-error);
+			--dry-toast-bg: var(--dry-color-fill-error-weak);
+			--dry-toast-border: var(--dry-color-stroke-error);
+			--dry-toast-action-hover-bg: var(--dry-color-fill-error-weak);
+		}
+	}
+
+	@keyframes slideIn {
+		from {
+			opacity: 0;
+			transform: translateY(-8px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes slideOut {
+		from {
+			opacity: 1;
+			transform: translateX(0);
+		}
+		to {
+			opacity: 0;
+			transform: translateX(100%);
+		}
+	}
+
+	[data-part='root'][data-removing] {
+		animation: slideOut var(--dry-duration-normal) var(--dry-ease-in) forwards;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		[data-part='root'] {
+			animation: none;
+		}
+		[data-part='root'][data-removing] {
+			animation: none;
+		}
+	}
+
+	[data-part='progress'] {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 3px;
+		display: grid;
+		grid-template-columns: var(--progress-width, 0%) 1fr;
+		background: var(--dry-color-stroke-weak);
+		border-radius: 0 0 var(--dry-radius-toast) var(--dry-radius-toast);
+		overflow: hidden;
+		transition: grid-template-columns var(--dry-duration-normal) var(--dry-ease-default);
+	}
+
+	[data-part='progress']::after {
+		content: '';
+		background: var(--dry-toast-accent, var(--dry-color-fill-brand));
+	}
+
+	[data-part='root'][data-persistent] {
+		border-left: 3px solid var(--dry-toast-accent, var(--dry-color-fill-brand));
+	}
+</style>

package/src/toast/toast-title.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLParagraphElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<p data-part="title" class={className} {...rest}>
+	{@render children()}
+</p>
+
+<style>
+	[data-part='title'] {
+		font-family: var(--dry-font-sans);
+		font-size: var(--dry-type-small-size);
+		line-height: var(--dry-type-small-leading);
+		font-weight: 500;
+		color: var(--dry-toast-title-color, var(--dry-color-text-strong));
+		margin: 0;
+	}
+</style>

package/src/toast/toast.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Toast',
+	description: 'Temporary notification message',
+	category: 'feedback',
+	tags: ['notification', 'toast', 'snackbar', 'alert']
+};

package/src/toggle/index.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { ToggleProps as PrimitiveToggleProps } from '@dryui/primitives';
+
+export interface ToggleProps extends PrimitiveToggleProps {
+	size?: 'sm' | 'md' | 'lg';
+	icon?: Snippet;
+}
+
+export { default as Toggle } from './toggle-button.svelte';