@nqmcreative/ui 0.2.3 → 0.4.0

package/registry.json

@@ -1,7 +1,7 @@
 {
 	"name": "@nqmcreative/ui",
 	"homepage": "https://github.com/mukhsamr/nqmcreative-ui",
-	"count": 65,
+	"count": 71,
 	"demoStyle": "matte",
 	"styles": [
 		{
@@ -190,40 +190,6 @@
 			"uses": [],
 			"modules": []
 		},
-		{
-			"name": "PasswordInput",
-			"slug": "password-input",
-			"category": "forms",
-			"description": "Password field with a visibility toggle and a strength meter.",
-			"subpaths": {
-				"matte": "@nqmcreative/ui/matte/password-input",
-				"paper": "@nqmcreative/ui/paper/password-input",
-				"sprout": "@nqmcreative/ui/sprout/password-input"
-			},
-			"uses": [],
-			"modules": [
-				"locale",
-				"password",
-				"tones"
-			]
-		},
-		{
-			"name": "NumberInput",
-			"slug": "number-input",
-			"category": "forms",
-			"description": "Number field with steppers, clamping and decimal handling.",
-			"subpaths": {
-				"matte": "@nqmcreative/ui/matte/number-input",
-				"paper": "@nqmcreative/ui/paper/number-input",
-				"sprout": "@nqmcreative/ui/sprout/number-input"
-			},
-			"uses": [],
-			"modules": [
-				"locale",
-				"number",
-				"tones"
-			]
-		},
 		{
 			"name": "Slider",
 			"slug": "slider",
@@ -302,6 +268,148 @@
 			"uses": [],
 			"modules": []
 		},
+		{
+			"name": "InputAddon",
+			"slug": "input-addon",
+			"category": "forms",
+			"description": "Fixed label joined to an input inside an InputGroup.",
+			"subpaths": {
+				"matte": "@nqmcreative/ui/matte/input-addon",
+				"paper": "@nqmcreative/ui/paper/input-addon",
+				"sprout": "@nqmcreative/ui/sprout/input-addon"
+			},
+			"uses": [
+				"Input"
+			],
+			"modules": []
+		},
+		{
+			"name": "SearchInput",
+			"slug": "search-input",
+			"category": "forms",
+			"description": "Search field with a clear button and a debounced callback.",
+			"subpaths": {
+				"matte": "@nqmcreative/ui/matte/search-input",
+				"paper": "@nqmcreative/ui/paper/search-input",
+				"sprout": "@nqmcreative/ui/sprout/search-input"
+			},
+			"uses": [
+				"Input"
+			],
+			"modules": [
+				"locale",
+				"tones"
+			]
+		},
+		{
+			"name": "PinInput",
+			"slug": "pin-input",
+			"category": "forms",
+			"description": "One box per character, with paste spreading and arrow keys.",
+			"subpaths": {
+				"matte": "@nqmcreative/ui/matte/pin-input",
+				"paper": "@nqmcreative/ui/paper/pin-input",
+				"sprout": "@nqmcreative/ui/sprout/pin-input"
+			},
+			"uses": [],
+			"modules": [
+				"locale",
+				"pin",
+				"tones"
+			]
+		},
+		{
+			"name": "TagsInput",
+			"slug": "tags-input",
+			"category": "forms",
+			"description": "Free-text tokens committed on Enter, deduplicated and capped.",
+			"subpaths": {
+				"matte": "@nqmcreative/ui/matte/tags-input",
+				"paper": "@nqmcreative/ui/paper/tags-input",
+				"sprout": "@nqmcreative/ui/sprout/tags-input"
+			},
+			"uses": [],
+			"modules": [
+				"locale",
+				"tags",
+				"tones"
+			]
+		},
+		{
+			"name": "CurrencyInput",
+			"slug": "currency-input",
+			"category": "forms",
+			"description": "Amount field that groups on blur and binds a number.",
+			"subpaths": {
+				"matte": "@nqmcreative/ui/matte/currency-input",
+				"paper": "@nqmcreative/ui/paper/currency-input",
+				"sprout": "@nqmcreative/ui/sprout/currency-input"
+			},
+			"uses": [
+				"Input"
+			],
+			"modules": [
+				"number",
+				"tones"
+			]
+		},
+		{
+			"name": "TimeInput",
+			"slug": "time-input",
+			"category": "forms",
+			"description": "HH:MM field with steppers, bounds and a minute step.",
+			"subpaths": {
+				"matte": "@nqmcreative/ui/matte/time-input",
+				"paper": "@nqmcreative/ui/paper/time-input",
+				"sprout": "@nqmcreative/ui/sprout/time-input"
+			},
+			"uses": [
+				"Input"
+			],
+			"modules": [
+				"locale",
+				"time",
+				"tones"
+			]
+		},
+		{
+			"name": "ColorInput",
+			"slug": "color-input",
+			"category": "forms",
+			"description": "Hex field paired with the native swatch and fixed choices.",
+			"subpaths": {
+				"matte": "@nqmcreative/ui/matte/color-input",
+				"paper": "@nqmcreative/ui/paper/color-input",
+				"sprout": "@nqmcreative/ui/sprout/color-input"
+			},
+			"uses": [
+				"Input"
+			],
+			"modules": [
+				"color",
+				"locale",
+				"tones"
+			]
+		},
+		{
+			"name": "FileInput",
+			"slug": "file-input",
+			"category": "forms",
+			"description": "One-line file picker with type, size and count validation.",
+			"subpaths": {
+				"matte": "@nqmcreative/ui/matte/file-input",
+				"paper": "@nqmcreative/ui/paper/file-input",
+				"sprout": "@nqmcreative/ui/sprout/file-input"
+			},
+			"uses": [
+				"Input"
+			],
+			"modules": [
+				"files",
+				"locale",
+				"tones"
+			]
+		},
 		{
 			"name": "Combobox",
 			"slug": "combobox",

package/dist/styles/matte/NumberInput.svelte

@@ -1,96 +0,0 @@
-<script lang="ts">
-	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { toneFocusWithinBorder, type Tone } from '../../core/tones.js';
-	import { useLocale } from '../../core/locale.svelte.js';
-	import { clampToStep } from '../../core/number.js';
-
-	interface Props extends Omit<HTMLInputAttributes, 'size' | 'type' | 'value' | 'min' | 'max'> {
-		value?: number;
-		min?: number;
-		max?: number;
-		step?: number;
-		tone?: Tone;
-		invalid?: boolean;
-		/** Short unit rendered inside the field, e.g. `'px'` or `'%'`. */
-		unit?: string;
-	}
-
-	let {
-		value = $bindable(0),
-		min = -Infinity,
-		max = Infinity,
-		step = 1,
-		tone = 'brand',
-		invalid = false,
-		unit,
-		disabled = false,
-		class: className = '',
-		...rest
-	}: Props = $props();
-
-	const t = useLocale();
-
-	const clamp = (next: number) => clampToStep(next, min, max, step);
-
-	function nudge(direction: 1 | -1) {
-		value = clamp(value + direction * step);
-	}
-
-	function onKeydown(event: KeyboardEvent) {
-		if (event.key === 'ArrowUp') {
-			event.preventDefault();
-			nudge(1);
-		} else if (event.key === 'ArrowDown') {
-			event.preventDefault();
-			nudge(-1);
-		}
-	}
-
-	const stepper =
-		'flex size-8 shrink-0 items-center justify-center text-text-secondary transition-colors duration-150 hover:bg-bg-inset hover:text-text disabled:pointer-events-none disabled:opacity-30 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current';
-</script>
-
-<span
-	class="inline-flex w-full items-center border bg-bg pr-1 pl-3.5 transition-colors duration-150 ease-brand-out
-		{invalid ? 'border-danger' : `border-hairline ${toneFocusWithinBorder[tone]}`}
-		{disabled ? 'pointer-events-none opacity-50' : ''} {className}"
->
-	<input
-		type="number"
-		{min}
-		{max}
-		{step}
-		{disabled}
-		{value}
-		oninput={(event) => (value = clamp(event.currentTarget.valueAsNumber))}
-		onkeydown={onKeydown}
-		aria-invalid={invalid ? 'true' : undefined}
-		class="h-10 w-full min-w-0 [appearance:textfield] bg-transparent font-sans text-[15px] text-text tabular-nums placeholder:text-text-muted focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-		{...rest}
-	/>
-	{#if unit}
-		<span class="shrink-0 px-2 font-mono text-xs text-text-muted">{unit}</span>
-	{/if}
-	<button
-		type="button"
-		class={stepper}
-		onclick={() => nudge(-1)}
-		disabled={disabled || value <= min}
-		aria-label={t.current.decrease}
-	>
-		<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
-			<path d="M2.5 7h9" stroke="currentColor" stroke-width="1.5" />
-		</svg>
-	</button>
-	<button
-		type="button"
-		class={stepper}
-		onclick={() => nudge(1)}
-		disabled={disabled || value >= max}
-		aria-label={t.current.increase}
-	>
-		<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
-			<path d="M7 2.5v9M2.5 7h9" stroke="currentColor" stroke-width="1.5" />
-		</svg>
-	</button>
-</span>

package/dist/styles/matte/NumberInput.svelte.d.ts

@@ -1,15 +0,0 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
-import { type Tone } from '../../core/tones.js';
-interface Props extends Omit<HTMLInputAttributes, 'size' | 'type' | 'value' | 'min' | 'max'> {
-    value?: number;
-    min?: number;
-    max?: number;
-    step?: number;
-    tone?: Tone;
-    invalid?: boolean;
-    /** Short unit rendered inside the field, e.g. `'px'` or `'%'`. */
-    unit?: string;
-}
-declare const NumberInput: import("svelte").Component<Props, {}, "value">;
-type NumberInput = ReturnType<typeof NumberInput>;
-export default NumberInput;

package/dist/styles/matte/PasswordInput.svelte

@@ -1,95 +0,0 @@
-<script lang="ts">
-	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { toneFocusWithinBorder, type Tone } from '../../core/tones.js';
-	import { useLocale } from '../../core/locale.svelte.js';
-	import { passwordScore } from '../../core/password.js';
-
-	interface Props extends Omit<HTMLInputAttributes, 'size' | 'type'> {
-		value?: string;
-		tone?: Tone;
-		invalid?: boolean;
-		/** Draws a four-segment strength meter under the field. */
-		strength?: boolean;
-	}
-
-	let {
-		value = $bindable(''),
-		tone = 'brand',
-		invalid = false,
-		strength = false,
-		disabled = false,
-		class: className = '',
-		...rest
-	}: Props = $props();
-
-	const t = useLocale();
-
-	let visible = $state(false);
-
-	const score = $derived(passwordScore(value));
-
-	const bars = ['bg-danger', 'bg-danger', 'bg-warning', 'bg-info', 'bg-success'];
-	const texts = ['text-danger', 'text-danger', 'text-warning', 'text-info', 'text-success'];
-</script>
-
-<div class="flex w-full flex-col gap-2">
-	<span
-		class="inline-flex w-full items-center gap-2 border bg-bg pr-2 pl-3.5 transition-colors duration-150 ease-brand-out
-			{invalid ? 'border-danger' : `border-hairline ${toneFocusWithinBorder[tone]}`}
-			{disabled ? 'pointer-events-none opacity-50' : ''} {className}"
-	>
-		<input
-			bind:value
-			{disabled}
-			type={visible ? 'text' : 'password'}
-			aria-invalid={invalid ? 'true' : undefined}
-			class="h-10 w-full min-w-0 bg-transparent font-sans text-[15px] text-text placeholder:text-text-muted focus:outline-none"
-			{...rest}
-		/>
-		<button
-			type="button"
-			onclick={() => (visible = !visible)}
-			aria-label={visible ? t.current.hidePassword : t.current.showPassword}
-			aria-pressed={visible}
-			class="shrink-0 p-2 text-text-muted transition-colors duration-150 hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
-		>
-			{#if visible}
-				<svg class="size-4" viewBox="0 0 20 20" fill="none" aria-hidden="true">
-					<path
-						d="M2.5 10S5.5 4.5 10 4.5 17.5 10 17.5 10 14.5 15.5 10 15.5 2.5 10 2.5 10Z"
-						stroke="currentColor"
-						stroke-width="1.4"
-					/>
-					<circle cx="10" cy="10" r="2.4" stroke="currentColor" stroke-width="1.4" />
-					<path d="m3.5 16.5 13-13" stroke="currentColor" stroke-width="1.4" />
-				</svg>
-			{:else}
-				<svg class="size-4" viewBox="0 0 20 20" fill="none" aria-hidden="true">
-					<path
-						d="M2.5 10S5.5 4.5 10 4.5 17.5 10 17.5 10 14.5 15.5 10 15.5 2.5 10 2.5 10Z"
-						stroke="currentColor"
-						stroke-width="1.4"
-					/>
-					<circle cx="10" cy="10" r="2.4" stroke="currentColor" stroke-width="1.4" />
-				</svg>
-			{/if}
-		</button>
-	</span>
-
-	{#if strength}
-		<div class="flex items-center gap-3">
-			<div class="flex flex-1 gap-1" aria-hidden="true">
-				{#each [0, 1, 2, 3] as segment (segment)}
-					<span
-						class="h-1 flex-1 transition-colors duration-200 {segment < score
-							? bars[score]
-							: 'bg-bg-inset'}"
-					></span>
-				{/each}
-			</div>
-			<span class="font-mono text-xs {value ? texts[score] : 'text-text-muted'}">
-				{value ? t.current.passwordStrength[score] : '—'}
-			</span>
-		</div>
-	{/if}
-</div>

package/dist/styles/matte/PasswordInput.svelte.d.ts

@@ -1,12 +0,0 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
-import { type Tone } from '../../core/tones.js';
-interface Props extends Omit<HTMLInputAttributes, 'size' | 'type'> {
-    value?: string;
-    tone?: Tone;
-    invalid?: boolean;
-    /** Draws a four-segment strength meter under the field. */
-    strength?: boolean;
-}
-declare const PasswordInput: import("svelte").Component<Props, {}, "value">;
-type PasswordInput = ReturnType<typeof PasswordInput>;
-export default PasswordInput;

package/dist/styles/paper/NumberInput.svelte

@@ -1,96 +0,0 @@
-<script lang="ts">
-	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { toneFocusWithinBorder, type Tone } from '../../core/tones.js';
-	import { useLocale } from '../../core/locale.svelte.js';
-	import { clampToStep } from '../../core/number.js';
-
-	interface Props extends Omit<HTMLInputAttributes, 'size' | 'type' | 'value' | 'min' | 'max'> {
-		value?: number;
-		min?: number;
-		max?: number;
-		step?: number;
-		tone?: Tone;
-		invalid?: boolean;
-		/** Short unit rendered inside the field, e.g. `'px'` or `'%'`. */
-		unit?: string;
-	}
-
-	let {
-		value = $bindable(0),
-		min = -Infinity,
-		max = Infinity,
-		step = 1,
-		tone = 'brand',
-		invalid = false,
-		unit,
-		disabled = false,
-		class: className = '',
-		...rest
-	}: Props = $props();
-
-	const t = useLocale();
-
-	const clamp = (next: number) => clampToStep(next, min, max, step);
-
-	function nudge(direction: 1 | -1) {
-		value = clamp(value + direction * step);
-	}
-
-	function onKeydown(event: KeyboardEvent) {
-		if (event.key === 'ArrowUp') {
-			event.preventDefault();
-			nudge(1);
-		} else if (event.key === 'ArrowDown') {
-			event.preventDefault();
-			nudge(-1);
-		}
-	}
-
-	const stepper =
-		'flex size-7 shrink-0 items-center justify-center rounded text-text-secondary transition-colors duration-150 hover:bg-bg-inset hover:text-text disabled:pointer-events-none disabled:opacity-30 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current';
-</script>
-
-<span
-	class="inline-flex w-full items-center rounded-md border bg-bg pr-1 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
-		type="number"
-		{min}
-		{max}
-		{step}
-		{disabled}
-		{value}
-		oninput={(event) => (value = clamp(event.currentTarget.valueAsNumber))}
-		onkeydown={onKeydown}
-		aria-invalid={invalid ? 'true' : undefined}
-		class="h-10 w-full min-w-0 [appearance:textfield] bg-transparent font-sans text-sm text-text tabular-nums placeholder:text-text-muted focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-		{...rest}
-	/>
-	{#if unit}
-		<span class="shrink-0 px-1.5 text-xs text-text-muted">{unit}</span>
-	{/if}
-	<button
-		type="button"
-		class={stepper}
-		onclick={() => nudge(-1)}
-		disabled={disabled || value <= min}
-		aria-label={t.current.decrease}
-	>
-		<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
-			<path d="M2.5 7h9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
-		</svg>
-	</button>
-	<button
-		type="button"
-		class={stepper}
-		onclick={() => nudge(1)}
-		disabled={disabled || value >= max}
-		aria-label={t.current.increase}
-	>
-		<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
-			<path d="M7 2.5v9M2.5 7h9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
-		</svg>
-	</button>
-</span>

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

@@ -1,15 +0,0 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
-import { type Tone } from '../../core/tones.js';
-interface Props extends Omit<HTMLInputAttributes, 'size' | 'type' | 'value' | 'min' | 'max'> {
-    value?: number;
-    min?: number;
-    max?: number;
-    step?: number;
-    tone?: Tone;
-    invalid?: boolean;
-    /** Short unit rendered inside the field, e.g. `'px'` or `'%'`. */
-    unit?: string;
-}
-declare const NumberInput: import("svelte").Component<Props, {}, "value">;
-type NumberInput = ReturnType<typeof NumberInput>;
-export default NumberInput;

package/dist/styles/paper/PasswordInput.svelte

@@ -1,100 +0,0 @@
-<script lang="ts">
-	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { toneFocusWithinBorder, type Tone } from '../../core/tones.js';
-	import { useLocale } from '../../core/locale.svelte.js';
-	import { passwordScore } from '../../core/password.js';
-
-	interface Props extends Omit<HTMLInputAttributes, 'size' | 'type'> {
-		value?: string;
-		tone?: Tone;
-		invalid?: boolean;
-		/** Draws a four-segment strength meter under the field. */
-		strength?: boolean;
-	}
-
-	let {
-		value = $bindable(''),
-		tone = 'brand',
-		invalid = false,
-		strength = false,
-		disabled = false,
-		class: className = '',
-		...rest
-	}: Props = $props();
-
-	const t = useLocale();
-
-	let visible = $state(false);
-
-	const score = $derived(passwordScore(value));
-
-	const bars = ['bg-danger', 'bg-danger', 'bg-warning', 'bg-info', 'bg-success'];
-	const texts = ['text-danger', 'text-danger', 'text-warning', 'text-info', 'text-success'];
-</script>
-
-<div class="flex w-full flex-col gap-2">
-	<span
-		class="inline-flex w-full items-center gap-2 rounded-md border bg-bg pr-1 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:value
-			{disabled}
-			type={visible ? 'text' : 'password'}
-			aria-invalid={invalid ? 'true' : undefined}
-			class="h-10 w-full min-w-0 bg-transparent font-sans text-sm text-text placeholder:text-text-muted focus:outline-none"
-			{...rest}
-		/>
-		<button
-			type="button"
-			onclick={() => (visible = !visible)}
-			aria-label={visible ? t.current.hidePassword : t.current.showPassword}
-			aria-pressed={visible}
-			class="shrink-0 rounded p-1.5 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"
-		>
-			{#if visible}
-				<svg class="size-4" viewBox="0 0 20 20" fill="none" aria-hidden="true">
-					<path
-						d="M2.5 10S5.5 4.5 10 4.5 17.5 10 17.5 10 14.5 15.5 10 15.5 2.5 10 2.5 10Z"
-						stroke="currentColor"
-						stroke-width="1.4"
-					/>
-					<circle cx="10" cy="10" r="2.4" stroke="currentColor" stroke-width="1.4" />
-					<path
-						d="m3.5 16.5 13-13"
-						stroke="currentColor"
-						stroke-width="1.4"
-						stroke-linecap="round"
-					/>
-				</svg>
-			{:else}
-				<svg class="size-4" viewBox="0 0 20 20" fill="none" aria-hidden="true">
-					<path
-						d="M2.5 10S5.5 4.5 10 4.5 17.5 10 17.5 10 14.5 15.5 10 15.5 2.5 10 2.5 10Z"
-						stroke="currentColor"
-						stroke-width="1.4"
-					/>
-					<circle cx="10" cy="10" r="2.4" stroke="currentColor" stroke-width="1.4" />
-				</svg>
-			{/if}
-		</button>
-	</span>
-
-	{#if strength}
-		<div class="flex items-center gap-3">
-			<div class="flex flex-1 gap-1" aria-hidden="true">
-				{#each [0, 1, 2, 3] as segment (segment)}
-					<span
-						class="h-1 flex-1 rounded-full transition-colors duration-200 {segment < score
-							? bars[score]
-							: 'bg-bg-inset'}"
-					></span>
-				{/each}
-			</div>
-			<span class="text-xs font-medium {value ? texts[score] : 'text-text-muted'}">
-				{value ? t.current.passwordStrength[score] : '—'}
-			</span>
-		</div>
-	{/if}
-</div>

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

@@ -1,12 +0,0 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
-import { type Tone } from '../../core/tones.js';
-interface Props extends Omit<HTMLInputAttributes, 'size' | 'type'> {
-    value?: string;
-    tone?: Tone;
-    invalid?: boolean;
-    /** Draws a four-segment strength meter under the field. */
-    strength?: boolean;
-}
-declare const PasswordInput: import("svelte").Component<Props, {}, "value">;
-type PasswordInput = ReturnType<typeof PasswordInput>;
-export default PasswordInput;