alinea/dist/input/number/NumberField.browser.js

[](https://npmjs.org/package/alinea) [](https://packagephobia.com/result?p=alinea)

import "../../chunks/chunk-U5RRZUYZ.js";

// src/input/number/NumberField.browser.tsx
import { Field } from "alinea/core";
import { useField } from "alinea/dashboard/editor/UseField";
import { InputLabel } from "alinea/dashboard/view/InputLabel";
import { fromModule } from "alinea/ui";
import { IcRoundNumbers } from "alinea/ui/icons/IcRoundNumbers";
import { useState } from "react";
import { number as createNumber } from "./NumberField.js";

// src/input/number/NumberInput.module.scss
var NumberInput_module_default = {
  "root-input": "alinea-NumberInput-input",
  "rootInput": "alinea-NumberInput-input"
};

// src/input/number/NumberField.browser.tsx
export * from "./NumberField.js";
import { jsx } from "react/jsx-runtime";
var number = Field.provideView(NumberInput, createNumber);
var styles = fromModule(NumberInput_module_default);
function NumberInput({ field }) {
  const { options, value, mutator } = useField(field);
  const [current, setCurrent] = useState(String(value ?? ""));
  const { minValue, maxValue, readOnly, step } = options;
  return /* @__PURE__ */ jsx(InputLabel, { asLabel: true, ...options, icon: IcRoundNumbers, children: /* @__PURE__ */ jsx(
    "input",
    {
      type: "number",
      className: styles.root.input(),
      value: current,
      onChange: (e) => {
        setCurrent(e.currentTarget.value);
      },
      onBlur: () => {
        const newValue = current ? parseFloat(current) : null;
        mutator(newValue);
        setCurrent(String(newValue ?? ""));
      },
      min: minValue,
      max: maxValue,
      disabled: readOnly,
      step: step || 1
    }
  ) });
}
export {
  number
};