compote-ui 0.86.1 → 0.87.0

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

@@ -5,6 +5,11 @@
 	import { PhCaretDown, PhCaretUp } from '../../icons';
 	import { useLocaleContext } from '@ark-ui/svelte/locale';
 	import { toNumberInputValue } from '../../utils/number-input-value';
+	import {
+		getWheelDirection,
+		getWheelNextValue,
+		getWheelStep
+	} from '../../utils/number-input-wheel';
 
 	let {
 		value = $bindable(),
@@ -21,6 +26,39 @@
 			? 'flex items-center justify-between gap-1.5 w-full data-disabled:opacity-50 data-disabled:grayscale'
 			: 'flex flex-col gap-1.5 w-full max-w-48 data-disabled:opacity-50 data-disabled:grayscale'
 	);
+
+	type NumberInputApi = { setValue: (n: number) => void; valueAsNumber: number };
+
+	// Shift+wheel steps by `largeStep`, Alt+wheel by `smallStep` (same modifiers as the arrow
+	// keys). Capture phase + stopImmediatePropagation keeps Zag's plain-step wheel handler from also
+	// firing. Zag only listens while the input is focused, so we do the same.
+	function modifierWheel(api: () => NumberInputApi) {
+		return (node: HTMLElement) => {
+			function onWheel(event: WheelEvent) {
+				if (restProps.disabled || readonly) return;
+				const input = node.querySelector('input');
+				if (!input || document.activeElement !== input) return;
+				const stepSize = getWheelStep(event, restProps);
+				if (stepSize === null) return;
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				const direction = getWheelDirection(event);
+				if (direction === 0) return;
+				api().setValue(
+					getWheelNextValue({
+						current: api().valueAsNumber,
+						direction,
+						stepSize,
+						min: restProps.min,
+						max: restProps.max,
+						allowOverflow: restProps.allowOverflow
+					})
+				);
+			}
+			node.addEventListener('wheel', onWheel, { capture: true, passive: false });
+			return () => node.removeEventListener('wheel', onWheel, { capture: true });
+		};
+	}
 </script>
 
 <input type="hidden" {name} value={Number.isNaN(value) ? undefined : value?.toString()} />
@@ -47,23 +85,27 @@
 			<Field.RequiredIndicator />
 		</NumberInput.Label>
 	{/if}
