@jovertical/mise-design-system 0.0.0-stage → 1.1.0

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

@@ -0,0 +1,157 @@
+<!--
+  Origin: the React package 2.23.0 `count-input.tsx`, `decimal-input.tsx` and `currency-input.tsx`, merged
+  Diverged: the typing part of NumberInput, on its own, for a composite that
+    owns the InputGroup (QuantityInput); it renders `InputGroupInput`, so the
+    group's focus ring and error state find it. See NumberInput for the merge.
+-->
+<script lang="ts" module>
+  import type { HTMLInputAttributes } from 'svelte/elements'
+
+  import type { NumberInputFormat } from './number-input-math.js'
+
+  /**
+   * The field alone: a number typed into a text field, inside an `InputGroup`
+   * the caller draws. `NumberInput` is this with its own group, buttons and
+   * prefix; reach for the field only when composing another control.
+   */
+  export type NumberInputFieldProps = Omit<
+    HTMLInputAttributes,
+    'type' | 'value' | 'min' | 'max' | 'step' | 'prefix' | 'children' | 'files'
+  > & {
+    format?: NumberInputFormat
+    value?: number | null
+    onValueChange?: (value: number | null) => void
+    min?: number
+    max?: number
+    step?: number
+    precision?: number
+    clearable?: boolean
+    ref?: HTMLInputElement | null
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import InputGroupInput from '../input-group/input-group-input.svelte'
+  import { add, clamp, INPUT_MODE, parse, placesFor, sanitize } from './number-input-math.js'
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(null),
+    onValueChange,
+    format = 'decimal',
+    min = 0,
+    max,
+    step = 1,
+    precision,
+    clearable = true,
+    class: className,
+    oninput,
+    onfocus,
+    onblur,
+    onkeydown,
+    onmouseup,
+    ...rest
+  }: NumberInputFieldProps = $props()
+
+  // The typed text while the field has focus; null otherwise.
+  let draft = $state<string | null>(null)
+  // A click focuses on mousedown and then places the caret on mouseup, undoing
+  // the select-all. Set by focus, spent by the mouseup that follows.
+  let selectingOnFocus = false
+
+  const places = $derived(placesFor(format, precision))
+  const isCurrency = $derived(format === 'currency')
+  const textOf = (next: number) => (isCurrency ? (next / 100).toFixed(2) : String(next))
+  const committed = $derived(value === null || value === undefined ? '' : textOf(value))
+
+  /** Typed text, in the units it is shown in, to `value`'s units. */
+  const toValue = (shown: number) => (isCurrency ? Math.round(shown * 100) : shown)
+
+  function commit(next: number | null) {
+    const settled = next === null && !clearable ? min : next
+    value = settled
+    onValueChange?.(settled)
+  }
+
+  const handleInput: NumberInputFieldProps['oninput'] = (event) => {
+    const field = event.currentTarget
+    const next = sanitize(field.value, min < 0, places)
+    if (field.value !== next) field.value = next
+    draft = next
+
+    const parsed = parse(next)
+    if (next === '') {
+      if (clearable) commit(null)
+    } else if (parsed !== null) {
+      commit(clamp(toValue(parsed), min, max))
+    }
+    oninput?.(event)
+  }
+
+  const handleFocus: NumberInputFieldProps['onfocus'] = (event) => {
+    draft = committed
+    selectingOnFocus = true
+    event.currentTarget.select()
+    onfocus?.(event)
+  }
+
+  const handleMouseUp: NumberInputFieldProps['onmouseup'] = (event) => {
+    if (selectingOnFocus) {
+      event.preventDefault()
+      selectingOnFocus = false
+    }
+    onmouseup?.(event)
+  }
+
+  const handleBlur: NumberInputFieldProps['onblur'] = (event) => {
+    // An untouched draft commits nothing, so tabbing through a field holding an
+    // out-of-range value does not quietly rewrite it.
+    if (draft !== null && draft !== committed) {
+      const parsed = parse(draft)
+      commit(parsed === null ? null : clamp(toValue(parsed), min, max))
+    }
+    draft = null
+    selectingOnFocus = false
+    onblur?.(event)
+  }
+
+  const handleKeyDown: NumberInputFieldProps['onkeydown'] = (event) => {
+    // Focus from the keyboard has no mouseup to spend the flag on, and a stale
+    // one would swallow the next click meant to place the caret.
+    selectingOnFocus = false
+    onkeydown?.(event)
+    if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return
+    event.preventDefault()
+
+    const direction = event.key === 'ArrowUp' ? 1 : -1
+    const current = parse(draft ?? committed)
+    const next =
+      current === null
+        ? clamp(Math.max(min, 0), min, max)
+        : clamp(add(toValue(current), direction * step * (event.shiftKey ? 10 : 1)), min, max)
+    commit(next)
+    draft = textOf(next)
+  }
+</script>
+
+<InputGroupInput
+  bind:ref
+  type="text"
+  inputmode={INPUT_MODE[format]}
+  autocomplete="off"
+  role="spinbutton"
+  aria-valuenow={value ?? undefined}
+  aria-valuetext={committed || undefined}
+  aria-valuemin={min}
+  aria-valuemax={max}
+  data-format={format}
+  class={cn('tabular-nums', className)}
+  value={draft ?? committed}
+  oninput={handleInput}
+  onfocus={handleFocus}
+  onblur={handleBlur}
+  onkeydown={handleKeyDown}
+  onmouseup={handleMouseUp}
+  {...rest}
+/>

