@tremolo-ui/svelte 0.7.0

package/dist/components/NumberInput/DecrementStepper.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import StepperButton from './StepperButton.svelte'
+
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  /** Lowers the value by one `step`, repeating while held. */
+  let props: HTMLAttributes<HTMLDivElement> & { children?: Snippet } = $props()
+</script>
+
+<StepperButton direction={-1} {...props} />

package/dist/components/NumberInput/DecrementStepper.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    children?: Snippet;
+};
+declare const DecrementStepper: import("svelte").Component<$$ComponentProps, {}, "">;
+type DecrementStepper = ReturnType<typeof DecrementStepper>;
+export default DecrementStepper;
+//# sourceMappingURL=DecrementStepper.svelte.d.ts.map

package/dist/components/NumberInput/DecrementStepper.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DecrementStepper.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/DecrementStepper.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAErD,KAAK,gBAAgB,GAAI,cAAc,CAAC,cAAc,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAelF,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/NumberInput/IncrementStepper.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import StepperButton from './StepperButton.svelte'
+
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  /** Raises the value by one `step`, repeating while held. */
+  let props: HTMLAttributes<HTMLDivElement> & { children?: Snippet } = $props()
+</script>
+
+<StepperButton direction={1} {...props} />

package/dist/components/NumberInput/IncrementStepper.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    children?: Snippet;
+};
+declare const IncrementStepper: import("svelte").Component<$$ComponentProps, {}, "">;
+type IncrementStepper = ReturnType<typeof IncrementStepper>;
+export default IncrementStepper;
+//# sourceMappingURL=IncrementStepper.svelte.d.ts.map

package/dist/components/NumberInput/IncrementStepper.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IncrementStepper.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/IncrementStepper.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAErD,KAAK,gBAAgB,GAAI,cAAc,CAAC,cAAc,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAelF,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/NumberInput/InputField.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+  import {
+    caretAtDecimalOffset,
+    caretDecimalOffset,
+    numberSpan,
+  } from '@tremolo-ui/dom'
+  import { tick } from 'svelte'
+
+  import { useNumberInputContext } from './context.js'
+
+  import type { HTMLInputAttributes } from 'svelte/elements'
+
+  // The value belongs to `NumberInput.Root`, and the field is always text.
+  type Props = Omit<HTMLInputAttributes, 'type' | 'value'> & {
+    ref?: HTMLInputElement | null
+  }
+
+  let {
+    ref = $bindable(null),
+    onfocus,
+    oninput,
+    onblur,
+    onkeydown,
+    ...rest
+  }: Props = $props()
+
+  const field = useNumberInputContext()
+
+  $effect(() => {
+    field.setInput(ref)
+    return () => field.setInput(null)
+  })
+
+  let focused = $state(false)
+
+  // Only until the first keystroke: from then on the draft is the user's own
+  // text and stands on its own, formatted or not.
+  const shown = $derived(
+    field.unformatOnFocus && focused && !field.editing
+      ? String(field.value)
+      : field.text,
+  )
+
+  async function select() {
+    if (field.selectOnFocus === 'none') return
+    // Selecting has to wait for `unformatOnFocus` to swap the text in, or it
+    // would cover the wrong characters.
+    await tick()
+    const input = ref
+    if (!input || !focused) return
+    const span =
+      field.selectOnFocus === 'all'
+        ? { start: 0, end: input.value.length }
+        : numberSpan(input.value)
+    if (span) input.setSelectionRange(span.start, span.end)
+  }
+
+  async function step(direction: number, event: KeyboardEvent) {
+    const input = event.currentTarget as HTMLInputElement
+    const from = input.value
+    const offset =
+      field.keepCaretOnStep && input.selectionStart !== null
+        ? caretDecimalOffset(from, input.selectionStart)
+        : null
+    field.nudge(direction, field.keyboard!, event)
+    if (offset === null) return
+    await tick()
+    // The step may have been clamped away, leaving the text as it was.
+    if (input.value === from) return
+    const caret = caretAtDecimalOffset(input.value, offset)
+    input.setSelectionRange(caret, caret)
+  }
+</script>
+
+<!-- Not type="number": that brings native spinners and a value the browser
+  parses itself, neither of which survives a unit suffix. The ARIA value text
+  is the formatted text even while the plain number is shown: it is the one
+  that says what the value means. -->
+<!-- The caller's attributes go first, so that the field's own state —
+  disabled, readonly, the ARIA — cannot be overridden by them. -->
+<input
+  {...rest}
+  bind:this={ref}
+  type="text"
+  inputmode="decimal"
+  role="spinbutton"
+  value={shown}
+  disabled={field.disabled}
+  readonly={field.readonly}
+  aria-disabled={field.disabled}
+  aria-readonly={field.readonly}
+  aria-valuenow={field.value}
+  aria-valuemin={field.min}
+  aria-valuemax={field.max}
+  aria-valuetext={field.text}
+  step={field.step}
+  data-disabled={field.disabled ? '' : undefined}
+  data-readonly={field.readonly ? '' : undefined}
+  data-out-of-range={field.outOfRange ? '' : undefined}
+  oninput={(event) => {
+    field.setDraft(event.currentTarget.value)
+    oninput?.(event)
+  }}
+  onfocus={(event) => {
+    focused = true
+    select()
+    onfocus?.(event)
+  }}
+  onblur={(event) => {
+    focused = false
+    // Nothing was typed, so there is no draft and this returns at once —
+    // taking focus and leaving again never commits anything.
+    field.commitDraft()
+    onblur?.(event)
+  }}
+  onkeydown={(event) => {
+    const key = event.key
+    if (key === 'Enter') {
+      field.commitDraft()
+      if (field.blurOnEnter) event.currentTarget.blur()
+    } else if (
+      field.keyboard &&
+      !field.disabled &&
+      !field.readonly &&
+      (key === 'ArrowUp' || key === 'ArrowDown') &&
+      // Arrow keys pick a candidate while an IME is converting.
+      !event.isComposing
+    ) {
+      event.preventDefault()
+      step(key === 'ArrowUp' ? 1 : -1, event)
+    }
+    onkeydown?.(event)
+  }}
+/>

