@dryui/ui 1.7.4 → 1.9.0

package/dist/logo-mark/logo-mark.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'LogoMark',
+    description: 'Brand mark, status indicator, or category badge with image or fallback text',
+    category: 'display',
+    tags: ['logo', 'mark', 'brand', 'indicator', 'badge', 'icon']
+};

package/dist/map/map.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/map/map.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Map',
+    description: 'Interactive map container with markers, popups, layers, and controls',
+    category: 'display',
+    tags: ['map', 'geo', 'marker', 'popup', 'layer', 'geojson']
+};

package/dist/markdown-renderer/markdown-renderer.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/markdown-renderer/markdown-renderer.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'MarkdownRenderer',
+    description: 'Renders markdown text as styled HTML',
+    category: 'display',
+    tags: ['markdown', 'text', 'render', 'prose', 'content']
+};

package/dist/marquee/marquee.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/marquee/marquee.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Marquee',
+    description: 'Scrolling text/content ticker with CSS animations',
+    category: 'display',
+    tags: ['scroll', 'ticker', 'animation', 'text']
+};

package/dist/mask-reveal/mask-reveal.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/mask-reveal/mask-reveal.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'MaskReveal',
+    description: 'Intersection-observer mask transition with circle, diamond, or wipe shapes',
+    category: 'visual',
+    tags: ['mask', 'reveal', 'transition', 'intersection-observer', 'animation', 'clip-path']
+};

package/dist/mega-menu/mega-menu.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/mega-menu/mega-menu.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'MegaMenu',
+    description: 'Horizontal navigation with large dropdown panels and columns',
+    category: 'navigation',
+    tags: ['menu', 'mega-menu', 'navigation', 'dropdown', 'panel', 'flyout']
+};

package/dist/menubar/menubar-content.svelte

@@ -115,6 +115,7 @@
 </div>
 
 <style>
+	/* outer: var(--dry-radius-popover); children inside the padded region use var(--dry-radius-nested-popover). */
 	[data-menubar-content] {
 		/* Reset UA popover defaults */
 		inset: unset;
@@ -123,7 +124,7 @@
 		background: var(--dry-color-bg-overlay);
 		color: var(--dry-color-text-strong);
 		border: 1px solid var(--dry-color-stroke-weak);
-		border-radius: var(--dry-radius-lg);
+		border-radius: var(--dry-radius-popover);
 		box-shadow: var(--dry-shadow-overlay);
 		padding: var(--dry-space-1);
 

package/dist/menubar/menubar-item.svelte

@@ -59,10 +59,7 @@
 		align-items: center;
 		gap: var(--dry-space-2);
 		padding: var(--dry-menu-item-padding, var(--dry-space-2_5) var(--dry-space-2));
-		border-radius: var(
-			--dry-menu-item-radius,
-			min(var(--dry-control-radius, var(--dry-radius-sm)), var(--dry-space-4))
-		);
+		border-radius: var(--dry-menu-item-radius, var(--dry-radius-nested-popover));
 		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 		cursor: pointer;
 		user-select: none;

package/dist/menubar/menubar.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/menubar/menubar.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Menubar',
+    description: 'Horizontal menu bar with dropdown menus',
+    category: 'navigation',
+    tags: ['menu', 'menubar', 'dropdown', 'navigation']
+};

package/dist/motion/enter.d.ts

@@ -0,0 +1,10 @@
+import type { TransitionConfig } from 'svelte/transition';
+export interface EnterOptions {
+    index?: number;
+    delay?: number;
+    duration?: number;
+    translate?: number;
+    blur?: number;
+    easing?: (t: number) => number;
+}
+export declare function enter(node: Element, opts?: EnterOptions): TransitionConfig;

package/dist/motion/enter.js

