@dryui/ui 3.0.0 → 4.0.1

package/src/internal/modal-content.svelte

@@ -0,0 +1,351 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLDialogAttributes } from 'svelte/elements';
+
+	type ModalSide = 'center' | 'top' | 'right' | 'bottom' | 'left';
+	type ModalVariant = 'dialog' | 'drawer' | 'alert-dialog';
+
+	interface Props extends HTMLDialogAttributes {
+		ctx: { readonly open: boolean; readonly headerId: string; close: () => void };
+		/** Presentational variant; drives the scoped style block. */
+		variant: ModalVariant;
+		/**
+		 * Positioning hint. `center` stacks the panel in the middle;
+		 * `top`/`right`/`bottom`/`left` pin it to an edge (drawer-style).
+		 */
+		side?: ModalSide;
+		/** When false, clicking the dialog backdrop does not dismiss. */
+		dismissOnBackdropClick?: boolean;
+		/** When false, pressing Escape does not dismiss. */
+		dismissOnEscape?: boolean;
+		children: Snippet;
+	}
+
+	let {
+		ctx,
+		variant,
+		side = 'center',
+		dismissOnBackdropClick = true,
+		dismissOnEscape = true,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	let dialogEl = $state<HTMLDialogElement>();
+
+	$effect(() => {
+		if (!dialogEl) return;
+
+		if (side !== 'center') {
+			// Native <dialog> applies a max-width that leaves a strip beside edge drawers.
+			dialogEl.style.setProperty('max-width', 'none');
+		}
+
+		if (ctx.open && !dialogEl.open) {
+			dialogEl.showModal();
+		}
+		if (!ctx.open && dialogEl.open) {
+			dialogEl.close();
+		}
+	});
+</script>
+
+<dialog
+	bind:this={dialogEl}
+	data-modal-content
+	data-variant={variant}
+	data-side={side}
+	data-dialog-content={variant === 'dialog' ? '' : undefined}
+	data-drawer-content={variant === 'drawer' ? '' : undefined}
+	data-alert-dialog-content={variant === 'alert-dialog' ? '' : undefined}
+	aria-labelledby={ctx.headerId || undefined}
+	data-state={ctx.open ? 'open' : 'closed'}
+	onclose={() => ctx.close()}
+	oncancel={dismissOnEscape ? undefined : (e) => e.preventDefault()}
+	onclick={dismissOnBackdropClick
+		? (e) => {
+				if (e.target === dialogEl) {
+					ctx.close();
+				}
+			}
+		: undefined}
+	class={className}
+	{...rest}
+>
+	<div
+		data-modal-panel
+		data-variant={variant}
+		data-side={side}
+		data-dialog-panel={variant === 'dialog' ? '' : undefined}
+		data-drawer-panel={variant === 'drawer' ? '' : undefined}
+		data-alert-dialog-panel={variant === 'alert-dialog' ? '' : undefined}
+	>
+		{@render children()}
+	</div>
+</dialog>
+
+<style>
+	/* dialog: outer: var(--dry-radius-dialog); children inside the padded region use var(--dry-radius-nested-dialog). */
+	[data-modal-content] {
+		position: fixed;
+		inset: 0;
+		height: 100vh;
+		height: 100dvh;
+		max-height: none;
+		margin: 0;
+		border: none;
+		background: transparent;
+		color: var(--dry-color-text-strong);
+		font-family: var(--dry-font-sans);
+		padding: 0;
+	}
+
+	[data-modal-content][data-variant]:not([open]) {
+		display: none;
+	}
+
+	/* ---------- Dialog (center) ---------- */
+
+	[data-modal-content][data-variant='dialog'] {
+		width: 100vw;
+		max-width: none;
+		display: grid;
+		grid-template-columns: min(90vw, var(--dry-dialog-max-width, 32rem));
+		place-content: center;
+		place-items: center;
+		overflow: visible;
+	}
+
+	[data-modal-content][data-variant='dialog']::backdrop {
+		background: var(--dry-overlay-bg, var(--dry-color-overlay-backdrop));
+		backdrop-filter: blur(var(--dry-overlay-blur, 12px));
+		-webkit-backdrop-filter: blur(var(--dry-overlay-blur, 12px));
+	}
+
+	[data-modal-panel][data-variant='dialog'] {
+		--dry-dialog-border: var(--dry-overlay-border, var(--dry-color-stroke-weak));
+		--dry-dialog-padding: var(--dry-space-8);
+		--dry-radius-nested: max(
+			var(--dry-radius-sm),
+			calc(
+				var(--dry-dialog-radius, var(--dry-overlay-radius, var(--dry-radius-dialog))) -
+					var(--dry-dialog-padding)
+			)
+		);
+		--dry-btn-radius: var(--dry-radius-nested);
+
+		container-type: inline-size;
+		justify-self: stretch;
+		border: 1px solid var(--dry-dialog-border);
+		border-radius: var(--dry-dialog-radius, var(--dry-overlay-radius, var(--dry-radius-dialog)));
+		background: var(--dry-dialog-bg, var(--dry-overlay-bg, var(--dry-color-bg-overlay)));
+		color: var(--dry-color-text-strong);
+		box-shadow: var(--dry-dialog-shadow, var(--dry-overlay-shadow, var(--dry-shadow-overlay)));
+		padding: 0;
+		max-block-size: var(--dry-dialog-max-block-size, 85vh);
+		display: grid;
+		overflow: var(--dry-dialog-overflow, auto);
+
+		transition:
+			opacity var(--dry-duration-normal) var(--dry-ease-spring-snappy),
+			transform var(--dry-duration-normal) var(--dry-ease-spring-snappy);
+	}
+
+	[data-modal-content][data-variant='dialog'][data-state='closed'] [data-modal-panel] {
+		transition-duration: var(--dry-duration-fast);
+		transition-timing-function: var(--dry-ease-out);
+	}
+
+	[data-modal-content][data-variant='dialog'][data-state='open'] [data-modal-panel] {
+		opacity: 1;
+		transform: scale(1) translateY(0);
+	}
+
+	@starting-style {
+		[data-modal-content][data-variant='dialog'][open] [data-modal-panel] {
+			opacity: 0;
+			transform: scale(var(--dry-motion-scale-enter)) translateY(var(--dry-motion-distance-sm));
+		}
+	}
+
+	/* ---------- AlertDialog (center) ---------- */
+
+	[data-modal-content][data-variant='alert-dialog'] {
+		width: 100vw;
+		max-width: none;
+		display: grid;
+		grid-template-columns: min(90vw, var(--dry-dialog-max-width, 32rem));
+		place-content: center;
+		place-items: center;
+		overflow: visible;
+	}
+
+	[data-modal-content][data-variant='alert-dialog']::backdrop {
+		background: var(--dry-overlay-bg, var(--dry-color-overlay-backdrop-strong));
+		backdrop-filter: blur(var(--dry-overlay-blur, 4px));
+		-webkit-backdrop-filter: blur(var(--dry-overlay-blur, 4px));
+	}
+
+	[data-modal-panel][data-variant='alert-dialog'] {
+		--dry-dialog-bg: var(--dry-color-bg-overlay);
+		--dry-dialog-border: var(--dry-color-stroke-weak);
+		--dry-dialog-radius: var(--dry-radius-xl);
+		--dry-dialog-shadow: var(--dry-shadow-overlay);
+		--dry-dialog-padding: var(--dry-space-6);
+		--dry-dialog-max-width: 32rem;
+		--dry-radius-nested: max(
+			var(--dry-radius-sm),
+			calc(var(--dry-dialog-radius) - var(--dry-dialog-padding))
+		);
+		--dry-btn-radius: var(--dry-radius-nested);
+
+		container-type: inline-size;
+		justify-self: stretch;
+		border: 1px solid var(--dry-dialog-border);
+		border-radius: var(--dry-dialog-radius);
+		background: var(--dry-dialog-bg);
+		color: var(--dry-color-text-strong);
+		box-shadow: var(--dry-dialog-shadow);
+		padding: 0;
+		max-block-size: 85vh;
+		display: grid;
+		grid-template-rows: max-content minmax(0, 1fr) max-content;
+		overflow: hidden;
+
+		transition:
+			opacity var(--dry-duration-normal) var(--dry-ease-spring-snappy),
+			transform var(--dry-duration-normal) var(--dry-ease-spring-snappy);
+	}
+
+	[data-modal-content][data-variant='alert-dialog'][data-state='closed'] [data-modal-panel] {
+		transition-duration: var(--dry-duration-fast);
+		transition-timing-function: var(--dry-ease-out);
+	}
+
+	[data-modal-content][data-variant='alert-dialog'][data-state='open'] [data-modal-panel] {
+		opacity: 1;
+		transform: scale(1) translateY(0);
+	}
+
+	@starting-style {
+		[data-modal-content][data-variant='alert-dialog'][open] [data-modal-panel] {
+			opacity: 0;
+			transform: scale(var(--dry-motion-scale-enter)) translateY(var(--dry-motion-distance-sm));
+		}
+	}
+
+	/* ---------- Drawer (edge-pinned) ---------- */
+
+	[data-modal-content][data-variant='drawer'] {
+		margin: 0;
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+		grid-template-rows: minmax(0, 1fr);
+	}
+
+	[data-modal-content][data-variant='drawer']::backdrop {
+		background: var(--dry-overlay-bg, var(--dry-color-overlay-backdrop-strong));
+		backdrop-filter: blur(var(--dry-overlay-blur, 8px));
+		-webkit-backdrop-filter: blur(var(--dry-overlay-blur, 8px));
+	}
+
+	[data-modal-content][data-variant='drawer'][data-side='right'] {
+		grid-template-columns:
+			minmax(0, calc(100dvw - var(--dry-drawer-size, 25rem)))
+			var(--dry-drawer-size, 25rem);
+	}
+
+	[data-modal-content][data-variant='drawer'][data-side='left'] {
+		grid-template-columns:
+			var(--dry-drawer-size, 25rem)
+			minmax(0, calc(100dvw - var(--dry-drawer-size, 25rem)));
+	}
+
+	[data-modal-content][data-variant='drawer'][data-side='top'] {
+		grid-template-rows:
+			var(--dry-drawer-size, 25rem)
+			minmax(0, calc(100dvh - var(--dry-drawer-size, 25rem)));
+	}
+
+	[data-modal-content][data-variant='drawer'][data-side='bottom'] {
+		grid-template-rows:
+			minmax(0, calc(100dvh - var(--dry-drawer-size, 25rem)))
+			var(--dry-drawer-size, 25rem);
+	}
+
+	[data-modal-panel][data-variant='drawer'] {
+		--dry-drawer-bg: var(--dry-color-bg-overlay);
+		--dry-drawer-border: var(--dry-color-stroke-weak);
+		--dry-drawer-size: 25rem;
+		--_drawer-rest-transform: translateX(0);
+		--_drawer-enter-transform: translateX(100%);
+
+		background: var(--dry-drawer-bg);
+		color: var(--dry-color-text-strong);
+		box-shadow: var(--dry-drawer-shadow, var(--dry-shadow-overlay));
+		padding: 0;
+		display: grid;
+		grid-template-rows: max-content minmax(0, 1fr) max-content;
+		overflow: hidden;
+		opacity: 1;
+		transform: var(--_drawer-rest-transform);
+		will-change: transform, opacity;
+
+		transition:
+			transform var(--dry-duration-slow) var(--dry-ease-spring-snappy),
+			opacity var(--dry-duration-normal) var(--dry-ease-out);
+	}
+
+	[data-modal-content][data-variant='drawer'][data-state='closed'] [data-modal-panel] {
+		transition-duration: var(--dry-duration-fast);
+		transition-timing-function: var(--dry-ease-out);
+	}
+
+	[data-modal-content][data-variant='drawer'][data-side='right'] [data-modal-panel] {
+		grid-column: 2;
+		height: 100%;
+		border-left: 1px solid var(--dry-drawer-border);
+	}
+
+	[data-modal-content][data-variant='drawer'][data-side='left'] [data-modal-panel] {
+		--_drawer-enter-transform: translateX(-100%);
+		grid-column: 1;
+		height: 100%;
+		border-right: 1px solid var(--dry-drawer-border);
+	}
+
+	[data-modal-content][data-variant='drawer'][data-side='top'] [data-modal-panel] {
+		--_drawer-rest-transform: translateY(0);
+		--_drawer-enter-transform: translateY(-100%);
+		grid-row: 1;
+		height: var(--dry-drawer-size);
+		border-bottom: 1px solid var(--dry-drawer-border);
+	}
+
+	[data-modal-content][data-variant='drawer'][data-side='bottom'] [data-modal-panel] {
+		--_drawer-rest-transform: translateY(0);
+		--_drawer-enter-transform: translateY(100%);
+		grid-row: 2;
+		height: var(--dry-drawer-size);
+		border-top: 1px solid var(--dry-drawer-border);
+	}
+
+	@starting-style {
+		[data-modal-content][data-variant='drawer'][open] [data-modal-panel] {
+			opacity: 0;
+			transform: var(--_drawer-enter-transform);
+		}
+	}
+
+	[data-modal-content][data-variant='drawer'][data-state='open'] [data-modal-panel] {
+		opacity: 1;
+		transform: var(--_drawer-rest-transform);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		[data-modal-panel] {
+			transition: none;
+		}
+	}
+</style>

package/src/internal/motion.ts

@@ -0,0 +1,85 @@
+// Re-export shared motion utilities from primitives (single source of truth).
+// Imported from the dedicated motion module rather than the package barrel so
+// `bun test` can load it without evaluating other primitives modules that use
+// Svelte runes (.svelte.ts) which require preprocessing.
+export {
+	getReducedMotionPreference,
+	observeReducedMotionPreference,
+	supportsIntersectionObservers,
+	observeInViewport,
+	observePageVisibility,
+	observeOffscreenState,
+	supportsPointerTracking,
+	supportsPropertyRegistration,
+	registerPropertyOnce,
+	supportsWebGL2
+} from '@dryui/primitives/internal/motion';
+
+// UI-only motion utilities
+
+export function supportsViewTransitions(): boolean {
+	return typeof document !== 'undefined' && 'startViewTransition' in document;
+}
+
+export function supportsScrollTimelines(): boolean {
+	if (typeof CSS === 'undefined' || typeof CSS.supports !== 'function') {
+		return false;
+	}
+
+	return (
+		CSS.supports('animation-timeline: view()') || CSS.supports('scroll-timeline-name: --dry-scroll')
+	);
+}
+
+export function extractThemeColor(
+	property: string,
+	element?: HTMLElement
+): [number, number, number] {
+	if (typeof document === 'undefined') {
+		return [0, 0, 0];
+	}
+
+	const readComputedStyle =
+		typeof getComputedStyle === 'function'
+			? getComputedStyle
+			: typeof window !== 'undefined' && typeof window.getComputedStyle === 'function'
+				? window.getComputedStyle.bind(window)
+				: null;
+	if (!readComputedStyle) {
+		return [0, 0, 0];
+	}
+
+	const el = element ?? document.documentElement;
+	const value = readComputedStyle(el).getPropertyValue(property).trim();
+
+	// Parse hex (#rgb, #rrggbb)
+	const hexMatch = value.match(/^#([0-9a-f]{3,8})$/i);
+	if (hexMatch) {
+		const hex = hexMatch[1]!;
+		if (hex.length === 3) {
+			return [
+				parseInt(hex[0]! + hex[0]!, 16) / 255,
+				parseInt(hex[1]! + hex[1]!, 16) / 255,
+				parseInt(hex[2]! + hex[2]!, 16) / 255
+			];
+		}
+		return [
+			parseInt(hex.slice(0, 2), 16) / 255,
+			parseInt(hex.slice(2, 4), 16) / 255,
+			parseInt(hex.slice(4, 6), 16) / 255
+		];
+	}
+
+	// Parse rgb(r, g, b) or rgba(r, g, b, a)
+	const rgbMatch = value.match(/rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/);
+	if (rgbMatch) {
+		return [
+			parseFloat(rgbMatch[1]!) / 255,
+			parseFloat(rgbMatch[2]!) / 255,
+			parseFloat(rgbMatch[3]!) / 255
+		];
+	}
+
+	// Fallback: black
+	return [0, 0, 0];
+}

package/src/internal/nav-arrow-button.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import type { ButtonVariant, ButtonSize } from '../button/index.js';
+
+	interface Props extends Omit<HTMLButtonAttributes, 'type' | 'aria-label'> {
+		direction: 'prev' | 'next';
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+		label: string;
+		children?: Snippet;
+	}
+
+	let { direction, variant = 'nav', size = 'icon', label, children, ...rest }: Props = $props();
+
+	const glyph = $derived(direction === 'prev' ? '\u2039' : '\u203A');
+</script>
+
+<Button {variant} {size} type="button" aria-label={label} {...rest}>
+	<span data-part="nav-arrow-icon" data-direction={direction}>
+		{#if children}
+			{@render children()}
+		{:else}
+			{glyph}
+		{/if}
+	</span>
+</Button>
+
+<style>
+	[data-part='nav-arrow-icon'] {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+	}
+	[data-part='nav-arrow-icon'][data-direction='prev'] {
+		transform: translateX(-0.5px);
+	}
+	[data-part='nav-arrow-icon'][data-direction='next'] {
+		transform: translateX(0.5px);
+	}
+</style>

package/src/internal/picker-popover-content.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { createAnchoredPopover, createDismiss, type Placement } from '@dryui/primitives';
+	import type { PickerPopoverController } from './date-family-controller.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		controller: PickerPopoverController;
+		dataAttribute: 'data-dp-content' | 'data-drp-content';
+		placement?: Placement;
+		offset?: number;
+		contentClass?: HTMLAttributes<HTMLDivElement>['class'];
+		contentStyle?: HTMLAttributes<HTMLDivElement>['style'];
+		children: Snippet;
+	}
+
+	let {
+		controller,
+		dataAttribute,
+		placement = 'bottom-start',
+		offset = 8,
+		contentClass,
+		contentStyle,
+		children,
+		...rest
+	}: Props = $props();
+
+	let el = $state<HTMLDivElement>();
+
+	const markerAttrs = $derived.by<Record<string, string>>(() => ({
+		'data-picker-popover-content': '',
+		[dataAttribute]: ''
+	}));
+
+	const popover = createAnchoredPopover({
+		triggerEl: () => controller.triggerEl,
+		contentEl: () => el ?? null,
+		open: () => controller.open,
+		placement: () => placement,
+		offset: () => offset
+	});
+
+	createDismiss({
+		enabled: () => controller.open,
+		onDismiss: () => controller.close(),
+		contentEl: () => el ?? null,
+		triggerEl: () => controller.triggerEl,
+		preventDefaultOnEscape: true,
+		returnFocusTo: () => controller.triggerEl
+	});
+</script>
+
+<div
+	bind:this={el}
+	use:popover.applyPosition={contentStyle}
+	popover="manual"
+	role="dialog"
+	id={controller.contentId}
+	aria-labelledby={controller.triggerId}
+	data-state={controller.open ? 'open' : 'closed'}
+	class={contentClass}
+	{...markerAttrs}
+	ontoggle={(e) => {
+		const newState = (e as ToggleEvent).newState === 'open';
+
+		if (newState && !controller.open) {
+			controller.show();
+		} else if (!newState && controller.open) {
+			controller.close();
+		}
+	}}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	[data-picker-popover-content] {
+		inset: unset;
+		margin: 0;
+		display: inline-grid;
+		padding: var(--dry-space-3);
+		border: 1px solid var(--dry-color-stroke-weak);
+		border-radius: var(--dry-radius-lg);
+		background: var(--dry-color-bg-overlay);
+		box-shadow: var(--dry-shadow-lg);
+		color: var(--dry-color-text-strong);
+		font-family: var(--dry-font-sans);
+		transition:
+			opacity var(--dry-duration-fast) var(--dry-ease-emphasized),
+			transform var(--dry-duration-fast) var(--dry-ease-emphasized);
+	}
+
+	[data-picker-popover-content]:not(:popover-open) {
+		display: none;
+	}
+
+	[data-picker-popover-content]:popover-open {
+		display: inline-grid;
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+
+	@starting-style {
+		[data-picker-popover-content]:popover-open {
+			opacity: 0;
+			transform: translateY(calc(var(--dry-motion-distance-xs) * -1))
+				scale(var(--dry-motion-scale-enter));
+		}
+	}
+</style>

package/src/kbd/index.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+export interface KbdProps extends HTMLAttributes<HTMLElement> {
+	keys?: string[];
+	children?: Snippet;
+}
+
+export { default as Kbd } from './kbd.svelte';

package/src/kbd/kbd.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Kbd',
+	description: 'Keyboard shortcut display element',
+	category: 'display',
+	tags: ['keyboard', 'shortcut', 'key', 'kbd']
+};

package/src/kbd/kbd.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		keys?: string[];
+		children?: Snippet;
+	}
+
+	let { class: className, keys, children, ...rest }: Props = $props();
+</script>
+
+<kbd class={['root', className]} {...rest}>
+	{#if keys}
+		{#each keys as key, i (`${i}:${key}`)}
+			<span class="key">{key}</span>{#if i < keys.length - 1}<span
+					class="separator"
+					aria-hidden="true">+</span
+				>{/if}
+		{/each}
+	{:else if children}
+		{@render children()}
+	{/if}
+</kbd>
+
+<style>
+	.root {
+		--dry-kbd-bg: var(--dry-color-bg-overlay);
+		--dry-kbd-border: var(--dry-color-stroke-weak);
+		--dry-kbd-radius: var(--dry-radius-md);
+		--dry-kbd-font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+
+		display: inline-grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: 0.35em;
+		padding: var(--dry-space-1) var(--dry-space-2);
+		border: 1px solid var(--dry-kbd-border);
+		border-bottom-width: 2px;
+		border-radius: var(--dry-kbd-radius);
+		background: var(--dry-kbd-bg);
+		color: var(--dry-color-text-strong);
+		font-family: var(--dry-font-mono);
+		font-size: var(--dry-kbd-font-size);
+		font-weight: 600;
+		line-height: 1;
+		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dry-color-text-strong) 10%, transparent);
+		user-select: none;
+		white-space: nowrap;
+	}
+
+	.separator {
+		color: var(--dry-color-text-weak);
+	}
+</style>

package/src/label/index.ts

@@ -0,0 +1,7 @@
+import type { LabelProps as PrimitiveLabelProps } from '@dryui/primitives';
+
+export interface LabelProps extends PrimitiveLabelProps {
+	size?: 'sm' | 'md' | 'lg';
+}
+
+export { default as Label } from './label.svelte';

package/src/label/label.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Label',
+	description: 'Form label with size variants',
+	category: 'form',
+	tags: ['form', 'label', 'text', 'accessibility']
+};