package/dist/components/NumberInput/InputField.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type Props = Omit<HTMLInputAttributes, 'type' | 'value'> & {
+    ref?: HTMLInputElement | null;
+};
+declare const InputField: import("svelte").Component<Props, {}, "ref">;
+type InputField = ReturnType<typeof InputField>;
+export default InputField;
+//# sourceMappingURL=InputField.svelte.d.ts.map

package/dist/components/NumberInput/InputField.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputField.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/InputField.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAIzD,KAAK,KAAK,GAAG,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IACzD,GAAG,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;CAC9B,CAAC;AAuGJ,QAAA,MAAM,UAAU,8CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/NumberInput/Root.svelte

@@ -0,0 +1,209 @@
+<script lang="ts">
+  import {
+    commitNumberInputText,
+    DEFAULT_DRAG_SENSITIVITY,
+    DEFAULT_KEYBOARD_OPTIONS,
+    DEFAULT_WHEEL_OPTIONS,
+    numberInputBounds,
+    numberInputRanges,
+    nudgeNumberInput,
+    parseNumberText,
+    wheelDirection,
+  } from '@tremolo-ui/dom'
+  import { linearScale } from '@tremolo-ui/functions'
+
+  import { wheel as wheelAction } from '../../actions/wheel.js'
+  import { useCheckSteps } from '../_util/check-steps.svelte.js'
+
+  import { setNumberInputContext } from './context.js'
+  import type { NumberInputProps } from './types.js'
+
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  type Props = NumberInputProps &
+    Omit<HTMLAttributes<HTMLDivElement>, keyof NumberInputProps>
+
+  let {
+    value = $bindable(),
+    min,
+    max,
+    step = 1,
+    scale = linearScale,
+    format = String,
+    parse = parseNumberText,
+    clampValue = true,
+    wheel = DEFAULT_WHEEL_OPTIONS,
+    keyboard = DEFAULT_KEYBOARD_OPTIONS,
+    drag = 1,
+    dragSensitivity = DEFAULT_DRAG_SENSITIVITY,
+    pointerLock = false,
+    selectOnFocus = 'none',
+    unformatOnFocus = false,
+    keepCaretOnStep = false,
+    blurOnEnter = true,
+    disabled = false,
+    readonly = false,
+    onChange,
+    ref = $bindable(null),
+    children,
+    ...rest
+  }: Props = $props()
+
+  /**
+   * The text being typed. The only state here: it is not a copy of `value`,
+   * but the half-finished entry that has no value to be derived from yet.
+   */
+  let draft: string | null = $state(null)
+  let input: HTMLInputElement | null = null
+
+  const inactive = $derived(disabled || readonly)
+  const ranges = $derived(
+    numberInputRanges({ min, max, step, scale, clampValue }),
+  )
+  const bounds = $derived(numberInputBounds(value, { min, max, clampValue }))
+  const text = $derived(draft ?? format(value))
+
+  // An open end has no travel to sample, so the check is skipped.
+  useCheckSteps(() => ({
+    component: 'NumberInput',
+    range:
+      min !== undefined && max !== undefined && min < max
+        ? { min, max, step, scale }
+        : null,
+    keyboard,
+    wheel,
+    format,
+  }))
+
+  function changeValue(next: number) {
+    if (inactive) return
+    draft = null
+    if (next === value) return
+    value = next
+    onChange?.(next)
+  }
+
+  setNumberInputContext({
+    get value() {
+      return value
+    },
+    get min() {
+      return min
+    },
+    get max() {
+      return max
+    },
+    get step() {
+      return step
+    },
+    get disabled() {
+      return disabled
+    },
+    get readonly() {
+      return readonly
+    },
+    get keyboard() {
+      return keyboard
+    },
+    get drag() {
+      return drag
+    },
+    get dragSensitivity() {
+      return dragSensitivity
+    },
+    get pointerLock() {
+      return pointerLock
+    },
+    get selectOnFocus() {
+      return selectOnFocus
+    },
+    get unformatOnFocus() {
+      return unformatOnFocus
+    },
+    get keepCaretOnStep() {
+      return keepCaretOnStep
+    },
+    get blurOnEnter() {
+      return blurOnEnter
+    },
+    get text() {
+      return text
+    },
+    get editing() {
+      return draft !== null
+    },
+    get outOfRange() {
+      return draft === null && bounds.outOfRange
+    },
+    get atMin() {
+      return bounds.atMin
+    },
+    get atMax() {
+      return bounds.atMax
+    },
+    get rawRange() {
+      return ranges.raw
+    },
+    setDraft: (next) => {
+      if (inactive) return
+      draft = next
+      // Deliberately unclamped: clamping here would make "1500" impossible
+      // to type into an input whose max is 100.
+      const parsed = parse(next)
+      if (Number.isFinite(parsed)) {
+        value = parsed
+        onChange?.(parsed)
+      }
+    },
+    commitDraft: () => {
+      if (draft === null || inactive) return
+      const committed = commitNumberInputText(draft, parse, {
+        min,
+        max,
+        clampValue,
+      })
+      // Text with no number is not a value: the field goes back to what it
+      // was showing.
+      if (committed === null) draft = null
+      else changeValue(committed)
+    },
+    changeValue,
+    nudge: (direction, option, modifiers) =>
+      changeValue(
+        nudgeNumberInput(value, direction, option, ranges, modifiers),
+      ),
+    setInput: (element) => {
+      input = element
+    },
+  })
+
+  const wheelOptions = $derived({
+    requireFocus: true,
+    onWheel: (event: WheelEvent) => {
+      const direction = wheelDirection(event)
+      if (!wheel || inactive || direction === null) return
+      event.preventDefault()
+      changeValue(nudgeNumberInput(value, direction, wheel, ranges, event))
+    },
+  })
+
+  /** Move the focus to the field. */
+  export function focus() {
+    if (!disabled) input?.focus()
+  }
+
+  /** Take the focus away from the field. */
+  export function blur() {
+    input?.blur()
+  }
+</script>
+
+<div
+  bind:this={ref}
+  data-disabled={disabled ? '' : undefined}
+  data-readonly={readonly ? '' : undefined}
+  use:wheelAction={wheelOptions}
+  {...rest}
+>
+  {@render children()}
+</div>