@@ -0,0 +1,36 @@
+import { cubicOut } from 'svelte/easing';
+function resolveMs(value, fallback) {
+    if (!value)
+        return fallback;
+    const trimmed = value.trim();
+    if (trimmed.endsWith('ms'))
+        return parseFloat(trimmed);
+    if (trimmed.endsWith('s'))
+        return parseFloat(trimmed) * 1000;
+    return parseFloat(trimmed) || fallback;
+}
+export function enter(node, opts = {}) {
+    if (typeof window === 'undefined') {
+        return { duration: 0, css: () => '' };
+    }
+    const styles = getComputedStyle(node);
+    const duration = opts.duration ?? resolveMs(styles.getPropertyValue('--dry-enter-duration'), 800);
+    const stagger = resolveMs(styles.getPropertyValue('--dry-enter-stagger-section'), 100);
+    const index = opts.index ?? 0;
+    const max = parseFloat(styles.getPropertyValue('--dry-enter-stagger-max') || '16') || 16;
+    const delay = opts.delay ?? Math.min(index, max) * stagger;
+    const translate = opts.translate ?? (parseFloat(styles.getPropertyValue('--dry-enter-translate') || '8') || 8);
+    const blur = opts.blur ?? (parseFloat(styles.getPropertyValue('--dry-enter-blur') || '5') || 5);
+    const easing = opts.easing ?? cubicOut;
+    return {
+        duration,
+        delay,
+        easing,
+        css: (t) => {
+            const eased = t;
+            const y = (1 - eased) * translate;
+            const b = (1 - eased) * blur;
+            return `transform: translateY(${y}px); filter: blur(${b}px); opacity: ${eased};`;
+        }
+    };
+}

package/dist/motion/enter.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		index?: number;
+		duration?: string;
+		as?: string;
+		children?: Snippet;
+	}
+
+	let { index = 0, duration, as = 'div', children }: Props = $props();
+
+	function applyStyles(node: HTMLElement) {
+		$effect(() => {
+			node.style.setProperty('--dry-enter-index', String(index));
+			if (duration) {
+				node.style.setProperty('--dry-enter-duration', duration);
+			} else {
+				node.style.removeProperty('--dry-enter-duration');
+			}
+		});
+	}
+</script>
+
+<!-- dryui-allow svelte-element -->
+<svelte:element this={as} class="dry-enter" {@attach applyStyles}>
+	{@render children?.()}
+</svelte:element>

package/dist/motion/enter.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    index?: number;
+    duration?: string;
+    as?: string;
+    children?: Snippet;
+}
+declare const Enter: import("svelte").Component<Props, {}, "">;
+type Enter = ReturnType<typeof Enter>;
+export default Enter;

package/dist/motion/exit.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { leave } from './leave.js';
+
+	interface Props {
+		children?: Snippet;
+	}
+
+	let { children }: Props = $props();
+</script>
+
+<div out:leave>
+	{@render children?.()}
+</div>
+
+<style>
+	div {
+		display: contents;
+	}
+</style>

package/dist/motion/exit.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+}
+declare const Exit: import("svelte").Component<Props, {}, "">;
+type Exit = ReturnType<typeof Exit>;
+export default Exit;

package/dist/motion/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Enter } from './enter.svelte';
+export { default as Exit } from './exit.svelte';
+export { default as Stagger } from './stagger.svelte';
+export { enter } from './enter.js';
+export { leave } from './leave.js';
+export type { EnterOptions } from './enter.js';
+export type { LeaveOptions } from './leave.js';

package/dist/motion/index.js

@@ -0,0 +1,5 @@
+export { default as Enter } from './enter.svelte';
+export { default as Exit } from './exit.svelte';
+export { default as Stagger } from './stagger.svelte';
+export { enter } from './enter.js';
+export { leave } from './leave.js';

package/dist/motion/leave.d.ts

@@ -0,0 +1,9 @@
+import type { TransitionConfig } from 'svelte/transition';
+export interface LeaveOptions {
+    delay?: number;
+    duration?: number;
+    translate?: number;
+    blur?: number;
+    easing?: (t: number) => number;
+}
+export declare function leave(node: Element, opts?: LeaveOptions): TransitionConfig;

