@dryui/ui 2.0.2 → 4.0.0

package/src/tags-input/tags-input-root.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setTagsInputCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		value?: string[];
+		maxTags?: number;
+		allowDuplicates?: boolean;
+		disabled?: boolean;
+		size?: 'sm' | 'md' | 'lg';
+		onValueChange?: (value: string[]) => void;
+		children: Snippet;
+	}
+
+	let {
+		value = $bindable([]),
+		maxTags = 0,
+		allowDuplicates = false,
+		disabled = false,
+		size = 'md',
+		onValueChange,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	const canAddMore = $derived(maxTags === 0 || value.length < maxTags);
+
+	setTagsInputCtx({
+		get value() {
+			return value;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get maxTags() {
+			return maxTags;
+		},
+		get allowDuplicates() {
+			return allowDuplicates;
+		},
+		get canAddMore() {
+			return canAddMore;
+		},
+		addTag(tag: string): boolean {
+			const trimmed = tag.trim();
+			if (!trimmed) return false;
+			if (!canAddMore) return false;
+			if (!allowDuplicates && value.includes(trimmed)) return false;
+			value = [...value, trimmed];
+			onValueChange?.(value);
+			return true;
+		},
+		removeTag(index: number): void {
+			value = value.filter((_, i) => i !== index);
+			onValueChange?.(value);
+		},
+		removeLastTag(): void {
+			if (value.length === 0) return;
+			value = value.slice(0, -1);
+			onValueChange?.(value);
+		}
+	});
+</script>
+
+<div data-part="wrapper" class={className} {...rest}>
+	<div role="group" data-part="root" data-size={size} data-disabled={disabled || undefined}>
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	[data-part='wrapper'] {
+		container-type: inline-size;
+		display: grid;
+	}
+
+	[data-part='root'] {
+		display: block;
+		padding: var(--dry-space-2);
+		border: 1px solid var(--dry-color-stroke-strong);
+		border-radius: var(--dry-radius-md);
+		background: var(--dry-color-bg-raised);
+		min-height: 44px;
+		box-sizing: border-box;
+		transition:
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
+			box-shadow var(--dry-duration-fast) var(--dry-ease-default);
+		cursor: text;
+
+		&:hover:not([data-disabled]) {
+			border-color: var(--dry-color-stroke-strong);
+		}
+
+		&:focus-within {
+			outline: var(--dry-focus-ring);
+			outline-offset: -1px;
+			border-color: var(--dry-color-stroke-focus);
+			box-shadow: 0 0 0 1px var(--dry-color-stroke-focus);
+		}
+
+		&[data-disabled] {
+			background: var(--dry-color-bg-sunken);
+			border-color: var(--dry-color-stroke-disabled);
+			color: var(--dry-color-text-disabled);
+			cursor: not-allowed;
+			pointer-events: none;
+		}
+	}
+
+	/* Size variants */
+	[data-size='sm'] {
+		padding: var(--dry-space-1) var(--dry-space-1_5);
+		min-height: 32px;
+		--dry-tags-input-gap: var(--dry-space-1);
+		--dry-tags-input-tag-padding-x: var(--dry-space-1_5);
+		--dry-tags-input-tag-font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+		--dry-tags-input-font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+	}
+
+	[data-size='md'] {
+		padding: var(--dry-space-2);
+		min-height: 44px;
+		--dry-tags-input-gap: var(--dry-space-1_5);
+	}
+
+	[data-size='lg'] {
+		padding: var(--dry-space-2_5);
+		min-height: 52px;
+		--dry-tags-input-gap: var(--dry-space-2);
+		--dry-tags-input-tag-padding-x: var(--dry-space-2_5);
+		--dry-tags-input-tag-font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		--dry-tags-input-font-size: var(--dry-type-small-size, var(--dry-text-base-size));
+	}
+</style>

package/src/tags-input/tags-input-tag-delete-button.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import CloseButtonBase from '../internal/close-button-base.svelte';
+	import { getTagsInputCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		index: number;
+		value?: string;
+	}
+
+	let { index, value = '', onclick, ...rest }: Props = $props();
+
+	const ctx = getTagsInputCtx();
+
+	function handleClick(e: MouseEvent & { currentTarget: HTMLButtonElement }) {
+		if (ctx.disabled) return;
+		ctx.removeTag(index);
+		if (onclick) {
+			(onclick as (e: MouseEvent & { currentTarget: HTMLButtonElement }) => void)(e);
+		}
+	}
+</script>
+
+<CloseButtonBase
+	variant="bare"
+	size="sm"
+	aria-label="Remove tag: {value}"
+	disabled={ctx.disabled}
+	{...rest}
+	onclick={handleClick}
+/>

package/src/tags-input/tags-input-tag.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getTagsInputCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		index: number;
+		value: string;
+		children?: Snippet;
+	}
+
+	let { index, value, class: className, children, ...rest }: Props = $props();
+
+	const ctx = getTagsInputCtx();
+</script>
+
+<span
+	data-part="tag"
+	data-disabled={ctx.disabled || undefined}
+	data-index={index}
+	class={className}
+	{...rest}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		{value}
+	{/if}
+</span>
+
+<style>
+	[data-part='tag'] {
+		display: inline-grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		vertical-align: middle;
+		align-items: center;
+		padding-block: var(--dry-space-1);
+		padding-inline-start: var(--dry-tags-input-tag-padding-x, var(--dry-space-2));
+		padding-inline-end: 0;
+		margin-inline-end: var(--dry-tags-input-gap, var(--dry-space-1_5));
+		margin-block: calc(var(--dry-tags-input-gap, var(--dry-space-1_5)) / 2);
+		background: color-mix(in srgb, var(--dry-color-fill-brand) 15%, transparent);
+		color: var(--dry-color-fill-brand);
+		border-radius: var(--dry-tags-input-tag-radius, var(--dry-radius-md));
+		overflow: hidden;
+		font-size: var(
+			--dry-tags-input-tag-font-size,
+			var(--dry-type-tiny-size, var(--dry-text-xs-size))
+		);
+		font-family: var(--dry-font-sans);
+		font-weight: 500;
+		line-height: 1.5;
+		white-space: nowrap;
+		user-select: none;
+		--dry-btn-radius: 0;
+		--dry-btn-padding-x: var(--dry-tags-input-tag-padding-x, var(--dry-space-2));
+		--dry-btn-padding-y: 0;
+		--dry-btn-font-size: inherit;
+	}
+</style>

package/src/tags-input/tags-input.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'TagsInput',
+	description: 'Input for managing a list of tags',
+	category: 'input',
+	tags: ['form', 'tags', 'chips', 'multi', 'input']
+};

