Reactivity with shadcn-solid textfield

import { createMemo } from 'solid-js'
import {
  TextField,
  TextFieldLabel,
  TextFieldDescription,
  TextFieldRoot,
} from '@/components/ui/textfield'

import type { Component, Accessor } from 'solid-js'
import type { JSX } from 'solid-js/jsx-runtime'

type NumberValue = number | Accessor<number>
type NumberSetter = ((v: number) => void) | ((prev: number) => number)

interface NumberInputProps {
  id: string
  label: JSX.Element
  info?: JSX.Element
  class?: string
  min?: number
  max?: number
  value?: NumberValue
  onInput?: NumberSetter
}

export const NumberInput: Component<NumberInputProps> = (props) => {
  // const getValue = (): string => {
  //   console.log('getValue:', props.value)
  //   if (props.value === undefined) return ''
  //   return typeof props.value === 'function' ? props.value().toString() : props.value.toString()
  // }
  const value = createMemo(() => {
    console.log('getValue:', typeof props.value === 'function' ? props.value() : props.value)
    if (props.value === undefined) return ''
    return typeof props.value === 'function' ? props.value().toString() : props.value.toString()
  })

  const clampValue = (value: number): number => {
    let clampedValue = value

    if (props.min !== undefined) {
      clampedValue = Math.max(props.min, clampedValue)
    }

    if (props.max !== undefined) {
      clampedValue = Math.min(props.max, clampedValue)
    }

    return clampedValue
  }

  const handleInput = (e: Event) => {
    const target = e.target as HTMLInputElement
    const newValue = clampValue(Number(target.value))
    console.log('setValue:', target.value, newValue)

    props.onInput?.(newValue)
  }

  return (
    <TextFieldRoot
      class={props.class ?? 'w-24'}
      // defaultValue={getValue()}
    >
      <TextFieldLabel for={props.id}>{props.label}</TextFieldLabel>
      <TextField
        id={props.id}
        type="number"
        min={props.min}
        max={props.max}
        value={value()}
        onInput={handleInput}
      />
      <TextFieldDescription>{props.info}</TextFieldDescription>
    </TextFieldRoot>
  )
}

export default NumberInput