@nqmcreative/ui 0.2.1 → 0.2.2

package/dist/styles/sprout/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/sprout/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/sprout/Input.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { toneFocusWithinBorder, type Tone } from '../../core/tones.js';
+	import { edge } from './lift.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-xl border bg-bg px-3 {edge} 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/sprout/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/sprout/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-xl [&>*:focus-within]:relative [&>*:focus-within]:z-10 [&>*:last-child]:rounded-r-xl [&>*:not(:first-child)]:-ml-px {className}"
+	{...rest}
+>
+	{@render children()}
+</div>

package/dist/styles/sprout/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/sprout/Kbd.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { edge } from './lift.js';
+
+	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-xl border border-hairline bg-bg-alt px-1.5 font-sans text-[11px] font-medium text-text-secondary {edge} {className}"
+	{...rest}
+>
+	{@render children()}
+</kbd>

package/dist/styles/sprout/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/sprout/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/sprout/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/sprout/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-md 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/sprout/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;

package/dist/styles/sprout/LocaleProvider.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { provideLocale, type Locale } from '../../core/locale.svelte.js';
+
+	interface Props {
+		/** Full locale or just the keys you want to change. */
+		locale: Partial<Locale>;
+		children: Snippet;
+	}
+
+	let { locale, children }: Props = $props();
+
+	// Seeded during init so the first render already has the right strings —
+	// an effect would leave one frame (and the SSR output) in the default
+	// language. The effect below only handles later changes, e.g. a switcher.
+	// svelte-ignore state_referenced_locally
+	const store = provideLocale(locale);
+
+	$effect(() => {
+		store.replace(locale);
+	});
+</script>
+
+{@render children()}

package/dist/styles/sprout/LocaleProvider.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import { type Locale } from '../../core/locale.svelte.js';
+interface Props {
+    /** Full locale or just the keys you want to change. */
+    locale: Partial<Locale>;
+    children: Snippet;
+}
+declare const LocaleProvider: import("svelte").Component<Props, {}, "">;
+type LocaleProvider = ReturnType<typeof LocaleProvider>;
+export default LocaleProvider;

