@dryui/ui 3.0.0 → 4.0.1

package/src/notification-center/notification-center-root.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { setNotificationCenterCtx, type NotificationItem } from './context.svelte.js';
+
+	interface Props {
+		items?: NotificationItem[];
+		open?: boolean;
+		children: Snippet;
+	}
+
+	let {
+		items = $bindable<NotificationItem[]>([]),
+		open = $bindable(false),
+		children
+	}: Props = $props();
+
+	const uid = $props.id();
+	const triggerId = `nc-trigger-${uid}`;
+	const panelId = `nc-panel-${uid}`;
+
+	const unreadCount = $derived(items.filter((item) => !item.read).length);
+
+	setNotificationCenterCtx({
+		get items() {
+			return items;
+		},
+		get unreadCount() {
+			return unreadCount;
+		},
+		get open() {
+			return open;
+		},
+		get triggerId() {
+			return triggerId;
+		},
+		get panelId() {
+			return panelId;
+		},
+		markAllRead() {
+			items = items.map((item) => ({ ...item, read: true }));
+		},
+		markRead(id: string) {
+			items = items.map((item) => (item.id === id ? { ...item, read: true } : item));
+		},
+		remove(id: string) {
+			items = items.filter((item) => item.id !== id);
+		},
+		toggle() {
+			open = !open;
+		},
+		show() {
+			open = true;
+		},
+		close() {
+			open = false;
+		}
+	});
+</script>
+
+<div data-notification-center-root>
+	{@render children()}
+</div>
+
+<style>
+	[data-notification-center-root] {
+		--dry-nc-panel-width: 24rem;
+		--dry-nc-item-padding: var(--dry-space-3, 0.75rem);
+		--dry-nc-unread-bg: color-mix(in srgb, var(--dry-color-fill-brand) 12%, transparent);
+
+		position: relative;
+		display: inline-grid;
+	}
+</style>

package/src/notification-center/notification-center-trigger-button.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { getNotificationCenterCtx } from './context.svelte.js';
+
+	interface Props extends Omit<HTMLButtonAttributes, 'children'> {
+		children: Snippet<[{ unreadCount: number }]>;
+	}
+
+	let { children, onclick, ...rest }: Props = $props();
+
+	const ctx = getNotificationCenterCtx();
+</script>
+
+<Button
+	variant="outline"
+	type="button"
+	id={ctx.triggerId}
+	popovertarget={ctx.panelId}
+	aria-controls={ctx.panelId}
+	aria-expanded={ctx.open}
+	data-notification-center-trigger
+	{onclick}
+	{...rest}
+>
+	{@render children({ unreadCount: ctx.unreadCount })}
+</Button>

package/src/notification-center/notification-center.meta.ts

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

@@ -0,0 +1,7 @@
+import type { NumberInputProps as PrimitiveNumberInputProps } from '@dryui/primitives';
+
+export interface NumberInputProps extends Omit<PrimitiveNumberInputProps, 'size'> {
+	size?: 'sm' | 'md' | 'lg';
+}
+
+export { default as NumberInput } from './number-input-button.svelte';

package/src/number-input/number-input-button.svelte