package/dist/components/forms/number-input/number-input-field.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { NumberInputFormat } from './number-input-math.js';
+/**
+ * The field alone: a number typed into a text field, inside an `InputGroup`
+ * the caller draws. `NumberInput` is this with its own group, buttons and
+ * prefix; reach for the field only when composing another control.
+ */
+export type NumberInputFieldProps = Omit<HTMLInputAttributes, 'type' | 'value' | 'min' | 'max' | 'step' | 'prefix' | 'children' | 'files'> & {
+    format?: NumberInputFormat;
+    value?: number | null;
+    onValueChange?: (value: number | null) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+    clearable?: boolean;
+    ref?: HTMLInputElement | null;
+};
+declare const NumberInputField: import("svelte").Component<NumberInputFieldProps, {}, "ref" | "value">;
+type NumberInputField = ReturnType<typeof NumberInputField>;
+export default NumberInputField;

package/dist/components/forms/number-input/number-input-math.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Origin: the React package 2.23.0 `decimal-input.tsx` (`sanitize`, `parse`, `clamp`, `stepFrom`)
+ * Diverged: shared by NumberInput's field and its buttons, and by every
+ *   format, where React kept a copy per input. `add` is React's `stepFrom`
+ *   without the empty case, which each caller decides.
+ */
+export type NumberInputFormat = 'integer' | 'decimal' | 'currency';
+/** The decimal places a format takes; `undefined` is no limit. */
+export declare const placesFor: (format: NumberInputFormat, precision: number | undefined) => number | undefined;
+export declare const INPUT_MODE: Record<NumberInputFormat, 'numeric' | 'decimal'>;
+/**
+ * Keep what can become a number: digits, one point (unless `places` is 0),
+ * and a leading minus when the floor allows one. A comma is a pasted
+ * thousands separator, not a decimal point.
+ */
+export declare function sanitize(raw: string, allowsNegative: boolean, places: number | undefined): string;
+/** A finished number, or `null` for an empty or half-typed one ("-", "."). */
+export declare function parse(text: string): number | null;
+export declare function clamp(value: number, min: number, max: number | undefined): number;
+/** Rounded to the finer of the two precisions, so 0.1 + 0.2 lands on 0.3. */
+export declare function add(current: number, delta: number): number;

package/dist/components/forms/number-input/number-input-math.js