package/dist/motion/leave.js

@@ -0,0 +1,32 @@
+import { cubicOut } from 'svelte/easing';
+function resolveMs(value, fallback) {
+    if (!value)
+        return fallback;
+    const trimmed = value.trim();
+    if (trimmed.endsWith('ms'))
+        return parseFloat(trimmed);
+    if (trimmed.endsWith('s'))
+        return parseFloat(trimmed) * 1000;
+    return parseFloat(trimmed) || fallback;
+}
+export function leave(node, opts = {}) {
+    if (typeof window === 'undefined') {
+        return { duration: 0, css: () => '' };
+    }
+    const styles = getComputedStyle(node);
+    const duration = opts.duration ?? resolveMs(styles.getPropertyValue('--dry-exit-duration'), 360);
+    const translate = opts.translate ?? (parseFloat(styles.getPropertyValue('--dry-exit-translate') || '12') || 12);
+    const blur = opts.blur ?? (parseFloat(styles.getPropertyValue('--dry-exit-blur') || '4') || 4);
+    const easing = opts.easing ?? cubicOut;
+    return {
+        duration,
+        delay: opts.delay ?? 0,
+        easing,
+        css: (t) => {
+            const eased = t;
+            const y = (1 - eased) * translate;
+            const b = (1 - eased) * blur;
+            return `transform: translateY(${y}px); filter: blur(${b}px); opacity: ${eased};`;
+        }
+    };
+}

package/dist/motion/motion.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/motion/motion.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Motion',
+    description: 'Motion primitives module exported from @dryui/ui/motion: Enter/Exit/Stagger component wrappers plus `enter` / `leave` Svelte transition functions driven by --dry-enter-* and --dry-exit-* tokens.',
+    category: 'display',
+    tags: ['motion', 'animation', 'enter', 'exit', 'stagger', 'polish']
+};

package/dist/motion/stagger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		step?: 'section' | 'word' | 'letter' | number;
+		as?: string;
+		children?: Snippet;
+	}
+
+	let { step = 'section', as = 'div', children }: Props = $props();
+
+	const stepValue = $derived.by(() => {
+		if (typeof step === 'number') return `${step}ms`;
+		if (step === 'letter') return 'var(--dry-enter-stagger-letter)';
+		if (step === 'word') return 'var(--dry-enter-stagger-word)';
+		return 'var(--dry-enter-stagger-section)';
+	});
+
+	function applyStyles(node: HTMLElement) {
+		$effect(() => {
+			node.style.setProperty('--dry-stagger-step', stepValue);
+		});
+	}
+</script>
+
+<!-- dryui-allow svelte-element -->
+<svelte:element this={as} data-dry-stagger {@attach applyStyles}>
+	{@render children?.()}
+</svelte:element>

package/dist/motion/stagger.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    step?: 'section' | 'word' | 'letter' | number;
+    as?: string;
+    children?: Snippet;
+}
+declare const Stagger: import("svelte").Component<Props, {}, "">;
+type Stagger = ReturnType<typeof Stagger>;
+export default Stagger;

package/dist/multi-select-combobox/multi-select-combobox.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/multi-select-combobox/multi-select-combobox.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'MultiSelectCombobox',
+    description: 'Searchable multi-select combobox with removable selected tokens',
+    category: 'form',
+    tags: ['form', 'multiselect', 'combobox', 'autocomplete', 'tokens', 'chips']
+};

package/dist/navigation-menu/navigation-menu.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/navigation-menu/navigation-menu.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'NavigationMenu',
+    description: 'Site-level navigation with flyout content panels',
+    category: 'navigation',
+    tags: ['navigation', 'menu', 'flyout', 'mega-menu']
+};

