@nqmcreative/ui 0.1.1 → 0.2.0

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;

package/dist/styles/paper/Combobox.svelte

@@ -0,0 +1,266 @@
+<script lang="ts">
+	import { anchored } from '../../core/actions/anchor.js';
+	import { clickOutside, portal } from '../../core/actions/dismissable.js';
+	import { ListCursor, groupItems, matchQuery, revealIndex } from '../../core/list.svelte.js';
+	import { toneFocusWithinBorder, toneSoft, toneText, type Tone } from '../../core/tones.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+
+	export interface ComboboxOption {
+		value: string;
+		label: string;
+		/** Second line under the label. */
+		description?: string;
+		disabled?: boolean;
+		/** Options sharing a group are rendered under one heading. */
+		group?: string;
+	}
+
+	interface Props {
+		/** Bindable — the selected option's `value`, or `''`. */
+		value?: string;
+		options: ComboboxOption[];
+		placeholder?: string;
+		tone?: Tone;
+		invalid?: boolean;
+		disabled?: boolean;
+		/** Shows a clear button once something is selected. */
+		clearable?: boolean;
+		emptyText?: string;
+		id?: string;
+		name?: string;
+		onchange?: (value: string) => void;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(''),
+		options,
+		placeholder,
+		tone = 'brand',
+		invalid = false,
+		disabled = false,
+		clearable = true,
+		emptyText,
+		id,
+		name,
+		onchange,
+		class: className = ''
+	}: Props = $props();
+
+	const t = useLocale();
+
+	let open = $state(false);
+	let query = $state('');
+	let wrapper: HTMLElement | null = $state(null);
+	let inputEl: HTMLInputElement | null = $state(null);
+	let listEl: HTMLElement | null = $state(null);
+
+	const selected = $derived(options.find((option) => option.value === value));
+
+	const matches = $derived(
+		matchQuery(options, query, (option) => `${option.label} ${option.description ?? ''}`)
+	);
+
+	/** Options in render order, grouped when any option declares a `group`. */
+	const groups = $derived(groupItems(matches));
+	const flat = $derived(groups.flatMap(([, items]) => items));
+
+	const cursor = new ListCursor(() => flat);
+	const active = $derived(cursor.index);
+
+	/**
+	 * Set while we hand focus back to the field after a choice. Focusing fires
+	 * `focus` synchronously, and this field opens on focus — without the guard,
+	 * picking an option would immediately reopen the list it just closed.
+	 */
+	let restoring = false;
+
+	function openList() {
+		if (disabled || open || restoring) return;
+		open = true;
+		query = '';
+		cursor.reset((option) => option.value === value);
+	}
+
+	function choose(option: ComboboxOption) {
+		if (option.disabled) return;
+		value = option.value;
+		onchange?.(option.value);
+		open = false;
+		query = '';
+		restoring = true;
+		inputEl?.focus();
+		restoring = false;
+	}
+
+	function clear(event: MouseEvent) {
+		event.stopPropagation();
+		value = '';
+		query = '';
+		onchange?.('');
+		restoring = true;
+		inputEl?.focus();
+		restoring = false;
+	}
+
+	function move(step: number) {
+		cursor.move(step);
+		revealIndex(listEl, cursor.index);
+	}
+
+	function onKeydown(event: KeyboardEvent) {
+		switch (event.key) {
+			case 'ArrowDown':
+				event.preventDefault();
+				if (!open) openList();
+				else move(1);
+				break;
+			case 'ArrowUp':
+				event.preventDefault();
+				if (open) move(-1);
+				break;
+			case 'Enter':
+				if (open && cursor.current) {
+					event.preventDefault();
+					choose(cursor.current);
+				}
+				break;
+			case 'Escape':
+				if (open) {
+					event.preventDefault();
+					event.stopPropagation();
+					open = false;
+					query = '';
+				}
+				break;
+			case 'Tab':
+				open = false;
+				break;
+		}
+	}
+</script>
+
+<div
+	bind:this={wrapper}
+	class="relative inline-flex w-full items-center gap-2 rounded-md border bg-bg pr-1.5 pl-3 shadow-xs transition-colors duration-150 ease-brand-out
+		{invalid ? 'border-danger' : `border-hairline-strong ${toneFocusWithinBorder[tone]}`}
+		{disabled ? 'pointer-events-none opacity-50' : ''} {className}"
+>
+	<input
+		bind:this={inputEl}
+		{id}
+		{disabled}
+		type="text"
+		role="combobox"
+		autocomplete="off"
+		aria-expanded={open}
+		aria-controls="{id ?? 'combobox'}-listbox"
+		aria-activedescendant={open && flat[active] ? `${id ?? 'combobox'}-opt-${active}` : undefined}
+		aria-invalid={invalid ? 'true' : undefined}
+		placeholder={selected ? selected.label : (placeholder ?? t.current.comboboxPlaceholder)}
+		value={open ? query : (selected?.label ?? '')}
+		oninput={(event) => {
+			query = event.currentTarget.value;
+			open = true;
+			cursor.index = 0;
+		}}
+		onfocus={openList}
+		onkeydown={onKeydown}
+		class="h-10 w-full min-w-0 bg-transparent font-sans text-sm text-text placeholder:text-text-muted focus:outline-none"
+	/>
+
+	{#if name}<input type="hidden" {name} {value} />{/if}
+
+	{#if clearable && value && !disabled}
+		<button
+			type="button"
+			onclick={clear}
+			aria-label={t.current.clear}
+			class="shrink-0 rounded p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
+		>
+			<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+				<path
+					d="m2 2 10 10M12 2 2 12"
+					stroke="currentColor"
+					stroke-width="1.6"
+					stroke-linecap="round"
+				/>
+			</svg>
+		</button>
+	{/if}
+
+	<svg
+		class="pointer-events-none mr-1.5 size-4 shrink-0 text-text-muted transition-transform duration-150 {open
+			? 'rotate-180'
+			: ''}"
+		viewBox="0 0 16 16"
+		fill="none"
+		aria-hidden="true"
+	>
+		<path d="m4 6 4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+	</svg>
+</div>
+
+{#if open}
+	<div
+		bind:this={listEl}
+		use:portal
+		use:anchored={{ anchor: wrapper, placement: 'bottom-start', offset: 4, matchWidth: true }}
+		use:clickOutside={{ onoutside: () => (open = false), ignore: [wrapper] }}
+		id="{id ?? 'combobox'}-listbox"
+		role="listbox"
+		class="z-50 max-h-64 overflow-y-auto rounded-lg border border-hairline bg-bg py-1 font-sans shadow-lg"
+	>
+		{#if flat.length === 0}
+			<p class="px-3 py-6 text-center text-sm text-text-muted">
+				{emptyText ?? t.current.noMatches}
+			</p>
+		{:else}
+			{#each groups as [group, items] (group)}
+				{#if group}
+					<p class="px-3 pt-2 pb-1 text-[11px] font-semibold text-text-muted">{group}</p>
+				{/if}
+				{#each items as option (option.value)}
+					{@const index = flat.indexOf(option)}
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<div
+						id="{id ?? 'combobox'}-opt-{index}"
+						data-index={index}
+						role="option"
+						tabindex="-1"
+						aria-selected={option.value === value}
+						aria-disabled={option.disabled}
+						onclick={() => choose(option)}
+						onpointermove={() => (cursor.index = index)}
+						class="mx-1 flex cursor-pointer flex-col gap-0.5 rounded-md px-2.5 py-2 text-sm transition-colors duration-100
+							{option.disabled ? 'pointer-events-none opacity-40' : ''}
+							{index === active ? toneSoft[tone] : 'text-text-secondary'}"
+					>
+						<span class="flex items-center gap-2">
+							<span class="min-w-0 flex-1 truncate">{option.label}</span>
+							{#if option.value === value}
+								<svg
+									class="size-3.5 shrink-0 {toneText[tone]}"
+									viewBox="0 0 14 14"
+									fill="none"
+									aria-hidden="true"
+								>
+									<path
+										d="m2 7 3.2 3.2L12 3.6"
+										stroke="currentColor"
+										stroke-width="1.8"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									/>
+								</svg>
+							{/if}
+						</span>
+						{#if option.description}
+							<span class="truncate text-xs text-text-muted">{option.description}</span>
+						{/if}
+					</div>
+				{/each}
+			{/each}
+		{/if}
+	</div>
+{/if}

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

@@ -0,0 +1,29 @@
+import { type Tone } from '../../core/tones.js';
+export interface ComboboxOption {
+    value: string;
+    label: string;
+    /** Second line under the label. */
+    description?: string;
+    disabled?: boolean;
+    /** Options sharing a group are rendered under one heading. */
+    group?: string;
+}
+interface Props {
+    /** Bindable — the selected option's `value`, or `''`. */
+    value?: string;
+    options: ComboboxOption[];
+    placeholder?: string;
+    tone?: Tone;
+    invalid?: boolean;
+    disabled?: boolean;
+    /** Shows a clear button once something is selected. */
+    clearable?: boolean;
+    emptyText?: string;
+    id?: string;
+    name?: string;
+    onchange?: (value: string) => void;
+    class?: string;
+}
+declare const Combobox: import("svelte").Component<Props, {}, "value">;
+type Combobox = ReturnType<typeof Combobox>;
+export default Combobox;