@clubmed/trident-ui/molecules/Forms/NumberField.js

Shared ClubMed React UI components

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