@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.44

package/dist/components/input/input-number-control.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom } from '../atom';
+	import { InputBond } from './bond.svelte';
+	import type { InputNumberControlProps } from './types';
+
+	const bond = InputBond.get();
+
+	let {
+		class: klass = '',
+		number = $bindable(),
+		min = undefined,
+		max = undefined,
+		step = 1,
+		showControls = true,
+		disabled = false,
+		placeholder = undefined,
+		preset = 'input.number',
+		decrementContent = undefined,
+		incrementContent = undefined,
+		onchange = undefined,
+		...restProps
+	}: InputNumberControlProps & HTMLAttributes<HTMLDivElement> = $props();
+
+	const numberValue = $derived(number ?? 0);
+
+	const canDecrement = $derived(!disabled && (min === undefined || numberValue - step >= min));
+	const canIncrement = $derived(!disabled && (max === undefined || numberValue + step <= max));
+
+	const decrementSnippet = $derived(showControls ? (decrementContent ?? defaultDecrement) : undefined);
+	const incrementSnippet = $derived(showControls ? (incrementContent ?? defaultIncrement) : undefined);
+	
+	function decrement() {
+		if (!canDecrement) return;
+		number = parseFloat((number - step).toPrecision(10));
+		onchange?.(undefined, { number });
+		bond?.state?.props && (bond.state.props.value = number);
+	}
+
+	function increment() {
+		if (!canIncrement) return;
+		number = parseFloat((number + step).toPrecision(10));
+		onchange?.(undefined, { number });
+		bond?.state?.props && (bond.state.props.value = number);
+	}
+
+	function handleInput(ev: Event) {
+		const input = ev.target as HTMLInputElement;
+		const parsed = parseFloat(input.value);
+		if (!isNaN(parsed)) {
+			number = parsed;
+			onchange?.(ev, { number });
+			bond?.state?.props && (bond.state.props.value = number);
+		}
+	}
+</script>
+
+<!-- ─── Default part snippets ──────────────────────────────────────────── -->
+
+{#snippet defaultDecrement({ decrement: dec, disabled: dis }: { decrement: () => void; disabled: boolean })}
+	<button
+		type="button"
+		onclick={dec}
+		disabled={dis}
+		aria-label="Decrement"
+		class="input-number-decrement text-foreground hover:bg-muted disabled:text-muted-foreground flex h-full w-8 shrink-0 cursor-pointer items-center justify-center transition-colors disabled:cursor-not-allowed"
+	>
+		<svg viewBox="0 0 16 16" fill="none" class="h-3 w-3" aria-hidden="true">
+			<path d="M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+		</svg>
+	</button>
+{/snippet}
+
+{#snippet defaultIncrement({ increment: inc, disabled: dis }: { increment: () => void; disabled: boolean })}
+	<button
+		type="button"
+		onclick={inc}
+		disabled={dis}
+		aria-label="Increment"
+		class="input-number-increment text-foreground hover:bg-muted disabled:text-muted-foreground flex h-full w-8 shrink-0 cursor-pointer items-center justify-center transition-colors disabled:cursor-not-allowed"
+	>
+		<svg viewBox="0 0 16 16" fill="none" class="h-3 w-3" aria-hidden="true">
+			<path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+		</svg>
+	</button>
+{/snippet}
+
+<!-- ─── Render ────────────────────────────────────────────────────────── -->
+
+<HtmlAtom
+	{preset}
+	as="div"
+	class={['input-number-root flex h-full w-full items-center', '$preset', klass]}
+	{...restProps}
+>
+	{@render decrementSnippet?.({ decrement, disabled: !canDecrement })}
+
+	<input
+		type="number"
+		bind:value={number}
+		{min}
+		{max}
+		{step}
+		{disabled}
+		{placeholder}
+		oninput={handleInput}
+		class="input-number-field text-foreground placeholder:text-muted-foreground h-full w-full flex-1 bg-transparent text-center text-sm outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+		aria-valuemin={min}
+		aria-valuemax={max}
+		aria-valuenow={number}
+	/>
+
+	{@render incrementSnippet?.({ increment, disabled: !canIncrement })}
+</HtmlAtom>

package/dist/components/input/input-number-control.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { InputNumberControlProps } from './types';
+type $$ComponentProps = InputNumberControlProps & HTMLAttributes<HTMLDivElement>;
+declare const InputNumberControl: import("svelte").Component<$$ComponentProps, {}, "number">;
+type InputNumberControl = ReturnType<typeof InputNumberControl>;
+export default InputNumberControl;

package/dist/components/input/input-otp-control.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+	import { getPreset } from '../../context';
+	import { resolvePreset } from '../atom';
+	import { cn, toClassValue } from '../../utils';
+	import type { PresetModuleName } from '../../context/preset.svelte';
+	import { untrack } from 'svelte';
+	import { InputBond } from './bond.svelte';
+	import type { InputOtpControlProps } from './types';
+
+	const bond = InputBond.get();
+
+	let {
+		class: klass = '',
+		value = $bindable(),
+		length = 6,
+		type = 'numeric',
+		groupSize = undefined,
+		placeholder = '·',
+		disabled = false,
+		readonly = false,
+		preset: presetKey = 'input.otp',
+		onchange = undefined,
+		oninput = undefined,
+		oncomplete = undefined,
+		...restProps
+	}: InputOtpControlProps = $props();
+
+	const preset = resolvePreset(getPreset(untrack(() => presetKey) as PresetModuleName)?.apply(bond, [bond]));
+
+	// ── Slot refs ──────────────────────────────────────────────────────────
+	let slotEls = $state<Array<HTMLInputElement | undefined>>([]);
+
+	// ── Derived slots ─────────────────────────────────────────────────────
+	const slots  = $derived(Array.from({ length }, (_, i) => value?.[i] ?? ''));
+	const isFull = $derived(slots.every(s => s !== ''));
+
+	// ── Track previous full state so oncomplete only fires once per fill ──
+	let wasFull = $state(false);
+
+	// ── Input validation per type ─────────────────────────────────────────
+	function isValidChar(char: string): boolean {
+		if (type === 'numeric')     return /^\d$/.test(char);
+		if (type === 'alpha')       return /^[a-zA-Z]$/.test(char);
+		return /^[a-zA-Z0-9]$/.test(char); // alphanumeric
+	}
+
+	function normalizeChar(char: string): string {
+		return type !== 'numeric' ? char.toUpperCase() : char;
+	}
+
+	// ── Commit value ──────────────────────────────────────────────────────
+	function commit(arr: string[]) {
+		value = arr.join('');
+		if (bond) bond.state.props.value = value;
+	}
+
+	function getArr(): string[] {
+		return Array.from({ length }, (_, i) => value[i] ?? '');
+	}
+
+	// ── Focus helpers ─────────────────────────────────────────────────────
+	function focusSlot(index: number) {
+		slotEls[Math.max(0, Math.min(length - 1, index))]?.focus();
+	}
+
+	// ── Emit ──────────────────────────────────────────────────────────────
+	function emit(ev: Event) {
+		const detail = { value };
+		oninput?.(ev, detail);
+		if (isFull) {
+			onchange?.(ev, detail);
+			if (!wasFull) {
+				oncomplete?.(value);
+			}
+		}
+		wasFull = isFull;
+	}
+
+	// ── Keydown ───────────────────────────────────────────────────────────
+	function handleKeydown(ev: KeyboardEvent, index: number) {
+		if (disabled || readonly) return;
+
+		const { key } = ev;
+
+		if (key === 'Backspace') {
+			ev.preventDefault();
+			const arr = getArr();
+			if (arr[index]) {
+				// Clear current slot
+				arr[index] = '';
+				commit(arr);
+			} else if (index > 0) {
+				// Already empty — clear previous and move back
+				arr[index - 1] = '';
+				commit(arr);
+				focusSlot(index - 1);
+			}
+			emit(ev);
+			return;
+		}
+
+		if (key === 'Delete') {
+			ev.preventDefault();
+			const arr = getArr();
+			arr[index] = '';
+			commit(arr);
+			emit(ev);
+			return;
+		}
+
+		if (key === 'ArrowLeft')  { ev.preventDefault(); focusSlot(index - 1);     return; }
+		if (key === 'ArrowRight') { ev.preventDefault(); focusSlot(index + 1);     return; }
+		if (key === 'Home')       { ev.preventDefault(); focusSlot(0);             return; }
+		if (key === 'End')        { ev.preventDefault(); focusSlot(length - 1);    return; }
+
+		// Printable character
+		if (key.length === 1 && !ev.ctrlKey && !ev.metaKey && !ev.altKey) {
+			ev.preventDefault();
+			if (!isValidChar(key)) return;
+			const arr = getArr();
+			arr[index] = normalizeChar(key);
+			commit(arr);
+			emit(ev);
+			if (index < length - 1) focusSlot(index + 1);
+		}
+	}
+
+	// ── Paste ─────────────────────────────────────────────────────────────
+	function handlePaste(ev: ClipboardEvent, fromIndex: number) {
+		ev.preventDefault();
+		const pasted = ev.clipboardData?.getData('text') ?? '';
+		const chars = pasted
+			.split('')
+			.filter(isValidChar)
+			.map(normalizeChar)
+			.slice(0, length - fromIndex);
+
+		if (!chars.length) return;
+
+		const arr = getArr();
+		chars.forEach((c, i) => { arr[fromIndex + i] = c; });
+		commit(arr);
+		focusSlot(Math.min(length - 1, fromIndex + chars.length));
+		emit(ev);
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span
+	role="group"
+	aria-label="One-time password"
+	class={cn(
+		'inline-flex items-center gap-1',
+		bond && 'h-full py-1 px-1',
+		disabled && 'cursor-not-allowed opacity-50',
+		preset?.class,
+		toClassValue(klass, bond)
+	)}
+	{...restProps}
+>
+	{#each slots as slotVal, i (i)}
+		{#if groupSize !== undefined && i > 0 && i % groupSize === 0}
+			{#if bond}
+				<span class="bg-border h-5 w-px shrink-0 select-none"></span>
+			{:else}
+				<span class="text-muted-foreground select-none px-0.5">—</span>
+			{/if}
+		{/if}
+
+		<!-- Sizing wrapper — aspect-ratio doesn't apply to <input> elements -->
+		<div class={cn('shrink-0', bond ? 'h-full flex-1' : 'h-10 w-7')}>
+			<input
+				bind:this={slotEls[i]}
+				type="text"
+				inputmode={type === 'numeric' ? 'numeric' : 'text'}
+				maxlength={1}
+				value={slotVal}
+				{disabled}
+				{readonly}
+				autocomplete={i === 0 ? 'one-time-code' : 'off'}
+				aria-label={`Digit ${i + 1} of ${length}`}
+				aria-disabled={disabled}
+				data-filled={slotVal !== ''}
+				class={cn(
+					'h-full w-full text-center font-mono text-sm font-medium tabular-nums',
+					'caret-transparent select-none outline-none',
+					'text-foreground transition-colors duration-150 rounded-md',
+					!bond && 'border border-border bg-input',
+					'focus:bg-foreground/5',
+					!bond && 'focus:border-foreground/40 focus:ring-2 focus:ring-foreground/20',
+					// bond && i > 0 && !(groupSize !== undefined && i % groupSize === 0) && 'border-l border-border rounded-none',
+					disabled && 'cursor-not-allowed',
+					readonly && 'cursor-default',
+				)}
+				placeholder={slotVal === '' ? placeholder : ''}
+				onkeydown={(ev) => handleKeydown(ev, i)}
+				onpaste={(ev) => handlePaste(ev, i)}
+				onclick={() => slotEls[i]?.select()}
+				oninput={(ev) => {
+					// All input handled via keydown — suppress native input
+					(ev.currentTarget as HTMLInputElement).value = slotVal;
+				}}
+			/>
+		</div>
+	{/each}
+</span>

package/dist/components/input/input-otp-control.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { InputOtpControlProps } from './types';
+declare const InputOtpControl: import("svelte").Component<InputOtpControlProps, {}, "value">;
+type InputOtpControl = ReturnType<typeof InputOtpControl>;
+export default InputOtpControl;

package/dist/components/input/input-password-control.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { getPreset } from '../../context';
+	import { resolvePreset } from '../atom';
+	import { cn, toClassValue } from '../../utils';
+	import type { PresetModuleName } from '../../context/preset.svelte';
+	import { InputBond } from './bond.svelte';
+	import type { InputPasswordControlProps } from './types';
+	import { untrack } from 'svelte';
+
+	const bond = InputBond.get();
+
+	let {
+		value = $bindable(),
+		visible = $bindable(false),
+		class: klass = '',
+		placeholder = '',
+		disabled = false,
+		readonly = false,
+		toggleContent = undefined,
+		preset: presetKey = 'input.password',
+		onchange = undefined,
+		oninput = undefined,
+		...restProps
+	}: InputPasswordControlProps = $props();
+
+	const preset = resolvePreset(getPreset(untrack(() => presetKey) as PresetModuleName)?.apply(bond, [bond]));
+
+	function handleChange(ev: Event) {
+		onchange?.(ev, { value });
+	}
+
+	function handleInput(ev: Event) {
+		const input = ev.currentTarget as HTMLInputElement;
+		value = input.value;
+		if (bond) bond.state.props.value = value;
+		oninput?.(ev, { value });
+	}
+
+	function toggle() {
+		visible = !visible;
+	}
+</script>
+
+{#snippet defaultToggle(opts: { visible: boolean; toggle: () => void; disabled: boolean })}
+	<button
+		type="button"
+		onclick={opts.toggle}
+		disabled={opts.disabled}
+		aria-label={opts.visible ? 'Hide password' : 'Show password'}
+		class="input-password-toggle text-muted-foreground hover:text-foreground disabled:text-muted-foreground/50 flex h-full w-8 shrink-0 cursor-pointer items-center justify-center transition-colors disabled:cursor-not-allowed"
+	>
+		{#if opts.visible}
+			<!-- Eye-off icon -->
+			<svg viewBox="0 0 16 16" fill="none" class="h-4 w-4" aria-hidden="true">
+				<path d="M2 2l12 12M6.5 6.6A2 2 0 0 0 9.4 9.5M4.2 4.3C2.8 5.3 1.7 6.5 1 8c1.3 2.7 4 4.5 7 4.5 1.2 0 2.3-.3 3.3-.8M7 3.6C7.3 3.5 7.7 3.5 8 3.5c3 0 5.7 1.8 7 4.5a9.6 9.6 0 0 1-1.7 2.4"
+					stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+			</svg>
+		{:else}
+			<!-- Eye icon -->
+			<svg viewBox="0 0 16 16" fill="none" class="h-4 w-4" aria-hidden="true">
+				<path d="M1 8C2.3 5.3 5 3.5 8 3.5s5.7 1.8 7 4.5c-1.3 2.7-4 4.5-7 4.5S2.3 10.7 1 8Z"
+					stroke="currentColor" stroke-width="1.3"/>
+				<circle cx="8" cy="8" r="2" stroke="currentColor" stroke-width="1.3"/>
+			</svg>
+		{/if}
+	</button>
+{/snippet}
+
+<input
+	bind:value={
+		() => value,
+		(v) => {
+			value = v;
+			if (bond) bond.state.props.value = v;
+		}
+	}
+	type={visible ? 'text' : 'password'}
+	{placeholder}
+	{disabled}
+	{readonly}
+	class={cn(
+		'text-foreground placeholder:text-muted-foreground h-full w-full flex-1 bg-transparent px-2 leading-1 outline-none',
+		preset?.class,
+		toClassValue(klass, bond)
+	)}
+	onchange={handleChange}
+	oninput={handleInput}
+	{...restProps}
+/>
+
+{@render (toggleContent ?? defaultToggle)({ visible, toggle, disabled })}

package/dist/components/input/input-password-control.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const InputPasswordControl: import("svelte").Component<InputPasswordControlProps, {}, "value" | "visible">;
+type InputPasswordControl = ReturnType<typeof InputPasswordControl>;
+export default InputPasswordControl;