-	<NumberInput.Control class="relative isolate">
-		<NumberInput.Input
-			class="h-9 w-full max-w-48 rounded-md border bg-surface-1 px-3 pr-8 text-right text-sm font-medium tabular-nums shadow-sm focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none data-invalid:border-danger data-invalid:focus-visible:ring-danger"
-		/>
-		<div
-			class="absolute top-px right-px bottom-px z-10 flex w-6 flex-col overflow-hidden rounded-r border-l"
-		>
-			<NumberInput.IncrementTrigger
-				class="inline-flex flex-1 cursor-pointer items-center justify-center border-none text-ink-dim hover:bg-surface-2 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary active:bg-surface-2 disabled:cursor-not-allowed disabled:text-ink-dim"
-			>
-				<PhCaretUp class="h-4 w-4 shrink-0" />
-			</NumberInput.IncrementTrigger>
-			<NumberInput.DecrementTrigger
-				class="inline-flex flex-1 cursor-pointer items-center justify-center border-t text-ink-dim hover:bg-surface-2 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary active:bg-surface-2 disabled:cursor-not-allowed disabled:text-ink-dim"
-			>
-				<PhCaretDown class="h-4 w-4 shrink-0" />
-			</NumberInput.DecrementTrigger>
-		</div>
-	</NumberInput.Control>
+	<NumberInput.Context>
+		{#snippet render(api)}
+			<NumberInput.Control class="relative isolate" {@attach modifierWheel(api)}>
+				<NumberInput.Input
+					class="h-9 w-full max-w-48 rounded-md border bg-surface-1 px-3 pr-8 text-right text-sm font-medium tabular-nums shadow-sm focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none data-invalid:border-danger data-invalid:focus-visible:ring-danger"
+				/>
+				<div
+					class="absolute top-px right-px bottom-px z-10 flex w-6 flex-col overflow-hidden rounded-r border-l"
+				>
+					<NumberInput.IncrementTrigger
+						class="inline-flex flex-1 cursor-pointer items-center justify-center border-none text-ink-dim hover:bg-surface-2 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary active:bg-surface-2 disabled:cursor-not-allowed disabled:text-ink-dim"
+					>
+						<PhCaretUp class="h-4 w-4 shrink-0" />
+					</NumberInput.IncrementTrigger>
+					<NumberInput.DecrementTrigger
+						class="inline-flex flex-1 cursor-pointer items-center justify-center border-t text-ink-dim hover:bg-surface-2 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary active:bg-surface-2 disabled:cursor-not-allowed disabled:text-ink-dim"
+					>
+						<PhCaretDown class="h-4 w-4 shrink-0" />
+					</NumberInput.DecrementTrigger>
+				</div>
+			</NumberInput.Control>
+		{/snippet}
+	</NumberInput.Context>
 </NumberInput.Root>

package/dist/utils/number-input-wheel.d.ts

@@ -0,0 +1,32 @@
+export interface WheelStepOptions {
+    step?: number;
+    formatOptions?: Intl.NumberFormatOptions;
+    largeStep?: number;
+    smallStep?: number;
+}
+/** Zag's default step: 1, or 0.01 for percent formatting without an explicit `step`. */
+export declare function getDefaultStep(step?: number, formatOptions?: Intl.NumberFormatOptions): number;
+/**
+ * Step size for a wheel event, mirroring Zag's keyboard modifiers: Shift → `largeStep`
+ * (default `10 × step`), Alt → `smallStep` (default `step / 10`). Returns `null` for a plain
+ * wheel so Zag's own handler keeps handling it.
+ */
+export declare function getWheelStep(event: Pick<WheelEvent, 'shiftKey' | 'altKey'>, { step: stepProp, formatOptions, largeStep, smallStep }: WheelStepOptions): number | null;
+/**
+ * Wheel direction: +1 for scrolling up (increment), -1 for down, 0 for none. Browsers report
+ * Shift+wheel on `deltaX` instead of `deltaY` (Chrome/Edge), hence the fallback.
+ */
+export declare function getWheelDirection(event: Pick<WheelEvent, 'deltaX' | 'deltaY'>): -1 | 0 | 1;
+/**
+ * `current + direction × stepSize`, rounded to the precision of the operands (no
+ * `0.30000000000000004`) and clamped to `[min, max]` unless `allowOverflow`. An empty
+ * (`NaN`) current value starts from 0.
+ */
+export declare function getWheelNextValue(options: {
+    current: number;
+    direction: -1 | 1;
+    stepSize: number;
+    min?: number;
+    max?: number;
+    allowOverflow?: boolean;
+}): number;

package/dist/utils/number-input-wheel.js

@@ -0,0 +1,46 @@
+/** Zag's default step: 1, or 0.01 for percent formatting without an explicit `step`. */
+export function getDefaultStep(step, formatOptions) {
+    if (step !== undefined && !Number.isNaN(step))
+        return step;
+    return formatOptions?.style === 'percent' ? 0.01 : 1;
+}
+/**
+ * Step size for a wheel event, mirroring Zag's keyboard modifiers: Shift → `largeStep`
+ * (default `10 × step`), Alt → `smallStep` (default `step / 10`). Returns `null` for a plain
+ * wheel so Zag's own handler keeps handling it.
+ */
+export function getWheelStep(event, { step: stepProp, formatOptions, largeStep, smallStep }) {
+    const step = getDefaultStep(stepProp, formatOptions);
+    if (event.shiftKey)
+        return largeStep ?? step * 10;
+    if (event.altKey)
+        return smallStep ?? step / 10;
+    return null;
+}
+/**
+ * Wheel direction: +1 for scrolling up (increment), -1 for down, 0 for none. Browsers report
+ * Shift+wheel on `deltaX` instead of `deltaY` (Chrome/Edge), hence the fallback.
+ */
+export function getWheelDirection(event) {
+    const delta = event.deltaY || event.deltaX;
+    return (Math.sign(delta) * -1 || 0);
+}
+function decimals(n) {
+    if (!Number.isFinite(n))
+        return 0;
+    const [mantissa, exponent] = n.toString().split('e');
+    const fraction = mantissa.split('.')[1]?.length ?? 0;
+    return Math.max(0, fraction - Number(exponent ?? 0));
+}
+/**
+ * `current + direction × stepSize`, rounded to the precision of the operands (no
+ * `0.30000000000000004`) and clamped to `[min, max]` unless `allowOverflow`. An empty
+ * (`NaN`) current value starts from 0.
+ */
+export function getWheelNextValue(options) {
+    const { direction, stepSize, min = -Infinity, max = Infinity, allowOverflow } = options;
+    const current = Number.isNaN(options.current) ? 0 : options.current;
+    const precision = Math.max(decimals(current), decimals(stepSize));
+    const next = Number((current + direction * stepSize).toFixed(Math.min(precision, 20)));
+    return allowOverflow ? next : Math.min(max, Math.max(min, next));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.86.1",
+	"version": "0.87.0",
 	"license": "MIT",
 	"repository": {
 		"type": "git",

package/skills/component-usage/references/forms-and-inputs.md

@@ -170,7 +170,12 @@ If selection must be restricted to a fixed set (pick-only, no free text), use `C
 ```
 
 Props: `value?: number | null` (bindable), `label?`, `readonly?`, `layout?: 'vertical' | 'horizontal'`,
-plus Ark UI NumberInput props (`min`, `max`, `step`, `formatOptions`, `locale`).
+plus Ark UI NumberInput props (`min`, `max`, `step`, `largeStep`, `smallStep`, `formatOptions`,
+`locale`).
+
+Step modifiers (focused input): arrow keys and mouse wheel use `step`; **Shift** uses `largeStep`
+(default `10 × step`), **Alt** uses `smallStep` (default `step / 10`). Shift/Alt+wheel are handled by
+Compote (values are clamped to `min`/`max` unless `allowOverflow`); Ark only provides them for keys.
 
 `value` is controlled: setting it to `null` from outside clears the input. Use `defaultValue`
 (a string) only for uncontrolled use, without passing `value`.