@allxsmith/bestax-bulma 5.55.0 → 5.57.0

package/dist/esm/form/Numberinput.js.map

@@ -1 +1 @@
-{"version":3,"file":"Numberinput.js","sources":["../../../src/form/Numberinput.tsx"],"sourcesContent":["import React, { forwardRef, useState, useCallback, useRef } from 'react';\nimport type { JSX } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport {\n  useFieldsetDisabled,\n  useInsideField,\n  useInsideControl,\n} from './FormContext';\nimport { Field } from './Field';\nimport { FormFieldProps } from './fieldProps';\nimport { useAutoLabelId } from './useAutoLabelId';\n\n/** Valid sizes for the Numberinput component. */\nexport type NumberinputSize = 'small' | 'medium' | 'large';\n\n/** Valid colors for the Numberinput wrapper and control buttons. */\nexport type NumberinputColor =\n  | 'primary'\n  | 'link'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'light'\n  | 'dark';\n\n/** Valid colors for the Numberinput inner input element. */\nexport type NumberinputInputColor =\n  'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n\n/** Position of the increment/decrement control buttons. */\nexport type NumberinputControlsPosition = 'left' | 'right' | 'both';\n\n/** Visual variant for the Numberinput controls. */\nexport type NumberinputVariant = 'plusminus' | 'stepper';\n\n/**\n * Props for the Numberinput component.\n * @helperProps Helper props go on the outer `.numberinput` `<div>`, with\n * `className`. The other attributes go on the `<input>`.\n * @extraProp {string} [className] - Additional CSS classes.\n * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the input element.\n */\nexport interface NumberinputProps\n  extends\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'color' | 'size' | 'onChange' | 'value' | 'defaultValue' | 'type'\n    >,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'>,\n    FormFieldProps {\n  /** Field label. Automatically associated with the number input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`) and you set no `id` here. Not rendered either by a plusminus `bare` Numberinput outside a `Field`. */\n  label?: React.ReactNode;\n  /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */\n  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n    [key: string]: unknown;\n  };\n  /** Controlled value. */\n  value?: number;\n  /** Default value for uncontrolled usage. */\n  defaultValue?: number;\n  /** Minimum allowed value. */\n  min?: number;\n  /** Maximum allowed value. */\n  max?: number;\n  /** Step increment (default: 1). */\n  step?: number;\n  /** Size variant. */\n  size?: NumberinputSize;\n  /** Color variant for buttons. */\n  color?: NumberinputColor;\n  /** Color of the input field itself. */\n  inputColor?: NumberinputInputColor;\n  /** Position of +/- buttons. */\n  controlsPosition?: NumberinputControlsPosition;\n  /** Use rounded buttons. */\n  controlsRounded?: boolean;\n  /** Uses compact button spacing. */\n  compact?: boolean;\n  /**\n   * Renders the plusminus controls without a `.field` row of their own, so\n   * they join the row of a `Field` with `hasAddons` or `grouped` they sit\n   * in. On by default inside a `Field`, unless a `Control` is anywhere above\n   * it: a `Control` stacks its children, so there the controls keep their\n   * own row.\n   * @defaultValue auto\n   */\n  bare?: boolean;\n  /** Style variant for the control buttons. */\n  variant?: NumberinputVariant;\n  /** Whether the input is disabled. */\n  disabled?: boolean;\n  /** Whether the input can be typed in. */\n  editable?: boolean;\n  /**\n   * Shows a loading spinner on the input's control.\n   * Under `prefers-reduced-motion: reduce` the spinner stops and stays\n   * drawn (with bestax's CSS loaded).\n   * Use this rather than `isLoading` on a `Control` around the Numberinput:\n   * that spinner sits at the `Control`'s right edge, on top of whichever\n   * button is there, while this one stays inside the input.\n   */\n  isLoading?: boolean;\n  /** Enables exponential step increments when holding buttons. */\n  exponential?: boolean;\n  /** Callback when value changes. */\n  onChange?: (value: number) => void;\n}\n\nconst ArrowDropUp = () => (\n  <svg\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2.5\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"M7 14.5l5-5 5 5\" />\n  </svg>\n);\n\nconst ArrowDropDown = () => (\n  <svg\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2.5\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"M7 9.5l5 5 5-5\" />\n  </svg>\n);\n\n/**\n * The `Numberinput` component provides a number input with increment/decrement buttons.\n *\n * @function\n * @param {NumberinputProps} props - Props for the Numberinput component.\n * @returns {JSX.Element} The rendered numeric input element.\n *\n * @example\n * // Basic number input\n * <Numberinput defaultValue={5} min={0} max={100} />\n *\n * @example\n * // Stepper variant with color\n * <Numberinput variant=\"stepper\" color=\"primary\" step={10} />\n */\nexport const Numberinput = forwardRef<HTMLInputElement, NumberinputProps>(\n  (\n    {\n      // Field props\n      label,\n      labelSize,\n      labelProps,\n      horizontal,\n      message,\n      messageColor,\n      fieldClassName,\n      value: controlledValue,\n      defaultValue,\n      min,\n      max,\n      step = 1,\n      size,\n      color,\n      inputColor,\n      controlsPosition = 'both',\n      controlsRounded = false,\n      compact = false,\n      bare,\n      variant = 'plusminus',\n      disabled: disabledProp,\n      editable = true,\n      isLoading = false,\n      exponential = false,\n      onChange,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const disabled = useFieldsetDisabled(disabledProp);\n    const insideField = useInsideField();\n    // Bare controls join their parent's row, which a `.control` does not lay\n    // out. `useInsideControl()` is true anywhere below a `Control`, even past\n    // a `Field` nested in it, so there they keep their own row as well.\n    const insideControl = useInsideControl();\n    const effectiveBare = bare ?? (insideField && !insideControl);\n    const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n    const [internalValue, setInternalValue] = useState<number | undefined>(\n      defaultValue\n    );\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    // Determine if controlled\n    const isControlled = controlledValue !== undefined;\n    const currentValue = isControlled ? controlledValue : internalValue;\n\n    // Layout mode\n    const isStepper = variant === 'stepper';\n    const isAddons = compact || isStepper;\n    const effectiveControlsPosition = isStepper ? 'right' : controlsPosition;\n\n    // The plusminus bare branch renders no Field and no label at all.\n    const { controlId, fieldLabelProps } = useAutoLabelId({\n      label,\n      id: props.id,\n      labelProps,\n      rendersLabel: !insideField && (isStepper || !effectiveBare),\n    });\n\n    // Clamp value to min/max\n    const clampValue = useCallback(\n      (val: number): number => {\n        let clamped = val;\n        if (min !== undefined && clamped < min) clamped = min;\n        if (max !== undefined && clamped > max) clamped = max;\n        return clamped;\n      },\n      [min, max]\n    );\n\n    // Update value\n    const updateValue = useCallback(\n      (newValue: number) => {\n        const clampedValue = clampValue(newValue);\n        if (!isControlled) {\n          setInternalValue(clampedValue);\n        }\n        onChange?.(clampedValue);\n      },\n      [isControlled, clampValue, onChange]\n    );\n\n    // Exponential step: step grows with value magnitude\n    const getEffectiveStep = useCallback(() => {\n      if (!exponential) return step;\n      return step * Math.max(1, Math.floor(Math.abs(currentValue ?? 0)));\n    }, [exponential, step, currentValue]);\n\n    // Handle increment\n    const handleIncrement = useCallback(() => {\n      updateValue((currentValue ?? 0) + getEffectiveStep());\n    }, [currentValue, getEffectiveStep, updateValue]);\n\n    // Handle decrement\n    const handleDecrement = useCallback(() => {\n      updateValue((currentValue ?? 0) - getEffectiveStep());\n    }, [currentValue, getEffectiveStep, updateValue]);\n\n    // Handle input change\n    const handleInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const newValue = parseFloat(e.target.value);\n        if (!isNaN(newValue)) {\n          updateValue(newValue);\n        }\n      },\n      [updateValue]\n    );\n\n    // Handle keyboard\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'ArrowUp') {\n          e.preventDefault();\n          handleIncrement();\n        } else if (e.key === 'ArrowDown') {\n          e.preventDefault();\n          handleDecrement();\n        }\n      },\n      [handleIncrement, handleDecrement]\n    );\n\n    // Check if at limits\n    const isAtMin =\n      min !== undefined && currentValue !== undefined && currentValue <= min;\n    const isAtMax =\n      max !== undefined && currentValue !== undefined && currentValue >= max;\n\n    // Generate classes\n    const fieldClasses = usePrefixedClassNames('field', {\n      'is-grouped': !isAddons,\n      'has-addons': isAddons,\n    });\n\n    const numberinputClasses = usePrefixedClassNames('numberinput', {\n      'is-compact': isAddons,\n      'is-stepper': isStepper,\n      [`is-${size}`]: !!size,\n      'is-disabled': disabled,\n      [`controls-${effectiveControlsPosition}`]:\n        effectiveControlsPosition !== 'both',\n    });\n\n    const controlClasses = usePrefixedClassNames('control');\n    const expandedControlClasses = usePrefixedClassNames('control', {\n      'is-expanded': true,\n      'is-loading': isLoading,\n    });\n\n    const buttonClasses = usePrefixedClassNames('button', {\n      [`is-${size}`]: !!size,\n      [`is-${color}`]: !!color,\n      'is-rounded': controlsRounded,\n    });\n\n    const inputClasses = usePrefixedClassNames('input', {\n      [`is-${size}`]: !!size,\n      [`is-${inputColor}`]: !!inputColor,\n    });\n\n    const iconClasses = usePrefixedClassNames('icon', 'is-small');\n    const stepperClasses = usePrefixedClassNames('numberinput-stepper');\n    const stepperButtonClasses = usePrefixedClassNames(\n      'numberinput-stepper-button'\n    );\n\n    const combinedClasses = classNames(\n      fieldClasses,\n      numberinputClasses,\n      bulmaHelperClasses,\n      className\n    );\n\n    const helpClass = usePrefixedClassNames('help', {\n      [`is-${messageColor}`]: !!messageColor,\n    });\n    const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n    // Use combined ref\n    const combinedRef = (node: HTMLInputElement | null) => {\n      (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n        node;\n      if (typeof ref === 'function') {\n        ref(node);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;\n      }\n    };\n\n    // Shared input element\n    const inputControl = (\n      <div className={expandedControlClasses}>\n        <input\n          ref={combinedRef}\n          type=\"number\"\n          className={inputClasses}\n          value={currentValue ?? ''}\n          min={min}\n          max={max}\n          step={step}\n          disabled={disabled}\n          readOnly={!editable}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          aria-valuenow={currentValue ?? undefined}\n          aria-valuemin={min}\n          aria-valuemax={max}\n          {...rest}\n          // After the spread: an undefined `id` key in rest would wipe it.\n          id={controlId}\n        />\n      </div>\n    );\n\n    // Stepper variant\n    if (isStepper) {\n      const stepperElement = (\n        <div className={combinedClasses}>\n          {inputControl}\n          <div className={controlClasses}>\n            <div className={stepperClasses}>\n              <button\n                type=\"button\"\n                className={stepperButtonClasses}\n                onClick={handleIncrement}\n                disabled={disabled || isAtMax}\n                tabIndex={-1}\n                aria-label=\"Increase value\"\n              >\n                <ArrowDropUp />\n              </button>\n              <button\n                type=\"button\"\n                className={stepperButtonClasses}\n                onClick={handleDecrement}\n                disabled={disabled || isAtMin}\n                tabIndex={-1}\n                aria-label=\"Decrease value\"\n              >\n                <ArrowDropDown />\n              </button>\n            </div>\n          </div>\n        </div>\n      );\n\n      if (!insideField) {\n        return (\n          <Field\n            label={label}\n            labelSize={labelSize}\n            labelProps={fieldLabelProps}\n            horizontal={horizontal}\n            className={fieldClassName}\n          >\n            {stepperElement}\n            {messageEl}\n          </Field>\n        );\n      }\n\n      return (\n        <>\n          {stepperElement}\n          {messageEl}\n        </>\n      );\n    }\n\n    // Plusminus buttons\n    const decrementButton = (\n      <button\n        type=\"button\"\n        className={buttonClasses}\n        onClick={handleDecrement}\n        disabled={disabled || isAtMin}\n        tabIndex={-1}\n        aria-label=\"Decrease value\"\n      >\n        <span className={iconClasses}>\n          <span aria-hidden=\"true\">&minus;</span>\n        </span>\n      </button>\n    );\n\n    const incrementButton = (\n      <button\n        type=\"button\"\n        className={buttonClasses}\n        onClick={handleIncrement}\n        disabled={disabled || isAtMax}\n        tabIndex={-1}\n        aria-label=\"Increase value\"\n      >\n        <span className={iconClasses}>\n          <span aria-hidden=\"true\">+</span>\n        </span>\n      </button>\n    );\n\n    const decrementControl = (\n      <div className={controlClasses}>{decrementButton}</div>\n    );\n    const incrementControl = (\n      <div className={controlClasses}>{incrementButton}</div>\n    );\n\n    // Bare mode: no outer .field wrapper, for composing inside a parent Field\n    if (effectiveBare) {\n      const bareClasses = classNames(\n        numberinputClasses,\n        bulmaHelperClasses,\n        className\n      );\n\n      if (effectiveControlsPosition === 'left') {\n        return (\n          <div className={bareClasses} style={{ display: 'contents' }}>\n            {decrementControl}\n            {incrementControl}\n            {inputControl}\n          </div>\n        );\n      }\n\n      if (effectiveControlsPosition === 'right') {\n        return (\n          <div className={bareClasses} style={{ display: 'contents' }}>\n            {inputControl}\n            {decrementControl}\n            {incrementControl}\n          </div>\n        );\n      }\n\n      return (\n        <div className={bareClasses} style={{ display: 'contents' }}>\n          {decrementControl}\n          {inputControl}\n          {incrementControl}\n        </div>\n      );\n    }\n\n    // Controls left: [−] [+] [input]\n    let numberinputElement: JSX.Element;\n    if (effectiveControlsPosition === 'left') {\n      numberinputElement = (\n        <div className={combinedClasses}>\n          {decrementControl}\n          {incrementControl}\n          {inputControl}\n        </div>\n      );\n    } else if (effectiveControlsPosition === 'right') {\n      // Controls right: [input] [−] [+]\n      numberinputElement = (\n        <div className={combinedClasses}>\n          {inputControl}\n          {decrementControl}\n          {incrementControl}\n        </div>\n      );\n    } else {\n      // Both sides (default): [−] [input] [+]\n      numberinputElement = (\n        <div className={combinedClasses}>\n          {decrementControl}\n          {inputControl}\n          {incrementControl}\n        </div>\n      );\n    }\n\n    if (!insideField) {\n      return (\n        <Field\n          label={label}\n          labelSize={labelSize}\n          labelProps={fieldLabelProps}\n          horizontal={horizontal}\n          className={fieldClassName}\n        >\n          {numberinputElement}\n          {messageEl}\n        </Field>\n      );\n    }\n\n    return (\n      <>\n        {numberinputElement}\n        {messageEl}\n      </>\n    );\n  }\n);\n\nNumberinput.displayName = 'Numberinput';\n\n/** @deprecated Use `Numberinput` — same component. */\nexport const NumberInput = Numberinput;\n\n/** @deprecated Use `NumberinputProps`. */\nexport type NumberInputProps = NumberinputProps;\n\nexport default Numberinput;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;AA8GA,MAAM,WAAW,GAAG,OAClBA,aACE,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EAAA,aAAA,EACV,MAAM,EAAA,QAAA,EAElBA,cAAM,CAAC,EAAC,iBAAiB,EAAA,CAAG,EAAA,CACxB,CACP;AAED,MAAM,aAAa,GAAG,OACpBA,aACE,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EAAA,aAAA,EACV,MAAM,EAAA,QAAA,EAElBA,cAAM,CAAC,EAAC,gBAAgB,EAAA,CAAG,EAAA,CACvB,CACP;AAED;;;;;;;;;;;;;;AAcG;AACI,MAAM,WAAW,GAAG,UAAU,CACnC,CACE;AACE;AACA,KAAK,EACL,SAAS,EACT,UAAU,EACV,UAAU,EACV,OAAO,EACP,YAAY,EACZ,cAAc,EACd,KAAK,EAAE,eAAe,EACtB,YAAY,EACZ,GAAG,EACH,GAAG,EACH,IAAI,GAAG,CAAC,EACR,IAAI,EACJ,KAAK,EACL,UAAU,EACV,gBAAgB,GAAG,MAAM,EACzB,eAAe,GAAG,KAAK,EACvB,OAAO,GAAG,KAAK,EACf,IAAI,EACJ,OAAO,GAAG,WAAW,EACrB,QAAQ,EAAE,YAAY,EACtB,QAAQ,GAAG,IAAI,EACf,SAAS,GAAG,KAAK,EACjB,WAAW,GAAG,KAAK,EACnB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,MAAM,QAAQ,GAAG,mBAAmB,CAAC,YAAY,CAAC;AAClD,IAAA,MAAM,WAAW,GAAG,cAAc,EAAE;;;;AAIpC,IAAA,MAAM,aAAa,GAAG,gBAAgB,EAAE;IACxC,MAAM,aAAa,GAAG,IAAI,KAAK,WAAW,IAAI,CAAC,aAAa,CAAC;IAC7D,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC;IAC3D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAChD,YAAY,CACb;AACD,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC;;AAG/C,IAAA,MAAM,YAAY,GAAG,eAAe,KAAK,SAAS;IAClD,MAAM,YAAY,GAAG,YAAY,GAAG,eAAe,GAAG,aAAa;;AAGnE,IAAA,MAAM,SAAS,GAAG,OAAO,KAAK,SAAS;AACvC,IAAA,MAAM,QAAQ,GAAG,OAAO,IAAI,SAAS;IACrC,MAAM,yBAAyB,GAAG,SAAS,GAAG,OAAO,GAAG,gBAAgB;;AAGxE,IAAA,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,GAAG,cAAc,CAAC;QACpD,KAAK;QACL,EAAE,EAAE,KAAK,CAAC,EAAE;QACZ,UAAU;QACV,YAAY,EAAE,CAAC,WAAW,KAAK,SAAS,IAAI,CAAC,aAAa,CAAC;AAC5D,KAAA,CAAC;;AAGF,IAAA,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,GAAW,KAAY;QACtB,IAAI,OAAO,GAAG,GAAG;AACjB,QAAA,IAAI,GAAG,KAAK,SAAS,IAAI,OAAO,GAAG,GAAG;YAAE,OAAO,GAAG,GAAG;AACrD,QAAA,IAAI,GAAG,KAAK,SAAS,IAAI,OAAO,GAAG,GAAG;YAAE,OAAO,GAAG,GAAG;AACrD,QAAA,OAAO,OAAO;AAChB,IAAA,CAAC,EACD,CAAC,GAAG,EAAE,GAAG,CAAC,CACX;;AAGD,IAAA,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,QAAgB,KAAI;AACnB,QAAA,MAAM,YAAY,GAAG,UAAU,CAAC,QAAQ,CAAC;QACzC,IAAI,CAAC,YAAY,EAAE;YACjB,gBAAgB,CAAC,YAAY,CAAC;QAChC;AACA,QAAA,QAAQ,GAAG,YAAY,CAAC;IAC1B,CAAC,EACD,CAAC,YAAY,EAAE,UAAU,EAAE,QAAQ,CAAC,CACrC;;AAGD,IAAA,MAAM,gBAAgB,GAAG,WAAW,CAAC,MAAK;AACxC,QAAA,IAAI,CAAC,WAAW;AAAE,YAAA,OAAO,IAAI;QAC7B,OAAO,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,YAAY,IAAI,CAAC,CAAC,CAAC,CAAC;IACpE,CAAC,EAAE,CAAC,WAAW,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC;;AAGrC,IAAA,MAAM,eAAe,GAAG,WAAW,CAAC,MAAK;QACvC,WAAW,CAAC,CAAC,YAAY,IAAI,CAAC,IAAI,gBAAgB,EAAE,CAAC;IACvD,CAAC,EAAE,CAAC,YAAY,EAAE,gBAAgB,EAAE,WAAW,CAAC,CAAC;;AAGjD,IAAA,MAAM,eAAe,GAAG,WAAW,CAAC,MAAK;QACvC,WAAW,CAAC,CAAC,YAAY,IAAI,CAAC,IAAI,gBAAgB,EAAE,CAAC;IACvD,CAAC,EAAE,CAAC,YAAY,EAAE,gBAAgB,EAAE,WAAW,CAAC,CAAC;;AAGjD,IAAA,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,CAAsC,KAAI;QACzC,MAAM,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;AAC3C,QAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE;YACpB,WAAW,CAAC,QAAQ,CAAC;QACvB;AACF,IAAA,CAAC,EACD,CAAC,WAAW,CAAC,CACd;;AAGD,IAAA,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,CAAwC,KAAI;AAC3C,QAAA,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,EAAE;YACvB,CAAC,CAAC,cAAc,EAAE;AAClB,YAAA,eAAe,EAAE;QACnB;AAAO,aAAA,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE;YAChC,CAAC,CAAC,cAAc,EAAE;AAClB,YAAA,eAAe,EAAE;QACnB;AACF,IAAA,CAAC,EACD,CAAC,eAAe,EAAE,eAAe,CAAC,CACnC;;AAGD,IAAA,MAAM,OAAO,GACX,GAAG,KAAK,SAAS,IAAI,YAAY,KAAK,SAAS,IAAI,YAAY,IAAI,GAAG;AACxE,IAAA,MAAM,OAAO,GACX,GAAG,KAAK,SAAS,IAAI,YAAY,KAAK,SAAS,IAAI,YAAY,IAAI,GAAG;;AAGxE,IAAA,MAAM,YAAY,GAAG,qBAAqB,CAAC,OAAO,EAAE;QAClD,YAAY,EAAE,CAAC,QAAQ;AACvB,QAAA,YAAY,EAAE,QAAQ;AACvB,KAAA,CAAC;AAEF,IAAA,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,aAAa,EAAE;AAC9D,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,CAAC,MAAM,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI;AACtB,QAAA,aAAa,EAAE,QAAQ;AACvB,QAAA,CAAC,YAAY,yBAAyB,CAAA,CAAE,GACtC,yBAAyB,KAAK,MAAM;AACvC,KAAA,CAAC;AAEF,IAAA,MAAM,cAAc,GAAG,qBAAqB,CAAC,SAAS,CAAC;AACvD,IAAA,MAAM,sBAAsB,GAAG,qBAAqB,CAAC,SAAS,EAAE;AAC9D,QAAA,aAAa,EAAE,IAAI;AACnB,QAAA,YAAY,EAAE,SAAS;AACxB,KAAA,CAAC;AAEF,IAAA,MAAM,aAAa,GAAG,qBAAqB,CAAC,QAAQ,EAAE;AACpD,QAAA,CAAC,MAAM,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI;AACtB,QAAA,CAAC,MAAM,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,KAAK;AACxB,QAAA,YAAY,EAAE,eAAe;AAC9B,KAAA,CAAC;AAEF,IAAA,MAAM,YAAY,GAAG,qBAAqB,CAAC,OAAO,EAAE;AAClD,QAAA,CAAC,MAAM,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI;AACtB,QAAA,CAAC,MAAM,UAAU,CAAA,CAAE,GAAG,CAAC,CAAC,UAAU;AACnC,KAAA,CAAC;IAEF,MAAM,WAAW,GAAG,qBAAqB,CAAC,MAAM,EAAE,UAAU,CAAC;AAC7D,IAAA,MAAM,cAAc,GAAG,qBAAqB,CAAC,qBAAqB,CAAC;AACnE,IAAA,MAAM,oBAAoB,GAAG,qBAAqB,CAChD,4BAA4B,CAC7B;AAED,IAAA,MAAM,eAAe,GAAG,UAAU,CAChC,YAAY,EACZ,kBAAkB,EAClB,kBAAkB,EAClB,SAAS,CACV;AAED,IAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC,MAAM,EAAE;AAC9C,QAAA,CAAC,MAAM,YAAY,CAAA,CAAE,GAAG,CAAC,CAAC,YAAY;AACvC,KAAA,CAAC;AACF,IAAA,MAAM,SAAS,GAAG,OAAO,GAAGA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAE,SAAS,YAAG,OAAO,EAAA,CAAK,GAAG,IAAI;;AAGzE,IAAA,MAAM,WAAW,GAAG,CAAC,IAA6B,KAAI;AACnD,QAAA,QAA4D,CAAC,OAAO;AACnE,YAAA,IAAI;AACN,QAAA,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;YAC7B,GAAG,CAAC,IAAI,CAAC;QACX;aAAO,IAAI,GAAG,EAAE;AACb,YAAA,GAAuD,CAAC,OAAO,GAAG,IAAI;QACzE;AACF,IAAA,CAAC;;AAGD,IAAA,MAAM,YAAY,IAChBA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,sBAAsB,EAAA,QAAA,EACpCA,GAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,WAAW,EAChB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,YAAY,EACvB,KAAK,EAAE,YAAY,IAAI,EAAE,EACzB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,QAAQ,EACnB,QAAQ,EAAE,iBAAiB,EAC3B,SAAS,EAAE,aAAa,EAAA,eAAA,EACT,YAAY,IAAI,SAAS,EAAA,eAAA,EACzB,GAAG,EAAA,eAAA,EACH,GAAG,KACd,IAAI;;AAER,YAAA,EAAE,EAAE,SAAS,EAAA,CACb,EAAA,CACE,CACP;;IAGD,IAAI,SAAS,EAAE;AACb,QAAA,MAAM,cAAc,IAClBC,cAAK,SAAS,EAAE,eAAe,EAAA,QAAA,EAAA,CAC5B,YAAY,EACbD,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,cAAc,YAC5BC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,cAAc,EAAA,QAAA,EAAA,CAC5BD,GAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,oBAAoB,EAC/B,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAC7B,QAAQ,EAAE,EAAE,EAAA,YAAA,EACD,gBAAgB,EAAA,QAAA,EAE3BA,GAAA,CAAC,WAAW,EAAA,EAAA,CAAG,EAAA,CACR,EACTA,GAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,oBAAoB,EAC/B,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAC7B,QAAQ,EAAE,EAAE,EAAA,YAAA,EACD,gBAAgB,EAAA,QAAA,EAE3BA,GAAA,CAAC,aAAa,EAAA,EAAA,CAAG,EAAA,CACV,IACL,EAAA,CACF,CAAA,EAAA,CACF,CACP;QAED,IAAI,CAAC,WAAW,EAAE;AAChB,YAAA,QACEC,IAAA,CAAC,KAAK,EAAA,EACJ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,eAAe,EAC3B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,cAAc,EAAA,QAAA,EAAA,CAExB,cAAc,EACd,SAAS,CAAA,EAAA,CACJ;QAEZ;AAEA,QAAA,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,cAAc,EACd,SAAS,CAAA,EAAA,CACT;IAEP;;AAGA,IAAA,MAAM,eAAe,IACnBF,gBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAC7B,QAAQ,EAAE,EAAE,EAAA,YAAA,EACD,gBAAgB,YAE3BA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,WAAW,YAC1BA,GAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAkB,MAAM,uBAAe,EAAA,CAClC,EAAA,CACA,CACV;AAED,IAAA,MAAM,eAAe,IACnBA,gBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAC7B,QAAQ,EAAE,EAAE,EAAA,YAAA,EACD,gBAAgB,YAE3BA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,WAAW,YAC1BA,GAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAkB,MAAM,kBAAS,EAAA,CAC5B,EAAA,CACA,CACV;IAED,MAAM,gBAAgB,IACpBA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,cAAc,EAAA,QAAA,EAAG,eAAe,EAAA,CAAO,CACxD;IACD,MAAM,gBAAgB,IACpBA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,cAAc,EAAA,QAAA,EAAG,eAAe,EAAA,CAAO,CACxD;;IAGD,IAAI,aAAa,EAAE;QACjB,MAAM,WAAW,GAAG,UAAU,CAC5B,kBAAkB,EAClB,kBAAkB,EAClB,SAAS,CACV;AAED,QAAA,IAAI,yBAAyB,KAAK,MAAM,EAAE;YACxC,QACEC,cAAK,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,aACxD,gBAAgB,EAChB,gBAAgB,EAChB,YAAY,CAAA,EAAA,CACT;QAEV;AAEA,QAAA,IAAI,yBAAyB,KAAK,OAAO,EAAE;YACzC,QACEA,cAAK,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,aACxD,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,CAAA,EAAA,CACb;QAEV;QAEA,QACEA,cAAK,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,aACxD,gBAAgB,EAChB,YAAY,EACZ,gBAAgB,CAAA,EAAA,CACb;IAEV;;AAGA,IAAA,IAAI,kBAA+B;AACnC,IAAA,IAAI,yBAAyB,KAAK,MAAM,EAAE;AACxC,QAAA,kBAAkB,IAChBA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,eAAe,EAAA,QAAA,EAAA,CAC5B,gBAAgB,EAChB,gBAAgB,EAChB,YAAY,CAAA,EAAA,CACT,CACP;IACH;AAAO,SAAA,IAAI,yBAAyB,KAAK,OAAO,EAAE;;AAEhD,QAAA,kBAAkB,IAChBA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,eAAe,EAAA,QAAA,EAAA,CAC5B,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,CAAA,EAAA,CACb,CACP;IACH;SAAO;;AAEL,QAAA,kBAAkB,IAChBA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,eAAe,EAAA,QAAA,EAAA,CAC5B,gBAAgB,EAChB,YAAY,EACZ,gBAAgB,CAAA,EAAA,CACb,CACP;IACH;IAEA,IAAI,CAAC,WAAW,EAAE;AAChB,QAAA,QACEA,IAAA,CAAC,KAAK,EAAA,EACJ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,eAAe,EAC3B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,cAAc,EAAA,QAAA,EAAA,CAExB,kBAAkB,EAClB,SAAS,CAAA,EAAA,CACJ;IAEZ;AAEA,IAAA,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,kBAAkB,EAClB,SAAS,CAAA,EAAA,CACT;AAEP,CAAC;AAGH,WAAW,CAAC,WAAW,GAAG,aAAa;AAEvC;AACO,MAAM,WAAW,GAAG;;"}
+{"version":3,"file":"Numberinput.js","sources":["../../../src/form/Numberinput.tsx"],"sourcesContent":["import React, { forwardRef, useState, useCallback, useRef } from 'react';\nimport type { JSX } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport {\n  useFieldsetDisabled,\n  useInsideField,\n  useInsideControl,\n} from './FormContext';\nimport { Field } from './Field';\nimport { FormFieldProps } from './fieldProps';\nimport { useAutoLabelId } from './useAutoLabelId';\n\n/** Valid sizes for the Numberinput component. */\nexport type NumberinputSize = 'small' | 'medium' | 'large';\n\n/** Valid colors for the Numberinput wrapper and control buttons. */\nexport type NumberinputColor =\n  | 'primary'\n  | 'link'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'light'\n  | 'dark';\n\n/** Valid colors for the Numberinput inner input element. */\nexport type NumberinputInputColor =\n  'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n\n/** Position of the increment/decrement control buttons. */\nexport type NumberinputControlsPosition = 'left' | 'right' | 'both';\n\n/** Visual variant for the Numberinput controls. */\nexport type NumberinputVariant = 'plusminus' | 'stepper';\n\n/**\n * Props for the Numberinput component.\n * @helperProps Helper props go on the outer `.numberinput` `<div>`, with\n * `className`. The other attributes go on the `<input>`.\n * @extraProp {string} [className] - Additional CSS classes.\n * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the input element.\n */\nexport interface NumberinputProps\n  extends\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'color' | 'size' | 'onChange' | 'value' | 'defaultValue' | 'type'\n    >,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'>,\n    FormFieldProps {\n  /** Field label. Automatically associated with the number input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`) and you set no `id` here. Not rendered either by a plusminus `bare` Numberinput outside a `Field`. */\n  label?: React.ReactNode;\n  /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */\n  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n    [key: string]: unknown;\n  };\n  /** Controlled value. */\n  value?: number;\n  /** Default value for uncontrolled usage. */\n  defaultValue?: number;\n  /** Minimum allowed value. */\n  min?: number;\n  /** Maximum allowed value. */\n  max?: number;\n  /** Step increment (default: 1). */\n  step?: number;\n  /** Size variant. */\n  size?: NumberinputSize;\n  /** Color variant for buttons. */\n  color?: NumberinputColor;\n  /** Color of the input field itself. */\n  inputColor?: NumberinputInputColor;\n  /** Position of +/- buttons. */\n  controlsPosition?: NumberinputControlsPosition;\n  /** Use rounded buttons. */\n  controlsRounded?: boolean;\n  /** Uses compact button spacing. */\n  compact?: boolean;\n  /**\n   * Renders the plusminus controls without a `.field` row of their own, so\n   * they join the row of a `Field` with `hasAddons` or `grouped` they sit\n   * in. On by default inside a `Field`, unless a `Control` is anywhere above\n   * it: a `Control` stacks its children, so there the controls keep their\n   * own row.\n   * @defaultValue auto\n   */\n  bare?: boolean;\n  /** Style variant for the control buttons. */\n  variant?: NumberinputVariant;\n  /** Whether the input is disabled. */\n  disabled?: boolean;\n  /** Whether the input can be typed in. */\n  editable?: boolean;\n  /**\n   * Shows a loading spinner on the input's control.\n   * Under `prefers-reduced-motion: reduce` the spinner stops and stays\n   * drawn (with bestax's CSS loaded).\n   * Use this rather than `isLoading` on a `Control` around the Numberinput:\n   * that spinner sits at the `Control`'s right edge, on top of whichever\n   * button is there, while this one stays inside the input.\n   */\n  isLoading?: boolean;\n  /** Enables exponential step increments when holding buttons. */\n  exponential?: boolean;\n  /** Callback when value changes. */\n  onChange?: (value: number) => void;\n}\n\nconst ArrowDropUp = () => (\n  <svg\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2.5\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"M7 14.5l5-5 5 5\" />\n  </svg>\n);\n\nconst ArrowDropDown = () => (\n  <svg\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2.5\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"M7 9.5l5 5 5-5\" />\n  </svg>\n);\n\n/**\n * The `Numberinput` component provides a number input with increment/decrement buttons.\n *\n * @function\n * @param {NumberinputProps} props - Props for the Numberinput component.\n * @returns {JSX.Element} The rendered numeric input element.\n *\n * @example\n * // Basic number input\n * <Numberinput defaultValue={5} min={0} max={100} />\n *\n * @example\n * // Stepper variant with color\n * <Numberinput variant=\"stepper\" color=\"primary\" step={10} />\n */\nexport const Numberinput = forwardRef<HTMLInputElement, NumberinputProps>(\n  (\n    {\n      // Field props\n      label,\n      labelSize,\n      labelProps,\n      horizontal,\n      message,\n      messageColor,\n      fieldClassName,\n      value: controlledValue,\n      defaultValue,\n      min,\n      max,\n      step = 1,\n      size,\n      color,\n      inputColor,\n      controlsPosition = 'both',\n      controlsRounded = false,\n      compact = false,\n      bare,\n      variant = 'plusminus',\n      disabled: disabledProp,\n      editable = true,\n      isLoading = false,\n      exponential = false,\n      onChange,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const disabled = useFieldsetDisabled(disabledProp);\n    const insideField = useInsideField();\n    // Bare controls join their parent's row, which a `.control` does not lay\n    // out. `useInsideControl()` is true anywhere below a `Control`, even past\n    // a `Field` nested in it, so there they keep their own row as well.\n    const insideControl = useInsideControl();\n    const effectiveBare = bare ?? (insideField && !insideControl);\n    const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n    const [internalValue, setInternalValue] = useState<number | undefined>(\n      defaultValue\n    );\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    // Determine if controlled\n    const isControlled = controlledValue !== undefined;\n    const currentValue = isControlled ? controlledValue : internalValue;\n\n    // Layout mode\n    const isStepper = variant === 'stepper';\n    const isAddons = compact || isStepper;\n    const effectiveControlsPosition = isStepper ? 'right' : controlsPosition;\n\n    // The plusminus bare branch renders no Field and no label at all.\n    const { controlId, fieldLabelProps } = useAutoLabelId({\n      label,\n      id: props.id,\n      labelProps,\n      rendersLabel: !insideField && (isStepper || !effectiveBare),\n    });\n\n    // Clamp value to min/max\n    const clampValue = useCallback(\n      (val: number): number => {\n        let clamped = val;\n        if (min !== undefined && clamped < min) clamped = min;\n        if (max !== undefined && clamped > max) clamped = max;\n        return clamped;\n      },\n      [min, max]\n    );\n\n    // Update value\n    const updateValue = useCallback(\n      (newValue: number) => {\n        const clampedValue = clampValue(newValue);\n        if (!isControlled) {\n          setInternalValue(clampedValue);\n        }\n        onChange?.(clampedValue);\n      },\n      [isControlled, clampValue, onChange]\n    );\n\n    // Exponential step: step grows with value magnitude\n    const getEffectiveStep = useCallback(() => {\n      if (!exponential) return step;\n      return step * Math.max(1, Math.floor(Math.abs(currentValue ?? 0)));\n    }, [exponential, step, currentValue]);\n\n    // Handle increment\n    const handleIncrement = useCallback(() => {\n      updateValue((currentValue ?? 0) + getEffectiveStep());\n    }, [currentValue, getEffectiveStep, updateValue]);\n\n    // Handle decrement\n    const handleDecrement = useCallback(() => {\n      updateValue((currentValue ?? 0) - getEffectiveStep());\n    }, [currentValue, getEffectiveStep, updateValue]);\n\n    // Handle input change\n    const handleInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const newValue = parseFloat(e.target.value);\n        if (!isNaN(newValue)) {\n          updateValue(newValue);\n        }\n      },\n      [updateValue]\n    );\n\n    // Handle keyboard\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'ArrowUp') {\n          e.preventDefault();\n          handleIncrement();\n        } else if (e.key === 'ArrowDown') {\n          e.preventDefault();\n          handleDecrement();\n        }\n      },\n      [handleIncrement, handleDecrement]\n    );\n\n    // Check if at limits\n    const isAtMin =\n      min !== undefined && currentValue !== undefined && currentValue <= min;\n    const isAtMax =\n      max !== undefined && currentValue !== undefined && currentValue >= max;\n\n    // Generate classes\n    const fieldClasses = usePrefixedClassNames('field', {\n      'is-grouped': !isAddons,\n      'has-addons': isAddons,\n    });\n\n    const numberinputClasses = usePrefixedClassNames('numberinput', {\n      'is-compact': isAddons,\n      'is-stepper': isStepper,\n      [`is-${size}`]: !!size,\n      'is-disabled': disabled,\n      [`controls-${effectiveControlsPosition}`]:\n        effectiveControlsPosition !== 'both',\n    });\n\n    const controlClasses = usePrefixedClassNames('control');\n    const expandedControlClasses = usePrefixedClassNames('control', {\n      'is-expanded': true,\n      'is-loading': isLoading,\n    });\n\n    const buttonClasses = usePrefixedClassNames('button', {\n      [`is-${size}`]: !!size,\n      [`is-${color}`]: !!color,\n      'is-rounded': controlsRounded,\n    });\n\n    const inputClasses = usePrefixedClassNames('input', {\n      [`is-${size}`]: !!size,\n      [`is-${inputColor}`]: !!inputColor,\n    });\n\n    const iconClasses = usePrefixedClassNames('icon', 'is-small');\n    const stepperClasses = usePrefixedClassNames('numberinput-stepper');\n    const stepperButtonClasses = usePrefixedClassNames(\n      'numberinput-stepper-button'\n    );\n\n    const combinedClasses = classNames(\n      fieldClasses,\n      numberinputClasses,\n      bulmaHelperClasses,\n      className\n    );\n\n    const helpClass = usePrefixedClassNames('help', {\n      [`is-${messageColor}`]: !!messageColor,\n    });\n    const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n    // Use combined ref\n    const combinedRef = (node: HTMLInputElement | null) => {\n      (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n        node;\n      if (typeof ref === 'function') {\n        ref(node);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;\n      }\n    };\n\n    // Shared input element\n    const inputControl = (\n      <div className={expandedControlClasses}>\n        <input\n          ref={combinedRef}\n          type=\"number\"\n          className={inputClasses}\n          value={currentValue ?? ''}\n          min={min}\n          max={max}\n          step={step}\n          disabled={disabled}\n          readOnly={!editable}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          aria-valuenow={currentValue ?? undefined}\n          aria-valuemin={min}\n          aria-valuemax={max}\n          {...rest}\n          // After the spread: an undefined `id` key in rest would wipe it.\n          id={controlId}\n        />\n      </div>\n    );\n\n    // Stepper variant\n    if (isStepper) {\n      const stepperElement = (\n        <div className={combinedClasses}>\n          {inputControl}\n          <div className={controlClasses}>\n            <div className={stepperClasses}>\n              <button\n                type=\"button\"\n                className={stepperButtonClasses}\n                onClick={handleIncrement}\n                disabled={disabled || isAtMax}\n                tabIndex={-1}\n                aria-label=\"Increase value\"\n              >\n                <ArrowDropUp />\n              </button>\n              <button\n                type=\"button\"\n                className={stepperButtonClasses}\n                onClick={handleDecrement}\n                disabled={disabled || isAtMin}\n                tabIndex={-1}\n                aria-label=\"Decrease value\"\n              >\n                <ArrowDropDown />\n              </button>\n            </div>\n          </div>\n        </div>\n      );\n\n      if (!insideField) {\n        return (\n          <Field\n            label={label}\n            labelSize={labelSize}\n            labelProps={fieldLabelProps}\n            horizontal={horizontal}\n            className={fieldClassName}\n          >\n            {stepperElement}\n            {messageEl}\n          </Field>\n        );\n      }\n\n      return (\n        <>\n          {stepperElement}\n          {messageEl}\n        </>\n      );\n    }\n\n    // Plusminus buttons\n    const decrementButton = (\n      <button\n        type=\"button\"\n        className={buttonClasses}\n        onClick={handleDecrement}\n        disabled={disabled || isAtMin}\n        tabIndex={-1}\n        aria-label=\"Decrease value\"\n      >\n        <span className={iconClasses}>\n          <span aria-hidden=\"true\">&minus;</span>\n        </span>\n      </button>\n    );\n\n    const incrementButton = (\n      <button\n        type=\"button\"\n        className={buttonClasses}\n        onClick={handleIncrement}\n        disabled={disabled || isAtMax}\n        tabIndex={-1}\n        aria-label=\"Increase value\"\n      >\n        <span className={iconClasses}>\n          <span aria-hidden=\"true\">+</span>\n        </span>\n      </button>\n    );\n\n    const decrementControl = (\n      <div className={controlClasses}>{decrementButton}</div>\n    );\n    const incrementControl = (\n      <div className={controlClasses}>{incrementButton}</div>\n    );\n\n    // Bare mode: no outer .field wrapper, for composing inside a parent Field\n    if (effectiveBare) {\n      const bareClasses = classNames(\n        numberinputClasses,\n        bulmaHelperClasses,\n        className\n      );\n\n      if (effectiveControlsPosition === 'left') {\n        return (\n          <div className={bareClasses} style={{ display: 'contents' }}>\n            {decrementControl}\n            {incrementControl}\n            {inputControl}\n          </div>\n        );\n      }\n\n      if (effectiveControlsPosition === 'right') {\n        return (\n          <div className={bareClasses} style={{ display: 'contents' }}>\n            {inputControl}\n            {decrementControl}\n            {incrementControl}\n          </div>\n        );\n      }\n\n      return (\n        <div className={bareClasses} style={{ display: 'contents' }}>\n          {decrementControl}\n          {inputControl}\n          {incrementControl}\n        </div>\n      );\n    }\n\n    // Controls left: [−] [+] [input]\n    let numberinputElement: JSX.Element;\n    if (effectiveControlsPosition === 'left') {\n      numberinputElement = (\n        <div className={combinedClasses}>\n          {decrementControl}\n          {incrementControl}\n          {inputControl}\n        </div>\n      );\n    } else if (effectiveControlsPosition === 'right') {\n      // Controls right: [input] [−] [+]\n      numberinputElement = (\n        <div className={combinedClasses}>\n          {inputControl}\n          {decrementControl}\n          {incrementControl}\n        </div>\n      );\n    } else {\n      // Both sides (default): [−] [input] [+]\n      numberinputElement = (\n        <div className={combinedClasses}>\n          {decrementControl}\n          {inputControl}\n          {incrementControl}\n        </div>\n      );\n    }\n\n    if (!insideField) {\n      return (\n        <Field\n          label={label}\n          labelSize={labelSize}\n          labelProps={fieldLabelProps}\n          horizontal={horizontal}\n          className={fieldClassName}\n        >\n          {numberinputElement}\n          {messageEl}\n        </Field>\n      );\n    }\n\n    return (\n      <>\n        {numberinputElement}\n        {messageEl}\n      </>\n    );\n  }\n);\n\nNumberinput.displayName = 'Numberinput';\n\n/** @deprecated Use `Numberinput` — same component. */\nexport const NumberInput = Numberinput;\n\n/** @deprecated Use `NumberinputProps`. */\nexport type NumberInputProps = NumberinputProps;\n\nexport default Numberinput;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/esm/form/PinInput.js

@@ -1,4 +1,5 @@
 /* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
 import { classNames, usePrefixedClassNames, prefixedClassNames } from '../helpers/classNames.js';

package/dist/esm/form/PinInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PinInput.js","sources":["../../../src/form/PinInput.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  classNames,\n  prefixedClassNames,\n  usePrefixedClassNames,\n} from '../helpers/classNames';\nimport { useClassPrefix } from '../helpers/Config';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\nimport { getActiveElementInTree } from '../helpers/shadowDom';\nimport {\n  useInsideField,\n  useInsideControl,\n  rendersOwnField,\n  rendersOwnControl,\n  useFieldsetDisabled,\n} from './FormContext';\nimport { Field } from './Field';\nimport { Control } from './Control';\nimport { FormFieldProps } from './fieldProps';\nimport { useAutoLabelId } from './useAutoLabelId';\n\n/**\n * What a PinInput takes: `'number'` keeps digits only, and `'alphanumeric'`\n * keeps the letters A to Z, in either case, and digits. A digit from any\n * script, such as an Arabic-Indic `٣` or a Persian `۳`, is kept as its ASCII\n * digit, `3`.\n */\nexport type PinInputType = 'number' | 'alphanumeric';\n\n/**\n * Props for the PinInput component.\n * Inside an existing `Control` it renders no `Control` of its own. Inside an\n * outer `Field`, or a `Control` with no `Field` around it, it renders no\n * `Field` of its own either. The exception is `label`, `message`, `horizontal`\n * or `fieldClassName` in that bare `Control`: it keeps a `Field` for them,\n * nested in the `.control`, and warns in development. Wrap the `Control` in a\n * `Field` instead, and set the `label`, `horizontal` and class name on that\n * `Field`.\n * Every other prop goes to the `<input>` that holds the code, except\n * `className` and the helper props, which go to the row of boxes.\n * @helperProps Helper props go on the `.pin-input` `<div>`, the row of boxes,\n * with `className`. The other attributes go on the `<input>` that holds the\n * code.\n * @extraProp {string} [name] - Form field name, on the input, so a form submits the code under it.\n * @extraProp {string} [autoComplete=\"one-time-code\"] - Lets the browser offer a code it received by text message, and tells a password manager this is a one-time code.\n * @extraProp {string} [inputMode] - The keyboard a phone shows: `\"numeric\"` with `type=\"number\"`, `\"text\"` with `type=\"alphanumeric\"`.\n * @extraProp {string} [pattern] - Exactly `length` of what `type` takes, `[0-9]{6}` by default, so a form with `required` won't submit a partial code. Any non-empty partial code fails it, `required` or not.\n * @extraProp {string} [className] - Additional CSS classes for the row of boxes.\n * @extraProp {React.Ref<HTMLInputElement>} [ref] - Ref forwarded to the input that holds the code.\n */\nexport interface PinInputProps\n  extends\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      | 'color'\n      | 'size'\n      | 'type'\n      | 'value'\n      | 'defaultValue'\n      | 'onChange'\n      | 'maxLength'\n    >,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'>,\n    FormFieldProps {\n  /** Field label. Automatically associated with the input that holds the code via `htmlFor`, so a screen reader announces one field under this name. Uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`) and you set no `id` here. */\n  label?: React.ReactNode;\n  /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */\n  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n    [key: string]: unknown;\n  };\n  /** Applied to the input that holds the code (the labellable control), not the row of boxes. */\n  id?: string;\n  /** How many characters the code has. Each gets a box, and it is the input's `maxLength`. */\n  length?: number;\n  /** The code (controlled). Only its first `length` characters are shown and submitted. */\n  value?: string;\n  /** The code to start with (uncontrolled). Only its first `length` characters are kept. */\n  defaultValue?: string;\n  /**\n   * What the code takes. A digit from any script, such as an Arabic-Indic or\n   * a Persian one, goes in as its ASCII digit, so the code reaches\n   * `onChange`, `onComplete` and the form as `0` to `9`. Anything else typed\n   * or pasted is dropped, and the caret stays where it was. The input stays a\n   * text field either way, so a code keeps its leading zeros.\n   */\n  type?: PinInputType;\n  /**\n   * Shows a dot in each filled box in place of its character, and makes the\n   * input a password field, so a screen reader doesn't read the code out\n   * either.\n   */\n  isMasked?: boolean;\n  /** Bulma color for the boxes, the colors an `Input` takes. */\n  color?:\n    | 'primary'\n    | 'link'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'black'\n    | 'dark'\n    | 'light'\n    | 'white';\n  /** Size of the boxes. */\n  size?: 'small' | 'medium' | 'large';\n  /** Round boxes. */\n  isRounded?: boolean;\n  /** Whether the input is disabled. */\n  disabled?: boolean;\n  /**\n   * Called with the code each time it changes. A paste replaces the whole\n   * code with what was pasted, kept to what `type` takes and cut to `length`,\n   * and a paste with nothing the code takes changes nothing.\n   */\n  onChange?: (value: string) => void;\n  /**\n   * Called with the code when a change makes it `length` characters long,\n   * such as typing the last character, a paste or autofill. It fires once for\n   * each change that fills the last box with a new code, and never on a\n   * render. A `value` you set yourself doesn't call it.\n   */\n  onComplete?: (value: string) => void;\n}\n\ntype Selection = readonly [start: number, end: number];\n\n/** What a masked box shows for its character, a filled circle. */\nconst MASK = '\\u25CF';\n\n/**\n * `text` with each decimal digit, in any script, turned into its ASCII digit:\n * `١٢٣` and `۱۲۳` become `123`. Unicode assigns decimal digits in runs of ten,\n * from 0 to 9, so a digit's value is how far it is from the start of its run,\n * modulo ten for runs that sit next to each other.\n */\nconst toAsciiDigits = (text: string) =>\n  text.replace(/\\p{Nd}/gu, digit => {\n    const point = digit.codePointAt(0)!;\n    let start = point;\n    while (/\\p{Nd}/u.test(String.fromCodePoint(start - 1))) start--;\n    return String((point - start) % 10);\n  });\n\n/**\n * The `PinInput` component is a field for a short code, such as a one-time\n * code or a PIN, drawn as a row of boxes with one character in each.\n *\n * The code lives in one real `<input>` that lies over the boxes, so it is\n * one field to a screen reader, and paste, autofill from a text message and\n * password managers work on it as they do on any input. The boxes draw what\n * it holds, and the box at the caret, or every box in a selection, shows\n * Bulma's focus look.\n *\n * @function\n * @param {PinInputProps} props - Props for the PinInput component.\n * @returns {JSX.Element} The rendered code field.\n *\n * @example\n * <PinInput\n *   label=\"Verification code\"\n *   value={code}\n *   onChange={setCode}\n *   onComplete={verify}\n * />\n */\nexport const PinInput = forwardRef<HTMLInputElement, PinInputProps>(\n  (\n    {\n      // Field props\n      label,\n      labelSize,\n      labelProps,\n      horizontal,\n      message,\n      messageColor,\n      fieldClassName,\n      length = 6,\n      value: controlledValue,\n      defaultValue = '',\n      type = 'number',\n      isMasked = false,\n      color,\n      size,\n      isRounded = false,\n      disabled: disabledProp,\n      onChange,\n      onComplete,\n      onPaste,\n      onFocus,\n      onBlur,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const disabled = useFieldsetDisabled(disabledProp);\n    const insideField = useInsideField();\n    const insideControl = useInsideControl();\n    const ownField = rendersOwnField('PinInput', {\n      insideField,\n      insideControl,\n      label,\n      message,\n      horizontal,\n      fieldClassName,\n    });\n    const ownControl = rendersOwnControl('PinInput', { insideControl });\n    const { controlId, fieldLabelProps } = useAutoLabelId({\n      label,\n      id: props.id,\n      labelProps,\n      rendersLabel: ownField,\n    });\n    const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n    const classPrefix = useClassPrefix();\n\n    const [internalValue, setInternalValue] = useState(defaultValue);\n    // Cut to `length`, so the boxes, the input and the form all hold the same\n    // code.\n    const code = (\n      controlledValue !== undefined ? controlledValue : internalValue\n    ).slice(0, length);\n\n    const allowed = type === 'alphanumeric' ? '[0-9A-Za-z]' : '[0-9]';\n    /** The characters of `text` the code takes, digits in ASCII, cut to `length`. */\n    const keep = (text: string) =>\n      (toAsciiDigits(text).match(new RegExp(allowed, 'g')) ?? [])\n        .join('')\n        .slice(0, length);\n\n    const commit = (next: string) => {\n      if (next === code) return;\n      if (controlledValue === undefined) setInternalValue(next);\n      onChange?.(next);\n      if (next.length === length) onComplete?.(next);\n    };\n\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const setRefs = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') return ref(node);\n        if (ref) ref.current = node;\n      },\n      [ref]\n    );\n\n    // The input's selection while it has focus, which the boxes draw.\n    const [selection, setSelection] = useState<Selection | null>(null);\n    const follow = useCallback(() => {\n      const input = inputRef.current!;\n      const next: Selection | null =\n        getActiveElementInTree(input) === input\n          ? [input.selectionStart!, input.selectionEnd!]\n          : null;\n      setSelection(prev =>\n        prev?.[0] === next?.[0] && prev?.[1] === next?.[1] ? prev : next\n      );\n    }, []);\n    // A new code moves the caret, and so can a value set from outside.\n    useClientLayoutEffect(follow, [code, follow]);\n    // React's `onSelect` never fires inside a shadow root, so the boxes\n    // follow the browser's own `selectionchange`. A caret that moves fires it\n    // at the input, and it bubbles to the document, but in a shadow root some\n    // browsers fire it at the document alone and others at the input alone,\n    // so both are followed.\n    useEffect(() => {\n      const input = inputRef.current!;\n      const doc = input.ownerDocument;\n      input.addEventListener('selectionchange', follow);\n      doc.addEventListener('selectionchange', follow);\n      return () => {\n        input.removeEventListener('selectionchange', follow);\n        doc.removeEventListener('selectionchange', follow);\n      };\n    }, [follow]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const input = e.target;\n      const typed = input.value;\n      const next = keep(typed);\n      if (next !== typed) {\n        // Drop what the code doesn't take before React sees the value, so\n        // the caret stays where it was rather than jumping to the end.\n        const caret = keep(typed.slice(0, input.selectionStart!)).length;\n        input.value = next;\n        input.setSelectionRange(caret, caret);\n      }\n      commit(next);\n    };\n\n    // The browser cuts a paste to `maxLength` before anything else sees it,\n    // so a code pasted as \"123 456\" would lose its last digit. What the code\n    // takes is kept first, and it replaces the whole code, since what you\n    // paste into a code field is the code.\n    const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n      onPaste?.(e);\n      if (e.defaultPrevented) return;\n      e.preventDefault();\n      const pasted = keep(e.clipboardData.getData('text'));\n      if (pasted && !e.currentTarget.readOnly) commit(pasted);\n    };\n\n    const rootClass = classNames(\n      usePrefixedClassNames('pin-input'),\n      bulmaHelperClasses,\n      className\n    );\n    const fieldClass = usePrefixedClassNames('pin-input-field');\n    const helpClass = usePrefixedClassNames('help', {\n      [`is-${messageColor}`]: !!messageColor,\n    });\n\n    // The boxes the selection covers: the one at a caret, or every selected\n    // one. A caret after the last character marks the last box.\n    const [start, end] = selection ?? [-1, -1];\n    const first = Math.min(start, length - 1);\n    const last = Math.max(first + 1, Math.min(end, length));\n    const boxes = Array.from({ length }, (_, i) => {\n      const char = code[i];\n      const active = i >= first && i < last;\n      return (\n        <div\n          key={i}\n          aria-hidden=\"true\"\n          className={prefixedClassNames(classPrefix, 'input', 'pin-input-box', {\n            [`is-${color}`]: !!color,\n            [`is-${size}`]: !!size,\n            'is-rounded': isRounded,\n            'is-focused': active,\n            'has-caret': active && start === end && !char,\n            'is-disabled': disabled,\n          })}\n        >\n          {char && (isMasked ? MASK : char)}\n        </div>\n      );\n    });\n\n    // Left to right on a right-to-left page too: a code is written that way,\n    // so its first character stays in the first box on the left, and the\n    // arrow keys move the caret the way the boxes run.\n    let content = (\n      <div className={rootClass} dir=\"ltr\">\n        <input\n          ref={setRefs}\n          className={fieldClass}\n          type={isMasked ? 'password' : 'text'}\n          inputMode={type === 'alphanumeric' ? 'text' : 'numeric'}\n          autoComplete=\"one-time-code\"\n          autoCorrect=\"off\"\n          spellCheck={false}\n          // A partial code fails constraint validation. `minLength` would\n          // say so only after a keystroke, never after a paste or a filtered\n          // character, which set the value from script.\n          pattern={`${allowed}{${length}}`}\n          {...rest}\n          value={code}\n          maxLength={length}\n          disabled={disabled}\n          onChange={handleChange}\n          onPaste={handlePaste}\n          onFocus={e => {\n            follow();\n            onFocus?.(e);\n          }}\n          onBlur={e => {\n            setSelection(null);\n            onBlur?.(e);\n          }}\n          // After the spread: an undefined `id` key in rest would wipe it.\n          id={controlId}\n        />\n        {boxes}\n      </div>\n    );\n\n    if (ownControl) {\n      content = <Control>{content}</Control>;\n    }\n\n    const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n    if (ownField) {\n      return (\n        <Field\n          label={label}\n          labelSize={labelSize}\n          labelProps={fieldLabelProps}\n          horizontal={horizontal}\n          className={fieldClassName}\n        >\n          {content}\n          {messageEl}\n        </Field>\n      );\n    }\n\n    return (\n      <>\n        {content}\n        {messageEl}\n      </>\n    );\n  }\n);\n\nPinInput.displayName = 'PinInput';\n\nexport default PinInput;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"PinInput.js","sources":["../../../src/form/PinInput.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  classNames,\n  prefixedClassNames,\n  usePrefixedClassNames,\n} from '../helpers/classNames';\nimport { useClassPrefix } from '../helpers/Config';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\nimport { getActiveElementInTree } from '../helpers/shadowDom';\nimport {\n  useInsideField,\n  useInsideControl,\n  rendersOwnField,\n  rendersOwnControl,\n  useFieldsetDisabled,\n} from './FormContext';\nimport { Field } from './Field';\nimport { Control } from './Control';\nimport { FormFieldProps } from './fieldProps';\nimport { useAutoLabelId } from './useAutoLabelId';\n\n/**\n * What a PinInput takes: `'number'` keeps digits only, and `'alphanumeric'`\n * keeps the letters A to Z, in either case, and digits. A digit from any\n * script, such as an Arabic-Indic `٣` or a Persian `۳`, is kept as its ASCII\n * digit, `3`.\n */\nexport type PinInputType = 'number' | 'alphanumeric';\n\n/**\n * Props for the PinInput component.\n * Inside an existing `Control` it renders no `Control` of its own. Inside an\n * outer `Field`, or a `Control` with no `Field` around it, it renders no\n * `Field` of its own either. The exception is `label`, `message`, `horizontal`\n * or `fieldClassName` in that bare `Control`: it keeps a `Field` for them,\n * nested in the `.control`, and warns in development. Wrap the `Control` in a\n * `Field` instead, and set the `label`, `horizontal` and class name on that\n * `Field`.\n * Every other prop goes to the `<input>` that holds the code, except\n * `className` and the helper props, which go to the row of boxes.\n * @helperProps Helper props go on the `.pin-input` `<div>`, the row of boxes,\n * with `className`. The other attributes go on the `<input>` that holds the\n * code.\n * @extraProp {string} [name] - Form field name, on the input, so a form submits the code under it.\n * @extraProp {string} [autoComplete=\"one-time-code\"] - Lets the browser offer a code it received by text message, and tells a password manager this is a one-time code.\n * @extraProp {string} [inputMode] - The keyboard a phone shows: `\"numeric\"` with `type=\"number\"`, `\"text\"` with `type=\"alphanumeric\"`.\n * @extraProp {string} [pattern] - Exactly `length` of what `type` takes, `[0-9]{6}` by default, so a form with `required` won't submit a partial code. Any non-empty partial code fails it, `required` or not.\n * @extraProp {string} [className] - Additional CSS classes for the row of boxes.\n * @extraProp {React.Ref<HTMLInputElement>} [ref] - Ref forwarded to the input that holds the code.\n */\nexport interface PinInputProps\n  extends\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      | 'color'\n      | 'size'\n      | 'type'\n      | 'value'\n      | 'defaultValue'\n      | 'onChange'\n      | 'maxLength'\n    >,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'>,\n    FormFieldProps {\n  /** Field label. Automatically associated with the input that holds the code via `htmlFor`, so a screen reader announces one field under this name. Uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`) and you set no `id` here. */\n  label?: React.ReactNode;\n  /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */\n  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n    [key: string]: unknown;\n  };\n  /** Applied to the input that holds the code (the labellable control), not the row of boxes. */\n  id?: string;\n  /** How many characters the code has. Each gets a box, and it is the input's `maxLength`. */\n  length?: number;\n  /** The code (controlled). Only its first `length` characters are shown and submitted. */\n  value?: string;\n  /** The code to start with (uncontrolled). Only its first `length` characters are kept. */\n  defaultValue?: string;\n  /**\n   * What the code takes. A digit from any script, such as an Arabic-Indic or\n   * a Persian one, goes in as its ASCII digit, so the code reaches\n   * `onChange`, `onComplete` and the form as `0` to `9`. Anything else typed\n   * or pasted is dropped, and the caret stays where it was. The input stays a\n   * text field either way, so a code keeps its leading zeros.\n   */\n  type?: PinInputType;\n  /**\n   * Shows a dot in each filled box in place of its character, and makes the\n   * input a password field, so a screen reader doesn't read the code out\n   * either.\n   */\n  isMasked?: boolean;\n  /** Bulma color for the boxes, the colors an `Input` takes. */\n  color?:\n    | 'primary'\n    | 'link'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'black'\n    | 'dark'\n    | 'light'\n    | 'white';\n  /** Size of the boxes. */\n  size?: 'small' | 'medium' | 'large';\n  /** Round boxes. */\n  isRounded?: boolean;\n  /** Whether the input is disabled. */\n  disabled?: boolean;\n  /**\n   * Called with the code each time it changes. A paste replaces the whole\n   * code with what was pasted, kept to what `type` takes and cut to `length`,\n   * and a paste with nothing the code takes changes nothing.\n   */\n  onChange?: (value: string) => void;\n  /**\n   * Called with the code when a change makes it `length` characters long,\n   * such as typing the last character, a paste or autofill. It fires once for\n   * each change that fills the last box with a new code, and never on a\n   * render. A `value` you set yourself doesn't call it.\n   */\n  onComplete?: (value: string) => void;\n}\n\ntype Selection = readonly [start: number, end: number];\n\n/** What a masked box shows for its character, a filled circle. */\nconst MASK = '\\u25CF';\n\n/**\n * `text` with each decimal digit, in any script, turned into its ASCII digit:\n * `١٢٣` and `۱۲۳` become `123`. Unicode assigns decimal digits in runs of ten,\n * from 0 to 9, so a digit's value is how far it is from the start of its run,\n * modulo ten for runs that sit next to each other.\n */\nconst toAsciiDigits = (text: string) =>\n  text.replace(/\\p{Nd}/gu, digit => {\n    const point = digit.codePointAt(0)!;\n    let start = point;\n    while (/\\p{Nd}/u.test(String.fromCodePoint(start - 1))) start--;\n    return String((point - start) % 10);\n  });\n\n/**\n * The `PinInput` component is a field for a short code, such as a one-time\n * code or a PIN, drawn as a row of boxes with one character in each.\n *\n * The code lives in one real `<input>` that lies over the boxes, so it is\n * one field to a screen reader, and paste, autofill from a text message and\n * password managers work on it as they do on any input. The boxes draw what\n * it holds, and the box at the caret, or every box in a selection, shows\n * Bulma's focus look.\n *\n * @function\n * @param {PinInputProps} props - Props for the PinInput component.\n * @returns {JSX.Element} The rendered code field.\n *\n * @example\n * <PinInput\n *   label=\"Verification code\"\n *   value={code}\n *   onChange={setCode}\n *   onComplete={verify}\n * />\n */\nexport const PinInput = forwardRef<HTMLInputElement, PinInputProps>(\n  (\n    {\n      // Field props\n      label,\n      labelSize,\n      labelProps,\n      horizontal,\n      message,\n      messageColor,\n      fieldClassName,\n      length = 6,\n      value: controlledValue,\n      defaultValue = '',\n      type = 'number',\n      isMasked = false,\n      color,\n      size,\n      isRounded = false,\n      disabled: disabledProp,\n      onChange,\n      onComplete,\n      onPaste,\n      onFocus,\n      onBlur,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const disabled = useFieldsetDisabled(disabledProp);\n    const insideField = useInsideField();\n    const insideControl = useInsideControl();\n    const ownField = rendersOwnField('PinInput', {\n      insideField,\n      insideControl,\n      label,\n      message,\n      horizontal,\n      fieldClassName,\n    });\n    const ownControl = rendersOwnControl('PinInput', { insideControl });\n    const { controlId, fieldLabelProps } = useAutoLabelId({\n      label,\n      id: props.id,\n      labelProps,\n      rendersLabel: ownField,\n    });\n    const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n    const classPrefix = useClassPrefix();\n\n    const [internalValue, setInternalValue] = useState(defaultValue);\n    // Cut to `length`, so the boxes, the input and the form all hold the same\n    // code.\n    const code = (\n      controlledValue !== undefined ? controlledValue : internalValue\n    ).slice(0, length);\n\n    const allowed = type === 'alphanumeric' ? '[0-9A-Za-z]' : '[0-9]';\n    /** The characters of `text` the code takes, digits in ASCII, cut to `length`. */\n    const keep = (text: string) =>\n      (toAsciiDigits(text).match(new RegExp(allowed, 'g')) ?? [])\n        .join('')\n        .slice(0, length);\n\n    const commit = (next: string) => {\n      if (next === code) return;\n      if (controlledValue === undefined) setInternalValue(next);\n      onChange?.(next);\n      if (next.length === length) onComplete?.(next);\n    };\n\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const setRefs = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') return ref(node);\n        if (ref) ref.current = node;\n      },\n      [ref]\n    );\n\n    // The input's selection while it has focus, which the boxes draw.\n    const [selection, setSelection] = useState<Selection | null>(null);\n    const follow = useCallback(() => {\n      const input = inputRef.current!;\n      const next: Selection | null =\n        getActiveElementInTree(input) === input\n          ? [input.selectionStart!, input.selectionEnd!]\n          : null;\n      setSelection(prev =>\n        prev?.[0] === next?.[0] && prev?.[1] === next?.[1] ? prev : next\n      );\n    }, []);\n    // A new code moves the caret, and so can a value set from outside.\n    useClientLayoutEffect(follow, [code, follow]);\n    // React's `onSelect` never fires inside a shadow root, so the boxes\n    // follow the browser's own `selectionchange`. A caret that moves fires it\n    // at the input, and it bubbles to the document, but in a shadow root some\n    // browsers fire it at the document alone and others at the input alone,\n    // so both are followed.\n    useEffect(() => {\n      const input = inputRef.current!;\n      const doc = input.ownerDocument;\n      input.addEventListener('selectionchange', follow);\n      doc.addEventListener('selectionchange', follow);\n      return () => {\n        input.removeEventListener('selectionchange', follow);\n        doc.removeEventListener('selectionchange', follow);\n      };\n    }, [follow]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const input = e.target;\n      const typed = input.value;\n      const next = keep(typed);\n      if (next !== typed) {\n        // Drop what the code doesn't take before React sees the value, so\n        // the caret stays where it was rather than jumping to the end.\n        const caret = keep(typed.slice(0, input.selectionStart!)).length;\n        input.value = next;\n        input.setSelectionRange(caret, caret);\n      }\n      commit(next);\n    };\n\n    // The browser cuts a paste to `maxLength` before anything else sees it,\n    // so a code pasted as \"123 456\" would lose its last digit. What the code\n    // takes is kept first, and it replaces the whole code, since what you\n    // paste into a code field is the code.\n    const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n      onPaste?.(e);\n      if (e.defaultPrevented) return;\n      e.preventDefault();\n      const pasted = keep(e.clipboardData.getData('text'));\n      if (pasted && !e.currentTarget.readOnly) commit(pasted);\n    };\n\n    const rootClass = classNames(\n      usePrefixedClassNames('pin-input'),\n      bulmaHelperClasses,\n      className\n    );\n    const fieldClass = usePrefixedClassNames('pin-input-field');\n    const helpClass = usePrefixedClassNames('help', {\n      [`is-${messageColor}`]: !!messageColor,\n    });\n\n    // The boxes the selection covers: the one at a caret, or every selected\n    // one. A caret after the last character marks the last box.\n    const [start, end] = selection ?? [-1, -1];\n    const first = Math.min(start, length - 1);\n    const last = Math.max(first + 1, Math.min(end, length));\n    const boxes = Array.from({ length }, (_, i) => {\n      const char = code[i];\n      const active = i >= first && i < last;\n      return (\n        <div\n          key={i}\n          aria-hidden=\"true\"\n          className={prefixedClassNames(classPrefix, 'input', 'pin-input-box', {\n            [`is-${color}`]: !!color,\n            [`is-${size}`]: !!size,\n            'is-rounded': isRounded,\n            'is-focused': active,\n            'has-caret': active && start === end && !char,\n            'is-disabled': disabled,\n          })}\n        >\n          {char && (isMasked ? MASK : char)}\n        </div>\n      );\n    });\n\n    // Left to right on a right-to-left page too: a code is written that way,\n    // so its first character stays in the first box on the left, and the\n    // arrow keys move the caret the way the boxes run.\n    let content = (\n      <div className={rootClass} dir=\"ltr\">\n        <input\n          ref={setRefs}\n          className={fieldClass}\n          type={isMasked ? 'password' : 'text'}\n          inputMode={type === 'alphanumeric' ? 'text' : 'numeric'}\n          autoComplete=\"one-time-code\"\n          autoCorrect=\"off\"\n          spellCheck={false}\n          // A partial code fails constraint validation. `minLength` would\n          // say so only after a keystroke, never after a paste or a filtered\n          // character, which set the value from script.\n          pattern={`${allowed}{${length}}`}\n          {...rest}\n          value={code}\n          maxLength={length}\n          disabled={disabled}\n          onChange={handleChange}\n          onPaste={handlePaste}\n          onFocus={e => {\n            follow();\n            onFocus?.(e);\n          }}\n          onBlur={e => {\n            setSelection(null);\n            onBlur?.(e);\n          }}\n          // After the spread: an undefined `id` key in rest would wipe it.\n          id={controlId}\n        />\n        {boxes}\n      </div>\n    );\n\n    if (ownControl) {\n      content = <Control>{content}</Control>;\n    }\n\n    const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n    if (ownField) {\n      return (\n        <Field\n          label={label}\n          labelSize={labelSize}\n          labelProps={fieldLabelProps}\n          horizontal={horizontal}\n          className={fieldClassName}\n        >\n          {content}\n          {messageEl}\n        </Field>\n      );\n    }\n\n    return (\n      <>\n        {content}\n        {messageEl}\n      </>\n    );\n  }\n);\n\nPinInput.displayName = 'PinInput';\n\nexport default PinInput;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/esm/form/Radio.js

@@ -1,4 +1,5 @@
 /* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useCallback } from 'react';
 import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';

package/dist/esm/form/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../src/form/Radio.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { useFieldsetDisabled, useRadiosGroup } from './FormContext';\n\n/**\n * The values the Radio `color` prop accepts, as a readonly tuple.\n *\n * `RadioProps['color']` is typed from it, so the two list the same values.\n * Map over it to build a color picker, or check a value that arrives at\n * runtime before passing it in: the component adds no color class for a value\n * outside the tuple.\n *\n * @example\n * import { Radio, Radios, radioColors } from '@allxsmith/bestax-bulma';\n *\n * <Radios name=\"accent\" defaultValue=\"primary\">\n *   {radioColors.map(color => (\n *     <Radio key={color} value={color} color={color}>\n *       {color}\n *     </Radio>\n *   ))}\n * </Radios>;\n */\nexport const radioColors = [\n  'primary',\n  'link',\n  'info',\n  'success',\n  'warning',\n  'danger',\n] as const;\n\n/**\n * The values the Radio `size` prop accepts, as a readonly tuple.\n *\n * `RadioProps['size']` is typed from it, so the two list the same values. Use\n * it to offer a size choice or to check a value that arrives at runtime: the\n * component adds no size class for a value outside the tuple. These are\n * element sizes, not the spacing scale in `validSizes`.\n *\n * @example\n * import { radioSizes } from '@allxsmith/bestax-bulma';\n *\n * type RadioSize = (typeof radioSizes)[number];\n */\nexport const radioSizes = ['small', 'normal', 'medium', 'large'] as const;\n\n/**\n * Props for the Radio component.\n *\n * @helperProps Helper props go on the outer `<label>`, with `className`. The\n * other attributes go on the `<input>`.\n */\nexport interface RadioProps\n  extends\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'size' | 'type' | 'color'\n    >,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {\n  /** Color of the radio button. */\n  color?: (typeof radioColors)[number];\n  /** Size of the radio button. */\n  size?: (typeof radioSizes)[number];\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Whether the radio is disabled. */\n  disabled?: boolean;\n  /**\n   * Additional CSS classes, on the outer `<label>`. That's the element that\n   * declares the `--bulma-radio-*` variables, so a class is how to set one:\n   * `style` and the other input attributes go to the `<input>`. Name\n   * `.styled-radio` beside your class in the selector, so it beats the\n   * label's own declaration whatever order the stylesheets load in. A\n   * `color` prop declares the active color again on\n   * `.styled-radio.is-<color>`, which ties that selector, so leave `color`\n   * unset when a class sets it.\n   */\n  className?: string;\n  /** The label/content for the radio. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Radio` component provides a Bulma-styled radio button input with flexible labels and helper classes.\n *\n * @function\n * @param {RadioProps} props - Props for the Radio component.\n * @returns {JSX.Element} The rendered radio element.\n *\n * @example\n * // Basic radio\n * <Radio name=\"option\">Option A</Radio>\n *\n * @example\n * // Inside a group\n * <Radios name=\"color\" defaultValue=\"red\">\n *   <Radio value=\"red\">Red</Radio>\n *   <Radio value=\"blue\">Blue</Radio>\n * </Radios>\n */\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      color,\n      size,\n      className,\n      children,\n      textColor,\n      disabled: disabledProp,\n      name,\n      value,\n      checked,\n      defaultChecked,\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    const disabled = useFieldsetDisabled(disabledProp);\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color: textColor,\n      ...props,\n    });\n\n    // Inherit name + selection state from a surrounding <Radios> group.\n    // Local props always win over the group (explicit > implicit).\n    const group = useRadiosGroup();\n    const effectiveName = name ?? group?.name;\n\n    // Group-managed checked state — only when the group is in\n    // controlled/uncontrolled mode (group.value is defined) AND this Radio\n    // has a value to compare against. Local `checked` always wins.\n    const groupManaged = group?.value !== undefined && value !== undefined;\n    const effectiveChecked =\n      checked !== undefined\n        ? checked\n        : groupManaged\n          ? group!.value === value\n          : undefined;\n    // When the group manages checked, suppress local defaultChecked to avoid\n    // the controlled/uncontrolled React warning.\n    const effectiveDefaultChecked = groupManaged ? undefined : defaultChecked;\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        // Local onChange always fires.\n        onChange?.(e);\n        // Dispatch to the group additionally — keeps group state in sync.\n        if (group?.onChange && value !== undefined) {\n          group.onChange(String(value));\n        }\n      },\n      [onChange, group, value]\n    );\n\n    const mainClass = usePrefixedClassNames('styled-radio', 'radio', {\n      [`is-${color}`]: color && radioColors.includes(color),\n      [`is-${size}`]: size && radioSizes.includes(size),\n    });\n    const radioClass = classNames(mainClass, bulmaHelperClasses, className);\n    const checkClass = usePrefixedClassNames('check');\n    const controlLabelClass = usePrefixedClassNames('control-label');\n\n    return (\n      <label className={radioClass}>\n        <input\n          ref={ref}\n          type=\"radio\"\n          disabled={disabled}\n          name={effectiveName}\n          value={value}\n          checked={effectiveChecked}\n          defaultChecked={effectiveDefaultChecked}\n          onChange={handleChange}\n          {...rest}\n        />\n        <span className={checkClass} />\n        {children && <span className={controlLabelClass}>{children}</span>}\n      </label>\n    );\n  }\n);\n\nRadio.displayName = 'Radio';\n\nexport default Radio;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Radio.js","sources":["../../../src/form/Radio.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { useFieldsetDisabled, useRadiosGroup } from './FormContext';\n\n/**\n * The values the Radio `color` prop accepts, as a readonly tuple.\n *\n * `RadioProps['color']` is typed from it, so the two list the same values.\n * Map over it to build a color picker, or check a value that arrives at\n * runtime before passing it in: the component adds no color class for a value\n * outside the tuple.\n *\n * @example\n * import { Radio, Radios, radioColors } from '@allxsmith/bestax-bulma';\n *\n * <Radios name=\"accent\" defaultValue=\"primary\">\n *   {radioColors.map(color => (\n *     <Radio key={color} value={color} color={color}>\n *       {color}\n *     </Radio>\n *   ))}\n * </Radios>;\n */\nexport const radioColors = [\n  'primary',\n  'link',\n  'info',\n  'success',\n  'warning',\n  'danger',\n] as const;\n\n/**\n * The values the Radio `size` prop accepts, as a readonly tuple.\n *\n * `RadioProps['size']` is typed from it, so the two list the same values. Use\n * it to offer a size choice or to check a value that arrives at runtime: the\n * component adds no size class for a value outside the tuple. These are\n * element sizes, not the spacing scale in `validSizes`.\n *\n * @example\n * import { radioSizes } from '@allxsmith/bestax-bulma';\n *\n * type RadioSize = (typeof radioSizes)[number];\n */\nexport const radioSizes = ['small', 'normal', 'medium', 'large'] as const;\n\n/**\n * Props for the Radio component.\n *\n * @helperProps Helper props go on the outer `<label>`, with `className`. The\n * other attributes go on the `<input>`.\n */\nexport interface RadioProps\n  extends\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'size' | 'type' | 'color'\n    >,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {\n  /** Color of the radio button. */\n  color?: (typeof radioColors)[number];\n  /** Size of the radio button. */\n  size?: (typeof radioSizes)[number];\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Whether the radio is disabled. */\n  disabled?: boolean;\n  /**\n   * Additional CSS classes, on the outer `<label>`. That's the element that\n   * declares the `--bulma-radio-*` variables, so a class is how to set one:\n   * `style` and the other input attributes go to the `<input>`. Name\n   * `.styled-radio` beside your class in the selector, so it beats the\n   * label's own declaration whatever order the stylesheets load in. A\n   * `color` prop declares the active color again on\n   * `.styled-radio.is-<color>`, which ties that selector, so leave `color`\n   * unset when a class sets it.\n   */\n  className?: string;\n  /** The label/content for the radio. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Radio` component provides a Bulma-styled radio button input with flexible labels and helper classes.\n *\n * @function\n * @param {RadioProps} props - Props for the Radio component.\n * @returns {JSX.Element} The rendered radio element.\n *\n * @example\n * // Basic radio\n * <Radio name=\"option\">Option A</Radio>\n *\n * @example\n * // Inside a group\n * <Radios name=\"color\" defaultValue=\"red\">\n *   <Radio value=\"red\">Red</Radio>\n *   <Radio value=\"blue\">Blue</Radio>\n * </Radios>\n */\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      color,\n      size,\n      className,\n      children,\n      textColor,\n      disabled: disabledProp,\n      name,\n      value,\n      checked,\n      defaultChecked,\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    const disabled = useFieldsetDisabled(disabledProp);\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color: textColor,\n      ...props,\n    });\n\n    // Inherit name + selection state from a surrounding <Radios> group.\n    // Local props always win over the group (explicit > implicit).\n    const group = useRadiosGroup();\n    const effectiveName = name ?? group?.name;\n\n    // Group-managed checked state — only when the group is in\n    // controlled/uncontrolled mode (group.value is defined) AND this Radio\n    // has a value to compare against. Local `checked` always wins.\n    const groupManaged = group?.value !== undefined && value !== undefined;\n    const effectiveChecked =\n      checked !== undefined\n        ? checked\n        : groupManaged\n          ? group!.value === value\n          : undefined;\n    // When the group manages checked, suppress local defaultChecked to avoid\n    // the controlled/uncontrolled React warning.\n    const effectiveDefaultChecked = groupManaged ? undefined : defaultChecked;\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        // Local onChange always fires.\n        onChange?.(e);\n        // Dispatch to the group additionally — keeps group state in sync.\n        if (group?.onChange && value !== undefined) {\n          group.onChange(String(value));\n        }\n      },\n      [onChange, group, value]\n    );\n\n    const mainClass = usePrefixedClassNames('styled-radio', 'radio', {\n      [`is-${color}`]: color && radioColors.includes(color),\n      [`is-${size}`]: size && radioSizes.includes(size),\n    });\n    const radioClass = classNames(mainClass, bulmaHelperClasses, className);\n    const checkClass = usePrefixedClassNames('check');\n    const controlLabelClass = usePrefixedClassNames('control-label');\n\n    return (\n      <label className={radioClass}>\n        <input\n          ref={ref}\n          type=\"radio\"\n          disabled={disabled}\n          name={effectiveName}\n          value={value}\n          checked={effectiveChecked}\n          defaultChecked={effectiveDefaultChecked}\n          onChange={handleChange}\n          {...rest}\n        />\n        <span className={checkClass} />\n        {children && <span className={controlLabelClass}>{children}</span>}\n      </label>\n    );\n  }\n);\n\nRadio.displayName = 'Radio';\n\nexport default Radio;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/form/RadioCard.js

@@ -1,4 +1,5 @@
 /* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useCallback, useId } from 'react';
 import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';

package/dist/esm/form/RadioCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCard.js","sources":["../../../src/form/RadioCard.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useId } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { useFieldsetDisabled, useRadiosGroup } from './FormContext';\n\n// The colors `Radio` takes, as `radioColors` lists them. Declared here as\n// well, so the API page can read them off this module, and a type test holds\n// the two lists to each other.\nconst radioCardColors = [\n  'primary',\n  'link',\n  'info',\n  'success',\n  'warning',\n  'danger',\n] as const;\n\n/**\n * Props for the RadioCard component.\n *\n * @helperProps Helper props go on the outer `<label>`, the `.card`, with\n * `className`. The other attributes go on the `<input>`.\n * @extraProp {string} [name] - The form field name, which the cards of one choice share, so the arrow keys move between them. Inside `Radios`, the group's `name` when this is unset.\n * @extraProp {string} [value] - What a form sends when this card is the one picked. Inside a `Radios` group that takes `value`, `defaultValue` or `onChange`, the card is checked while the group's value is this.\n */\nexport interface RadioCardProps\n  extends\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'size' | 'type' | 'color' | 'title'\n    >,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {\n  /**\n   * What the option is, such as \"Express\". It names the radio, so a screen\n   * reader says it with the state and its place in the group. Without it,\n   * the card's whole text names the radio, as a label's text does.\n   */\n  title?: React.ReactNode;\n  /**\n   * A line or two about the option, read after the name and the state. It's\n   * the radio's description when `title`, `aria-label` or `aria-labelledby`\n   * names it. Without one of those it's part of the name already, so it\n   * isn't read twice.\n   */\n  description?: React.ReactNode;\n  /**\n   * Anything else in the card, after the description, such as a price. A\n   * label holds phrasing content only, so spans, images and links: a link\n   * works and doesn't pick the card, but a button or another input can't go\n   * inside a label at all. It isn't read when the radio takes focus, so put\n   * what a screen reader should hear in `title` and `description`.\n   */\n  children?: React.ReactNode;\n  /**\n   * Shows the radio at the start of the card. Without it, the card's edge\n   * alone shows the selection, and it's thicker when picked, so the\n   * selection never rests on color.\n   */\n  hasIndicator?: boolean;\n  /** The color of the radio and of a picked card's edge. */\n  color?: (typeof radioCardColors)[number];\n  /**\n   * Text color helper, on the card. The title and the children take it, and\n   * the description keeps its own color.\n   */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Whether the card is disabled. A disabled card dims, takes no clicks, and the arrow keys skip it. */\n  disabled?: boolean;\n  /**\n   * Additional CSS classes, on the outer `<label>`, the card. That's the\n   * element that declares the `--bulma-radio-card-*` variables, and Bulma's\n   * `--bulma-card-*` ones, so a class is how to set one: `style` and the\n   * other input attributes go to the `<input>`. Name `.radio-card` beside\n   * your class in the selector, so it beats the card's own declaration\n   * whatever order the stylesheets load in. A `color` prop declares the\n   * active color again on `.radio-card.is-<color>`, which ties that\n   * selector, so leave `color` unset when a class sets it.\n   */\n  className?: string;\n}\n\n/**\n * The `RadioCard` component is a radio button drawn as a card, with a title and a description, picked wherever you click it.\n *\n * It's a `<label>` around a real radio, so it sends its `value` with a form,\n * and the cards that share a `name` are one choice the arrow keys move\n * through. The title names the radio and the description describes it.\n * Inside `Radios` it takes the group's name and selection, as `Radio` does.\n *\n * @function\n * @param {RadioCardProps} props - Props for the RadioCard component.\n * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the `<input>`.\n * @returns {JSX.Element} The rendered card.\n *\n * @example\n * <Radios label=\"Shipping\" name=\"shipping\" defaultValue=\"standard\">\n *   <RadioCard value=\"standard\" title=\"Standard\" description=\"Arrives in 4 to 6 days.\" />\n *   <RadioCard value=\"express\" title=\"Express\" description=\"Arrives tomorrow.\" />\n * </Radios>\n */\nexport const RadioCard = forwardRef<HTMLInputElement, RadioCardProps>(\n  (\n    {\n      title,\n      description,\n      children,\n      hasIndicator = true,\n      color,\n      className,\n      textColor,\n      disabled: disabledProp,\n      name,\n      value,\n      checked,\n      defaultChecked,\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    const disabled = useFieldsetDisabled(disabledProp);\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color: textColor,\n      ...props,\n    });\n\n    // A surrounding <Radios> hands down its name and, when it manages the\n    // selection, whether this card is the one picked. The card's own props\n    // win, as they do on Radio.\n    const group = useRadiosGroup();\n    const effectiveName = name ?? group?.name;\n    const groupManaged = group?.value !== undefined && value !== undefined;\n    const effectiveChecked =\n      checked !== undefined\n        ? checked\n        : groupManaged\n          ? group!.value === value\n          : undefined;\n    const effectiveDefaultChecked = groupManaged ? undefined : defaultChecked;\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(e);\n        if (group?.onChange && value !== undefined) {\n          group.onChange(String(value));\n        }\n      },\n      [onChange, group, value]\n    );\n\n    // The title names the input and the description describes it. A name\n    // passed in wins, and without one of either the label's own text names\n    // the input, description included, so it isn't described again.\n    const titleId = useId();\n    const descriptionId = useId();\n    const ariaLabel = rest['aria-label'];\n    const ariaLabelledBy =\n      rest['aria-labelledby'] || (!ariaLabel && title ? titleId : undefined);\n    const ariaDescribedBy =\n      rest['aria-describedby'] ||\n      (description && (ariaLabel || ariaLabelledBy)\n        ? descriptionId\n        : undefined);\n\n    const cardClass = usePrefixedClassNames('radio-card', 'card', {\n      [`is-${color}`]: color && radioCardColors.includes(color),\n    });\n    const contentClass = usePrefixedClassNames(\n      'card-content',\n      'radio-card-content'\n    );\n    const checkClass = usePrefixedClassNames('radio-card-check');\n    const bodyClass = usePrefixedClassNames('radio-card-body');\n    const titleClass = usePrefixedClassNames('radio-card-title');\n    const descriptionClass = usePrefixedClassNames('radio-card-description');\n\n    return (\n      <label className={classNames(cardClass, bulmaHelperClasses, className)}>\n        <input\n          ref={ref}\n          type=\"radio\"\n          disabled={disabled}\n          name={effectiveName}\n          value={value}\n          checked={effectiveChecked}\n          defaultChecked={effectiveDefaultChecked}\n          onChange={handleChange}\n          {...rest}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n        />\n        <span className={contentClass}>\n          {hasIndicator && <span className={checkClass} />}\n          <span className={bodyClass}>\n            {title ? (\n              <span id={titleId} className={titleClass}>\n                {title}\n              </span>\n            ) : null}\n            {description ? (\n              <span id={descriptionId} className={descriptionClass}>\n                {description}\n              </span>\n            ) : null}\n            {children}\n          </span>\n        </span>\n      </label>\n    );\n  }\n);\n\nRadioCard.displayName = 'RadioCard';\n\nexport default RadioCard;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"RadioCard.js","sources":["../../../src/form/RadioCard.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useId } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { useFieldsetDisabled, useRadiosGroup } from './FormContext';\n\n// The colors `Radio` takes, as `radioColors` lists them. Declared here as\n// well, so the API page can read them off this module, and a type test holds\n// the two lists to each other.\nconst radioCardColors = [\n  'primary',\n  'link',\n  'info',\n  'success',\n  'warning',\n  'danger',\n] as const;\n\n/**\n * Props for the RadioCard component.\n *\n * @helperProps Helper props go on the outer `<label>`, the `.card`, with\n * `className`. The other attributes go on the `<input>`.\n * @extraProp {string} [name] - The form field name, which the cards of one choice share, so the arrow keys move between them. Inside `Radios`, the group's `name` when this is unset.\n * @extraProp {string} [value] - What a form sends when this card is the one picked. Inside a `Radios` group that takes `value`, `defaultValue` or `onChange`, the card is checked while the group's value is this.\n */\nexport interface RadioCardProps\n  extends\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'size' | 'type' | 'color' | 'title'\n    >,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {\n  /**\n   * What the option is, such as \"Express\". It names the radio, so a screen\n   * reader says it with the state and its place in the group. Without it,\n   * the card's whole text names the radio, as a label's text does.\n   */\n  title?: React.ReactNode;\n  /**\n   * A line or two about the option, read after the name and the state. It's\n   * the radio's description when `title`, `aria-label` or `aria-labelledby`\n   * names it. Without one of those it's part of the name already, so it\n   * isn't read twice.\n   */\n  description?: React.ReactNode;\n  /**\n   * Anything else in the card, after the description, such as a price. A\n   * label holds phrasing content only, so spans, images and links: a link\n   * works and doesn't pick the card, but a button or another input can't go\n   * inside a label at all. It isn't read when the radio takes focus, so put\n   * what a screen reader should hear in `title` and `description`.\n   */\n  children?: React.ReactNode;\n  /**\n   * Shows the radio at the start of the card. Without it, the card's edge\n   * alone shows the selection, and it's thicker when picked, so the\n   * selection never rests on color.\n   */\n  hasIndicator?: boolean;\n  /** The color of the radio and of a picked card's edge. */\n  color?: (typeof radioCardColors)[number];\n  /**\n   * Text color helper, on the card. The title and the children take it, and\n   * the description keeps its own color.\n   */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Whether the card is disabled. A disabled card dims, takes no clicks, and the arrow keys skip it. */\n  disabled?: boolean;\n  /**\n   * Additional CSS classes, on the outer `<label>`, the card. That's the\n   * element that declares the `--bulma-radio-card-*` variables, and Bulma's\n   * `--bulma-card-*` ones, so a class is how to set one: `style` and the\n   * other input attributes go to the `<input>`. Name `.radio-card` beside\n   * your class in the selector, so it beats the card's own declaration\n   * whatever order the stylesheets load in. A `color` prop declares the\n   * active color again on `.radio-card.is-<color>`, which ties that\n   * selector, so leave `color` unset when a class sets it.\n   */\n  className?: string;\n}\n\n/**\n * The `RadioCard` component is a radio button drawn as a card, with a title and a description, picked wherever you click it.\n *\n * It's a `<label>` around a real radio, so it sends its `value` with a form,\n * and the cards that share a `name` are one choice the arrow keys move\n * through. The title names the radio and the description describes it.\n * Inside `Radios` it takes the group's name and selection, as `Radio` does.\n *\n * @function\n * @param {RadioCardProps} props - Props for the RadioCard component.\n * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the `<input>`.\n * @returns {JSX.Element} The rendered card.\n *\n * @example\n * <Radios label=\"Shipping\" name=\"shipping\" defaultValue=\"standard\">\n *   <RadioCard value=\"standard\" title=\"Standard\" description=\"Arrives in 4 to 6 days.\" />\n *   <RadioCard value=\"express\" title=\"Express\" description=\"Arrives tomorrow.\" />\n * </Radios>\n */\nexport const RadioCard = forwardRef<HTMLInputElement, RadioCardProps>(\n  (\n    {\n      title,\n      description,\n      children,\n      hasIndicator = true,\n      color,\n      className,\n      textColor,\n      disabled: disabledProp,\n      name,\n      value,\n      checked,\n      defaultChecked,\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    const disabled = useFieldsetDisabled(disabledProp);\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color: textColor,\n      ...props,\n    });\n\n    // A surrounding <Radios> hands down its name and, when it manages the\n    // selection, whether this card is the one picked. The card's own props\n    // win, as they do on Radio.\n    const group = useRadiosGroup();\n    const effectiveName = name ?? group?.name;\n    const groupManaged = group?.value !== undefined && value !== undefined;\n    const effectiveChecked =\n      checked !== undefined\n        ? checked\n        : groupManaged\n          ? group!.value === value\n          : undefined;\n    const effectiveDefaultChecked = groupManaged ? undefined : defaultChecked;\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(e);\n        if (group?.onChange && value !== undefined) {\n          group.onChange(String(value));\n        }\n      },\n      [onChange, group, value]\n    );\n\n    // The title names the input and the description describes it. A name\n    // passed in wins, and without one of either the label's own text names\n    // the input, description included, so it isn't described again.\n    const titleId = useId();\n    const descriptionId = useId();\n    const ariaLabel = rest['aria-label'];\n    const ariaLabelledBy =\n      rest['aria-labelledby'] || (!ariaLabel && title ? titleId : undefined);\n    const ariaDescribedBy =\n      rest['aria-describedby'] ||\n      (description && (ariaLabel || ariaLabelledBy)\n        ? descriptionId\n        : undefined);\n\n    const cardClass = usePrefixedClassNames('radio-card', 'card', {\n      [`is-${color}`]: color && radioCardColors.includes(color),\n    });\n    const contentClass = usePrefixedClassNames(\n      'card-content',\n      'radio-card-content'\n    );\n    const checkClass = usePrefixedClassNames('radio-card-check');\n    const bodyClass = usePrefixedClassNames('radio-card-body');\n    const titleClass = usePrefixedClassNames('radio-card-title');\n    const descriptionClass = usePrefixedClassNames('radio-card-description');\n\n    return (\n      <label className={classNames(cardClass, bulmaHelperClasses, className)}>\n        <input\n          ref={ref}\n          type=\"radio\"\n          disabled={disabled}\n          name={effectiveName}\n          value={value}\n          checked={effectiveChecked}\n          defaultChecked={effectiveDefaultChecked}\n          onChange={handleChange}\n          {...rest}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n        />\n        <span className={contentClass}>\n          {hasIndicator && <span className={checkClass} />}\n          <span className={bodyClass}>\n            {title ? (\n              <span id={titleId} className={titleClass}>\n                {title}\n              </span>\n            ) : null}\n            {description ? (\n              <span id={descriptionId} className={descriptionClass}>\n                {description}\n              </span>\n            ) : null}\n            {children}\n          </span>\n        </span>\n      </label>\n    );\n  }\n);\n\nRadioCard.displayName = 'RadioCard';\n\nexport default RadioCard;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/form/Radios.js

@@ -1,4 +1,5 @@
 /* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useCallback, useMemo } from 'react';
 import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';

package/dist/esm/form/Radios.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radios.js","sources":["../../../src/form/Radios.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport {\n  useInsideField,\n  useInsideControl,\n  rendersOwnField,\n  rendersOwnControl,\n  RadiosProvider,\n  RadiosGroupContextValue,\n} from './FormContext';\nimport { Field } from './Field';\nimport { Control } from './Control';\nimport { FormFieldProps } from './fieldProps';\nimport { useAutoLabelledBy } from './useAutoLabelId';\nimport { Radio } from './Radio';\nimport { GroupFieldset } from './groupFieldset';\n\n/**\n * Props for the Radios component.\n * Inside an existing `Control` it renders no `Control` of its own. Inside an\n * outer `Field`, or a `Control` with no `Field` around it, it renders no\n * `Field` of its own either. The exception is `label`, `message`, `horizontal`\n * or `fieldClassName` in that bare `Control`: it keeps a `Field` for them,\n * nested in the `.control`, and warns in development. Wrap the `Control` in a\n * `Field` instead, and set the `label`, `horizontal` and class name on that\n * `Field`.\n */\nexport interface RadiosProps\n  extends Omit<BulmaClassesProps, 'color'>, FormFieldProps {\n  /** Field label naming the whole group. Automatically associated via `aria-labelledby` on the `role=\"radiogroup\"` wrapper — uses your `labelProps.id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label names the group instead through `aria-labelledby` when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). An `aria-label` or `aria-labelledby` you set on the group wins over either label, which still renders but no longer names it. An `aria-labelledby` key counts even when undefined, since it is spread over the group's own. */\n  label?: React.ReactNode;\n  /** Props for the label element. An explicit `id` here is used as the `aria-labelledby` target instead of a generated one; any `htmlFor` is ignored (a group label names the group, never a single control). */\n  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n    [key: string]: unknown;\n  };\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Form field name shared by every Radio in the group (via context). */\n  name?: string;\n  /** Currently-selected value (controlled mode). */\n  value?: string;\n  /** Initial selected value (uncontrolled mode). */\n  defaultValue?: string;\n  /** Fires when the selection changes. */\n  onChange?: (value: string) => void;\n  /** Radio elements to render in the group. */\n  children: React.ReactNode;\n  /**\n   * The element the group renders as. With `fieldset` it's a native\n   * `<fieldset>` that keeps `role=\"radiogroup\"`. Where the group renders a\n   * `Field` of its own, that `Field` is the `<fieldset>` and the `label` is\n   * its `<legend>`, in the label column when `horizontal`, so the legend names\n   * the group with no ids to wire. Your other attributes then go on the\n   * `<fieldset>`, while `className` and the helper props stay on the box that\n   * lays out the radios. Inside an outer `Field` there's no legend: the group\n   * element itself is the `<fieldset>`, named by that `Field`'s label as\n   * before. `div`, the default, renders the group as it always has.\n   * @defaultValue 'div'\n   */\n  as?: 'div' | 'fieldset';\n}\n\n/**\n * The `Radios` component wraps multiple `Radio` components in a Bulma-styled group.\n *\n * @function\n * @param {RadiosProps} props - Props for the Radios component.\n * @returns {JSX.Element} The rendered radios group.\n * @see {@link https://bulma.io/documentation/form/radio/#grouped-radios | Bulma Radios documentation}\n *\n * @example\n * // Controlled\n * const [color, setColor] = useState('red');\n * <Radios name=\"color\" value={color} onChange={setColor}>\n *   <Radio value=\"red\">Red</Radio>\n *   <Radio value=\"green\">Green</Radio>\n *   <Radio value=\"blue\">Blue</Radio>\n * </Radios>\n *\n * @example\n * // Uncontrolled\n * <Radios name=\"color\" defaultValue=\"red\" onChange={v => console.log(v)}>\n *   <Radio value=\"red\">Red</Radio>\n *   <Radio value=\"green\">Green</Radio>\n * </Radios>\n */\nconst RadiosComponent: React.FC<RadiosProps> = ({\n  label,\n  labelSize,\n  labelProps,\n  horizontal,\n  message,\n  messageColor,\n  fieldClassName,\n  name,\n  value,\n  defaultValue,\n  onChange,\n  children,\n  className,\n  as,\n  ...props\n}) => {\n  const insideField = useInsideField();\n  const insideControl = useInsideControl();\n  const ownField = rendersOwnField('Radios', {\n    insideField,\n    insideControl,\n    label,\n    message,\n    horizontal,\n    fieldClassName,\n  });\n  // As a fieldset with a Field of its own, the group's label is its legend,\n  // which names it with no id, so nothing points `aria-labelledby` at it.\n  const asFieldset = as === 'fieldset';\n  const fieldsetField = asFieldset && ownField;\n  const { ariaLabelledBy, fieldLabelProps } = useAutoLabelledBy({\n    label,\n    labelProps,\n    rendersLabel: ownField && !fieldsetField,\n    callerProps: props,\n  });\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    ...props,\n  });\n\n  const mainClass = usePrefixedClassNames('radios');\n  const wrapperClass = classNames(mainClass, bulmaHelperClasses, className);\n\n  const helpClass = usePrefixedClassNames('help', {\n    [`is-${messageColor}`]: !!messageColor,\n  });\n  const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n  // The group is \"active\" (manages child selection) when the user opted in by\n  // passing value, defaultValue, or onChange. Otherwise it's name-only and\n  // children manage their own checked state (Stage 1 behavior).\n  const groupActive =\n    value !== undefined || defaultValue !== undefined || onChange !== undefined;\n\n  const [internalValue, setInternalValue] = useState<string | undefined>(\n    defaultValue\n  );\n  const isControlled = value !== undefined;\n  const currentValue = isControlled ? value : internalValue;\n\n  const handleChange = useCallback(\n    (newValue: string) => {\n      if (!isControlled) setInternalValue(newValue);\n      onChange?.(newValue);\n    },\n    [isControlled, onChange]\n  );\n\n  const ctx = useMemo<RadiosGroupContextValue>(\n    () => ({\n      name,\n      ...(groupActive ? { value: currentValue, onChange: handleChange } : {}),\n    }),\n    [name, groupActive, currentValue, handleChange]\n  );\n\n  const choices = <RadiosProvider value={ctx}>{children}</RadiosProvider>;\n  // ARIA in HTML allows `radiogroup` on a fieldset, so it keeps the role.\n  const Group = asFieldset ? 'fieldset' : 'div';\n  const radiosElement = fieldsetField ? (\n    <div className={wrapperClass}>{choices}</div>\n  ) : (\n    <Group\n      className={wrapperClass}\n      role=\"radiogroup\"\n      aria-labelledby={ariaLabelledBy}\n      {...rest}\n    >\n      {choices}\n    </Group>\n  );\n\n  let content = radiosElement;\n\n  if (rendersOwnControl('Radios', { insideControl })) {\n    content = <Control>{content}</Control>;\n  }\n\n  if (fieldsetField) {\n    return (\n      <GroupFieldset\n        label={label}\n        labelSize={labelSize}\n        labelProps={labelProps}\n        horizontal={horizontal}\n        fieldClassName={fieldClassName}\n        role=\"radiogroup\"\n        attributes={rest}\n        message={messageEl}\n      >\n        {content}\n      </GroupFieldset>\n    );\n  }\n\n  if (ownField) {\n    return (\n      <Field\n        label={label}\n        labelSize={labelSize}\n        labelProps={fieldLabelProps}\n        horizontal={horizontal}\n        className={fieldClassName}\n      >\n        {content}\n        {messageEl}\n      </Field>\n    );\n  }\n\n  return (\n    <>\n      {content}\n      {messageEl}\n    </>\n  );\n};\n\nexport const Radios = withSubComponents(RadiosComponent, { Radio }, 'Radios');\n\nexport default Radios;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"Radios.js","sources":["../../../src/form/Radios.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport {\n  useInsideField,\n  useInsideControl,\n  rendersOwnField,\n  rendersOwnControl,\n  RadiosProvider,\n  RadiosGroupContextValue,\n} from './FormContext';\nimport { Field } from './Field';\nimport { Control } from './Control';\nimport { FormFieldProps } from './fieldProps';\nimport { useAutoLabelledBy } from './useAutoLabelId';\nimport { Radio } from './Radio';\nimport { GroupFieldset } from './groupFieldset';\n\n/**\n * Props for the Radios component.\n * Inside an existing `Control` it renders no `Control` of its own. Inside an\n * outer `Field`, or a `Control` with no `Field` around it, it renders no\n * `Field` of its own either. The exception is `label`, `message`, `horizontal`\n * or `fieldClassName` in that bare `Control`: it keeps a `Field` for them,\n * nested in the `.control`, and warns in development. Wrap the `Control` in a\n * `Field` instead, and set the `label`, `horizontal` and class name on that\n * `Field`.\n */\nexport interface RadiosProps\n  extends Omit<BulmaClassesProps, 'color'>, FormFieldProps {\n  /** Field label naming the whole group. Automatically associated via `aria-labelledby` on the `role=\"radiogroup\"` wrapper — uses your `labelProps.id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label names the group instead through `aria-labelledby` when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). An `aria-label` or `aria-labelledby` you set on the group wins over either label, which still renders but no longer names it. An `aria-labelledby` key counts even when undefined, since it is spread over the group's own. */\n  label?: React.ReactNode;\n  /** Props for the label element. An explicit `id` here is used as the `aria-labelledby` target instead of a generated one; any `htmlFor` is ignored (a group label names the group, never a single control). */\n  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n    [key: string]: unknown;\n  };\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Form field name shared by every Radio in the group (via context). */\n  name?: string;\n  /** Currently-selected value (controlled mode). */\n  value?: string;\n  /** Initial selected value (uncontrolled mode). */\n  defaultValue?: string;\n  /** Fires when the selection changes. */\n  onChange?: (value: string) => void;\n  /** Radio elements to render in the group. */\n  children: React.ReactNode;\n  /**\n   * The element the group renders as. With `fieldset` it's a native\n   * `<fieldset>` that keeps `role=\"radiogroup\"`. Where the group renders a\n   * `Field` of its own, that `Field` is the `<fieldset>` and the `label` is\n   * its `<legend>`, in the label column when `horizontal`, so the legend names\n   * the group with no ids to wire. Your other attributes then go on the\n   * `<fieldset>`, while `className` and the helper props stay on the box that\n   * lays out the radios. Inside an outer `Field` there's no legend: the group\n   * element itself is the `<fieldset>`, named by that `Field`'s label as\n   * before. `div`, the default, renders the group as it always has.\n   * @defaultValue 'div'\n   */\n  as?: 'div' | 'fieldset';\n}\n\n/**\n * The `Radios` component wraps multiple `Radio` components in a Bulma-styled group.\n *\n * @function\n * @param {RadiosProps} props - Props for the Radios component.\n * @returns {JSX.Element} The rendered radios group.\n * @see {@link https://bulma.io/documentation/form/radio/#grouped-radios | Bulma Radios documentation}\n *\n * @example\n * // Controlled\n * const [color, setColor] = useState('red');\n * <Radios name=\"color\" value={color} onChange={setColor}>\n *   <Radio value=\"red\">Red</Radio>\n *   <Radio value=\"green\">Green</Radio>\n *   <Radio value=\"blue\">Blue</Radio>\n * </Radios>\n *\n * @example\n * // Uncontrolled\n * <Radios name=\"color\" defaultValue=\"red\" onChange={v => console.log(v)}>\n *   <Radio value=\"red\">Red</Radio>\n *   <Radio value=\"green\">Green</Radio>\n * </Radios>\n */\nconst RadiosComponent: React.FC<RadiosProps> = ({\n  label,\n  labelSize,\n  labelProps,\n  horizontal,\n  message,\n  messageColor,\n  fieldClassName,\n  name,\n  value,\n  defaultValue,\n  onChange,\n  children,\n  className,\n  as,\n  ...props\n}) => {\n  const insideField = useInsideField();\n  const insideControl = useInsideControl();\n  const ownField = rendersOwnField('Radios', {\n    insideField,\n    insideControl,\n    label,\n    message,\n    horizontal,\n    fieldClassName,\n  });\n  // As a fieldset with a Field of its own, the group's label is its legend,\n  // which names it with no id, so nothing points `aria-labelledby` at it.\n  const asFieldset = as === 'fieldset';\n  const fieldsetField = asFieldset && ownField;\n  const { ariaLabelledBy, fieldLabelProps } = useAutoLabelledBy({\n    label,\n    labelProps,\n    rendersLabel: ownField && !fieldsetField,\n    callerProps: props,\n  });\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    ...props,\n  });\n\n  const mainClass = usePrefixedClassNames('radios');\n  const wrapperClass = classNames(mainClass, bulmaHelperClasses, className);\n\n  const helpClass = usePrefixedClassNames('help', {\n    [`is-${messageColor}`]: !!messageColor,\n  });\n  const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n  // The group is \"active\" (manages child selection) when the user opted in by\n  // passing value, defaultValue, or onChange. Otherwise it's name-only and\n  // children manage their own checked state (Stage 1 behavior).\n  const groupActive =\n    value !== undefined || defaultValue !== undefined || onChange !== undefined;\n\n  const [internalValue, setInternalValue] = useState<string | undefined>(\n    defaultValue\n  );\n  const isControlled = value !== undefined;\n  const currentValue = isControlled ? value : internalValue;\n\n  const handleChange = useCallback(\n    (newValue: string) => {\n      if (!isControlled) setInternalValue(newValue);\n      onChange?.(newValue);\n    },\n    [isControlled, onChange]\n  );\n\n  const ctx = useMemo<RadiosGroupContextValue>(\n    () => ({\n      name,\n      ...(groupActive ? { value: currentValue, onChange: handleChange } : {}),\n    }),\n    [name, groupActive, currentValue, handleChange]\n  );\n\n  const choices = <RadiosProvider value={ctx}>{children}</RadiosProvider>;\n  // ARIA in HTML allows `radiogroup` on a fieldset, so it keeps the role.\n  const Group = asFieldset ? 'fieldset' : 'div';\n  const radiosElement = fieldsetField ? (\n    <div className={wrapperClass}>{choices}</div>\n  ) : (\n    <Group\n      className={wrapperClass}\n      role=\"radiogroup\"\n      aria-labelledby={ariaLabelledBy}\n      {...rest}\n    >\n      {choices}\n    </Group>\n  );\n\n  let content = radiosElement;\n\n  if (rendersOwnControl('Radios', { insideControl })) {\n    content = <Control>{content}</Control>;\n  }\n\n  if (fieldsetField) {\n    return (\n      <GroupFieldset\n        label={label}\n        labelSize={labelSize}\n        labelProps={labelProps}\n        horizontal={horizontal}\n        fieldClassName={fieldClassName}\n        role=\"radiogroup\"\n        attributes={rest}\n        message={messageEl}\n      >\n        {content}\n      </GroupFieldset>\n    );\n  }\n\n  if (ownField) {\n    return (\n      <Field\n        label={label}\n        labelSize={labelSize}\n        labelProps={fieldLabelProps}\n        horizontal={horizontal}\n        className={fieldClassName}\n      >\n        {content}\n        {messageEl}\n      </Field>\n    );\n  }\n\n  return (\n    <>\n      {content}\n      {messageEl}\n    </>\n  );\n};\n\nexport const Radios = withSubComponents(RadiosComponent, { Radio }, 'Radios');\n\nexport default Radios;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;;;;;;AAgEA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AACH,MAAM,eAAe,GAA0B,CAAC,EAC9C,KAAK,EACL,SAAS,EACT,UAAU,EACV,UAAU,EACV,OAAO,EACP,YAAY,EACZ,cAAc,EACd,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,EAAE,EACF,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,WAAW,GAAG,cAAc,EAAE;AACpC,IAAA,MAAM,aAAa,GAAG,gBAAgB,EAAE;AACxC,IAAA,MAAM,QAAQ,GAAG,eAAe,CAAC,QAAQ,EAAE;QACzC,WAAW;QACX,aAAa;QACb,KAAK;QACL,OAAO;QACP,UAAU;QACV,cAAc;AACf,KAAA,CAAC;;;AAGF,IAAA,MAAM,UAAU,GAAG,EAAE,KAAK,UAAU;AACpC,IAAA,MAAM,aAAa,GAAG,UAAU,IAAI,QAAQ;AAC5C,IAAA,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,iBAAiB,CAAC;QAC5D,KAAK;QACL,UAAU;AACV,QAAA,YAAY,EAAE,QAAQ,IAAI,CAAC,aAAa;AACxC,QAAA,WAAW,EAAE,KAAK;AACnB,KAAA,CAAC;AACF,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;AACnD,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;AAEF,IAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC,QAAQ,CAAC;IACjD,MAAM,YAAY,GAAG,UAAU,CAAC,SAAS,EAAE,kBAAkB,EAAE,SAAS,CAAC;AAEzE,IAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC,MAAM,EAAE;AAC9C,QAAA,CAAC,MAAM,YAAY,CAAA,CAAE,GAAG,CAAC,CAAC,YAAY;AACvC,KAAA,CAAC;AACF,IAAA,MAAM,SAAS,GAAG,OAAO,GAAGA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAE,SAAS,YAAG,OAAO,EAAA,CAAK,GAAG,IAAI;;;;AAKzE,IAAA,MAAM,WAAW,GACf,KAAK,KAAK,SAAS,IAAI,YAAY,KAAK,SAAS,IAAI,QAAQ,KAAK,SAAS;IAE7E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAChD,YAAY,CACb;AACD,IAAA,MAAM,YAAY,GAAG,KAAK,KAAK,SAAS;IACxC,MAAM,YAAY,GAAG,YAAY,GAAG,KAAK,GAAG,aAAa;AAEzD,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,QAAgB,KAAI;AACnB,QAAA,IAAI,CAAC,YAAY;YAAE,gBAAgB,CAAC,QAAQ,CAAC;AAC7C,QAAA,QAAQ,GAAG,QAAQ,CAAC;AACtB,IAAA,CAAC,EACD,CAAC,YAAY,EAAE,QAAQ,CAAC,CACzB;AAED,IAAA,MAAM,GAAG,GAAG,OAAO,CACjB,OAAO;QACL,IAAI;AACJ,QAAA,IAAI,WAAW,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC;KACxE,CAAC,EACF,CAAC,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,CAAC,CAChD;IAED,MAAM,OAAO,GAAGA,GAAA,CAAC,cAAc,EAAA,EAAC,KAAK,EAAE,GAAG,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAkB;;IAEvE,MAAM,KAAK,GAAG,UAAU,GAAG,UAAU,GAAG,KAAK;AAC7C,IAAA,MAAM,aAAa,GAAG,aAAa,IACjCA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,YAAY,EAAA,QAAA,EAAG,OAAO,EAAA,CAAO,KAE7CA,GAAA,CAAC,KAAK,EAAA,EACJ,SAAS,EAAE,YAAY,EACvB,IAAI,EAAC,YAAY,EAAA,iBAAA,EACA,cAAc,EAAA,GAC3B,IAAI,YAEP,OAAO,EAAA,CACF,CACT;IAED,IAAI,OAAO,GAAG,aAAa;IAE3B,IAAI,iBAAiB,CAAC,QAAQ,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE;AAClD,QAAA,OAAO,GAAGA,GAAA,CAAC,OAAO,EAAA,EAAA,QAAA,EAAE,OAAO,GAAW;IACxC;IAEA,IAAI,aAAa,EAAE;AACjB,QAAA,QACEA,GAAA,CAAC,aAAa,EAAA,EACZ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,IAAI,EAAC,YAAY,EACjB,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,SAAS,YAEjB,OAAO,EAAA,CACM;IAEpB;IAEA,IAAI,QAAQ,EAAE;AACZ,QAAA,QACEC,IAAA,CAAC,KAAK,EAAA,EACJ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,eAAe,EAC3B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,cAAc,EAAA,QAAA,EAAA,CAExB,OAAO,EACP,SAAS,CAAA,EAAA,CACJ;IAEZ;AAEA,IAAA,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,OAAO,EACP,SAAS,CAAA,EAAA,CACT;AAEP,CAAC;AAEM,MAAM,MAAM,GAAG,iBAAiB,CAAC,eAAe,EAAE,EAAE,KAAK,EAAE,EAAE,QAAQ;;"}

package/dist/esm/form/Rate.js

@@ -1,4 +1,5 @@
 /* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef, useId, useState, useCallback } from 'react';
 import { usePrefixedClassNames, classNames, prefixedClassNames } from '../helpers/classNames.js';