@@ -0,0 +1,222 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import type { FormControlWrapperAttrs } from '../internal/form-control-wrapper-attrs.js';
+
+	interface Props extends Omit<FormControlWrapperAttrs<HTMLDivElement>, 'role'> {
+		value?: number;
+		min?: number;
+		max?: number;
+		step?: number;
+		size?: 'sm' | 'md' | 'lg';
+		disabled?: boolean;
+		name?: HTMLInputAttributes['name'];
+		placeholder?: HTMLInputAttributes['placeholder'];
+		readonly?: HTMLInputAttributes['readonly'];
+		required?: HTMLInputAttributes['required'];
+		autocomplete?: HTMLInputAttributes['autocomplete'];
+		autofocus?: HTMLInputAttributes['autofocus'];
+		oninput?: HTMLInputAttributes['oninput'];
+		onchange?: HTMLInputAttributes['onchange'];
+		onfocus?: HTMLInputAttributes['onfocus'];
+		onblur?: HTMLInputAttributes['onblur'];
+		onkeydown?: HTMLInputAttributes['onkeydown'];
+		onkeyup?: HTMLInputAttributes['onkeyup'];
+		'aria-invalid'?: HTMLInputAttributes['aria-invalid'];
+	}
+
+	let {
+		value = $bindable(0),
+		min,
+		max,
+		step = 1,
+		size = 'md',
+		disabled = false,
+		class: className,
+		id,
+		name,
+		placeholder,
+		readonly,
+		required,
+		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();
+
+	function nudge(direction: 1 | -1) {
+		const next = value + direction * step;
+		if (min !== undefined && next < min) return;
+		if (max !== undefined && next > max) return;
+		value = next;
+	}
+
+	function autofocusAction(node: HTMLInputElement, enabled: HTMLInputAttributes['autofocus']) {
+		if (enabled) node.focus();
+		return {
+			update(nextEnabled: HTMLInputAttributes['autofocus']) {
+				if (nextEnabled) node.focus();
+			}
+		};
+	}
+</script>
+
+<div
+	role="group"
+	data-number-input-wrapper
+	data-size={size}
+	data-disabled={disabled || undefined}
+	class={className}
+	{...rest}
+>
+	<Button
+		variant="outline"
+		size={size === 'sm' ? 'icon-sm' : size === 'lg' ? 'icon-lg' : 'icon'}
+		type="button"
+		tabindex={-1}
+		aria-label="Decrease value"
+		{disabled}
+		onclick={() => nudge(-1)}>&minus;</Button
+	>
+	<input
+		type="number"
+		use:autofocusAction={autofocus}
+		bind:value
+		{min}
+		{max}
+		{step}
+		{disabled}
+		{id}
+		{name}
+		{placeholder}
+		{readonly}
+		{required}
+		{autocomplete}
+		{oninput}
+		{onchange}
+		{onfocus}
+		{onblur}
+		{onkeydown}
+		{onkeyup}
+		aria-label={ariaLabel}
+		aria-labelledby={ariaLabelledby}
+		aria-describedby={ariaDescribedby}
+		aria-invalid={ariaInvalid}
+		aria-errormessage={ariaErrormessage}
+		data-disabled={disabled || undefined}
+	/>
+	<Button
+		variant="outline"
+		size={size === 'sm' ? 'icon-sm' : size === 'lg' ? 'icon-lg' : 'icon'}
+		type="button"
+		tabindex={-1}
+		aria-label="Increase value"
+		{disabled}
+		onclick={() => nudge(1)}>+</Button
+	>
+</div>
+
+<style>
+	[data-number-input-wrapper] {
+		display: inline-grid;
+		grid-template-columns: max-content minmax(3ch, max-content) max-content;
+		justify-self: start;
+		justify-content: start;
+		align-items: stretch;
+		gap: var(--dry-space-1);
+		--dry-input-bg: var(--dry-number-input-bg, var(--dry-color-bg-raised));
+		--dry-input-border: var(--dry-number-input-border, var(--dry-color-stroke-strong));
+		--dry-input-color: var(--dry-number-input-color, var(--dry-color-text-strong));
+		--dry-input-radius: var(--dry-number-input-radius, var(--dry-radius-md));
+		--dry-input-padding-x: var(--dry-number-input-padding-x, var(--dry-space-3));
+		--dry-input-padding-y: var(--dry-number-input-padding-y, var(--dry-space-2));
+		--dry-input-font-size: var(--dry-number-input-font-size, var(--dry-type-small-size));
+	}
+
+	[data-number-input-wrapper] input {
+		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);
+		font-variant-numeric: tabular-nums;
+		color: var(--dry-input-color);
+		background: var(--dry-input-bg);
+		border: 1px solid var(--dry-input-border);
+		border-radius: var(--dry-input-radius);
+		transition: border-color var(--dry-duration-fast) var(--dry-ease-default);
+		box-sizing: border-box;
+		appearance: none;
+		text-align: center;
+		-moz-appearance: textfield;
+	}
+
+	[data-number-input-wrapper] input::-webkit-outer-spin-button,
+	[data-number-input-wrapper] input::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+
+	[data-number-input-wrapper] input::placeholder {
+		color: var(--dry-color-text-weak);
+	}
+
+	[data-number-input-wrapper] input:hover:not([data-disabled]) {
+		border-color: var(--dry-color-stroke-strong);
+	}
+
+	[data-number-input-wrapper] input:focus-visible {
+		outline: var(--dry-focus-ring);
+		outline-offset: -1px;
+		border-color: var(--dry-color-focus-ring);
+	}
+
+	[data-number-input-wrapper] input[data-disabled] {
+		opacity: var(--dry-state-disabled-opacity);
+		cursor: not-allowed;
+	}
+
+	[data-number-input-wrapper][data-disabled] {
+		opacity: var(--dry-state-disabled-opacity);
+		cursor: not-allowed;
+	}
+
+	[data-number-input-wrapper][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);
+	}
+
+	[data-number-input-wrapper][data-size='sm'] input {
+		line-height: var(--dry-type-tiny-leading);
+	}
+
+	[data-number-input-wrapper][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);
+	}
+
+	[data-number-input-wrapper][data-size='md'] input {
+		line-height: var(--dry-type-small-leading);
+	}
+
+	[data-number-input-wrapper][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);
+	}
+
+	[data-number-input-wrapper][data-size='lg'] input {
+		line-height: var(--dry-type-heading-4-leading);
+	}
+</style>

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

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

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

