@nqmcreative/ui 0.3.0 → 0.4.1

package/dist/styles/sprout/ThemeToggle.svelte

@@ -10,7 +10,6 @@
 		storedTheme,
 		type Theme
 	} from '../../core/theme.svelte.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { edge } from './lift.js';
 
 	interface Props {
@@ -34,8 +33,6 @@
 		class: className = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	$effect(() => {
 		applyTheme(theme);
 		if (persist) persistTheme(theme);
@@ -51,8 +48,8 @@
 	}
 
 	const options = $derived([
-		{ value: 'light' as Theme, label: t.current.lightMode },
-		{ value: 'dark' as Theme, label: t.current.darkMode },
+		{ value: 'light' as Theme, label: 'Light' },
+		{ value: 'dark' as Theme, label: 'Dark' },
 		{ value: 'system' as Theme, label: 'Auto' }
 	]);
 </script>
@@ -96,7 +93,7 @@
 {#if variant === 'segmented'}
 	<div
 		role="radiogroup"
-		aria-label={t.current.toggleTheme}
+		aria-label="Toggle theme"
 		class="inline-flex items-center gap-1 rounded-2xl border border-hairline bg-bg-inset p-1 {className}"
 	>
 		{#each options as option (option.value)}
@@ -120,8 +117,8 @@
 	<button
 		type="button"
 		onclick={cycle}
-		aria-label="{t.current.toggleTheme} ({theme})"
-		title={t.current.toggleTheme}
+		aria-label="Toggle theme ({theme})"
+		title="Toggle theme"
 		class="inline-flex size-9 items-center justify-center rounded-xl border border-hairline bg-bg text-text-secondary {edge} transition-colors duration-150 ease-brand-out hover:bg-bg-alt hover:text-text {focusRing} {toneRing[
 			tone
 		]} {className}"

package/dist/styles/sprout/TimeInput.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { clampTime, formatTime, parseTime, stepTime } from '../../core/time.js';
+	import type { Tone } from '../../core/tones.js';
+	import Input, { type InputSize } from './Input.svelte';
+
+	interface Props extends Omit<
+		HTMLInputAttributes,
+		'size' | 'prefix' | 'suffix' | 'min' | 'max' | 'step'
+	> {
+		/** Bindable `HH:MM`, or `''` for empty. */
+		value?: string;
+		/** Inclusive bounds, `HH:MM`. */
+		min?: string;
+		max?: string;
+		/** Minutes one press of a stepper moves, and what typing snaps to. */
+		step?: number;
+		size?: InputSize;
+		tone?: Tone;
+		invalid?: boolean;
+		/** Hide the steppers and let the field be typed into only. */
+		steppers?: boolean;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(''),
+		min,
+		max,
+		step = 15,
+		size = 'md',
+		tone = 'brand',
+		invalid = false,
+		disabled = false,
+		steppers = true,
+		class: className = '',
+		...rest
+	}: Props = $props();
+
+	// Typed text and the bound value are separate until the field settles:
+	// `9` is a valid thing to be halfway through typing and an invalid time.
+	let text = $state('');
+	let editing = $state(false);
+
+	$effect(() => {
+		if (!editing) text = value;
+	});
+
+	function settle() {
+		editing = false;
+		const minutes = parseTime(text);
+		value = minutes === null ? '' : formatTime(clampTime(minutes, min, max, step));
+		text = value;
+	}
+
+	function nudge(direction: 1 | -1) {
+		value = stepTime(value, direction, step, min, max);
+		text = value;
+	}
+
+	function onKeydown(event: KeyboardEvent) {
+		if (event.key === 'ArrowUp') {
+			event.preventDefault();
+			nudge(1);
+		} else if (event.key === 'ArrowDown') {
+			event.preventDefault();
+			nudge(-1);
+		} else if (event.key === 'Enter') {
+			settle();
+		}
+	}
+
+	const stepper =
+		'grid size-6 place-items-center rounded text-text-secondary transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-current';
+</script>
+
+<Input
+	bind:value={text}
+	{size}
+	{tone}
+	{invalid}
+	{disabled}
+	inputmode="numeric"
+	placeholder="--:--"
+	onfocus={() => (editing = true)}
+	onblur={settle}
+	onkeydown={onKeydown}
+	class="[&_input]:tabular-nums {className}"
+	{...rest}
+>
+	{#snippet prefix()}
+		<svg class="size-4" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+			<circle
+				cx="10"
+				cy="10"
+				r="6.5"
+				stroke="currentColor"
+				stroke-width="1.6"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M10 6.5V10l2.5 1.5"
+				stroke="currentColor"
+				stroke-width="1.6"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+		</svg>
+	{/snippet}
+
+	{#snippet suffix()}
+		{#if steppers}
+			<span class="-mr-2 flex flex-col">
+				<button
+					type="button"
+					class={stepper}
+					{disabled}
+					onclick={() => nudge(1)}
+					aria-label="Increase"
+				>
+					<svg class="size-3" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+						<path
+							d="m3 7.5 3-3 3 3"
+							stroke="currentColor"
+							stroke-width="1.6"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+				</button>
+				<button
+					type="button"
+					class={stepper}
+					{disabled}
+					onclick={() => nudge(-1)}
+					aria-label="Decrease"
+				>
+					<svg class="size-3" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+						<path
+							d="m3 4.5 3 3 3-3"
+							stroke="currentColor"
+							stroke-width="1.6"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+				</button>
+			</span>
+		{/if}
+	{/snippet}
+</Input>

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

@@ -0,0 +1,21 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { Tone } from '../../core/tones.js';
+import { type InputSize } from './Input.svelte';
+interface Props extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix' | 'min' | 'max' | 'step'> {
+    /** Bindable `HH:MM`, or `''` for empty. */
+    value?: string;
+    /** Inclusive bounds, `HH:MM`. */
+    min?: string;
+    max?: string;
+    /** Minutes one press of a stepper moves, and what typing snaps to. */
+    step?: number;
+    size?: InputSize;
+    tone?: Tone;
+    invalid?: boolean;
+    /** Hide the steppers and let the field be typed into only. */
+    steppers?: boolean;
+    class?: string;
+}
+declare const TimeInput: import("svelte").Component<Props, {}, "value">;
+type TimeInput = ReturnType<typeof TimeInput>;
+export default TimeInput;

package/dist/styles/sprout/Toaster.svelte

@@ -6,7 +6,6 @@
 	import { toneText } from '../../core/tones.js';
 	import { iconMd } from './icon.js';
 	import Spinner from './Spinner.svelte';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { soft } from './lift.js';
 
 	export type ToasterPosition =
@@ -19,8 +18,6 @@
 
 	let { position = 'bottom-right', class: className = '' }: Props = $props();
 
-	const t = useLocale();
-
 	const positions: Record<ToasterPosition, string> = {
 		'top-left': 'top-4 left-4 items-start',
 		'top-center': 'top-4 left-1/2 -translate-x-1/2 items-center',
@@ -42,8 +39,8 @@
 <div
 	use:portal
 	aria-live="polite"
-	aria-label={t.current.notifications}
-	class="pointer-events-none fixed z-[100] flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-2.5 {positions[
+	aria-label="Notifications"
+	class="pointer-events-none fixed z-100 flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-2.5 {positions[
 		position
 	]} {fromTop ? '' : 'flex-col-reverse'} {className}"
 >
@@ -119,7 +116,7 @@
 			<button
 				type="button"
 				onclick={() => toast.dismiss(item.id)}
-				aria-label={t.current.dismiss}
+				aria-label="Dismiss"
 				class="-m-1 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">

package/dist/styles/sprout/index.d.ts

@@ -5,9 +5,8 @@
  * `@nqmcreative/ui/core`, re-exported below so this one import covers
  * the whole style.
  */
-export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText, anchored, clickOutside, focusTrap, focusable, navigateList, portal, toast, locale, setLocale, provideLocale, useLocale, enUS, idID, LocaleStore, applyTheme, storedTheme, toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from '../../core/index.js';
-export type { Tone, Placement, AnchorOptions, ClickOutsideOptions, FocusTrapOptions, Toast, ToastOptions, ToastAction, Locale, Theme, DateFormat, TableSort, SortDirection, RejectedFile } from '../../core/index.js';
-export { default as LocaleProvider } from './LocaleProvider.svelte';
+export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText, anchored, clickOutside, focusTrap, focusable, navigateList, portal, toast, applyTheme, storedTheme, toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from '../../core/index.js';
+export type { Tone, Placement, AnchorOptions, ClickOutsideOptions, FocusTrapOptions, Toast, ToastOptions, ToastAction, Theme, DateFormat, TableSort, SortDirection, RejectedFile } from '../../core/index.js';
 export { default as Button } from './Button.svelte';
 export type { ButtonVariant, ButtonSize } from './Button.svelte';
 export { default as Link } from './Link.svelte';
@@ -30,6 +29,14 @@ export type { CheckboxOption } from './CheckboxGroup.svelte';
 export { default as SegmentedControl } from './SegmentedControl.svelte';
 export type { SegmentOption, SegmentedSize } from './SegmentedControl.svelte';
 export { default as InputGroup } from './InputGroup.svelte';
+export { default as InputAddon } from './InputAddon.svelte';
+export { default as SearchInput } from './SearchInput.svelte';
+export { default as PinInput } from './PinInput.svelte';
+export { default as TagsInput } from './TagsInput.svelte';
+export { default as CurrencyInput } from './CurrencyInput.svelte';
+export { default as TimeInput } from './TimeInput.svelte';
+export { default as ColorInput } from './ColorInput.svelte';
+export { default as FileInput } from './FileInput.svelte';
 export { default as Combobox } from './Combobox.svelte';
 export type { ComboboxOption } from './Combobox.svelte';
 export { default as MultiSelect } from './MultiSelect.svelte';

package/dist/styles/sprout/index.js

@@ -6,9 +6,7 @@
  * the whole style.
  */
 /* --- shared behaviour --- */
-export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText, anchored, clickOutside, focusTrap, focusable, navigateList, portal, toast, locale, setLocale, provideLocale, useLocale, enUS, idID, LocaleStore, applyTheme, storedTheme, toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from '../../core/index.js';
-/* --- locale --- */
-export { default as LocaleProvider } from './LocaleProvider.svelte';
+export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText, anchored, clickOutside, focusTrap, focusable, navigateList, portal, toast, applyTheme, storedTheme, toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from '../../core/index.js';
 /* --- actions --- */
 export { default as Button } from './Button.svelte';
 export { default as Link } from './Link.svelte';
@@ -26,6 +24,14 @@ export { default as RadioGroup } from './RadioGroup.svelte';
 export { default as CheckboxGroup } from './CheckboxGroup.svelte';
 export { default as SegmentedControl } from './SegmentedControl.svelte';
 export { default as InputGroup } from './InputGroup.svelte';
+export { default as InputAddon } from './InputAddon.svelte';
+export { default as SearchInput } from './SearchInput.svelte';
+export { default as PinInput } from './PinInput.svelte';
+export { default as TagsInput } from './TagsInput.svelte';
+export { default as CurrencyInput } from './CurrencyInput.svelte';
+export { default as TimeInput } from './TimeInput.svelte';
+export { default as ColorInput } from './ColorInput.svelte';
+export { default as FileInput } from './FileInput.svelte';
 export { default as Combobox } from './Combobox.svelte';
 export { default as MultiSelect } from './MultiSelect.svelte';
 export { default as DatePicker } from './DatePicker.svelte';

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@nqmcreative/ui",
-	"version": "0.3.0",
-	"description": "Svelte 5 + Tailwind CSS v4 component library — three styles (matte, paper, sprout), 63 components each, one shared behaviour core. No runtime dependencies.",
+	"version": "0.4.1",
+	"description": "Svelte 5 + Tailwind CSS v4 component library — three styles (matte, paper, sprout), 70 components each, one shared behaviour core. No runtime dependencies.",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && svelte-kit sync && svelte-package && node scripts/strip-dist-tests.mjs && node scripts/generate-index.mjs && node scripts/generate-exports.mjs && node scripts/generate-registry.mjs && node scripts/generate-scoped-css.mjs && node scripts/generate-demos.mjs && publint",
@@ -42,11 +42,6 @@
 			"svelte": "./dist/core/tones.js",
 			"default": "./dist/core/tones.js"
 		},
-		"./core/locale": {
-			"types": "./dist/core/locale.svelte.d.ts",
-			"svelte": "./dist/core/locale.svelte.js",
-			"default": "./dist/core/locale.svelte.js"
-		},
 		"./core/date": {
 			"types": "./dist/core/date.d.ts",
 			"svelte": "./dist/core/date.js",
@@ -91,10 +86,6 @@
 			"types": "./dist/styles/matte/index.d.ts",
 			"svelte": "./dist/styles/matte/index.js"
 		},
-		"./matte/locale-provider": {
-			"types": "./dist/styles/matte/LocaleProvider.svelte.d.ts",
-			"svelte": "./dist/styles/matte/LocaleProvider.svelte"
-		},
 		"./matte/button": {
 			"types": "./dist/styles/matte/Button.svelte.d.ts",
 			"svelte": "./dist/styles/matte/Button.svelte"
@@ -155,6 +146,38 @@
 			"types": "./dist/styles/matte/InputGroup.svelte.d.ts",
 			"svelte": "./dist/styles/matte/InputGroup.svelte"
 		},
+		"./matte/input-addon": {
+			"types": "./dist/styles/matte/InputAddon.svelte.d.ts",
+			"svelte": "./dist/styles/matte/InputAddon.svelte"
+		},
+		"./matte/search-input": {
+			"types": "./dist/styles/matte/SearchInput.svelte.d.ts",
+			"svelte": "./dist/styles/matte/SearchInput.svelte"
+		},
+		"./matte/pin-input": {
+			"types": "./dist/styles/matte/PinInput.svelte.d.ts",
+			"svelte": "./dist/styles/matte/PinInput.svelte"
+		},
+		"./matte/tags-input": {
+			"types": "./dist/styles/matte/TagsInput.svelte.d.ts",
+			"svelte": "./dist/styles/matte/TagsInput.svelte"
+		},
+		"./matte/currency-input": {
+			"types": "./dist/styles/matte/CurrencyInput.svelte.d.ts",
+			"svelte": "./dist/styles/matte/CurrencyInput.svelte"
+		},
+		"./matte/time-input": {
+			"types": "./dist/styles/matte/TimeInput.svelte.d.ts",
+			"svelte": "./dist/styles/matte/TimeInput.svelte"
+		},
+		"./matte/color-input": {
+			"types": "./dist/styles/matte/ColorInput.svelte.d.ts",
+			"svelte": "./dist/styles/matte/ColorInput.svelte"
+		},
+		"./matte/file-input": {
+			"types": "./dist/styles/matte/FileInput.svelte.d.ts",
+			"svelte": "./dist/styles/matte/FileInput.svelte"
+		},
 		"./matte/combobox": {
 			"types": "./dist/styles/matte/Combobox.svelte.d.ts",
 			"svelte": "./dist/styles/matte/Combobox.svelte"
@@ -349,10 +372,6 @@
 			"types": "./dist/styles/paper/index.d.ts",
 			"svelte": "./dist/styles/paper/index.js"
 		},
-		"./paper/locale-provider": {
-			"types": "./dist/styles/paper/LocaleProvider.svelte.d.ts",
-			"svelte": "./dist/styles/paper/LocaleProvider.svelte"
-		},
 		"./paper/button": {
 			"types": "./dist/styles/paper/Button.svelte.d.ts",
 			"svelte": "./dist/styles/paper/Button.svelte"
@@ -413,6 +432,38 @@
 			"types": "./dist/styles/paper/InputGroup.svelte.d.ts",
 			"svelte": "./dist/styles/paper/InputGroup.svelte"
 		},
+		"./paper/input-addon": {
+			"types": "./dist/styles/paper/InputAddon.svelte.d.ts",
+			"svelte": "./dist/styles/paper/InputAddon.svelte"
+		},
+		"./paper/search-input": {
+			"types": "./dist/styles/paper/SearchInput.svelte.d.ts",
+			"svelte": "./dist/styles/paper/SearchInput.svelte"
+		},
+		"./paper/pin-input": {
+			"types": "./dist/styles/paper/PinInput.svelte.d.ts",
+			"svelte": "./dist/styles/paper/PinInput.svelte"
+		},
+		"./paper/tags-input": {
+			"types": "./dist/styles/paper/TagsInput.svelte.d.ts",
+			"svelte": "./dist/styles/paper/TagsInput.svelte"
+		},
+		"./paper/currency-input": {
+			"types": "./dist/styles/paper/CurrencyInput.svelte.d.ts",
+			"svelte": "./dist/styles/paper/CurrencyInput.svelte"
+		},
+		"./paper/time-input": {
+			"types": "./dist/styles/paper/TimeInput.svelte.d.ts",
+			"svelte": "./dist/styles/paper/TimeInput.svelte"
+		},
+		"./paper/color-input": {
+			"types": "./dist/styles/paper/ColorInput.svelte.d.ts",
+			"svelte": "./dist/styles/paper/ColorInput.svelte"
+		},
+		"./paper/file-input": {
+			"types": "./dist/styles/paper/FileInput.svelte.d.ts",
+			"svelte": "./dist/styles/paper/FileInput.svelte"
+		},
 		"./paper/combobox": {
 			"types": "./dist/styles/paper/Combobox.svelte.d.ts",
 			"svelte": "./dist/styles/paper/Combobox.svelte"
@@ -607,10 +658,6 @@
 			"types": "./dist/styles/sprout/index.d.ts",
 			"svelte": "./dist/styles/sprout/index.js"
 		},
-		"./sprout/locale-provider": {
-			"types": "./dist/styles/sprout/LocaleProvider.svelte.d.ts",
-			"svelte": "./dist/styles/sprout/LocaleProvider.svelte"
-		},
 		"./sprout/button": {
 			"types": "./dist/styles/sprout/Button.svelte.d.ts",
 			"svelte": "./dist/styles/sprout/Button.svelte"
@@ -671,6 +718,38 @@
 			"types": "./dist/styles/sprout/InputGroup.svelte.d.ts",
 			"svelte": "./dist/styles/sprout/InputGroup.svelte"
 		},
+		"./sprout/input-addon": {
+			"types": "./dist/styles/sprout/InputAddon.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/InputAddon.svelte"
+		},
+		"./sprout/search-input": {
+			"types": "./dist/styles/sprout/SearchInput.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/SearchInput.svelte"
+		},
+		"./sprout/pin-input": {
+			"types": "./dist/styles/sprout/PinInput.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/PinInput.svelte"
+		},
+		"./sprout/tags-input": {
+			"types": "./dist/styles/sprout/TagsInput.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/TagsInput.svelte"
+		},
+		"./sprout/currency-input": {
+			"types": "./dist/styles/sprout/CurrencyInput.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/CurrencyInput.svelte"
+		},
+		"./sprout/time-input": {
+			"types": "./dist/styles/sprout/TimeInput.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/TimeInput.svelte"
+		},
+		"./sprout/color-input": {
+			"types": "./dist/styles/sprout/ColorInput.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/ColorInput.svelte"
+		},
+		"./sprout/file-input": {
+			"types": "./dist/styles/sprout/FileInput.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/FileInput.svelte"
+		},
 		"./sprout/combobox": {
 			"types": "./dist/styles/sprout/Combobox.svelte.d.ts",
 			"svelte": "./dist/styles/sprout/Combobox.svelte"