package/dist/styles/sprout/LogoCloud.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface Logo {
+		name: string;
+		src?: string;
+		href?: string;
+	}
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		title?: string;
+		/** Without `src` the name is set in the heading face — fine for wordmarks. */
+		logos?: Logo[];
+		/** Dim until hovered, so the row does not compete with the headline. */
+		muted?: boolean;
+		/** Your own markup instead of `logos`. */
+		children?: Snippet;
+	}
+
+	let {
+		title,
+		logos = [],
+		muted = true,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<section class="w-full px-6 py-14 {className}" {...rest}>
+	<div class="mx-auto flex w-full max-w-6xl flex-col items-center gap-8">
+		{#if title}
+			<p class="text-center font-sans text-[13px] font-medium text-text-muted">{title}</p>
+		{/if}
+
+		<div class="flex flex-wrap items-center justify-center gap-x-12 gap-y-8">
+			{#if children}
+				{@render children()}
+			{:else}
+				{#each logos as logo (logo.name)}
+					<svelte:element
+						this={logo.href ? 'a' : 'div'}
+						href={logo.href}
+						class="flex items-center rounded transition-all duration-200 ease-brand-out {muted
+							? 'opacity-60 grayscale hover:opacity-100 hover:grayscale-0'
+							: ''}"
+					>
+						{#if logo.src}
+							<img src={logo.src} alt={logo.name} class="h-7 w-auto object-contain" />
+						{:else}
+							<span class="font-heading text-lg font-semibold tracking-tight text-text-secondary">
+								{logo.name}
+							</span>
+						{/if}
+					</svelte:element>
+				{/each}
+			{/if}
+		</div>
+	</div>
+</section>

package/dist/styles/sprout/LogoCloud.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface Logo {
+    name: string;
+    src?: string;
+    href?: string;
+}
+interface Props extends HTMLAttributes<HTMLElement> {
+    title?: string;
+    /** Without `src` the name is set in the heading face — fine for wordmarks. */
+    logos?: Logo[];
+    /** Dim until hovered, so the row does not compete with the headline. */
+    muted?: boolean;
+    /** Your own markup instead of `logos`. */
+    children?: Snippet;
+}
+declare const LogoCloud: import("svelte").Component<Props, {}, "">;
+type LogoCloud = ReturnType<typeof LogoCloud>;
+export default LogoCloud;

package/dist/styles/sprout/MenuItem.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { toneSoftHover, toneText, type Tone } from '../../core/tones.js';
+
+	interface Props extends HTMLButtonAttributes {
+		/** Renders an `<a>` instead of a `<button>`. */
+		href?: string;
+		tone?: Tone;
+		/** Leading glyph. */
+		icon?: Snippet;
+		/** Right-aligned hint — a keyboard shortcut, a count. */
+		shortcut?: string;
+		/** Shows a check on the left and marks the item as chosen. */
+		selected?: boolean;
+		children: Snippet;
+	}
+
+	let {
+		href,
+		tone = 'neutral',
+		icon,
+		shortcut,
+		selected = false,
+		disabled = false,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'button'}
+	{href}
+	type={href ? undefined : 'button'}
+	role="menuitem"
+	disabled={href ? undefined : disabled}
+	aria-disabled={disabled ? 'true' : undefined}
+	tabindex={disabled ? undefined : -1}
+	class="mx-1 flex items-center gap-2.5 rounded-xl px-2.5 py-1.5 text-left text-sm transition-colors duration-100 ease-brand-out focus:outline-none disabled:pointer-events-none disabled:opacity-40
+		{tone === 'neutral'
+		? 'text-text-secondary hover:bg-bg-inset focus-visible:bg-bg-inset'
+		: `${toneText[tone]} ${toneSoftHover[tone]}`}
+		{className}"
+	{...rest}
+>
+	{#if selected}
+		<svg class="size-3.5 shrink-0" 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>
+	{:else if icon}
+		<span class="flex size-3.5 shrink-0 items-center justify-center">{@render icon()}</span>
+	{/if}
+	<span class="min-w-0 flex-1 truncate">{@render children()}</span>
+	{#if shortcut}
+		<span class="shrink-0 text-[11px] text-text-muted">{shortcut}</span>
+	{/if}
+</svelte:element>

package/dist/styles/sprout/MenuItem.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import { type Tone } from '../../core/tones.js';
+interface Props extends HTMLButtonAttributes {
+    /** Renders an `<a>` instead of a `<button>`. */
+    href?: string;
+    tone?: Tone;
+    /** Leading glyph. */
+    icon?: Snippet;
+    /** Right-aligned hint — a keyboard shortcut, a count. */
+    shortcut?: string;
+    /** Shows a check on the left and marks the item as chosen. */
+    selected?: boolean;
+    children: Snippet;
+}
+declare const MenuItem: import("svelte").Component<Props, {}, "">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;

package/dist/styles/sprout/MenuSeparator.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		/** Optional caption, rendered as a section heading above the rule. */
+		label?: string;
+	}
+
+	let { label, class: className = '', ...rest }: Props = $props();
+</script>
+
+{#if label}
+	<div
+		class="mt-1 px-3 pt-2 pb-1 font-sans text-[11px] font-semibold text-text-muted {className}"
+		role="presentation"
+		{...rest}
+	>
+		{label}
+	</div>
+{:else}
+	<div role="separator" class="my-1 h-px bg-hairline {className}" {...rest}></div>
+{/if}

package/dist/styles/sprout/MenuSeparator.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Optional caption, rendered as a section heading above the rule. */
+    label?: string;
+}
+declare const MenuSeparator: import("svelte").Component<Props, {}, "">;
+type MenuSeparator = ReturnType<typeof MenuSeparator>;
+export default MenuSeparator;