@@ -0,0 +1,43 @@
+/**
+ * Origin: the React package 2.23.0 `decimal-input.tsx` (`sanitize`, `parse`, `clamp`, `stepFrom`)
+ * Diverged: shared by NumberInput's field and its buttons, and by every
+ *   format, where React kept a copy per input. `add` is React's `stepFrom`
+ *   without the empty case, which each caller decides.
+ */
+/** The decimal places a format takes; `undefined` is no limit. */
+export const placesFor = (format, precision) => format === 'integer' ? 0 : format === 'currency' ? 2 : precision;
+export const INPUT_MODE = {
+    integer: 'numeric',
+    decimal: 'decimal',
+    currency: 'decimal',
+};
+/**
+ * Keep what can become a number: digits, one point (unless `places` is 0),
+ * and a leading minus when the floor allows one. A comma is a pasted
+ * thousands separator, not a decimal point.
+ */
+export function sanitize(raw, allowsNegative, places) {
+    const isNegative = allowsNegative && raw.trimStart().startsWith('-');
+    const [whole = '', ...rest] = raw.replace(/[^\d.]/g, '').split('.');
+    const fraction = rest.join('');
+    const hasPoint = rest.length > 0 && places !== 0;
+    const limitedFraction = places === undefined ? fraction : fraction.slice(0, places);
+    return `${isNegative ? '-' : ''}${whole}${hasPoint ? `.${limitedFraction}` : ''}`;
+}
+/** A finished number, or `null` for an empty or half-typed one ("-", "."). */
+export function parse(text) {
+    if (text === '' || text === '-' || text === '.' || text === '-.')
+        return null;
+    const parsed = Number(text);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+export function clamp(value, min, max) {
+    const floored = Math.max(min, value);
+    return max === undefined ? floored : Math.min(max, floored);
+}
+const decimalPlaces = (value) => String(value).split('.')[1]?.length ?? 0;
+/** Rounded to the finer of the two precisions, so 0.1 + 0.2 lands on 0.3. */
+export function add(current, delta) {
+    const places = Math.max(decimalPlaces(current), decimalPlaces(delta));
+    return Number((current + delta).toFixed(places));
+}

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

@@ -0,0 +1,175 @@
+<!--
+  Origin: the React package 2.23.0 `count-input.tsx`, `decimal-input.tsx` and `currency-input.tsx`, merged
+  Diverged: one component for React's CountInput, DecimalInput and
+    CurrencyInput, chosen with `format` (round 6 plan, R6-3). `value` is
+    bindable and always `number | null`, with `onValueChange` for React's
+    `onChange`. `clearable` defaults to `true` for every format, so an emptied
+    count commits `null` unless `clearable={false}`, CountInput's default. The −
+    and + buttons are `controls`, off by default. Currency has no default
+    symbol (React's was ₱); `prefix` takes one. Every format selects its text on
+    focus and steps ten times as far with Shift, as DecimalInput did. A pasted
+    comma is dropped as a thousands separator, as DecimalInput dropped it: `.`
+    is the only decimal point either package reads. The typing is
+    NumberInputField, which QuantityInput composes. With controls the field is
+    capped with `max-w-32` rather than React's `w-32`, which Field's
+    `[&>*]:w-full` overrode, stretching it across the form.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+
+  import type { NumberInputFieldProps } from './number-input-field.svelte'
+
+  /**
+   * A number typed into a text field, never `type="number"`: the native one
+   * has 8px spinners drawn differently in every engine, a scroll wheel that
+   * changes a quantity under a passing pointer, "1e" accepted as a number in
+   * progress, and a selection API that throws.
+   *
+   * A keystroke that is not a digit, the one decimal point or a leading minus
+   * the floor allows is dropped. While the field has focus the operator owns
+   * what is in it, so "0." and "-" survive the keystroke that makes them; each
+   * keystroke that reads as a number is reported, clamped, and blur settles the
+   * draft. Focus selects the whole value, because the common edit is replacing
+   * it. ↑ and ↓ step, Shift ten times as far.
+   *
+   * `null` is an empty field, not zero: right for a weight or a price, where
+   * blank means "not recorded" and zero would claim something.
+   */
+  export type NumberInputProps = NumberInputFieldProps & {
+    /**
+     * `integer` takes whole numbers; `decimal` takes up to `precision` places;
+     * `currency` speaks minor units: `value` is an integer count of cents,
+     * shown with two places, and only two can be typed, because a third has no
+     * cent to land in. Everything crossing the boundary is then an integer, the
+     * units an API uses, and no price arrives as 19.99 and leaves as
+     * 1998.9999999999998.
+     */
+    format?: NumberInputFieldProps['format']
+    /** The floor, in `value`'s units. A negative one lets a minus sign be typed. */
+    min?: number
+    /** No ceiling when absent. */
+    max?: number
+    /** How far ↑, ↓ and the buttons move it, in `value`'s units. */
+    step?: number
+    /** The most decimal places `decimal` takes. No limit when absent. */
+    precision?: number
+    /**
+     * An emptied field commits `null`. Off, it commits `min`: for a count where
+     * zero is a real answer and the field should never be blank.
+     */
+    clearable?: boolean
+    /**
+     * − and + either side, inside the field's own fill, so it reads as one
+     * control beside the plain inputs around it. Each disables at its end of
+     * the range.
+     */
+    controls?: boolean
+    /** Ahead of the number: a currency symbol, a unit. */
+    prefix?: string | Snippet
+  }
+</script>
+
+<script lang="ts">
+  import MinusIcon from '@lucide/svelte/icons/minus'
+  import PlusIcon from '@lucide/svelte/icons/plus'
+
+  import { cn } from '../../../utils/cn.js'
+  import InputGroup from '../input-group/input-group.svelte'
+  import InputGroupAddon from '../input-group/input-group-addon.svelte'
+  import InputGroupButton from '../input-group/input-group-button.svelte'
+  import InputGroupText from '../input-group/input-group-text.svelte'
+  import NumberInputField from './number-input-field.svelte'
+  import { add, clamp } from './number-input-math.js'
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(null),
+    onValueChange,
+    format = 'decimal',
+    min = 0,
+    max,
+    step = 1,
+    clearable = true,
+    controls = false,
+    prefix,
+    disabled,
+    class: className,
+    'aria-label': ariaLabel,
+    ...rest
+  }: NumberInputProps = $props()
+
+  const isEmpty = $derived(value === null || value === undefined)
+  const isAtMin = $derived(isEmpty || (value as number) <= min)
+  const isAtMax = $derived(max !== undefined && !isEmpty && (value as number) >= max)
+
+  function pressStep(direction: 1 | -1) {
+    // An empty field has nothing to step down from; stepping up starts it at the floor.
+    if (isEmpty && direction === -1) return
+    const next = isEmpty
+      ? clamp(Math.max(min, 0), min, max)
+      : clamp(add(value as number, direction * step), min, max)
+    value = next
+    onValueChange?.(next)
+  }
+</script>
+
+<InputGroup
+  data-slot="number-input"
+  data-format={format}
+  data-disabled={disabled}
+  class={cn(controls && 'max-w-32', className)}
+>
+  {#if controls}
+    <!-- The addons' stock negative margin pulls a button past the group's
+         edge, which overflows a scrolling form when the field sits against its
+         side. Padding alone seats the buttons inside the fill. -->
+    <InputGroupAddon align="inline-start" class="pl-1.5 has-[>button]:ml-0">
+      <InputGroupButton
+        size="icon-xs"
+        aria-label={ariaLabel ? `Decrease ${ariaLabel}` : 'Decrease'}
+        disabled={disabled || isAtMin}
+        onclick={() => pressStep(-1)}
+      >
+        <MinusIcon />
+      </InputGroupButton>
+    </InputGroupAddon>
+  {/if}
+
+  {#if prefix}
+    <InputGroupAddon align="inline-start">
+      {#if typeof prefix === 'string'}
+        <InputGroupText>{prefix}</InputGroupText>
+      {:else}
+        {@render prefix()}
+      {/if}
+    </InputGroupAddon>
+  {/if}
+
+  <NumberInputField
+    bind:ref
+    bind:value
+    {onValueChange}
+    {format}
+    {min}
+    {max}
+    {step}
+    {clearable}
+    {disabled}
+    aria-label={ariaLabel}
+    class={controls ? 'text-center' : undefined}
+    {...rest}
+  />
+
+  {#if controls}
+    <InputGroupAddon align="inline-end" class="pr-1.5 has-[>button]:mr-0">
+      <InputGroupButton
+        size="icon-xs"
+        aria-label={ariaLabel ? `Increase ${ariaLabel}` : 'Increase'}
+        disabled={disabled || isAtMax}
+        onclick={() => pressStep(1)}
+      >
+        <PlusIcon />
+      </InputGroupButton>
+    </InputGroupAddon>
+  {/if}
+</InputGroup>

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

@@ -0,0 +1,53 @@
+import type { Snippet } from 'svelte';
+import type { NumberInputFieldProps } from './number-input-field.svelte';
+/**
+ * A number typed into a text field, never `type="number"`: the native one
+ * has 8px spinners drawn differently in every engine, a scroll wheel that
+ * changes a quantity under a passing pointer, "1e" accepted as a number in
+ * progress, and a selection API that throws.
+ *
+ * A keystroke that is not a digit, the one decimal point or a leading minus
+ * the floor allows is dropped. While the field has focus the operator owns
+ * what is in it, so "0." and "-" survive the keystroke that makes them; each
+ * keystroke that reads as a number is reported, clamped, and blur settles the
+ * draft. Focus selects the whole value, because the common edit is replacing
+ * it. ↑ and ↓ step, Shift ten times as far.
+ *
+ * `null` is an empty field, not zero: right for a weight or a price, where
+ * blank means "not recorded" and zero would claim something.
+ */
+export type NumberInputProps = NumberInputFieldProps & {
+    /**
+     * `integer` takes whole numbers; `decimal` takes up to `precision` places;
+     * `currency` speaks minor units: `value` is an integer count of cents,
+     * shown with two places, and only two can be typed, because a third has no
+     * cent to land in. Everything crossing the boundary is then an integer, the
+     * units an API uses, and no price arrives as 19.99 and leaves as
+     * 1998.9999999999998.
+     */
+    format?: NumberInputFieldProps['format'];
+    /** The floor, in `value`'s units. A negative one lets a minus sign be typed. */
+    min?: number;
+    /** No ceiling when absent. */
+    max?: number;
+    /** How far ↑, ↓ and the buttons move it, in `value`'s units. */
+    step?: number;
+    /** The most decimal places `decimal` takes. No limit when absent. */
+    precision?: number;
+    /**
+     * An emptied field commits `null`. Off, it commits `min`: for a count where
+     * zero is a real answer and the field should never be blank.
+     */
+    clearable?: boolean;
+    /**
+     * − and + either side, inside the field's own fill, so it reads as one
+     * control beside the plain inputs around it. Each disables at its end of
+     * the range.
+     */
+    controls?: boolean;
+    /** Ahead of the number: a currency symbol, a unit. */
+    prefix?: string | Snippet;
+};
+declare const NumberInput: import("svelte").Component<NumberInputProps, {}, "ref" | "value">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;

package/dist/components/forms/quantity-input/index.d.ts

@@ -0,0 +1 @@
+export { default as QuantityInput, type QuantityInputLayout, type QuantityInputProps, type QuantityUnit, } from './quantity-input.svelte';

package/dist/components/forms/quantity-input/index.js

@@ -0,0 +1 @@
+export { default as QuantityInput, } from './quantity-input.svelte';