package/dist/components/NumberInput/Root.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { NumberInputProps } from './types.js';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = NumberInputProps & Omit<HTMLAttributes<HTMLDivElement>, keyof NumberInputProps>;
+declare const Root: import("svelte").Component<Props, {
+    focus: () => void;
+    blur: () => void;
+}, "ref" | "value">;
+type Root = ReturnType<typeof Root>;
+export default Root;
+//# sourceMappingURL=Root.svelte.d.ts.map

package/dist/components/NumberInput/Root.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Root.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/Root.svelte.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAElD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,gBAAgB,GAC3B,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,gBAAgB,CAAC,CAAC;AAmMjE,QAAA,MAAM,IAAI;;;mBAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/NumberInput/Stepper.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { createStepperDrag, type StepperDragInstance } from '@tremolo-ui/dom'
+  import { untrack } from 'svelte'
+
+  import { setStepperContext, useNumberInputContext } from './context.js'
+
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null
+    children?: Snippet
+  }
+
+  let { ref = $bindable(null), children, ...rest }: Props = $props()
+
+  const field = useNumberInputContext()
+
+  // Only attached while it can do something: `createDrag` puts
+  // `touch-action: none` on the element, and a stepper that cannot be dragged
+  // has no reason to stop the page scrolling under a finger.
+  const enabled = $derived(
+    field.drag !== null && !field.disabled && !field.readonly,
+  )
+  const options = $derived({
+    range: field.rawRange,
+    pixels: field.drag ?? 1,
+    sensitivity: field.dragSensitivity,
+    pointerLock: field.pointerLock,
+  })
+
+  let instance: StepperDragInstance | null = null
+
+  $effect(() => {
+    if (!ref || !enabled) return
+    const current = createStepperDrag(ref, {
+      // Read once here; the effect below keeps them current without tearing
+      // the drag down.
+      ...untrack(() => options),
+      getValue: () => field.value,
+      onChange: (next) => field.changeValue(next),
+    })
+    instance = current
+    return () => {
+      current.destroy()
+      instance = null
+    }
+  })
+
+  $effect(() => {
+    instance?.update(options)
+  })
+
+  setStepperContext({ moved: () => instance?.moved() ?? false })
+</script>
+
+<!-- The area the steppers sit in, and a drag handle in its own right:
+  dragging it up and down moves the value one `step` every `drag` pixels. -->
+<div bind:this={ref} {...rest}>
+  {@render children?.()}
+</div>