package/dist/noise/noise.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/noise/noise.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Noise',
+    description: 'Texture overlay that adds grain and atmosphere to surfaces without external assets',
+    category: 'layout',
+    tags: ['texture', 'grain', 'surface', 'overlay', 'shader-like']
+};

package/dist/notification-center/notification-center.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/notification-center/notification-center.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'NotificationCenter',
+    description: 'Notification panel with trigger, groups, and items',
+    category: 'overlay',
+    tags: ['notification', 'bell', 'alerts', 'inbox', 'popover', 'unread', 'feedback', 'status']
+};

package/dist/number-input/number-input.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/number-input/number-input.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'NumberInput',
+    description: 'Numeric input with increment/decrement controls',
+    category: 'input',
+    tags: ['form', 'number', 'input', 'counter']
+};

package/dist/numeric/index.d.ts

@@ -0,0 +1 @@
+export { default as Numeric } from './numeric.svelte';

package/dist/numeric/index.js

@@ -0,0 +1 @@
+export { default as Numeric } from './numeric.svelte';

package/dist/numeric/numeric.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/numeric/numeric.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Numeric',
+    description: 'Tabular-nums numeric display with optional stable min-width and alignment',
+    category: 'display',
+    tags: ['numeric', 'tabular', 'number', 'stable', 'align']
+};

package/dist/numeric/numeric.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	interface Props {
+		value: number | string;
+		stable?: boolean;
+		align?: 'start' | 'center' | 'end';
+		minDigits?: number;
+	}
+
+	let { value, stable = false, align = 'end', minDigits }: Props = $props();
+
+	const minWidth = $derived.by(() => {
+		if (!stable) return undefined;
+		const digits = minDigits ?? String(value).replace(/[^\d]/g, '').length;
+		return `${digits * 0.6}em`;
+	});
+
+	function applyStyles(node: HTMLElement) {
+		$effect(() => {
+			if (minWidth) {
+				node.style.setProperty('min-width', minWidth);
+			} else {
+				node.style.removeProperty('min-width');
+			}
+		});
+	}
+</script>
+
+<span class="dry-numeric dry-tabular-nums" data-align={align} {@attach applyStyles}>
+	{value}
+</span>
+
+<style>
+	.dry-numeric {
+		display: inline-block;
+		font-variant-numeric: var(--dry-numeric-variant);
+	}
+
+	[data-align='end'] {
+		text-align: end;
+	}
+
+	[data-align='center'] {
+		text-align: center;
+	}
+
+	[data-align='start'] {
+		text-align: start;
+	}
+</style>

package/dist/numeric/numeric.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    value: number | string;
+    stable?: boolean;
+    align?: 'start' | 'center' | 'end';
+    minDigits?: number;
+}
+declare const Numeric: import("svelte").Component<Props, {}, "">;
+type Numeric = ReturnType<typeof Numeric>;
+export default Numeric;

package/dist/option-picker/option-picker.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/option-picker/option-picker.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'OptionPicker',
+    description: 'Selectable option tiles with preview, label, and description for presets, fonts, shapes, and other visual choices',
+    category: 'input',
+    tags: ['picker', 'selection', 'options', 'tiles', 'preset', 'preview']
+};

package/dist/pagination/pagination.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/pagination/pagination.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Pagination',
+    description: 'Page navigation with previous/next and page links',
+    category: 'navigation',
+    tags: ['nav', 'pages', 'paging', 'navigation']
+};

package/dist/phone-input/phone-input.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/phone-input/phone-input.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'PhoneInput',
+    description: 'Phone number input with country code selector',
+    category: 'input',
+    tags: ['form', 'phone', 'telephone', 'input', 'country-code', 'international']
+};

package/dist/pin-input/pin-input.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/pin-input/pin-input.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'PinInput',
+    description: 'Segmented input for PIN/OTP codes with single hidden input architecture',
+    category: 'input',
+    tags: ['form', 'pin', 'otp', 'code', 'verification']
+};