package/src/text/index.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+export interface TextProps extends Omit<HTMLAttributes<HTMLElement>, 'class'> {
+	as?: 'p' | 'span' | 'div';
+	color?: 'default' | 'muted' | 'secondary';
+	size?: 'xs' | 'sm' | 'md' | 'lg';
+	font?: 'sans' | 'mono';
+	weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+	variant?: 'default' | 'label';
+	/**
+	 * Caps the rendered inline size in ch units so body copy wraps on ergonomic
+	 * measure. `false` (default) keeps the existing behaviour of no cap.
+	 * `narrow` ≈ 48ch, `default` ≈ 65ch, `wide` ≈ 80ch.
+	 */
+	maxMeasure?: 'narrow' | 'default' | 'wide' | false;
+	children?: Snippet;
+}
+
+export { default as Text } from './text.svelte';

package/src/text/text.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Text',
+	description: 'Standalone body copy export for starter-kit typography',
+	category: 'display',
+	tags: ['text', 'copy', 'paragraph', 'typography']
+};

package/src/text/text.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { variantAttrs } from '@dryui/primitives';
+
+	interface Props extends Omit<HTMLAttributes<HTMLElement>, 'class'> {
+		as?: 'p' | 'span' | 'div';
+		color?: 'default' | 'muted' | 'secondary';
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		font?: 'sans' | 'mono';
+		weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+		variant?: 'default' | 'label';
+		maxMeasure?: 'narrow' | 'default' | 'wide' | false;
+		children?: Snippet;
+	}
+
+	let {
+		as = 'p',
+		color = 'default',
+		size = 'md',
+		font = 'sans',
+		weight,
+		variant = 'default',
+		maxMeasure = false,
+		children,
+		...rest
+	}: Props = $props();
+
+	let measure: 'narrow' | 'default' | 'wide' | undefined = $derived(
+		maxMeasure === false ? undefined : maxMeasure
+	);
+</script>
+
+{#if as === 'span'}
+	<span
+		{...variantAttrs({ color, size, font, weight: weight || undefined, variant, measure })}
+		{...rest}>{@render children?.()}</span
+	>
+{:else if as === 'div'}
+	<div
+		{...variantAttrs({ color, size, font, weight: weight || undefined, variant, measure })}
+		{...rest}
+	>
+		{@render children?.()}
+	</div>
+{:else}
+	<p
+		{...variantAttrs({ color, size, font, weight: weight || undefined, variant, measure })}
+		{...rest}
+	>
+		{@render children?.()}
+	</p>
+{/if}
+
+<style>
+	p,
+	span,
+	div {
+		margin: 0;
+		color: var(--dry-typography-text-color, inherit);
+		font-family: var(--dry-font-sans);
+		line-height: 1.7;
+		text-wrap: pretty;
+	}
+
+	[data-color='muted'] {
+		--dry-typography-text-color: var(--dry-color-text-weak);
+	}
+
+	[data-color='secondary'] {
+		--dry-typography-text-color: var(--dry-color-text-weak);
+	}
+
+	[data-size='xs'] {
+		font-size: var(--dry-type-xs-size);
+	}
+
+	[data-size='sm'] {
+		font-size: var(--dry-type-ui-control-size, var(--dry-type-tiny-size, var(--dry-text-sm-size)));
+		line-height: var(
+			--dry-type-ui-control-leading,
+			var(--dry-type-tiny-leading, var(--dry-text-sm-leading))
+		);
+	}
+
+	[data-size='md'] {
+		font-size: var(--dry-type-ui-body-size, var(--dry-type-small-size, var(--dry-text-base-size)));
+		line-height: var(
+			--dry-type-ui-body-leading,
+			var(--dry-type-small-leading, var(--dry-text-base-leading))
+		);
+	}
+
+	[data-size='lg'] {
+		font-size: var(
+			--dry-type-ui-title-size,
+			var(--dry-type-heading-4-size, var(--dry-text-lg-size))
+		);
+		line-height: var(
+			--dry-type-ui-title-leading,
+			var(--dry-type-heading-4-leading, var(--dry-text-lg-leading))
+		);
+	}
+
+	span {
+		display: inline;
+	}
+
+	div {
+		display: block;
+	}
+
+	[data-font='mono'] {
+		font-family: var(--dry-font-mono);
+	}
+
+	[data-weight='normal'] {
+		font-weight: 400;
+	}
+	[data-weight='medium'] {
+		font-weight: 500;
+	}
+	[data-weight='semibold'] {
+		font-weight: 600;
+	}
+	[data-weight='bold'] {
+		font-weight: 700;
+	}
+
+	[data-variant='label'] {
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		font-weight: 600;
+	}
+
+	/* ── Measure (max-inline-size) ─────────────────────────────────────────────
+	   Body copy gets wider presets than Heading so paragraphs read well
+	   without feeling cramped. */
+	[data-measure='narrow'] {
+		max-inline-size: 48ch;
+	}
+
+	[data-measure='default'] {
+		max-inline-size: 65ch;
+	}
+
+	[data-measure='wide'] {
+		max-inline-size: 80ch;
+	}
+</style>

package/src/textarea/index.ts

@@ -0,0 +1,7 @@
+import type { TextareaProps as PrimitiveTextareaProps } from '@dryui/primitives';
+
+export interface TextareaProps extends PrimitiveTextareaProps {
+	size?: 'sm' | 'md' | 'lg';
+}
+
+export { default as Textarea } from './textarea.svelte';

package/src/textarea/textarea.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Textarea',
+	description: 'Multi-line text input',
+	category: 'input',
+	tags: ['form', 'text', 'multiline', 'textarea']
+};