package/dist/components/NumberInput/Stepper.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null;
+    children?: Snippet;
+};
+declare const Stepper: import("svelte").Component<Props, {}, "ref">;
+type Stepper = ReturnType<typeof Stepper>;
+export default Stepper;
+//# sourceMappingURL=Stepper.svelte.d.ts.map

package/dist/components/NumberInput/Stepper.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/Stepper.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC5C,GAAG,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;AA4DJ,QAAA,MAAM,OAAO,8CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/NumberInput/StepperButton.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { longPress } from '../../actions/long-press.js'
+
+  import { useNumberInputContext, useStepperContext } from './context.js'
+
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    direction: 1 | -1
+    children?: Snippet
+  }
+
+  let { direction, children, ...rest }: Props = $props()
+
+  const field = useNumberInputContext()
+  const stepper = useStepperContext()
+
+  const blocked = $derived(
+    field.disabled || (direction > 0 ? field.atMax : field.atMin),
+  )
+
+  const pressOptions = {
+    onPress: () => {
+      if (field.disabled || field.readonly) return
+      // Once the pointer has actually travelled, the drag on `Stepper` owns
+      // the value; repeating on top of it would move it twice.
+      if (stepper?.moved()) return
+      field.nudge(direction, ['raw', field.step])
+    },
+  }
+</script>
+
+<!-- A bare arrow has no accessible name of its own. Overridable, since a
+  caller may need it in their own language. `role="button"` does not take
+  aria-readonly, so that state reaches the styles through the data attribute
+  alone. -->
+<div
+  role="button"
+  tabindex="-1"
+  aria-label={direction > 0 ? 'Increment' : 'Decrement'}
+  aria-disabled={blocked}
+  data-disabled={blocked ? '' : undefined}
+  data-readonly={field.readonly ? '' : undefined}
+  use:longPress={pressOptions}
+  {...rest}
+>
+  {#if children}
+    {@render children()}
+  {:else}
+    <svg
+      style="width: var(--stepper-icon-size); height: var(--stepper-icon-size)"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <polyline points={direction > 0 ? '18 15 12 9 6 15' : '6 9 12 15 18 9'} />
+    </svg>
+  {/if}
+</div>

package/dist/components/NumberInput/StepperButton.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    direction: 1 | -1;
+    children?: Snippet;
+};
+declare const StepperButton: import("svelte").Component<Props, {}, "">;
+type StepperButton = ReturnType<typeof StepperButton>;
+export default StepperButton;
+//# sourceMappingURL=StepperButton.svelte.d.ts.map

package/dist/components/NumberInput/StepperButton.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/StepperButton.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC5C,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;AA2CJ,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/NumberInput/context.d.ts

