@clubmed/trident-ui/ui/forms/NumberField.js

Shared ClubMed React UI components

import { jsx as d, jsxs as C } from "react/jsx-runtime";
import { c as g } from "../../chunks/clsx.js";
import { useId as I } from "react";
import { useValue as y } from "../hooks/useValue.js";
import { Button as v } from "../buttons/Button.js";
import { FormControl as F } from "./FormControl.js";
const V = { width: "28px", height: "28px" };
function T(c) {
  const e = I(), {
    id: i = e,
    name: n = i,
    value: o = 0,
    onChange: u,
    min: r = 0,
    max: a = 10,
    disabled: s = !1,
    dataTestId: m = "NumberField",
    ...f
  } = c, { value: t, setValue: l } = y({
    name: n,
    defaultValue: o,
    formatter: Number,
    onChange: u
  });
  return {
    ...f,
    id: i,
    min: r,
    max: a,
    name: n,
    value: t,
    dataTestId: m,
    disabled: s,
    handleChange: (h) => {
      const x = Number(h.target.value);
      x >= r && x <= a && l(Number(x));
    },
    increase: () => {
      t < a && l(t + 1);
    },
    decrease: () => {
      t > r && l(t - 1);
    }
  };
}
const M = (c) => {
  const {
    disabled: e,
    min: i,
    max: n,
    label: o,
    description: u,
    id: r,
    dataTestId: a,
    value: s,
    handleChange: m,
    increase: f,
    decrease: t,
    errorMessage: l,
    validationStatus: N,
    hideRequiredStar: p,
    required: b,
    ...h
  } = T(c);
  return /* @__PURE__ */ d(
    F,
    {
      id: r,
      label: o,
      description: u,
      className: g("flex items-center justify-between", c.className),
      dataName: "NumberField",
      dataTestId: a,
      errorMessage: l,
      validationStatus: N,
      disabled: e,
      required: b,
      hideRequiredStar: p,
      layout: "vertical",
      children: /* @__PURE__ */ C("div", { className: "flex items-center gap-x-8", children: [
        /* @__PURE__ */ d(
          v,
          {
            onClick: t,
            variant: "circle",
            disabled: s <= i || e,
            icon: "MinusDefault",
            "aria-label": "Decrease",
            "data-testid": `${a}-decrease`
          }
        ),
        /* @__PURE__ */ d(
          "input",
          {
            ...h,
            className: g("text-b2 text-center font-normal outline-none", {
              "bg-pearl text-grey": e
            }),
            style: V,
            type: "number",
            id: r,
            onChange: m,
            disabled: e,
            required: b,
            value: s,
            min: i,
            max: n
          }
        ),
        /* @__PURE__ */ d(
          v,
          {
            onClick: f,
            variant: "circle",
            "aria-label": "Increase",
            disabled: s >= n || e,
            icon: "PlusDefault",
            "data-testid": `${a}-increase`
          }
        )
      ] })
    }
  );
};
export {
  M as NumberField,
  T as useNumberField
};
//# sourceMappingURL=NumberField.js.map