@nqmcreative/ui 0.1.1 → 0.2.0

package/dist/styles/paper/FeatureCard.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { focusRing, toneHoverText, toneRing, toneSoft, type Tone } from '../../core/tones.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		title: string;
+		description?: string;
+		tone?: Tone;
+		/** Turns the whole card into a link. */
+		href?: string;
+		/** Glyph inside the tinted square. */
+		icon?: Snippet;
+		children?: Snippet;
+	}
+
+	let {
+		title,
+		description,
+		tone = 'brand',
+		href,
+		icon,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'div'}
+	{href}
+	class="group flex flex-col gap-3 rounded-lg bg-bg p-5 {href
+		? `transition-shadow duration-150 ease-brand-out hover:shadow-md ${focusRing} ${toneRing[tone]}`
+		: ''} {className}"
+	{...rest}
+>
+	{#if icon}
+		<span class="flex size-10 items-center justify-center rounded-lg {toneSoft[tone]}">
+			{@render icon()}
+		</span>
+	{/if}
+
+	<h3
+		class="font-heading text-base font-semibold text-text {href
+			? `transition-colors duration-150 ${toneHoverText[tone]}`
+			: ''}"
+	>
+		{title}
+	</h3>
+
+	{#if description}
+		<p class="font-sans text-sm leading-relaxed text-text-secondary">{description}</p>
+	{/if}
+
+	{#if children}
+		{@render children()}
+	{/if}
+</svelte:element>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../../core/tones.js';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    title: string;
+    description?: string;
+    tone?: Tone;
+    /** Turns the whole card into a link. */
+    href?: string;
+    /** Glyph inside the tinted square. */
+    icon?: Snippet;
+    children?: Snippet;
+}
+declare const FeatureCard: import("svelte").Component<Props, {}, "">;
+type FeatureCard = ReturnType<typeof FeatureCard>;
+export default FeatureCard;

package/dist/styles/paper/FeatureGrid.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export type FeatureColumns = 2 | 3 | 4;
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		eyebrow?: string;
+		title?: string;
+		description?: string;
+		columns?: FeatureColumns;
+		/** Cards in a bordered grid rather than free-standing. */
+		bordered?: boolean;
+		/** `FeatureCard`s, or anything else. */
+		children: Snippet;
+	}
+
+	let {
+		eyebrow,
+		title,
+		description,
+		columns = 3,
+		bordered = false,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+
+	const cols: Record<FeatureColumns, string> = {
+		2: 'sm:grid-cols-2',
+		3: 'sm:grid-cols-2 lg:grid-cols-3',
+		4: 'sm:grid-cols-2 lg:grid-cols-4'
+	};
+</script>
+
+<section class="w-full px-6 py-20 {className}" {...rest}>
+	<div class="mx-auto flex w-full max-w-6xl flex-col gap-12">
+		{#if eyebrow || title || description}
+			<div class="flex max-w-xl flex-col gap-3">
+				{#if eyebrow}
+					<span class="font-sans text-[13px] font-semibold text-text-muted">{eyebrow}</span>
+				{/if}
+				{#if title}
+					<h2 class="font-heading text-3xl font-semibold tracking-tight text-balance text-text">
+						{title}
+					</h2>
+				{/if}
+				{#if description}
+					<p class="font-sans leading-relaxed text-pretty text-text-secondary">{description}</p>
+				{/if}
+			</div>
+		{/if}
+
+		<div
+			class="grid {cols[columns]} {bordered
+				? 'gap-px overflow-hidden rounded-lg border border-hairline bg-hairline'
+				: 'gap-6'}"
+		>
+			{@render children()}
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export type FeatureColumns = 2 | 3 | 4;
+interface Props extends HTMLAttributes<HTMLElement> {
+    eyebrow?: string;
+    title?: string;
+    description?: string;
+    columns?: FeatureColumns;
+    /** Cards in a bordered grid rather than free-standing. */
+    bordered?: boolean;
+    /** `FeatureCard`s, or anything else. */
+    children: Snippet;
+}
+declare const FeatureGrid: import("svelte").Component<Props, {}, "">;
+type FeatureGrid = ReturnType<typeof FeatureGrid>;
+export default FeatureGrid;

package/dist/styles/paper/Field.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		label?: string;
+		/** Helper text under the control. Hidden while `error` is set. */
+		hint?: string;
+		/** Replaces the hint and turns it red. */
+		error?: string;
+		required?: boolean;
+		/** `id` of the control — set the same value on the input inside. */
+		for?: string;
+		children: Snippet;
+	}
+
+	let {
+		label,
+		hint,
+		error,
+		required = false,
+		for: htmlFor,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<div class="flex w-full flex-col gap-1.5 {className}" {...rest}>
+	{#if label}
+		<label for={htmlFor} class="font-sans text-sm font-medium text-text">
+			{label}
+			{#if required}<span class="ml-0.5 text-danger" aria-hidden="true">*</span>{/if}
+		</label>
+	{/if}
+	{@render children()}
+	{#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}
+</div>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    label?: string;
+    /** Helper text under the control. Hidden while `error` is set. */
+    hint?: string;
+    /** Replaces the hint and turns it red. */
+    error?: string;
+    required?: boolean;
+    /** `id` of the control — set the same value on the input inside. */
+    for?: string;
+    children: Snippet;
+}
+declare const Field: import("svelte").Component<Props, {}, "">;
+type Field = ReturnType<typeof Field>;
+export default Field;

package/dist/styles/paper/Footer.svelte

@@ -0,0 +1,91 @@
+<script module lang="ts">
+	export interface FooterLink {
+		label: string;
+		href?: string;
+		external?: boolean;
+	}
+
+	export interface FooterColumn {
+		title: string;
+		links: FooterLink[];
+	}
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { toneHoverText, type Tone } from '../../core/tones.js';
+
+	interface Props {
+		columns?: FooterColumn[];
+		/** Logo, wordmark and a line of copy on the left. */
+		brand?: Snippet;
+		/** Right side of the bottom bar — social links, a locale picker. */
+		bottom?: Snippet;
+		/** Left side of the bottom bar. Ignored when `bottom` covers both. */
+		copyright?: string;
+		tone?: Tone;
+		class?: string;
+	}
+
+	let {
+		columns = [],
+		brand,
+		bottom,
+		copyright,
+		tone = 'brand',
+		class: className = ''
+	}: Props = $props();
+</script>
+
+<footer class="w-full border-t border-hairline bg-bg-alt {className}">
+	<div class="mx-auto flex w-full max-w-6xl flex-col gap-12 px-6 py-14">
+		{#if brand || columns.length}
+			<div class="flex flex-col gap-10 md:flex-row md:justify-between">
+				{#if brand}
+					<div class="flex max-w-xs flex-col gap-3">{@render brand()}</div>
+				{/if}
+
+				{#if columns.length}
+					<div class="grid grid-cols-2 gap-10 sm:grid-cols-3 md:gap-16">
+						{#each columns as column (column.title)}
+							<div class="flex flex-col gap-3">
+								<p class="font-sans text-[13px] font-semibold text-text">{column.title}</p>
+								<ul class="flex flex-col gap-2">
+									{#each column.links as item (item.label)}
+										<li>
+											<a
+												href={item.href}
+												target={item.external ? '_blank' : undefined}
+												rel={item.external ? 'noreferrer' : undefined}
+												class="font-sans text-[13px] text-text-muted transition-colors duration-150 ease-brand-out {toneHoverText[
+													tone
+												]}"
+											>
+												{item.label}
+												{#if item.external}<span aria-hidden="true" class="text-[0.85em]">↗</span
+													>{/if}
+											</a>
+										</li>
+									{/each}
+								</ul>
+							</div>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		{/if}
+
+		{#if copyright || bottom}
+			<div
+				class="flex flex-col gap-4 border-t border-hairline pt-6 sm:flex-row sm:items-center sm:justify-between"
+			>
+				{#if copyright}
+					<p class="font-sans text-[13px] text-text-muted">{copyright}</p>
+				{/if}
+				{#if bottom}
+					<div class="flex items-center gap-4">{@render bottom()}</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+</footer>

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

@@ -0,0 +1,25 @@
+export interface FooterLink {
+    label: string;
+    href?: string;
+    external?: boolean;
+}
+export interface FooterColumn {
+    title: string;
+    links: FooterLink[];
+}
+import type { Snippet } from 'svelte';
+import { type Tone } from '../../core/tones.js';
+interface Props {
+    columns?: FooterColumn[];
+    /** Logo, wordmark and a line of copy on the left. */
+    brand?: Snippet;
+    /** Right side of the bottom bar — social links, a locale picker. */
+    bottom?: Snippet;
+    /** Left side of the bottom bar. Ignored when `bottom` covers both. */
+    copyright?: string;
+    tone?: Tone;
+    class?: string;
+}
+declare const Footer: import("svelte").Component<Props, {}, "">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;

package/dist/styles/paper/HeroSection.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { toneSoft, type Tone } from '../../core/tones.js';
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		/** Small line above the headline. */
+		eyebrow?: string;
+		title: string;
+		description?: string;
+		tone?: Tone;
+		/** `center` also centres the actions. Ignored when `media` is set. */
+		align?: 'left' | 'center';
+		/** Buttons under the copy. */
+		actions?: Snippet;
+		/** Anything on the right — a screenshot, an illustration, a form. */
+		media?: Snippet;
+		/** Extra content between the description and the actions. */
+		children?: Snippet;
+	}
+
+	let {
+		eyebrow,
+		title,
+		description,
+		tone = 'brand',
+		align = 'left',
+		actions,
+		media,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+
+	// A media column only makes sense next to left-aligned copy.
+	const centred = $derived(align === 'center' && !media);
+</script>
+
+<section class="w-full px-6 py-20 sm:py-28 {className}" {...rest}>
+	<div
+		class="mx-auto flex w-full max-w-6xl gap-16
+			{media ? 'flex-col lg:flex-row lg:items-center' : 'flex-col'}"
+	>
+		<div
+			class="flex min-w-0 flex-1 flex-col gap-6 {centred
+				? 'items-center text-center'
+				: 'items-start'}"
+		>
+			{#if eyebrow}
+				<span
+					class="inline-flex rounded-full px-3 py-1 font-sans text-[13px] font-medium {toneSoft[
+						tone
+					]}"
+				>
+					{eyebrow}
+				</span>
+			{/if}
+
+			<h1
+				class="max-w-2xl font-heading text-4xl leading-[1.1] font-semibold tracking-tight text-balance text-text sm:text-5xl"
+			>
+				{title}
+			</h1>
+
+			{#if description}
+				<p class="max-w-xl font-sans text-lg leading-relaxed text-pretty text-text-secondary">
+					{description}
+				</p>
+			{/if}
+
+			{#if children}
+				{@render children()}
+			{/if}
+
+			{#if actions}
+				<div class="flex flex-wrap items-center gap-3 pt-2 {centred ? 'justify-center' : ''}">
+					{@render actions()}
+				</div>
+			{/if}
+		</div>
+
+		{#if media}
+			<div class="min-w-0 flex-1">{@render media()}</div>
+		{/if}
+	</div>
+</section>

package/dist/styles/paper/HeroSection.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';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /** Small line above the headline. */
+    eyebrow?: string;
+    title: string;
+    description?: string;
+    tone?: Tone;
+    /** `center` also centres the actions. Ignored when `media` is set. */
+    align?: 'left' | 'center';
+    /** Buttons under the copy. */
+    actions?: Snippet;
+    /** Anything on the right — a screenshot, an illustration, a form. */
+    media?: Snippet;
+    /** Extra content between the description and the actions. */
+    children?: Snippet;
+}
+declare const HeroSection: import("svelte").Component<Props, {}, "">;
+type HeroSection = ReturnType<typeof HeroSection>;
+export default HeroSection;

package/dist/styles/paper/Input.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { toneFocusWithinBorder, type Tone } from '../../core/tones.js';
+
+	export type InputSize = 'sm' | 'md' | 'lg';
+
+	interface Props extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix'> {
+		value?: string;
+		size?: InputSize;
+		tone?: Tone;
+		/** Paints the field red and sets `aria-invalid`. */
+		invalid?: boolean;
+		/** Leading adornment — an icon, a currency symbol, `https://` … */
+		prefix?: Snippet;
+		/** Trailing adornment. */
+		suffix?: Snippet;
+	}
+
+	let {
+		value = $bindable(''),
+		size = 'md',
+		tone = 'brand',
+		invalid = false,
+		disabled = false,
+		prefix,
+		suffix,
+		class: className = '',
+		...rest
+	}: Props = $props();
+
+	const sizes: Record<InputSize, string> = {
+		sm: 'h-8 text-[13px]',
+		md: 'h-10 text-sm',
+		lg: 'h-11 text-[15px]'
+	};
+</script>
+
+<span
+	class="inline-flex w-full items-center gap-2 rounded-md border bg-bg px-3 shadow-xs transition-colors duration-150 ease-brand-out
+		{sizes[size]}
+		{invalid
+		? 'border-danger focus-within:border-danger'
+		: `border-hairline-strong ${toneFocusWithinBorder[tone]}`}
+		{disabled ? 'pointer-events-none opacity-50' : ''} {className}"
+>
+	{#if prefix}
+		<span class="shrink-0 text-text-muted">{@render prefix()}</span>
+	{/if}
+	<input
+		bind:value
+		{disabled}
+		aria-invalid={invalid ? 'true' : undefined}
+		class="w-full min-w-0 bg-transparent font-sans text-text placeholder:text-text-muted focus:outline-none"
+		{...rest}
+	/>
+	{#if suffix}
+		<span class="shrink-0 text-text-muted">{@render suffix()}</span>
+	{/if}
+</span>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type Tone } from '../../core/tones.js';
+export type InputSize = 'sm' | 'md' | 'lg';
+interface Props extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix'> {
+    value?: string;
+    size?: InputSize;
+    tone?: Tone;
+    /** Paints the field red and sets `aria-invalid`. */
+    invalid?: boolean;
+    /** Leading adornment — an icon, a currency symbol, `https://` … */
+    prefix?: Snippet;
+    /** Trailing adornment. */
+    suffix?: Snippet;
+}
+declare const Input: import("svelte").Component<Props, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/styles/paper/InputGroup.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		/** Children sit flush against each other with shared borders — an Input
+		 *  plus a Button, a Select plus an Input, and so on. The outer corners
+		 *  keep the style's radius; the joins inside are squared off. */
+		children: Snippet;
+	}
+
+	let { class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<div
+	class="flex w-full items-stretch [&>*]:min-w-0 [&>*]:rounded-none [&>*:first-child]:rounded-l-md [&>*:focus-within]:relative [&>*:focus-within]:z-10 [&>*:last-child]:rounded-r-md [&>*:not(:first-child)]:-ml-px {className}"
+	{...rest}
+>
+	{@render children()}
+</div>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Children sit flush against each other with shared borders — an Input
+     *  plus a Button, a Select plus an Input, and so on. The outer corners
+     *  keep the style's radius; the joins inside are squared off. */
+    children: Snippet;
+}
+declare const InputGroup: import("svelte").Component<Props, {}, "">;
+type InputGroup = ReturnType<typeof InputGroup>;
+export default InputGroup;

package/dist/styles/paper/Kbd.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		children: Snippet;
+	}
+
+	let { class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<kbd
+	class="inline-flex h-6 min-w-6 items-center justify-center rounded-md border border-hairline bg-bg-alt px-1.5 font-sans text-[11px] font-medium text-text-secondary shadow-xs {className}"
+	{...rest}
+>
+	{@render children()}
+</kbd>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLElement> {
+    children: Snippet;
+}
+declare const Kbd: import("svelte").Component<Props, {}, "">;
+type Kbd = ReturnType<typeof Kbd>;
+export default Kbd;

package/dist/styles/paper/Label.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLLabelAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLLabelAttributes {
+		required?: boolean;
+		children: Snippet;
+	}
+
+	let { required = false, class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<label class="font-sans text-sm font-medium text-text {className}" {...rest}>
+	{@render children()}
+	{#if required}<span class="ml-0.5 text-danger" aria-hidden="true">*</span>{/if}
+</label>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLLabelAttributes } from 'svelte/elements';
+interface Props extends HTMLLabelAttributes {
+    required?: boolean;
+    children: Snippet;
+}
+declare const Label: import("svelte").Component<Props, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/styles/paper/Link.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { focusRing, toneHoverText, toneRing, toneText, type Tone } from '../../core/tones.js';
+
+	interface Props extends HTMLAnchorAttributes {
+		tone?: Tone;
+		/** `'hover'` shows the rule only on hover. */
+		underline?: 'always' | 'hover' | 'none';
+		/** Adds `target="_blank" rel="noreferrer"` and an arrow glyph. */
+		external?: boolean;
+		/** Inherit the surrounding text colour instead of the tone. */
+		muted?: boolean;
+		children: Snippet;
+	}
+
+	let {
+		tone = 'brand',
+		underline = 'hover',
+		external = false,
+		muted = false,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+
+	const underlines = {
+		always: 'underline underline-offset-2 decoration-current/40',
+		hover: 'hover:underline underline-offset-2 decoration-current/40',
+		none: ''
+	};
+</script>
+
+<a
+	target={external ? '_blank' : undefined}
+	rel={external ? 'noreferrer' : undefined}
+	class="inline-flex items-center gap-1 rounded-sm font-sans transition-colors duration-150 ease-brand-out
+		{muted ? `text-text-secondary ${toneHoverText[tone]}` : toneText[tone]}
+		{underlines[underline]} {focusRing} {toneRing[tone]} {className}"
+	{...rest}
+>
+	{@render children()}
+	{#if external}<span aria-hidden="true" class="text-[0.85em]">↗</span>{/if}
+</a>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+import { type Tone } from '../../core/tones.js';
+interface Props extends HTMLAnchorAttributes {
+    tone?: Tone;
+    /** `'hover'` shows the rule only on hover. */
+    underline?: 'always' | 'hover' | 'none';
+    /** Adds `target="_blank" rel="noreferrer"` and an arrow glyph. */
+    external?: boolean;
+    /** Inherit the surrounding text colour instead of the tone. */
+    muted?: boolean;
+    children: Snippet;
+}
+declare const Link: import("svelte").Component<Props, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;