@nqmcreative/ui 0.1.0 → 0.2.0

package/dist/styles/paper/Calendar.svelte

@@ -0,0 +1,202 @@
+<script lang="ts">
+	import {
+		addMonths,
+		fromISO,
+		isOutOfRange,
+		isSameDay,
+		monthGrid,
+		monthLabel,
+		toISO,
+		today,
+		weekdayNames
+	} from '../../core/date.js';
+	import { calendarKeyMove } from '../../core/calendar.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import {
+		focusRing,
+		toneFill,
+		toneRing,
+		toneSoft,
+		toneText,
+		type Tone
+	} from '../../core/tones.js';
+
+	interface Props {
+		/** Bindable `YYYY-MM-DD`, or `''` for nothing selected. */
+		value?: string;
+		/** Bindable `YYYY-MM-DD` inside the month on show. */
+		month?: string;
+		/** Inclusive bounds, `YYYY-MM-DD`. */
+		min?: string;
+		max?: string;
+		/** Return true to grey out a specific day — weekends, holidays. */
+		isDisabled?: (date: Date) => boolean;
+		/** 1 = Monday (default), 0 = Sunday. */
+		weekStart?: 0 | 1;
+		tone?: Tone;
+		/** Show the "Today" shortcut under the grid. */
+		showToday?: boolean;
+		onselect?: (value: string) => void;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(''),
+		month = $bindable(''),
+		min,
+		max,
+		isDisabled,
+		weekStart = 1,
+		tone = 'brand',
+		showToday = true,
+		onselect,
+		class: className = ''
+	}: Props = $props();
+
+	const t = useLocale();
+
+	const selected = $derived(fromISO(value));
+	const now = today();
+
+	let view = $state(fromISO(month) ?? fromISO(value) ?? today());
+	/** The day the arrow keys are on — not necessarily the selected one. */
+	let focused = $state(fromISO(value) ?? today());
+	let grid: HTMLElement | null = $state(null);
+
+	// Follow the bound `month`/`value` when the parent changes them.
+	$effect(() => {
+		const next = fromISO(month) ?? fromISO(value);
+		if (next && (next.getMonth() !== view.getMonth() || next.getFullYear() !== view.getFullYear()))
+			view = next;
+	});
+
+	const days = $derived(monthGrid(view, weekStart));
+	const weekdays = $derived(weekdayNames(t.current.dateLocale, weekStart));
+
+	function blocked(date: Date) {
+		return isOutOfRange(date, min, max) || (isDisabled?.(date) ?? false);
+	}
+
+	function show(next: Date) {
+		view = next;
+		month = toISO(new Date(next.getFullYear(), next.getMonth(), 1));
+	}
+
+	function pick(date: Date) {
+		if (blocked(date)) return;
+		value = toISO(date);
+		focused = date;
+		if (date.getMonth() !== view.getMonth()) show(date);
+		onselect?.(value);
+	}
+
+	function moveFocus(next: Date) {
+		focused = next;
+		if (next.getMonth() !== view.getMonth() || next.getFullYear() !== view.getFullYear())
+			show(next);
+		queueMicrotask(() => grid?.querySelector<HTMLElement>('[data-focused="true"]')?.focus());
+	}
+
+	function onKeydown(event: KeyboardEvent) {
+		const next = calendarKeyMove(event.key, focused, weekStart, event.shiftKey);
+		if (next) {
+			event.preventDefault();
+			moveFocus(next);
+			return;
+		}
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault();
+			pick(focused);
+		}
+	}
+
+	const arrow =
+		'inline-flex size-8 items-center justify-center rounded-md text-text-secondary transition-colors duration-150 hover:bg-bg-inset hover:text-text';
+</script>
+
+<div class="flex w-[18rem] flex-col gap-3 p-3 font-sans {className}">
+	<div class="flex items-center justify-between gap-2">
+		<button
+			type="button"
+			onclick={() => show(addMonths(view, -1))}
+			aria-label={t.current.previousMonth}
+			class="{arrow} {focusRing} {toneRing[tone]}"
+		>
+			<svg class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+				<path d="m10 4-4 4 4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
+			</svg>
+		</button>
+
+		<span aria-live="polite" class="text-sm font-semibold text-text">
+			{monthLabel(view, t.current.dateLocale)}
+		</span>
+
+		<button
+			type="button"
+			onclick={() => show(addMonths(view, 1))}
+			aria-label={t.current.nextMonth}
+			class="{arrow} {focusRing} {toneRing[tone]}"
+		>
+			<svg class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+				<path d="m6 4 4 4-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
+			</svg>
+		</button>
+	</div>
+
+	<div class="grid grid-cols-7 gap-0.5">
+		{#each weekdays as name, i (i)}
+			<span class="pb-1 text-center text-[11px] font-medium text-text-muted">{name}</span>
+		{/each}
+	</div>
+
+	<!-- Roving tabindex: the grid itself is never a tab stop, the focused day is. -->
+	<div
+		bind:this={grid}
+		role="grid"
+		tabindex="-1"
+		aria-label={t.current.selectDate}
+		onkeydown={onKeydown}
+		class="grid grid-cols-7 gap-0.5 focus:outline-none"
+	>
+		{#each days as day (toISO(day))}
+			{@const outside = day.getMonth() !== view.getMonth()}
+			{@const off = blocked(day)}
+			{@const isSelected = isSameDay(day, selected)}
+			{@const isFocused = isSameDay(day, focused)}
+			<button
+				type="button"
+				role="gridcell"
+				data-focused={isFocused}
+				tabindex={isFocused ? 0 : -1}
+				disabled={off}
+				aria-selected={isSelected}
+				aria-current={isSameDay(day, now) ? 'date' : undefined}
+				onclick={() => pick(day)}
+				class="flex h-9 items-center justify-center rounded-md text-[13px] tabular-nums transition-colors duration-100 disabled:pointer-events-none disabled:opacity-30 {focusRing} {toneRing[
+					tone
+				]}
+					{isSelected
+					? `${toneFill[tone]} font-semibold text-text-inverse`
+					: outside
+						? 'text-text-muted/60 hover:bg-bg-inset'
+						: 'text-text-secondary hover:bg-bg-inset hover:text-text'}
+					{!isSelected && isSameDay(day, now) ? `${toneSoft[tone]} font-semibold` : ''}"
+			>
+				{day.getDate()}
+			</button>
+		{/each}
+	</div>
+
+	{#if showToday}
+		<button
+			type="button"
+			onclick={() => pick(now)}
+			disabled={blocked(now)}
+			class="self-start rounded px-1 text-[13px] font-medium transition-colors duration-150 disabled:pointer-events-none disabled:opacity-40 {toneText[
+				tone
+			]} hover:underline hover:underline-offset-2 {focusRing} {toneRing[tone]}"
+		>
+			{t.current.today}
+		</button>
+	{/if}
+</div>

