@tremolo-ui/react 0.3.0 → 0.5.0

package/src/components/NumberInput/context.tsx

@@ -1,162 +1,90 @@
-import { createContext, useContext, useEffect, useRef } from 'react'
-import { createStore, useStore } from 'zustand'
+import { createContext, RefObject, useContext } from 'react'
 
-import { clamp } from '@tremolo-ui/functions'
+import type { InputEventOption, Scale, ValueRange } from '@tremolo-ui/functions'
 
-import { parseValue, Units } from './type'
-
-type State = {
-  value: string
-  valueAsNumber: number
-  step: number
+export type NumberInputContextValue = {
+  value: number
 
+  /**
+   * The range the caller asked for. Left undefined when unbounded, which is
+   * what `aria-valuemin` / `aria-valuemax` and the steppers need to tell apart
+   * from a range that happens to sit at the edge of the safe integers.
+   */
   min?: number
   max?: number
-  units?: string | Units
-  digit?: number
-  readonly?: boolean
-  keepWithinRange?: boolean
-  onChange?: (value: number, text: string) => void
-}
-
-type Action = {
-  increment: () => void
-  decrement: () => void
-  change: (value: string) => void
+  step: number
+  /** How the value is distributed across the travel. */
+  scale: Scale
+
+  disabled: boolean
+  readonly: boolean
+  clampValue: boolean
+
+  /**
+   * The effective scaling for `applyDelta` and for clamping on commit, with the
+   * unbounded ends filled in. Ignores `min` / `max` when `clampValue` is off.
+   */
+  range: ValueRange
+
+  keyboard: InputEventOption | null
+  /** Pixels of vertical drag on `Stepper` that move the value by one `step`. */
+  drag: number | null
+
+  /** What the input shows: the draft while editing, the formatted value otherwise. */
+  text: string
+  editing: boolean
+  /** Whether the value sits outside `min` / `max`. Not judged while editing. */
+  outOfRange: boolean
+  /** Whether a stepper would have no effect, for `aria-disabled`. */
+  atMin: boolean
+  atMax: boolean
+
+  format: (value: number) => string
+  parse: (text: string) => number
+
+  /** Typing. Replaces the draft and reports the parsed value, unclamped. */
+  setDraft: (text: string) => void
+  /** Blur or Enter. Clamps the draft, reports it, and drops the draft. */
+  commitDraft: () => void
+  /** Drops the draft and replaces the value: steppers, wheel, keyboard, drag. */
+  changeValue: (next: number) => void
+  /** Moves the value by one `option` in `direction`, normally +1 or -1. */
+  nudge: (direction: number, option: InputEventOption) => void
+
+  /** `InputField` registers itself here; `Root` focuses it through its methods. */
+  inputRef: RefObject<HTMLInputElement | null>
 }
 
-type NumberInputStore = ReturnType<typeof createNumberInputStore>
+const NumberInputContext = createContext<NumberInputContextValue | null>(null)
 
-type ProviderProps = Partial<Omit<State, 'value'> & { value: number | string }>
+export const NumberInputProvider = NumberInputContext.Provider
 
-export function safeClamp(
-  value: number,
-  min = Number.MIN_SAFE_INTEGER,
-  max = Number.MAX_SAFE_INTEGER,
+/**
+ * The only state behind this is the editing draft; `value` comes from the props
+ * of `Root` and everything else is derived during render.
+ */
+export function useNumberInputContext(): NumberInputContextValue
+export function useNumberInputContext<T>(
+  selector: (state: NumberInputContextValue) => T,
+): T
+export function useNumberInputContext<T>(
+  selector?: (state: NumberInputContextValue) => T,
 ) {
-  return clamp(value, min, max)
+  const context = useContext(NumberInputContext)
+  if (!context)
+    throw new Error('Missing NumberInputContext.Provider in the tree')
+  return selector ? selector(context) : context
 }
 
-const createNumberInputStore = (initProps?: ProviderProps) => {
-  const DEFAULT_PROPS: State = {
-    value: '',
-    valueAsNumber: 0,
-    min: 0,
-    max: 0,
-    step: 1,
-    readonly: false,
-    keepWithinRange: true,
-    onChange: (_v: number, _t: string) => {},
-  }
-
-  return createStore<State & Action>()((set) => ({
-    ...DEFAULT_PROPS,
-    ...initProps,
-    ...{
-      value: parseValue(
-        String(initProps?.value || ''),
-        initProps?.units,
-        initProps?.digit,
-      ).formatValue,
-      valueAsNumber: parseValue(
-        String(initProps?.value || ''),
-        initProps?.units,
-        initProps?.digit,
-      ).rawValue,
-    },
-    increment: () =>
-      set((state) => {
-        if (state.readonly) return {}
-        const current = parseValue(
-          state.value,
-          state.units,
-          state.digit,
-        ).rawValue
-        let next = current + (state.step ?? 1)
-        if (state.keepWithinRange) {
-          next = safeClamp(next, state.min, state.max)
-        }
-        const v = parseValue(String(next), state.units, state.digit).formatValue
-        state?.onChange?.(next, v)
-        return {
-          value: v,
-          valueAsNumber: next,
-        }
-      }),
-    decrement: () =>
-      set((state) => {
-        if (state.readonly) return {}
-        const current = parseValue(
-          state.value,
-          state.units,
-          state.digit,
-        ).rawValue
-        let next = current - (state.step ?? 1)
-        if (state.keepWithinRange) {
-          next = safeClamp(next, state.min, state.max)
-        }
-        const v = parseValue(String(next), state.units, state.digit).formatValue
-        state?.onChange?.(next, v)
-        return {
-          value: v,
-          valueAsNumber: next,
-        }
-      }),
-    change: (value) =>
-      set((state) => {
-        if (state.readonly) return {}
-        const v = value ?? ''
-        return {
-          value: v,
-          valueAsNumber: parseValue(v, state.units, state.digit).rawValue,
-        }
-      }),
-  }))
+/** Set by `Stepper` once a drag has actually moved, so the steppers stand down. */
+export type StepperContextValue = {
+  draggingRef: RefObject<boolean>
 }
 
-const NumberInputContext = createContext<NumberInputStore | null>(null)
-
-type NumberInputProviderProps = React.PropsWithChildren<ProviderProps>
-
-export function NumberInputProvider({
-  children,
-  ...props
-}: NumberInputProviderProps) {
-  const storeRef = useRef<NumberInputStore>(null)
-  if (!storeRef.current) {
-    storeRef.current = createNumberInputStore(props)
-  }
-
-  useEffect(() => {
-    if (storeRef.current) {
-      const parsed = parseValue(
-        String(props?.value || ''),
-        props?.units,
-        props?.digit,
-      )
-      storeRef.current.setState({
-        ...props,
-        ...{
-          value: parsed.formatValue,
-          valueAsNumber: parsed.rawValue,
-        },
-      })
-    } else {
-      storeRef.current = createNumberInputStore(props)
-    }
-  }, [props])
-
-  return (
-    <NumberInputContext.Provider value={storeRef.current}>
-      {children}
-    </NumberInputContext.Provider>
-  )
-}
+const StepperContext = createContext<StepperContextValue | null>(null)
 
-export function useNumberInputContext<T>(
-  selector: (state: State & Action) => T,
-): T {
-  const store = useContext(NumberInputContext)
-  if (!store) throw new Error('Missing NumberInputContext.Provider in the tree')
-  return useStore(store, selector)
+export const StepperProvider = StepperContext.Provider
+
+export function useStepperContext(): StepperContextValue | null {
+  return useContext(StepperContext)
 }

package/src/components/NumberInput/index.css

@@ -1,6 +1,7 @@
-.tremolo-number-input-wrapper {
+.tremolo-number-input {
   --border-radius: 4px;
   --stepper-width: 20px;
+  --stepper-icon-size: 12px;
   --active-color: oklch(59.5% 0.17548 266.373);
   --border-color: oklch(81% 0 0);
 
@@ -9,70 +10,34 @@
   position: relative;
   width: 140px;
   height: min-content;
-  border-style: solid;
-  border-color: var(--border-color);
-  border-width: 0px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
   outline: none;
   transition: all 0.1s;
 
-  &:not(:focus-within):has(> .tremolo-number-input[data-error='true']) {
-    border-color: oklch(64.245% 0.21266 25.499);
-  }
-
-  &[data-variant='outline'] {
-    border-width: 1px;
-    border-radius: var(--border-radius);
-
-    &:hover {
-      --border-color: oklch(65.335% 0 0);
-    }
-
-    &:focus-within {
-      --border-color: var(--active-color);
-      box-shadow: 0px 0px 0px 2px
-        color-mix(in srgb, var(--active-color) 10%, transparent);
-    }
+  &:hover {
+    --border-color: oklch(65.335% 0 0);
   }
 
-  &[data-variant='filled'] {
-    --bg: oklch(95.88% 0 0);
-    border-width: 1px;
-    border-radius: var(--border-radius);
-    border-color: transparent;
-    background-color: var(--bg);
-
-    &:hover {
-      --bg: oklch(93.166% 0 0);
-    }
-
-    &:focus-within {
-      background-color: inherit;
-      --border-color: var(--active-color);
-      box-shadow: 0px 0px 0px 2px
-        color-mix(in srgb, var(--active-color) 10%, transparent);
-    }
+  &:focus-within {
+    --border-color: var(--active-color);
+    box-shadow: 0px 0px 0px 2px
+      color-mix(in srgb, var(--active-color) 10%, transparent);
   }
 
-  &[data-variant='flushed'] {
-    border-bottom-width: 1px;
-
-    &:hover {
-      --border-color: oklch(65.335% 0 0);
-    }
-
-    &:focus-within {
-      --border-color: var(--active-color);
-      box-shadow: 0px 2px 0px 0px
-        color-mix(in srgb, var(--active-color) 10%, transparent);
-    }
+  &:not(:focus-within):has(
+      .tremolo-number-input-field[data-out-of-range='true']
+    ) {
+    border-color: oklch(64.245% 0.21266 25.499);
   }
 
-  &[data-stepper='false'] {
+  /* Only leave room for the stepper when one was composed in. */
+  &:not(:has(.tremolo-number-input-stepper)) {
     --stepper-width: 0px;
   }
 }
 
-.tremolo-number-input {
+.tremolo-number-input-field {
   display: block;
   color: inherit;
   width: calc(100% - 20px - var(--stepper-width));
@@ -100,26 +65,28 @@
   width: var(--stepper-width);
   transition: all 0.1s linear;
 
-  &[data-dynamic='true'] {
-    opacity: 0;
-    transform: translateX(40%);
-  }
+  /* Kept out of the way until the input is being used. */
+  opacity: 0;
+  transform: translateX(40%);
 }
 
-:is(
-    .tremolo-number-input-wrapper:hover,
-    .tremolo-number-input-wrapper:focus-within
-  )
+:is(.tremolo-number-input:hover, .tremolo-number-input:focus-within)
   .tremolo-number-input-stepper {
   opacity: 1;
   transform: translateX(0);
 }
 
-.tremolo-number-input-increment-stepper {
-  border-inline-start-width: 1px;
-  border-inline-start-style: solid;
-  border-inline-start-color: oklch(84.522% 0 0);
-  font-size: calc(0.75rem);
+.tremolo-number-input-stepper-icon {
+  width: var(--stepper-icon-size);
+  height: var(--stepper-icon-size);
+}
+
+:is(
+  .tremolo-number-input-increment-stepper,
+  .tremolo-number-input-decrement-stepper
+) {
+  border-inline-start: 1px solid oklch(84.522% 0 0);
+  font-size: 0.75rem;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -127,59 +94,28 @@
   max-height: 50%;
   user-select: none;
   cursor: pointer;
-  border-top-right-radius: var(--border-radius);
 
   &[aria-disabled='false']:active {
     background-color: oklch(37.798% 0.03812 254.612 / 0.055);
   }
 
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-  }
-
+  &[aria-disabled='true'],
   &[aria-readonly='true'] {
     cursor: not-allowed;
   }
 }
 
+.tremolo-number-input-increment-stepper {
+  border-top-right-radius: var(--border-radius);
+}
+
 .tremolo-number-input-decrement-stepper {
-  border-inline-start-width: 1px;
-  border-inline-start-style: solid;
-  border-inline-start-color: oklch(84.522% 0 0);
   border-top: 1px solid oklch(84.522% 0 0);
-  font-size: calc(0.75rem);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex: 1 1 0%;
-  max-height: 50%;
-  user-select: none;
-  cursor: pointer;
   border-bottom-right-radius: var(--border-radius);
-
-  &[aria-disabled='false']:active {
-    background-color: oklch(37.798% 0.03812 254.612 / 0.055);
-  }
-
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-  }
-
-  &[aria-readonly='true'] {
-    cursor: not-allowed;
-  }
 }
 
 :where(.dark, [data-theme='dark']) {
-  .tremolo-number-input-wrapper {
+  .tremolo-number-input {
     --border-color: oklch(52% 0 0);
-
-    &[data-variant='filled'] {
-      --bg: oklch(43.5% 0 0);
-
-      &:hover {
-        --bg: oklch(46.6% 0 0);
-      }
-    }
   }
 }