@dryui/ui 3.0.0 → 4.0.1

package/src/pagination/pagination-nav-button.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import NavArrowButton from '../internal/nav-arrow-button.svelte';
+	import { getPaginationCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		direction: 'prev' | 'next';
+		children: Snippet;
+	}
+
+	let { direction, children, ...rest }: Props = $props();
+
+	const ctx = getPaginationCtx();
+
+	const canAdvance = $derived(direction === 'prev' ? ctx.canPrevious : ctx.canNext);
+</script>
+
+<NavArrowButton
+	{direction}
+	variant="pill"
+	size="sm"
+	label={direction === 'prev' ? 'Go to previous page' : 'Go to next page'}
+	disabled={!canAdvance}
+	onclick={() => (direction === 'prev' ? ctx.previous() : ctx.next())}
+	{children}
+	{...rest}
+/>

package/src/pagination/pagination-next-button.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import PaginationNavButton from './pagination-nav-button.svelte';
+
+	interface Props extends HTMLButtonAttributes {
+		children: Snippet;
+	}
+
+	let props: Props = $props();
+</script>
+
+<PaginationNavButton direction="next" {...props} />

package/src/pagination/pagination-previous-button.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import PaginationNavButton from './pagination-nav-button.svelte';
+
+	interface Props extends HTMLButtonAttributes {
+		children: Snippet;
+	}
+
+	let props: Props = $props();
+</script>
+
+<PaginationNavButton direction="prev" {...props} />

package/src/pagination/pagination-root.svelte

@@ -0,0 +1,48 @@
+<!--
+	Pagination intentionally has no `--dry-pagination-*` token surface.
+	The numeric and nav buttons are rendered by the shared Button component, so
+	pagination delegates its visual chrome (bg, border, radius, padding) to the
+	inherited button tokens (`--dry-btn-*`). Override those at the pagination
+	root (or higher) to retheme pagination.
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setPaginationCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		page?: number;
+		totalPages: number;
+		children: Snippet;
+	}
+
+	let { page = $bindable(1), class: className, children, totalPages, ...rest }: Props = $props();
+
+	setPaginationCtx({
+		get page() {
+			return page;
+		},
+		get totalPages() {
+			return totalPages;
+		},
+		get canPrevious() {
+			return page > 1;
+		},
+		get canNext() {
+			return page < totalPages;
+		},
+		goto(p: number) {
+			page = Math.max(1, Math.min(totalPages, p));
+		},
+		previous() {
+			if (page > 1) page--;
+		},
+		next() {
+			if (page < totalPages) page++;
+		}
+	});
+</script>
+
+<nav aria-label="Pagination" class={className} {...rest}>
+	{@render children()}
+</nav>

package/src/pagination/pagination.meta.ts

@@ -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/src/phone-input/index.ts

@@ -0,0 +1,9 @@
+import type { PhoneInputProps as PrimitivePhoneInputProps, CountryInfo } from '@dryui/primitives';
+
+export type { CountryInfo };
+
+export interface PhoneInputProps extends PrimitivePhoneInputProps {
+	size?: 'sm' | 'md' | 'lg';
+}
+
+export { default as PhoneInput } from './phone-input-select.svelte';

package/src/phone-input/phone-input-select.svelte