package/src/textarea/textarea.svelte

@@ -0,0 +1,210 @@
+<script lang="ts">
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+	import { getFormControlCtx } from '@dryui/primitives';
+	import type { FormControlWrapperAttrs } from '../internal/form-control-wrapper-attrs.js';
+
+	interface Props extends FormControlWrapperAttrs<HTMLSpanElement> {
+		value?: string;
+		size?: 'sm' | 'md' | 'lg';
+		disabled?: boolean;
+		name?: HTMLTextareaAttributes['name'];
+		placeholder?: HTMLTextareaAttributes['placeholder'];
+		readonly?: HTMLTextareaAttributes['readonly'];
+		required?: HTMLTextareaAttributes['required'];
+		minlength?: HTMLTextareaAttributes['minlength'];
+		maxlength?: HTMLTextareaAttributes['maxlength'];
+		rows?: HTMLTextareaAttributes['rows'];
+		cols?: HTMLTextareaAttributes['cols'];
+		wrap?: HTMLTextareaAttributes['wrap'];
+		autocomplete?: HTMLTextareaAttributes['autocomplete'];
+		autofocus?: HTMLTextareaAttributes['autofocus'];
+		oninput?: HTMLTextareaAttributes['oninput'];
+		onchange?: HTMLTextareaAttributes['onchange'];
+		onfocus?: HTMLTextareaAttributes['onfocus'];
+		onblur?: HTMLTextareaAttributes['onblur'];
+		onkeydown?: HTMLTextareaAttributes['onkeydown'];
+		onkeyup?: HTMLTextareaAttributes['onkeyup'];
+		'aria-invalid'?: HTMLTextareaAttributes['aria-invalid'];
+	}
+
+	let {
+		value = $bindable(''),
+		size = 'md',
+		class: className,
+		style,
+		disabled = false,
+		id,
+		name,
+		placeholder,
+		readonly,
+		required,
+		minlength,
+		maxlength,
+		rows,
+		cols,
+		wrap,
+		autocomplete,
+		autofocus,
+		oninput,
+		onchange,
+		onfocus,
+		onblur,
+		onkeydown,
+		onkeyup,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby,
+		'aria-invalid': ariaInvalid,
+		'aria-errormessage': ariaErrormessage,
+		...rest
+	}: Props = $props();
+
+	const ctx = getFormControlCtx();
+	const isDisabled = $derived(disabled || ctx?.disabled || false);
+
+	function autofocusAction(
+		node: HTMLTextAreaElement,
+		enabled: HTMLTextareaAttributes['autofocus']
+	) {
+		if (enabled) node.focus();
+		return {
+			update(nextEnabled: HTMLTextareaAttributes['autofocus']) {
+				if (nextEnabled) node.focus();
+			}
+		};
+	}
+</script>
+
+<span class="wrapper {className ?? ''}" {style}>
+	<textarea
+		{...rest}
+		use:autofocusAction={autofocus}
+		bind:value
+		id={id ?? ctx?.id}
+		disabled={isDisabled}
+		required={required ?? ctx?.required ?? undefined}
+		aria-label={ariaLabel}
+		aria-labelledby={ariaLabelledby}
+		aria-describedby={ariaDescribedby ?? ctx?.describedBy}
+		aria-invalid={ariaInvalid ?? ctx?.hasError ?? undefined}
+		aria-errormessage={ariaErrormessage ?? ctx?.errorMessageId}
+		data-disabled={isDisabled || undefined}
+		data-size={size}
+		{name}
+		{placeholder}
+		{readonly}
+		{minlength}
+		{maxlength}
+		{rows}
+		{cols}
+		{wrap}
+		{autocomplete}
+		{oninput}
+		{onchange}
+		{onfocus}
+		{onblur}
+		{onkeydown}
+		{onkeyup}
+	></textarea>
+</span>
+
+<style>
+	.wrapper {
+		container-type: inline-size;
+		display: grid;
+	}
+
+	textarea {
+		--dry-input-bg: var(--dry-textarea-bg, var(--dry-form-control-bg));
+		--dry-input-border: var(--dry-textarea-border, var(--dry-form-control-border));
+		--dry-input-padding-x: var(--dry-textarea-padding-x, var(--dry-form-control-padding-inline));
+		--dry-input-padding-y: var(--dry-textarea-padding-y, var(--dry-form-control-padding-block));
+		--dry-input-font-size: var(--dry-textarea-font-size, var(--dry-form-control-font-size));
+		padding: var(--dry-input-padding-y) var(--dry-input-padding-x);
+		font-size: var(--dry-input-font-size);
+		line-height: var(--dry-type-small-leading);
+		font-family: var(--dry-font-sans);
+		color: var(--dry-textarea-color, var(--dry-input-color, var(--dry-form-control-color)));
+		background: var(--dry-input-bg);
+		border: 1px solid var(--dry-input-border);
+		border-radius: var(
+			--dry-textarea-radius,
+			var(--dry-input-radius, var(--dry-form-control-radius))
+		);
+		transition:
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
+			box-shadow var(--dry-duration-fast) var(--dry-ease-default);
+		box-sizing: border-box;
+		appearance: none;
+		resize: vertical;
+		min-height: 160px;
+
+		&::placeholder {
+			color: var(--dry-form-control-color-placeholder);
+		}
+
+		&:hover:not([data-disabled]) {
+			border-color: var(--dry-form-control-border-hover);
+		}
+
+		&:focus-visible {
+			outline: var(--dry-focus-ring);
+			outline-offset: -1px;
+			border-color: var(--dry-color-focus-ring);
+			box-shadow: 0 0 0 1px var(--dry-color-focus-ring);
+		}
+
+		&[data-disabled] {
+			opacity: var(--dry-state-disabled-opacity);
+			cursor: not-allowed;
+		}
+
+		&[aria-invalid='true'],
+		&[data-invalid] {
+			--dry-input-bg: color-mix(
+				in srgb,
+				var(--dry-color-fill-error) 6%,
+				var(--dry-color-bg-raised)
+			);
+			--dry-input-border: var(--dry-color-fill-error);
+		}
+
+		&[aria-invalid='true']:hover:not([data-disabled]),
+		&[data-invalid]:hover:not([data-disabled]) {
+			border-color: var(--dry-color-fill-error-hover);
+		}
+
+		&[aria-invalid='true']:focus-visible,
+		&[data-invalid]:focus-visible {
+			outline-color: var(--dry-color-fill-error);
+			border-color: var(--dry-color-fill-error);
+		}
+	}
+
+	textarea[data-size='sm'] {
+		--dry-input-padding-x: var(--dry-space-2);
+		--dry-input-padding-y: var(--dry-space-1);
+		--dry-input-font-size: var(--dry-type-tiny-size);
+		line-height: var(--dry-type-tiny-leading);
+	}
+
+	textarea[data-size='md'] {
+		--dry-input-padding-x: var(--dry-space-3);
+		--dry-input-padding-y: var(--dry-space-2);
+		--dry-input-font-size: var(--dry-type-small-size);
+		line-height: var(--dry-type-small-leading);
+	}
+
+	textarea[data-size='lg'] {
+		--dry-input-padding-x: var(--dry-space-4);
+		--dry-input-padding-y: var(--dry-space-2_5);
+		--dry-input-font-size: var(--dry-type-heading-4-size);
+		line-height: var(--dry-type-heading-4-leading);
+	}
+
+	@container (max-width: 200px) {
+		textarea {
+			--dry-input-padding-x: var(--dry-space-2);
+		}
+	}
+</style>

package/src/theme-toggle/index.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue, HTMLButtonAttributes } from 'svelte/elements';
+
+export { createThemeController } from './theme-controller.svelte.js';
+export type {
+	ThemeMode,
+	ThemeController,
+	ThemeControllerOptions
+} from './theme-controller.svelte.js';
+
+export { themeFlashScript } from './theme-flash.js';
+
+import type { ThemeController, ThemeMode } from './theme-controller.svelte.js';
+
+export interface ThemeToggleProps extends Omit<
+	HTMLButtonAttributes,
+	'onclick' | 'onkeydown' | 'disabled' | 'class'
+> {
+	storageKey?: string;
+	size?: 'sm' | 'md' | 'lg';
+	controller?: ThemeController;
+	'aria-label'?: string;
+	sunIcon?: Snippet;
+	moonIcon?: Snippet;
+	onModeChange?: (mode: ThemeMode) => void;
+	disabled?: boolean;
+	class?: ClassValue;
+}
+
+export { default as ThemeToggle } from './theme-toggle.svelte';