package/dist/styles/paper/Calendar.svelte.d.ts

@@ -0,0 +1,22 @@
+import { type Tone } from '../../core/tones.js';
+interface Props {
+    /** Bindable `YYYY-MM-DD`, or `''` for nothing selected. */
+    value?: string;
+    /** Bindable `YYYY-MM-DD` inside the month on show. */
+    month?: string;
+    /** Inclusive bounds, `YYYY-MM-DD`. */
+    min?: string;
+    max?: string;
+    /** Return true to grey out a specific day — weekends, holidays. */
+    isDisabled?: (date: Date) => boolean;
+    /** 1 = Monday (default), 0 = Sunday. */
+    weekStart?: 0 | 1;
+    tone?: Tone;
+    /** Show the "Today" shortcut under the grid. */
+    showToday?: boolean;
+    onselect?: (value: string) => void;
+    class?: string;
+}
+declare const Calendar: import("svelte").Component<Props, {}, "month" | "value">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

package/dist/styles/paper/Card.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { toneBorderLeft, toneHoverBorder, toneSurface, type Tone } from '../../core/tones.js';
+
+	export type CardVariant = 'outline' | 'filled' | 'tinted';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		variant?: CardVariant;
+		tone?: Tone;
+		/** Draws a tone-coloured rule down the left edge. */
+		accent?: boolean;
+		/** Lifts the card on hover — use for clickable cards. */
+		interactive?: boolean;
+		padded?: boolean;
+		title?: string;
+		eyebrow?: string;
+		header?: Snippet;
+		footer?: Snippet;
+		children: Snippet;
+	}
+
+	let {
+		variant = 'outline',
+		tone = 'brand',
+		accent = false,
+		interactive = false,
+		padded = true,
+		title,
+		eyebrow,
+		header,
+		footer,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+
+	const variants = $derived({
+		outline: 'border border-hairline bg-bg shadow-xs',
+		filled: 'border border-hairline bg-bg-alt',
+		tinted: `border border-transparent ${toneSurface[tone]}`
+	});
+</script>
+
+<div
+	class="flex flex-col rounded-lg {variants[variant]}
+		{accent ? `border-l-4 ${toneBorderLeft[tone]}` : ''}
+		{interactive
+		? `transition-shadow duration-150 ease-brand-out hover:shadow-md ${toneHoverBorder[tone]}`
+		: ''}
+		{className}"
+	{...rest}
+>
+	{#if header || title || eyebrow}
+		<div class="flex flex-col gap-1 {padded ? 'px-5 pt-5' : ''}">
+			{#if header}
+				{@render header()}
+			{:else}
+				{#if eyebrow}
+					<span class="font-sans text-xs font-semibold text-text-muted">{eyebrow}</span>
+				{/if}
+				{#if title}
+					<h3 class="font-heading text-base font-semibold text-text">{title}</h3>
+				{/if}
+			{/if}
+		</div>
+	{/if}
+
+	<div class="flex-1 {padded ? (header || title || eyebrow ? 'px-5 pt-3 pb-5' : 'p-5') : ''}">
+		{@render children()}
+	</div>
+
+	{#if footer}
+		<div class="rounded-b-lg border-t border-hairline bg-bg-alt {padded ? 'px-5 py-3.5' : ''}">
+			{@render footer()}
+		</div>
+	{/if}
+</div>

package/dist/styles/paper/Card.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../../core/tones.js';
+export type CardVariant = 'outline' | 'filled' | 'tinted';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    variant?: CardVariant;
+    tone?: Tone;
+    /** Draws a tone-coloured rule down the left edge. */
+    accent?: boolean;
+    /** Lifts the card on hover — use for clickable cards. */
+    interactive?: boolean;
+    padded?: boolean;
+    title?: string;
+    eyebrow?: string;
+    header?: Snippet;
+    footer?: Snippet;
+    children: Snippet;
+}
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/styles/paper/Checkbox.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { peerFocusRing, tonePeerChecked, tonePeerFocus, type Tone } from '../../core/tones.js';
+
+	interface Props extends Omit<HTMLInputAttributes, 'type' | 'size'> {
+		checked?: boolean;
+		/** Renders the dash state — visual only, `checked` stays false. */
+		indeterminate?: boolean;
+		label?: string;
+		description?: string;
+		tone?: Tone;
+		children?: Snippet;
+	}
+
+	let {
+		checked = $bindable(false),
+		indeterminate = false,
+		label,
+		description,
+		tone = 'brand',
+		disabled = false,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+
+	let el: HTMLInputElement | null = $state(null);
+
+	$effect(() => {
+		if (el) el.indeterminate = indeterminate;
+	});
+</script>
+
+<label
+	class="group inline-flex items-start gap-2.5 font-sans text-sm
+		{disabled ? 'pointer-events-none opacity-50' : 'cursor-pointer'} {className}"
+>
+	<input bind:this={el} type="checkbox" bind:checked {disabled} class="peer sr-only" {...rest} />
+	<span
+		class="mt-0.5 flex size-[18px] shrink-0 items-center justify-center rounded border border-hairline-strong bg-bg shadow-xs transition-colors duration-150 ease-brand-out
+			{tonePeerChecked[tone]} {peerFocusRing} {tonePeerFocus[tone]}"
+		aria-hidden="true"
+	>
+		{#if indeterminate}
+			<span class="h-0.5 w-2.5 rounded-full bg-text-muted"></span>
+		{:else}
+			<svg
+				class="size-3 text-text-inverse opacity-0 transition-opacity duration-150 group-has-[:checked]:opacity-100"
+				viewBox="0 0 12 12"
+				fill="none"
+			>
+				<path
+					d="m2 6 2.6 2.6L10 3.2"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		{/if}
+	</span>
+	{#if label || description || children}
+		<span class="flex flex-col gap-0.5">
+			{#if children}
+				{@render children()}
+			{:else if label}
+				<span class="leading-snug text-text">{label}</span>
+			{/if}
+			{#if description}
+				<span class="text-[13px] leading-snug text-text-muted">{description}</span>
+			{/if}
+		</span>
+	{/if}
+</label>

package/dist/styles/paper/Checkbox.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type Tone } from '../../core/tones.js';
+interface Props extends Omit<HTMLInputAttributes, 'type' | 'size'> {
+    checked?: boolean;
+    /** Renders the dash state — visual only, `checked` stays false. */
+    indeterminate?: boolean;
+    label?: string;
+    description?: string;
+    tone?: Tone;
+    children?: Snippet;
+}
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/styles/paper/CheckboxGroup.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLFieldsetAttributes } from 'svelte/elements';
+	import Checkbox from './Checkbox.svelte';
+	import { toneBorder, toneSurface, type Tone } from '../../core/tones.js';
+
+	export interface CheckboxOption {
+		value: string;
+		label: string;
+		description?: string;
+		disabled?: boolean;
+	}
+
+	interface Props extends Omit<HTMLFieldsetAttributes, 'onchange'> {
+		/** Bindable — the `value` of every checked option. */
+		value?: string[];
+		options?: CheckboxOption[];
+		legend?: string;
+		hint?: string;
+		error?: string;
+		required?: boolean;
+		tone?: Tone;
+		orientation?: 'vertical' | 'horizontal';
+		/** Wraps each option in a bordered, clickable card. */
+		boxed?: boolean;
+		/** Cap on how many may be checked at once. `0` means no limit. */
+		max?: number;
+		onchange?: (value: string[]) => void;
+		/** Pass your own `Checkbox`es instead of `options`. */
+		children?: Snippet;
+	}
+
+	let {
+		value = $bindable([]),
+		options,
+		legend,
+		hint,
+		error,
+		required = false,
+		tone = 'brand',
+		orientation = 'vertical',
+		boxed = false,
+		max = 0,
+		onchange,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+
+	const full = $derived(max > 0 && value.length >= max);
+
+	function toggle(option: CheckboxOption) {
+		value = value.includes(option.value)
+			? value.filter((v) => v !== option.value)
+			: [...value, option.value];
+		onchange?.(value);
+	}
+</script>
+
+<fieldset class="flex flex-col gap-3 border-0 p-0 {className}" {...rest}>
+	{#if legend}
+		<legend class="mb-1 font-sans text-sm font-medium text-text">
+			{legend}
+			{#if required}<span class="ml-0.5 text-danger" aria-hidden="true">*</span>{/if}
+		</legend>
+	{/if}
+
+	<div class="flex gap-2.5 {orientation === 'horizontal' ? 'flex-row flex-wrap' : 'flex-col'}">
+		{#if options}
+			{#each options as option (option.value)}
+				{@const checked = value.includes(option.value)}
+				{@const disabled = option.disabled || (full && !checked)}
+				{#if boxed}
+					<label
+						class="flex flex-1 cursor-pointer items-start gap-3 rounded-lg border p-4 shadow-xs transition-colors duration-150 ease-brand-out
+							{checked
+							? `${toneBorder[tone]} ${toneSurface[tone]}`
+							: 'border-hairline bg-bg hover:border-hairline-strong'}
+							{disabled ? 'pointer-events-none opacity-50' : ''}"
+					>
+						<Checkbox
+							{checked}
+							{disabled}
+							{tone}
+							label={option.label}
+							description={option.description}
+							onchange={() => toggle(option)}
+						/>
+					</label>
+				{:else}
+					<Checkbox
+						{checked}
+						{disabled}
+						{tone}
+						label={option.label}
+						description={option.description}
+						onchange={() => toggle(option)}
+					/>
+				{/if}
+			{/each}
+		{:else if children}
+			{@render children()}
+		{/if}
+	</div>
+
+	{#if error}
+		<p class="font-sans text-[13px] text-danger">{error}</p>
+	{:else if hint}
+		<p class="font-sans text-[13px] text-text-muted">{hint}</p>
+	{/if}
+</fieldset>

package/dist/styles/paper/CheckboxGroup.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+import type { HTMLFieldsetAttributes } from 'svelte/elements';
+import { type Tone } from '../../core/tones.js';
+export interface CheckboxOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+interface Props extends Omit<HTMLFieldsetAttributes, 'onchange'> {
+    /** Bindable — the `value` of every checked option. */
+    value?: string[];
+    options?: CheckboxOption[];
+    legend?: string;
+    hint?: string;
+    error?: string;
+    required?: boolean;
+    tone?: Tone;
+    orientation?: 'vertical' | 'horizontal';
+    /** Wraps each option in a bordered, clickable card. */
+    boxed?: boolean;
+    /** Cap on how many may be checked at once. `0` means no limit. */
+    max?: number;
+    onchange?: (value: string[]) => void;
+    /** Pass your own `Checkbox`es instead of `options`. */
+    children?: Snippet;
+}
+declare const CheckboxGroup: import("svelte").Component<Props, {}, "value">;
+type CheckboxGroup = ReturnType<typeof CheckboxGroup>;
+export default CheckboxGroup;