@@ -0,0 +1,286 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { COUNTRY_DATA, type CountryInfo } from '@dryui/primitives';
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> {
+		value?: string;
+		defaultCountry?: string;
+		disabled?: boolean;
+		name?: string;
+		placeholder?: string;
+		size?: 'sm' | 'md' | 'lg';
+		countries?: CountryInfo[];
+		onchange?: (value: string) => void;
+	}
+
+	let {
+		value = $bindable(''),
+		defaultCountry = 'US',
+		disabled = false,
+		name: inputName,
+		placeholder = 'Phone number',
+		size = 'md',
+		countries: countriesProp,
+		onchange,
+		class: className,
+		...rest
+	}: Props = $props();
+
+	const countries = $derived(countriesProp ?? COUNTRY_DATA);
+	let manualCountryCode = $derived(defaultCountry);
+
+	const orderedCountries = $derived(
+		[...countries].sort((left, right) => right.dialCode.length - left.dialCode.length)
+	);
+	const parsedValue = $derived.by(() => {
+		if (!value) {
+			return { countryCode: manualCountryCode, localNumber: '' };
+		}
+		if (value.startsWith('+')) {
+			const match = orderedCountries.find((country) => value.startsWith(country.dialCode));
+			if (match) {
+				return {
+					countryCode: match.code,
+					localNumber: value.slice(match.dialCode.length).replace(/\D/g, '')
+				};
+			}
+		}
+		return { countryCode: manualCountryCode, localNumber: value.replace(/\D/g, '') };
+	});
+
+	const selectedCountryCode = $derived(parsedValue.countryCode);
+	const localNumber = $derived(parsedValue.localNumber);
+	const selectedCountry = $derived(
+		countries.find((country) => country.code === selectedCountryCode) ?? countries[0]!
+	);
+
+	function updateValue(nextNumber: string, country = selectedCountry) {
+		value = nextNumber ? `${country.dialCode}${nextNumber}` : '';
+		onchange?.(value);
+	}
+
+	function formatNumber(num: string, pattern?: string): string {
+		if (!pattern) return num;
+		const digits = num.replace(/\D/g, '');
+		let result = '';
+		let digitIndex = 0;
+		for (const char of pattern) {
+			if (digitIndex >= digits.length) break;
+			if (char === '#') {
+				result += digits[digitIndex++];
+			} else {
+				result += char;
+			}
+		}
+		return result;
+	}
+
+	function handleInput(e: Event) {
+		const input = e.target as HTMLInputElement;
+		const digits = input.value.replace(/\D/g, '');
+		input.value = formatNumber(digits, selectedCountry.format);
+		updateValue(digits);
+	}
+
+	function handleCountryChange(e: Event) {
+		const nextCode = (e.target as HTMLSelectElement).value;
+		manualCountryCode = nextCode;
+		const country = countries.find((item) => item.code === nextCode);
+		if (!country) return;
+		updateValue(localNumber, country);
+	}
+
+	const displayNumber = $derived(formatNumber(localNumber, selectedCountry.format));
+</script>
+
+<div
+	class={className}
+	data-phone-input
+	data-size={size}
+	data-disabled={disabled || undefined}
+	{...rest}
+>
+	<label data-phone-trigger>
+		<span data-phone-flag>{selectedCountry.flag}</span>
+		<span data-phone-dial-code>{selectedCountry.dialCode}</span>
+		<span data-phone-chevron aria-hidden="true">&#9662;</span>
+		<select
+			data-phone-select
+			aria-label="Country code"
+			value={selectedCountryCode}
+			{disabled}
+			onchange={handleCountryChange}
+		>
+			{#each countries as country (country.code)}
+				<option value={country.code}>
+					{country.name} ({country.dialCode})
+				</option>
+			{/each}
+		</select>
+	</label>
+
+	<input
+		type="tel"
+		value={displayNumber}
+		{placeholder}
+		{disabled}
+		oninput={handleInput}
+		data-phone-number-input
+		aria-label="Phone number"
+	/>
+
+	{#if inputName}
+		<input type="hidden" name={inputName} {value} />
+	{/if}
+</div>
+
+<style>
+	[data-phone-input] {
+		--dry-phone-input-bg: var(--dry-color-bg-raised);
+		--dry-phone-input-border: var(--dry-color-stroke-strong);
+		--dry-phone-input-color: var(--dry-color-text-strong);
+		--dry-phone-input-radius: var(--dry-radius-md);
+
+		container-type: inline-size;
+		display: grid;
+		grid-template-columns: max-content 1fr;
+		align-items: center;
+		border: 1px solid var(--dry-phone-input-border);
+		border-radius: var(--dry-phone-input-radius);
+		background: var(--dry-phone-input-bg);
+		overflow: hidden;
+		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);
+	}
+
+	[data-phone-input]:focus-within {
+		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-phone-input]:hover:not([data-disabled]) {
+		border-color: var(--dry-color-stroke-strong);
+	}
+
+	[data-phone-input][data-disabled] {
+		opacity: var(--dry-state-disabled-opacity);
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	[data-phone-trigger] {
+		position: relative;
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: var(--dry-space-1);
+		min-height: 3rem;
+		padding: 0 var(--dry-space-3);
+		border-right: 1px solid var(--dry-phone-input-border);
+		cursor: pointer;
+		font-size: var(--dry-type-small-size);
+		font-family: var(--dry-font-sans);
+		color: var(--dry-color-text-weak);
+		background: var(--dry-color-fill);
+		white-space: nowrap;
+		box-sizing: border-box;
+	}
+
+	[data-phone-trigger]:focus-within,
+	[data-phone-trigger]:hover {
+		background: var(--dry-color-stroke-weak);
+	}
+
+	[data-phone-select] {
+		position: absolute;
+		inset: 0;
+		opacity: 0;
+		cursor: pointer;
+	}
+
+	[data-phone-chevron] {
+		font-size: var(--dry-type-tiny-size);
+	}
+
+	[data-phone-flag] {
+		font-size: 1.125rem;
+		line-height: 1;
+	}
+
+	[data-phone-number-input] {
+		appearance: none;
+		border: none;
+		margin: 0;
+		padding: 0;
+		background: none;
+		font: inherit;
+		color: inherit;
+		min-height: 3rem;
+		padding: 0 var(--dry-space-3);
+		font-size: var(--dry-type-small-size);
+		line-height: var(--dry-type-small-leading);
+		font-family: var(--dry-font-sans);
+		color: var(--dry-phone-input-color);
+		box-sizing: border-box;
+	}
+
+	[data-phone-number-input]::placeholder {
+		color: var(--dry-color-text-weak);
+	}
+
+	/* Size variants */
+	[data-phone-input][data-size='sm'] [data-phone-trigger] {
+		min-height: 2.5rem;
+		padding: 0 var(--dry-space-2);
+		font-size: var(--dry-type-tiny-size);
+	}
+
+	[data-phone-input][data-size='sm'] [data-phone-number-input] {
+		min-height: 2.5rem;
+		padding: 0 var(--dry-space-2);
+		font-size: var(--dry-type-tiny-size);
+		line-height: var(--dry-type-tiny-leading);
+	}
+
+	[data-phone-input][data-size='md'] [data-phone-trigger] {
+		min-height: 3rem;
+		padding: 0 var(--dry-space-3);
+		font-size: var(--dry-type-small-size);
+	}
+
+	[data-phone-input][data-size='md'] [data-phone-number-input] {
+		min-height: 3rem;
+		padding: 0 var(--dry-space-3);
+		font-size: var(--dry-type-small-size);
+		line-height: var(--dry-type-small-leading);
+	}
+
+	[data-phone-input][data-size='lg'] [data-phone-trigger] {
+		min-height: 3.5rem;
+		padding: 0 var(--dry-space-4);
+		font-size: var(--dry-type-heading-4-size);
+	}
+
+	[data-phone-input][data-size='lg'] [data-phone-number-input] {
+		min-height: 3.5rem;
+		padding: 0 var(--dry-space-4);
+		font-size: var(--dry-type-heading-4-size);
+		line-height: var(--dry-type-heading-4-leading);
+	}
+
+	/* Container query */
+	@container (max-width: 200px) {
+		[data-phone-trigger] {
+			padding-inline: var(--dry-space-1);
+		}
+
+		[data-phone-number-input] {
+			padding-inline: var(--dry-space-2);
+		}
+	}
+</style>

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

@@ -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/src/pin-input/context.svelte.ts

@@ -0,0 +1,18 @@
+import { createContext } from '@dryui/primitives';
+
+export interface PinInputCellState {
+	readonly char: string | null;
+	readonly isActive: boolean;
+	readonly hasFakeCaret: boolean;
+	readonly index: number;
+}
+
+export interface PinInputContext {
+	readonly cells: PinInputCellState[];
+	readonly value: string;
+	readonly disabled: boolean;
+	readonly hasError: boolean;
+	readonly mask: boolean;
+	readonly placeholder: string;
+}
+export const [setPinInputCtx, getPinInputCtx] = createContext<PinInputContext>('pin-input');

package/src/pin-input/index.ts

@@ -0,0 +1,31 @@
+import type {
+	PinInputRootProps as PrimitivePinInputRootProps,
+	PinInputGroupProps,
+	PinInputCellProps,
+	PinInputSeparatorProps,
+	PinInputCellState
+} from '@dryui/primitives';
+
+export type { PinInputGroupProps, PinInputCellProps, PinInputSeparatorProps, PinInputCellState };
+
+export interface PinInputRootProps extends PrimitivePinInputRootProps {
+	size?: 'sm' | 'md' | 'lg';
+	variant?: 'outline' | 'flushed';
+}
+
+import PinInputRoot from './pin-input-root.svelte';
+import PinInputGroup from './pin-input-group.svelte';
+import PinInputCell from './pin-input-cell.svelte';
+import PinInputSeparator from './pin-input-separator.svelte';
+
+export const PinInput: {
+	Root: typeof PinInputRoot;
+	Group: typeof PinInputGroup;
+	Cell: typeof PinInputCell;
+	Separator: typeof PinInputSeparator;
+} = {
+	Root: PinInputRoot,
+	Group: PinInputGroup,
+	Cell: PinInputCell,
+	Separator: PinInputSeparator
+};

package/src/pin-input/pin-input-cell.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getPinInputCtx } from './context.svelte.js';
+	import type { PinInputCellState } from './context.svelte.js';
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+		cell: PinInputCellState;
+		children?: Snippet<[{ char: string | null; isActive: boolean; hasFakeCaret: boolean }]>;
+	}
+
+	let { cell, children, class: className, ...rest }: Props = $props();
+
+	const ctx = getPinInputCtx();
+</script>
+
+<div
+	data-pin-input-cell
+	data-active={cell.isActive || undefined}
+	data-inactive={!cell.isActive || undefined}
+	data-state={cell.char ? 'filled' : 'empty'}
+	data-disabled={ctx.disabled || undefined}
+	data-error={ctx.hasError || undefined}
+	data-mask={ctx.mask || undefined}
+	aria-hidden="true"
+	class={className}
+	{...rest}
+>
+	{#if children}
+		{@render children({
+			char: cell.char,
+			isActive: cell.isActive,
+			hasFakeCaret: cell.hasFakeCaret
+		})}
+	{:else if cell.char}
+		{#if ctx.mask}
+			<span>&bull;</span>
+		{:else}
+			<span>{cell.char}</span>
+		{/if}
+	{:else if cell.hasFakeCaret}
+		<div data-pin-input-caret></div>
+	{:else}
+		<span data-pin-input-placeholder>{ctx.placeholder}</span>
+	{/if}
+</div>
+
+<style>
+	[data-pin-input-cell] {
+		display: grid;
+		place-items: center;
+		aspect-ratio: 1;
+		height: var(--dry-pin-size);
+		font-size: var(--dry-pin-font-size);
+		font-family: var(--dry-font-mono);
+		font-variant-numeric: tabular-nums;
+		font-weight: 500;
+		color: var(--dry-color-text-strong);
+		background: var(--dry-pin-bg);
+		box-sizing: border-box;
+		position: relative;
+		user-select: none;
+		border: var(--dry-pin-cell-border, 2px solid var(--dry-pin-border));
+		border-bottom: var(
+			--dry-pin-cell-border-bottom,
+			var(--dry-pin-cell-border, 2px solid var(--dry-pin-border))
+		);
+		border-radius: var(--dry-pin-cell-radius, var(--dry-pin-radius));
+		transition:
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
+			box-shadow var(--dry-duration-fast) var(--dry-ease-default),
+			background var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-pin-input-placeholder] {
+		color: var(--dry-color-text-weak);
+	}
+
+	[data-pin-input-cell][data-state='filled'] {
+		border-color: var(--dry-color-stroke-strong);
+		background: var(--dry-color-bg-raised);
+	}
+
+	[data-pin-input-cell][data-active] {
+		border-color: var(--dry-color-fill-brand);
+		z-index: 2;
+		outline: var(--dry-focus-ring);
+		outline-offset: -2px;
+	}
+
+	[data-pin-input-cell][data-error] {
+		border-color: var(--dry-color-fill-error);
+	}
+
+	[data-pin-input-cell][data-error][data-active] {
+		outline-color: var(--dry-color-fill-error);
+		border-color: var(--dry-color-fill-error);
+	}
+
+	[data-pin-input-caret] {
+		height: 60%;
+		border-inline-start: 2px solid var(--dry-pin-caret-color);
+		animation: caret-blink 1.25s ease-out infinite;
+	}
+
+	@keyframes caret-blink {
+		0%,
+		70%,
+		100% {
+			opacity: 1;
+		}
+		20%,
+		50% {
+			opacity: 0;
+		}
+	}
+</style>

package/src/pin-input/pin-input-group.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { children, class: className, ...rest }: Props = $props();
+</script>
+
+<div data-pin-input-group role="presentation" class={className} {...rest}>
+	{@render children()}
+</div>
+
+<style>
+	[data-pin-input-group] {
+		display: inline-grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: var(--dry-pin-group-gap, var(--dry-space-2));
+	}
+</style>