@@ -0,0 +1,48 @@
+import type { InputEventOption, ModifierState, ModifierValue } from '@tremolo-ui/dom';
+import type { ValueRange } from '@tremolo-ui/functions';
+/** What `NumberInput.Root` shares with its parts. Every field is a getter. */
+export interface NumberInputContextValue {
+    readonly value: number;
+    readonly min: number | undefined;
+    readonly max: number | undefined;
+    readonly step: number;
+    readonly disabled: boolean;
+    readonly readonly: boolean;
+    readonly keyboard: ModifierValue<InputEventOption> | null;
+    readonly drag: number | null;
+    readonly dragSensitivity: ModifierValue<number>;
+    readonly pointerLock: boolean;
+    readonly selectOnFocus: 'all' | 'number' | 'none';
+    readonly unformatOnFocus: boolean;
+    readonly keepCaretOnStep: boolean;
+    readonly blurOnEnter: boolean;
+    /** The text the field shows: the draft while typing, else `format(value)`. */
+    readonly text: string;
+    /** Whether the user has typed since the value was last committed. */
+    readonly editing: boolean;
+    readonly outOfRange: boolean;
+    readonly atMin: boolean;
+    readonly atMax: boolean;
+    /** The range a raw amount moves across, for the stepper drag. */
+    readonly rawRange: ValueRange;
+    /** Keep typed text as the draft, reporting the number in it. */
+    setDraft: (text: string) => void;
+    /** Commit the draft, clamped, or drop it when it holds no number. */
+    commitDraft: () => void;
+    /** Set the value, dropping any draft. */
+    changeValue: (value: number) => void;
+    /** Move the value by one press of `option`. */
+    nudge: (direction: number, option: ModifierValue<InputEventOption>, modifiers?: ModifierState) => void;
+    /** @internal `InputField` registers the element focus() moves to. */
+    setInput: (input: HTMLInputElement | null) => void;
+}
+/** The context of the enclosing `NumberInput.Root`, for a part of your own. */
+export declare const useNumberInputContext: () => NumberInputContextValue;
+export declare const setNumberInputContext: (context: NumberInputContextValue) => NumberInputContextValue;
+/** @internal Whether the drag on `Stepper` has moved the value. */
+export interface StepperContextValue {
+    moved: () => boolean;
+}
+export declare const useStepperContext: () => StepperContextValue | null;
+export declare const setStepperContext: (context: StepperContextValue) => StepperContextValue;
+//# sourceMappingURL=context.d.ts.map

package/dist/components/NumberInput/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,gBAAgB,EAChB,aAAa,EACb,aAAa,EACd,MAAM,iBAAiB,CAAA;AACxB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAEvD,8EAA8E;AAC9E,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAA;IAChC,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAA;IAChC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IACzD,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,QAAQ,CAAC,eAAe,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAC/C,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,aAAa,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAA;IACjD,QAAQ,CAAC,eAAe,EAAE,OAAO,CAAA;IACjC,QAAQ,CAAC,eAAe,EAAE,OAAO,CAAA;IACjC,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAA;IAC7B,8EAA8E;IAC9E,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,qEAAqE;IACrE,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAA;IACvB,iEAAiE;IACjE,QAAQ,CAAC,QAAQ,EAAE,UAAU,CAAA;IAC7B,gEAAgE;IAChE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,qEAAqE;IACrE,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,yCAAyC;IACzC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,+CAA+C;IAC/C,KAAK,EAAE,CACL,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,aAAa,CAAC,gBAAgB,CAAC,EACvC,SAAS,CAAC,EAAE,aAAa,KACtB,IAAI,CAAA;IACT,qEAAqE;IACrE,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAA;CACnD;AAID,+EAA+E;AAC/E,eAAO,MAAM,qBAAqB,+BAAM,CAAA;AACxC,eAAO,MAAM,qBAAqB,+DAAM,CAAA;AAExC,mEAAmE;AACnE,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,OAAO,CAAA;CACrB;AAKD,eAAO,MAAM,iBAAiB,kCAA6C,CAAA;AAC3E,eAAO,MAAM,iBAAiB,uDAAa,CAAA"}

package/dist/components/NumberInput/context.js

@@ -0,0 +1,8 @@
+import { createContext } from 'svelte';
+const [get, set] = createContext();
+/** The context of the enclosing `NumberInput.Root`, for a part of your own. */
+export const useNumberInputContext = get;
+export const setNumberInputContext = set;
+const [getStepper, setStepper, hasStepper] = createContext();
+export const useStepperContext = () => (hasStepper() ? getStepper() : null);
+export const setStepperContext = setStepper;

package/dist/components/NumberInput/index.d.ts

@@ -0,0 +1,6 @@
+export { default as DecrementStepper } from './DecrementStepper.svelte';
+export { default as IncrementStepper } from './IncrementStepper.svelte';
+export { default as InputField } from './InputField.svelte';
+export { default as Root } from './Root.svelte';
+export { default as Stepper } from './Stepper.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/NumberInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AACvE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AACvE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAC3D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/components/NumberInput/index.js

@@ -0,0 +1,5 @@
+export { default as DecrementStepper } from './DecrementStepper.svelte';
+export { default as IncrementStepper } from './IncrementStepper.svelte';
+export { default as InputField } from './InputField.svelte';
+export { default as Root } from './Root.svelte';
+export { default as Stepper } from './Stepper.svelte';