@konstructio/ui/dist/components/NumberInput/NumberInput.js

A set of reusable and customizable React components built for konstruct.io

import { jsxs as y, jsx as u } from "react/jsx-runtime";
import { R as w } from "../../index-CbTU3cnP.js";
import p, { forwardRef as d, useId as _, useCallback as j } from "react";
import { cn as v } from "../../utils/index.js";
import { labelVariants as E, buttonVariants as x, numberInputVariants as T } from "./NumberInput.variants.js";
import { P as s } from "../../index-C5psggHV.js";
import { useTheme as $ } from "../../contexts/theme.hook.js";
function h() {
  return h = Object.assign || function(e) {
    for (var i = 1; i < arguments.length; i++) {
      var r = arguments[i];
      for (var t in r)
        Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
    }
    return e;
  }, h.apply(this, arguments);
}
function L(e, i) {
  if (e == null) return {};
  var r = W(e, i), t, n;
  if (Object.getOwnPropertySymbols) {
    var o = Object.getOwnPropertySymbols(e);
    for (n = 0; n < o.length; n++)
      t = o[n], !(i.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
  }
  return r;
}
function W(e, i) {
  if (e == null) return {};
  var r = {}, t = Object.keys(e), n, o;
  for (o = 0; o < t.length; o++)
    n = t[o], !(i.indexOf(n) >= 0) && (r[n] = e[n]);
  return r;
}
var g = d(function(e, i) {
  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, o = n === void 0 ? 24 : n, f = L(e, ["color", "size"]);
  return /* @__PURE__ */ p.createElement("svg", h({
    ref: i,
    xmlns: "http://www.w3.org/2000/svg",
    width: o,
    height: o,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: t,
    strokeWidth: "2",
    strokeLinecap: "round",
    strokeLinejoin: "round"
  }, f), /* @__PURE__ */ p.createElement("line", {
    x1: "5",
    y1: "12",
    x2: "19",
    y2: "12"
  }));
});
g.propTypes = {
  color: s.string,
  size: s.oneOfType([s.string, s.number])
};
g.displayName = "Minus";
function b() {
  return b = Object.assign || function(e) {
    for (var i = 1; i < arguments.length; i++) {
      var r = arguments[i];
      for (var t in r)
        Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
    }
    return e;
  }, b.apply(this, arguments);
}
function V(e, i) {
  if (e == null) return {};
  var r = M(e, i), t, n;
  if (Object.getOwnPropertySymbols) {
    var o = Object.getOwnPropertySymbols(e);
    for (n = 0; n < o.length; n++)
      t = o[n], !(i.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
  }
  return r;
}
function M(e, i) {
  if (e == null) return {};
  var r = {}, t = Object.keys(e), n, o;
  for (o = 0; o < t.length; o++)
    n = t[o], !(i.indexOf(n) >= 0) && (r[n] = e[n]);
  return r;
}
var O = d(function(e, i) {
  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, o = n === void 0 ? 24 : n, f = V(e, ["color", "size"]);
  return /* @__PURE__ */ p.createElement("svg", b({
    ref: i,
    xmlns: "http://www.w3.org/2000/svg",
    width: o,
    height: o,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: t,
    strokeWidth: "2",
    strokeLinecap: "round",
    strokeLinejoin: "round"
  }, f), /* @__PURE__ */ p.createElement("line", {
    x1: "12",
    y1: "5",
    x2: "12",
    y2: "19"
  }), /* @__PURE__ */ p.createElement("line", {
    x1: "5",
    y1: "12",
    x2: "19",
    y2: "12"
  }));
});
O.propTypes = {
  color: s.string,
  size: s.oneOfType([s.string, s.number])
};
O.displayName = "Plus";
const G = d(
  ({
    className: e,
    label: i,
    max: r = -1 / 0,
    min: t = 1 / 0,
    name: n,
    theme: o,
    value: f,
    onChange: l
  }, P) => {
    const { theme: k } = $(), m = o ?? k, I = _(), a = f ?? 0, N = j(() => {
      let c = 0;
      t === 1 / 0 ? c = a - 1 : c = Math.max(t, a - 1), l == null || l({ target: { value: c } });
    }, [a, t, l]), z = j(() => {
      let c = 0;
      r === -1 / 0 ? c = a + 1 : c = Math.min(r, a + 1), l == null || l({ target: { value: c } });
    }, [a, r, l]);
    return /* @__PURE__ */ y("div", { className: "flex flex-col gap-1", children: [
      i ? /* @__PURE__ */ u(
        "label",
        {
          htmlFor: n ?? I,
          className: v(
            E({
              theme: m
            })
          ),
          children: i
        }
      ) : null,
      /* @__PURE__ */ y("div", { className: "flex items-center", role: "presentation", children: [
        /* @__PURE__ */ y(
          "button",
          {
            type: "button",
            onClick: N,
            className: v(
              x({ theme: m, button: "rigth" })
            ),
            children: [
              /* @__PURE__ */ u(g, { className: "w-4 h-4" }),
              /* @__PURE__ */ u(w, { children: "Decrement" })
            ]
          }
        ),
        /* @__PURE__ */ u(
          "input",
          {
            ref: P,
            type: "number",
            value: a,
            name: n,
            className: v(
              T({ className: e, theme: m })
            ),
            readOnly: !0,
            "aria-label": typeof i == "string" ? i : "number input"
          }
        ),
        /* @__PURE__ */ y(
          "button",
          {
            type: "button",
            onClick: z,
            className: v(
              x({ theme: m, button: "left" })
            ),
            children: [
              /* @__PURE__ */ u(O, { className: "w-4 h-4" }),
              /* @__PURE__ */ u(w, { children: "Increment" })
            ]
          }
        )
      ] })
    ] });
  }
);
export {
  G as NumberInput
};