package/src/numeric/numeric.meta.ts

@@ -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/src/numeric/numeric.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		value: number | string;
+		stable?: boolean;
+		align?: 'start' | 'center' | 'end';
+		minDigits?: number;
+	}
+
+	let {
+		value,
+		stable = false,
+		align = 'end',
+		minDigits,
+		class: className,
+		...rest
+	}: Props = $props();
+
+	const minWidth = $derived.by(() => {
+		if (!stable) return undefined;
+		const digits = minDigits ?? String(value).replace(/[^\d]/g, '').length;
+		return `${digits * 0.6}em`;
+	});
+
+	let el = $state<HTMLSpanElement>();
+
+	$effect(() => {
+		if (!el) return;
+		if (minWidth) {
+			el.style.setProperty('min-width', minWidth);
+		} else {
+			el.style.removeProperty('min-width');
+		}
+	});
+</script>
+
+<span
+	bind:this={el}
+	class={['dry-numeric dry-tabular-nums', className]}
+	data-align={align}
+	{...rest}
+>
+	{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/src/option-picker/context.svelte.ts

@@ -0,0 +1,11 @@
+import { createContext } from '@dryui/primitives';
+
+interface OptionPickerContext {
+	readonly value: string;
+	readonly disabled: boolean;
+	readonly orientation: 'horizontal' | 'vertical';
+	select: (value: string) => void;
+	isSelected: (value: string) => boolean;
+}
+export const [setOptionPickerCtx, getOptionPickerCtx] =
+	createContext<OptionPickerContext>('option-picker');

package/src/option-picker/index.ts

@@ -0,0 +1,52 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type {
+	SelectableTileGroupDescriptionProps,
+	SelectableTileGroupItemProps as PrimitiveOptionPickerItemProps,
+	SelectableTileGroupLabelProps as OptionPickerLabelProps,
+	SelectableTileGroupMetaProps as OptionPickerMetaProps,
+	SelectableTileGroupRootProps as PrimitiveOptionPickerRootProps
+} from '@dryui/primitives';
+
+export interface OptionPickerRootProps extends PrimitiveOptionPickerRootProps {
+	columns?: 1 | 2 | 3 | 4;
+}
+
+export interface OptionPickerItemProps extends PrimitiveOptionPickerItemProps {
+	layout?: 'inline' | 'stacked';
+	size?: 'default' | 'compact' | 'visual';
+	unavailable?: boolean;
+}
+
+export interface OptionPickerPreviewProps extends HTMLAttributes<HTMLSpanElement> {
+	color?: string;
+	shape?: 'circle' | 'rounded' | 'square' | 'pill';
+	variant?: 'default' | 'preset' | 'font' | 'shape';
+	children?: Snippet;
+}
+
+export type { OptionPickerLabelProps, OptionPickerMetaProps };
+export type { SelectableTileGroupDescriptionProps as OptionPickerDescriptionProps };
+
+import OptionPickerRoot from './option-picker-root.svelte';
+import OptionPickerItem from './option-picker-item.svelte';
+import OptionPickerPreview from './option-picker-preview.svelte';
+import OptionPickerLabel from './option-picker-label.svelte';
+import OptionPickerDescription from './option-picker-description.svelte';
+import OptionPickerMeta from './option-picker-meta.svelte';
+
+export const OptionPicker: {
+	Root: typeof OptionPickerRoot;
+	Item: typeof OptionPickerItem;
+	Preview: typeof OptionPickerPreview;
+	Label: typeof OptionPickerLabel;
+	Description: typeof OptionPickerDescription;
+	Meta: typeof OptionPickerMeta;
+} = {
+	Root: OptionPickerRoot,
+	Item: OptionPickerItem,
+	Preview: OptionPickerPreview,
+	Label: OptionPickerLabel,
+	Description: OptionPickerDescription,
+	Meta: OptionPickerMeta
+};

package/src/option-picker/option-picker-description.svelte

@@ -0,0 +1,25 @@
+<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 data-part="description" data-option-picker-description class={className} {...rest}>
+	{@render children?.()}
+</div>
+
+<style>
+	[data-option-picker-description] {
+		grid-column: var(--dry-option-picker-description-column, 2);
+		grid-row: var(--dry-option-picker-description-row, 2);
+		font-size: var(--dry-option-picker-description-size, var(--dry-type-small-size));
+		line-height: var(--dry-option-picker-description-line-height, 1.35);
+		color: var(--dry-color-text-weak);
+		text-wrap: pretty;
+	}
+</style>