@memobit/libs 3.0.0 → 3.1.0

package/dist/components/PieChart/PieChart2.js

@@ -0,0 +1,142 @@
+import './PieChart.css';
+/* empty css         */
+import { useMemo as z } from "react";
+import { Fragment as E, jsx as h, jsxs as A } from "react/jsx-runtime";
+var F = {
+  small: 120,
+  medium: 180,
+  large: 240
+}, N = {
+  default: "var(--progress-default-bar-fill-color)",
+  warning: "var(--progress-warning-bar-fill-color)",
+  danger: "var(--progress-danger-bar-fill-color)",
+  info: "var(--progress-info-bar-fill-color)",
+  success: "var(--progress-success-bar-fill-color)"
+}, f = (r, n, l, o) => {
+  const s = (o - 90) * Math.PI / 180;
+  return {
+    x: r + l * Math.cos(s),
+    y: n + l * Math.sin(s)
+  };
+}, G = (r, n, l, o) => {
+  const s = f(r, r, n, o), g = f(r, r, n, l), u = o - l <= 180 ? 0 : 1;
+  return [
+    "M",
+    r,
+    r,
+    "L",
+    s.x,
+    s.y,
+    "A",
+    n,
+    n,
+    0,
+    u,
+    0,
+    g.x,
+    g.y,
+    "Z"
+  ].join(" ");
+}, I = (r) => `hsl(${Math.round((r * 137.508 + 28) % 360)} 72% 52%)`, W = (r, n) => {
+  const l = r.variant ?? "default";
+  return l === "custom" ? r.customColor || N.default : l === "random" ? I(n) : N[l];
+}, Z = ({ className: r = "", data: n = [], emptyLabel: l, gap: o = 1, size: s = "medium", valueFormatter: g, valuePosition: u = "inside" }) => {
+  const p = F[s], v = u === "outside" ? Math.round(p * 0.18) : 0, a = p / 2, i = Math.max(a - Math.max(o, 1), 1), S = `${-v} ${-v} ${p + v * 2} ${p + v * 2}`, m = z(() => {
+    const e = n.filter((t) => Number.isFinite(t.value) && t.value > 0), c = e.reduce((t, d) => t + d.value, 0);
+    if (c <= 0) return [];
+    let x = 0;
+    return e.map((t, d) => {
+      const j = t.value / c * 360, b = x, y = d === e.length - 1 ? 360 : x + j, k = b + (y - b) / 2;
+      return x = y, {
+        color: W(t, d),
+        endAngle: y,
+        index: d,
+        label: g ? g(t.value, t, d) : t.value,
+        midAngle: k,
+        path: G(a, i, b, y),
+        startAngle: b,
+        value: t.value
+      };
+    });
+  }, [
+    a,
+    n,
+    i,
+    g
+  ]), _ = m.length > 0, R = i * 0.58, C = i + v * 0.58, w = i + o / 2, B = i + v * 0.35, M = Math.max(0, o), $ = u !== "none";
+  return /* @__PURE__ */ h("div", {
+    className: `pie-chart pie-chart--${s} pie-chart--values-${u} ${r}`.trim(),
+    children: /* @__PURE__ */ A("svg", {
+      width: p,
+      height: p,
+      viewBox: S,
+      children: [
+        !_ && /* @__PURE__ */ A(E, { children: [/* @__PURE__ */ h("circle", {
+          className: "pie-chart__empty-circle",
+          cx: a,
+          cy: a,
+          r: i
+        }), $ && l && /* @__PURE__ */ h("text", {
+          className: "pie-chart__empty-label",
+          x: a,
+          y: a,
+          textAnchor: "middle",
+          dominantBaseline: "central",
+          children: l
+        })] }),
+        _ && (m.length === 1 ? /* @__PURE__ */ h("circle", {
+          className: "pie-chart__slice",
+          cx: a,
+          cy: a,
+          r: i,
+          fill: m[0].color,
+          strokeWidth: M
+        }) : m.map((e) => /* @__PURE__ */ h("path", {
+          className: "pie-chart__slice",
+          d: e.path,
+          fill: e.color,
+          strokeWidth: M
+        }, `${e.index}-${e.value}-${e.startAngle}`))),
+        _ && $ && u === "outside" && m.map((e) => {
+          const c = f(a, a, w, e.midAngle), x = f(a, a, B, e.midAngle), t = f(a, a, C, e.midAngle), d = t.x >= a;
+          return /* @__PURE__ */ A("g", {
+            className: "pie-chart__outside-label-group",
+            children: [/* @__PURE__ */ h("line", {
+              className: "pie-chart__leader-line",
+              x1: c.x,
+              y1: c.y,
+              x2: x.x,
+              y2: x.y,
+              stroke: e.color
+            }), /* @__PURE__ */ h("text", {
+              className: "pie-chart__value-label pie-chart__value-label--outside",
+              x: t.x,
+              y: t.y,
+              textAnchor: d ? "start" : "end",
+              dominantBaseline: "central",
+              fill: e.color,
+              children: e.label
+            })]
+          }, `outside-${e.index}-${e.value}`);
+        }),
+        _ && $ && u === "inside" && m.map((e) => {
+          const c = m.length === 1 ? {
+            x: a,
+            y: a
+          } : f(a, a, R, e.midAngle);
+          return /* @__PURE__ */ h("text", {
+            className: "pie-chart__value-label pie-chart__value-label--inside",
+            x: c.x,
+            y: c.y,
+            textAnchor: "middle",
+            dominantBaseline: "central",
+            children: e.label
+          }, `inside-${e.index}-${e.value}`);
+        })
+      ]
+    })
+  });
+};
+export {
+  Z as PieChart
+};

package/dist/components/Popover/Popover.css

@@ -0,0 +1 @@
+.simple-popover{--popover-arrow-offset:var(--spacing-12);--popover-max-width:360px;background-color:var(--popover-background-color);border:var(--spacing-1) solid var(--popover-border-color);border-radius:var(--radius);box-sizing:border-box;box-shadow:0 var(--spacing-4) var(--spacing-4) #00000026;font-size:var(--font-size-sm);max-width:min(var(--popover-max-width), 100vw - var(--spacing-40));opacity:0;min-width:120px;animation:.2s ease-out forwards popover-appear;transform:scale(.95)}@keyframes popover-appear{to{opacity:1;transform:scale(1)}}.simple-popover__content{box-sizing:border-box;min-width:0;max-width:100%;padding:var(--spacing-12);color:var(--popover-color);overflow-wrap:anywhere;word-break:normal;white-space:normal;line-height:1.4}.simple-popover__content>*{max-width:100%}.simple-popover__arrow{border:var(--spacing-8) solid transparent;width:0;height:0;position:absolute}.simple-popover--bottom .simple-popover__arrow{top:calc(-1 * var(--popover-arrow-offset));left:var(--popover-arrow-position,50%);border-bottom-color:var(--popover-arrow-color);border-top:none;transform:translate(-50%)}.simple-popover--top .simple-popover__arrow{bottom:calc(-1 * var(--popover-arrow-offset));left:var(--popover-arrow-position,50%);border-top-color:var(--popover-arrow-color);border-bottom:none;transform:translate(-50%)}.simple-popover--left .simple-popover__arrow{right:calc(-1 * var(--popover-arrow-offset));top:var(--popover-arrow-position,50%);border-left-color:var(--popover-arrow-color);border-right:none;transform:translateY(-50%)}.simple-popover--right .simple-popover__arrow{left:calc(-1 * var(--popover-arrow-offset));top:var(--popover-arrow-position,50%);border-right-color:var(--popover-arrow-color);border-left:none;transform:translateY(-50%)}@media (width<=768px){.simple-popover{max-width:calc(100vw - var(--spacing-40));font-size:var(--font-size-xs)}.simple-popover__content{padding:var(--spacing-8)}}

package/dist/components/Popover/Popover2.js

@@ -0,0 +1,109 @@
+import './Popover.css';
+/* empty css        */
+import { useCallback as I, useEffect as O, useRef as _, useState as N } from "react";
+import { jsx as x, jsxs as M } from "react/jsx-runtime";
+import { createPortal as z } from "react-dom";
+var i = 20, P = 16, C = 8, j = ({ children: y, visible: h, onClose: g, anchorEl: f, offset: u = C, placement: a = "auto" }) => {
+  const m = _(null), v = _(null), [w, A] = N({
+    top: 0,
+    left: 0,
+    placement: "bottom",
+    arrowOffset: null
+  }), c = I(() => {
+    if (!f || !m.current || !h) return;
+    const t = f.getBoundingClientRect(), e = m.current.getBoundingClientRect(), n = {
+      width: window.innerWidth,
+      height: window.innerHeight
+    }, R = (p, d) => p >= i && d >= i && p + e.height <= n.height - i && d + e.width <= n.width - i, l = {
+      bottom: {
+        top: t.bottom + u,
+        left: t.left + (t.width - e.width) / 2
+      },
+      top: {
+        top: t.top - e.height - u,
+        left: t.left + (t.width - e.width) / 2
+      },
+      left: {
+        top: t.top + (t.height - e.height) / 2,
+        left: t.left - e.width - u
+      },
+      right: {
+        top: t.top + (t.height - e.height) / 2,
+        left: t.right + u
+      }
+    };
+    let o, { top: r, left: s } = l.bottom;
+    if (a === "auto")
+      o = [
+        "bottom",
+        "top",
+        "right",
+        "left"
+      ].find((p) => {
+        const d = l[p];
+        return R(d.top, d.left);
+      }) || "bottom", { top: r, left: s } = l[o];
+    else {
+      const p = l[a];
+      R(p.top, p.left) ? (o = a, { top: r, left: s } = p) : (o = [
+        "bottom",
+        "top",
+        "right",
+        "left"
+      ].filter((d) => d !== a).find((d) => {
+        const L = l[d];
+        return R(L.top, L.left);
+      }) || a, { top: r, left: s } = l[o]);
+    }
+    (o === "top" || o === "bottom") && (s < i && (s = i), s + e.width > n.width - i && (s = n.width - e.width - i)), (o === "left" || o === "right") && (r < i && (r = i), r + e.height > n.height - i && (r = n.height - e.height - i));
+    const E = o === "top" || o === "bottom", F = E ? t.left + t.width / 2 - s : t.top + t.height / 2 - r, b = E ? e.width : e.height, k = Math.min(Math.max(F, P), b - P);
+    A({
+      top: r,
+      left: s,
+      placement: o,
+      arrowOffset: k
+    });
+  }, [
+    f,
+    h,
+    u,
+    a
+  ]);
+  return O(() => (h && (v.current = requestAnimationFrame(c)), () => {
+    v.current !== null && cancelAnimationFrame(v.current);
+  }), [h, c]), O(() => {
+    if (!h) return;
+    const t = (n) => {
+      m.current && f && !m.current.contains(n.target) && !f.contains(n.target) && g();
+    }, e = (n) => {
+      n.key === "Escape" && g();
+    };
+    return document.addEventListener("mousedown", t), document.addEventListener("keydown", e), window.addEventListener("resize", c), window.addEventListener("scroll", c, !0), () => {
+      document.removeEventListener("mousedown", t), document.removeEventListener("keydown", e), window.removeEventListener("resize", c), window.removeEventListener("scroll", c, !0);
+    };
+  }, [
+    h,
+    g,
+    f,
+    c
+  ]), !h || !f ? null : z(/* @__PURE__ */ M("div", {
+    ref: m,
+    className: `simple-popover simple-popover--${w.placement}`,
+    style: {
+      position: "fixed",
+      top: w.top,
+      left: w.left,
+      zIndex: 9999
+    },
+    children: [/* @__PURE__ */ x("div", {
+      className: "simple-popover__arrow",
+      style: w.arrowOffset === null ? void 0 : { "--popover-arrow-position": `${w.arrowOffset}px` }
+    }), /* @__PURE__ */ x("div", {
+      className: "simple-popover__content",
+      children: y
+    })]
+  }), document.body);
+};
+export {
+  j as Popover
+};

package/dist/components/Popover/hooks/Popover.hook.js

@@ -0,0 +1,33 @@
+import { useState as c } from "react";
+var E = () => {
+  const [s, o] = c({}), l = (e, t) => {
+    const r = t instanceof HTMLElement ? t : t.currentTarget;
+    o((i) => ({
+      ...i,
+      [e]: {
+        visible: !0,
+        anchorEl: r
+      }
+    }));
+  }, n = (e) => {
+    o((t) => ({
+      ...t,
+      [e]: {
+        visible: !1,
+        anchorEl: null
+      }
+    }));
+  };
+  return {
+    show: l,
+    hide: n,
+    toggle: (e, t) => {
+      s[e]?.visible ? n(e) : l(e, t);
+    },
+    isVisible: (e) => s[e]?.visible || !1,
+    getAnchorEl: (e) => s[e]?.anchorEl || null
+  };
+};
+export {
+  E as usePopover
+};

package/dist/components/ProgressBar/ProgressBar.css

@@ -0,0 +1 @@
+.progress-bar{gap:var(--spacing-4);flex-direction:column;display:flex}.progress-bar--vertical{align-items:center}.progress-bar--vertical .progress-bar__track{width:var(--spacing-16);height:var(--spacing-200)}.progress-bar--vertical .progress-fill{width:calc(100% - var(--spacing-2));margin:0 auto;transition:height .3s;position:absolute;bottom:0;left:0;right:0}.progress-bar--vertical .progress-bar__inline-label{writing-mode:vertical-rl;padding:var(--spacing-8) 0;transform:rotate(180deg)}.progress-bar--vertical .progress-bar__inline-label.progress-bar__inline-label-left{justify-content:flex-end}.progress-bar--vertical .progress-bar__inline-label.progress-bar__inline-label-right{justify-content:flex-start}.progress-bar--vertical.progress-bar-inline{align-items:center}.progress-bar--vertical.progress-bar-inline .progress-bar__track{flex:none}.progress-bar--vertical.progress-bar-inline .progress-bar__label{min-width:auto}.progress-bar.progress-bar-inline{flex-direction:row;align-items:center}.progress-bar.progress-bar-inline .progress-bar__track{flex:1}.progress-bar.progress-bar-inline .progress-bar__label{text-align:left;min-width:10%;font-size:var(--font-size-xs)}.progress-bar.progress-bar-inline .progress-bar__label.progress-bar__label-left{text-align:left}.progress-bar.progress-bar-inline .progress-bar__label.progress-bar__label-center{text-align:center}.progress-bar.progress-bar-inline .progress-bar__label.progress-bar__label-right{text-align:right}.progress-bar__label{font-size:var(--font-size-xs);color:var(--body-color);font-weight:500}.progress-bar__label.progress-bar__label--success{color:var(--progress-success-bar-fill-color)}.progress-bar__label.progress-bar__label--warning{color:var(--progress-warning-bar-fill-color)}.progress-bar__label.progress-bar__label--danger{color:var(--progress-danger-bar-fill-color)}.progress-bar__label.progress-bar__label--info{color:var(--progress-info-bar-fill-color)}.progress-bar__track{height:var(--spacing-16);background-color:var(--progress-bar-background-color);border-radius:var(--spacing-4);font-weight:500;position:relative;overflow:hidden}.progress-bar__inline-label{z-index:1;padding:0 var(--spacing-8);font-size:var(--spacing-12);color:#fff;text-shadow:-1px -1px #000000a6,1px -1px #000000a6,-1px 1px #000000a6,1px 1px #000000a6,0 0 3px #0000008c;pointer-events:none;white-space:nowrap;align-items:center;font-weight:600;display:flex;position:absolute;inset:0}.progress-bar__inline-label.progress-bar__inline-label-left{justify-content:flex-start}.progress-bar__inline-label.progress-bar__inline-label-center{justify-content:center}.progress-bar__inline-label.progress-bar__inline-label-right{justify-content:flex-end}.progress-bar__track .progress-fill{height:calc(100% - var(--spacing-2));background-color:var(--progress-default-bar-fill-color);border:var(--spacing-1) solid var(--progress-default-bar-border-color);border-radius:var(--spacing-4);transition:width .3s}.progress-bar__track .progress-fill.progress-bar-success{background-color:var(--progress-success-bar-fill-color);border:var(--spacing-1) solid var(--progress-success-bar-border-color)}.progress-bar__track .progress-fill.progress-bar-warning{background-color:var(--progress-warning-bar-fill-color);border:var(--spacing-1) solid var(--progress-warning-bar-border-color)}.progress-bar__track .progress-fill.progress-bar-danger{background-color:var(--progress-danger-bar-fill-color);border:var(--spacing-1) solid var(--progress-danger-bar-border-color)}.progress-bar__track .progress-fill.progress-bar-info{background-color:var(--progress-info-bar-fill-color);border:var(--spacing-1) solid var(--progress-info-bar-border-color)}.progress-bar__track .progress-fill.progress-bar-striped{background-image:linear-gradient(45deg,#ffffff26 25%,#0000 25% 50%,#ffffff26 50% 75%,#0000 75%,#0000);background-size:1rem 1rem}.progress-bar__track .progress-fill.progress-bar-animated{animation:1s linear infinite progress-bar-stripes}.progress-bar--vertical .progress-bar__track .progress-fill{transition:height .3s}.progress-bar.progress-bar-thin .progress-bar__track{height:var(--spacing-6);border-radius:var(--spacing-24)}.progress-bar.progress-bar-thin .progress-bar__track .progress-fill{border-radius:var(--spacing-24)}.progress-bar--vertical.progress-bar-thin .progress-bar__track{width:var(--spacing-6);height:var(--spacing-200)}@keyframes progress-bar-stripes{0%{background-position:1rem 0}to{background-position:0 0}}

package/dist/components/ProgressBar/ProgressBar2.js

@@ -0,0 +1,48 @@
+import './ProgressBar.css';
+import { format2Digits as j } from "../../helpers/Numbers.js";
+/* empty css            */
+import { useMemo as u } from "react";
+import { jsx as o, jsxs as _ } from "react/jsx-runtime";
+var S = ({ animated: $ = !1, height: l, label: t, labelAfterValue: p = !1, labelAlign: i = "left", labelPosition: r = "inside", orientation: c = "horizontal", showPercentage: n = !0, state: f = "default", striped: d = !1, thin: h = !1, value: e = 0 }) => {
+  const N = [
+    "progress-fill",
+    `progress-bar-${f}`,
+    d && "progress-bar-striped",
+    $ && d && "progress-bar-animated"
+  ].filter(Boolean).join(" "), m = `progress-bar__label progress-bar__label--${f} ${i ? `progress-bar__label-${i}` : ""}`, b = e > 100 ? 100 : e < 0 ? 0 : e, s = u(() => {
+    const a = [];
+    return n && a.push(`${j(e)}%`), t && a.push(t), (p ? a : a.reverse()).join(" - ");
+  }, [
+    n,
+    e,
+    t,
+    p
+  ]), v = r === "inside" && !!s, g = c === "vertical", y = g && l ? { height: l } : void 0, x = g ? { height: `${b}%` } : { width: `${b}%` };
+  return /* @__PURE__ */ _("div", {
+    className: `progress-bar progress-bar--${c} ${r === "before" || r === "after" ? "progress-bar-inline" : ""}  ${h ? "progress-bar-thin" : ""}`,
+    children: [
+      (r === "above" || r === "before") && s && /* @__PURE__ */ o("div", {
+        className: m,
+        children: s
+      }),
+      /* @__PURE__ */ _("div", {
+        className: "progress-bar__track",
+        style: y,
+        children: [/* @__PURE__ */ o("div", {
+          className: `${N} ${r === "after" ? "progress-bar__label-after" : ""} `,
+          style: x
+        }), v && /* @__PURE__ */ o("span", {
+          className: `progress-bar__inline-label progress-bar__inline-label-${i}`,
+          children: s
+        })]
+      }),
+      (r === "below" || r === "after") && s && /* @__PURE__ */ o("div", {
+        className: m,
+        children: s
+      })
+    ]
+  });
+};
+export {
+  S as ProgressBar
+};

package/dist/components/ProgressRing/ProgressRing.css

@@ -0,0 +1 @@
+.progress-ring{--progress-ring-color:var(--progress-default-bar-fill-color);--progress-ring-size:96px;align-items:center;gap:var(--spacing-8);color:var(--body-color);flex-direction:column;display:inline-flex}.progress-ring--success{--progress-ring-color:var(--progress-success-bar-fill-color)}.progress-ring--info{--progress-ring-color:var(--progress-info-bar-fill-color)}.progress-ring--warning{--progress-ring-color:var(--progress-warning-bar-fill-color)}.progress-ring--danger{--progress-ring-color:var(--progress-danger-bar-fill-color)}.progress-ring__frame{width:var(--progress-ring-size);height:var(--progress-ring-size);display:inline-flex;position:relative}.progress-ring__svg{width:100%;height:100%;transform:rotate(-90deg)}.progress-ring__track,.progress-ring__value{fill:none}.progress-ring__track{stroke:var(--progress-bar-background-color)}.progress-ring__value{stroke:var(--progress-ring-color);transition:stroke-dashoffset .3s,stroke .2s}.progress-ring__content{inset:var(--spacing-8);text-align:center;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;min-width:0;display:flex;position:absolute}.progress-ring__value-text{color:var(--body-color-accent);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight)}.progress-ring__label{max-width:var(--progress-ring-size);color:var(--body-color-muted);font-size:var(--font-size-xs);line-height:var(--line-height-tight);text-align:center}.progress-ring__label--inside{margin-top:var(--spacing-2);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}

package/dist/components/ProgressRing/ProgressRing2.js

@@ -0,0 +1,54 @@
+import './ProgressRing.css';
+import { format2Digits as M } from "../../helpers/Numbers.js";
+/* empty css             */
+import { useMemo as $ } from "react";
+import { jsx as a, jsxs as i } from "react/jsx-runtime";
+var d = {
+  small: 64,
+  medium: 96,
+  large: 128
+}, y = (s) => typeof s == "number" ? s : d[s], z = ({ children: s, className: u = "", label: e, labelPosition: n = "below", rounded: _ = !0, showPercentage: g = !0, size: h = "medium", state: f = "default", thickness: v, value: l }) => {
+  const t = Math.min(Math.max(Number.isFinite(l) ? l : 0, 0), 100), r = y(h), c = v ?? (r <= d.small ? 6 : 8), o = Math.max((r - c) / 2, 1), m = 2 * Math.PI * o, x = m - t / 100 * m, N = $(() => `${M(t)}%`, [t]), p = s || (g ? N : n === "inside" ? e : null), k = n === "inside" && e && g && !s;
+  return /* @__PURE__ */ i("div", {
+    className: `progress-ring progress-ring--${f} ${u}`,
+    style: { "--progress-ring-size": `${r}px` },
+    children: [/* @__PURE__ */ i("div", {
+      className: "progress-ring__frame",
+      children: [/* @__PURE__ */ i("svg", {
+        className: "progress-ring__svg",
+        viewBox: `0 0 ${r} ${r}`,
+        children: [/* @__PURE__ */ a("circle", {
+          className: "progress-ring__track",
+          cx: r / 2,
+          cy: r / 2,
+          r: o,
+          strokeWidth: c
+        }), /* @__PURE__ */ a("circle", {
+          className: "progress-ring__value",
+          cx: r / 2,
+          cy: r / 2,
+          r: o,
+          strokeDasharray: m,
+          strokeDashoffset: x,
+          strokeLinecap: _ ? "round" : "butt",
+          strokeWidth: c
+        })]
+      }), p && /* @__PURE__ */ i("div", {
+        className: "progress-ring__content",
+        children: [/* @__PURE__ */ a("span", {
+          className: "progress-ring__value-text",
+          children: p
+        }), k && /* @__PURE__ */ a("span", {
+          className: "progress-ring__label progress-ring__label--inside",
+          children: e
+        })]
+      })]
+    }), n === "below" && e && /* @__PURE__ */ a("div", {
+      className: "progress-ring__label",
+      children: e
+    })]
+  });
+};
+export {
+  z as ProgressRing
+};

package/dist/components/QuantitySelector/QuantitySelector.css

@@ -0,0 +1 @@
+.quantity-selector-wrapper{--digits:3;gap:var(--spacing-8);flex-direction:column;display:flex}.quantity-selector-wrapper .quantity-selector-label{color:var(--form-control-label-color,var(--form-control-color));font-size:var(--form-control-label-font-size,var(--font-size-sm));font-weight:var(--form-control-label-font-weight,var(--font-weight-medium));letter-spacing:var(--form-control-label-letter-spacing,normal);text-transform:var(--form-control-label-text-transform,none)}.quantity-selector-wrapper .quantity-selector-label .quantity-selector-required{color:var(--body-danger-color,#dc2626);margin-left:var(--spacing-2)}.quantity-selector-wrapper .quantity-selector{border:var(--spacing-1) solid var(--form-control-border-color);border-radius:var(--radius-sm);background-color:var(--form-control-background-color);cursor:default;align-items:stretch;display:inline-flex;overflow:hidden}.quantity-selector-wrapper .quantity-selector.quantity-selector-readonly .quantity-selector-input{pointer-events:none}.quantity-selector-wrapper .quantity-selector.quantity-selector-error{background-color:var(--form-control-error-background-color);border-color:var(--form-control-error-border-color)}.quantity-selector-wrapper .quantity-selector.quantity-selector-error .input-number{color:var(--form-control-error-color)}.quantity-selector-wrapper .quantity-selector.quantity-selector-success{background-color:var(--form-control-success-background-color);border-color:var(--form-control-success-border-color)}.quantity-selector-wrapper .quantity-selector.quantity-selector-success .input-number{color:var(--form-control-success-color)}.quantity-selector-wrapper .quantity-selector .quantity-selector-input{width:calc(var(--digits) * 1ch + var(--spacing-32));align-items:stretch;display:flex}.quantity-selector-wrapper .quantity-selector .quantity-selector-input .input-number-wrapper{flex:1;display:flex}.quantity-selector-wrapper .quantity-selector .quantity-selector-input .input-number-wrapper .input-number{text-align:center;padding:var(--spacing-8) var(--spacing-4);font-size:var(--font-size-sm);background:0 0;border:none;flex:1}.quantity-selector-wrapper .quantity-selector .quantity-selector-input .input-number-wrapper .input-number:focus{outline:none}.quantity-selector-wrapper .quantity-selector .quantity-selector-input .input-number-wrapper .input-number::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.quantity-selector-wrapper .quantity-selector .quantity-selector-input .input-number-wrapper .input-number::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.quantity-selector-wrapper .quantity-selector .quantity-selector-input .input-number-wrapper .input-number[type=number]{appearance:textfield}.quantity-selector-wrapper .quantity-selector .quantity-selector-button{width:var(--spacing-32);min-width:var(--spacing-32);background-color:var(--button-default-background-color);font-size:var(--font-size-md);font-weight:var(--font-weight-bold);border:none;border-radius:0;flex-shrink:0;justify-content:center;padding:0}.quantity-selector-wrapper .quantity-selector .quantity-selector-button:not([disabled]):hover{background-color:var(--button-default-hover-background-color);transform:none}.quantity-selector-wrapper .quantity-selector .quantity-selector-button:active{transform:none}.quantity-selector-wrapper .quantity-selector .quantity-selector-button.quantity-selector-button-decrease{border-right:var(--spacing-1) solid var(--form-control-border-color)}.quantity-selector-wrapper .quantity-selector .quantity-selector-button.quantity-selector-button-increase{border-left:var(--spacing-1) solid var(--form-control-border-color)}.quantity-selector-wrapper .quantity-selector .quantity-selector-button:disabled{cursor:not-allowed}.quantity-selector-wrapper .quantity-selector-error-message{font-size:var(--font-size-xs);color:var(--form-control-error-color)}.quantity-selector-wrapper .quantity-selector-success-message{font-size:var(--font-size-xs);color:var(--form-control-success-color)}

package/dist/components/QuantitySelector/QuantitySelector2.js

@@ -0,0 +1,94 @@
+import './QuantitySelector.css';
+import { Button as h } from "../Button/Button2.js";
+import { InputNumber as I } from "../InputNumber/InputNumber2.js";
+/* empty css                 */
+import { forwardRef as S } from "react";
+import { jsx as s, jsxs as u } from "react/jsx-runtime";
+var D = S(({ disabled: n = !1, error: l, id: d, inputWidth: f, label: y, max: t, min: r = 0, onChange: i, readOnlyInput: q = !1, required: p = !1, step: o = 1, success: a, value: c }, v) => {
+  const N = f || (t !== void 0 ? Math.max(String(t).length, String(r).length, 3) : 3), m = () => {
+    if (n) return;
+    const e = (c ?? 0) - o;
+    r !== void 0 && e < r || i?.(e);
+  }, b = () => {
+    if (n) return;
+    const e = (c ?? 0) + o;
+    t !== void 0 && e > t || i?.(e);
+  }, g = (e) => {
+    if (!q) {
+      if (e === void 0) {
+        i?.(void 0);
+        return;
+      }
+      if (r !== void 0 && e < r) {
+        i?.(r);
+        return;
+      }
+      if (t !== void 0 && e > t) {
+        i?.(t);
+        return;
+      }
+      i?.(e);
+    }
+  };
+  return /* @__PURE__ */ u("div", {
+    className: "quantity-selector-wrapper",
+    children: [
+      y && /* @__PURE__ */ u("label", {
+        htmlFor: d,
+        className: "quantity-selector-label",
+        children: [y, p && /* @__PURE__ */ s("span", {
+          className: "quantity-selector-required",
+          children: "*"
+        })]
+      }),
+      /* @__PURE__ */ u("div", {
+        className: `quantity-selector${q ? " quantity-selector-readonly" : ""}${l ? " quantity-selector-error" : ""}${a ? " quantity-selector-success" : ""}`,
+        style: { "--digits": N },
+        children: [
+          /* @__PURE__ */ s(h, {
+            className: "quantity-selector-button quantity-selector-button-decrease",
+            disabled: n || r !== void 0 && (c ?? 0) <= r,
+            onClick: m,
+            size: "small",
+            variant: "default",
+            type: "button",
+            children: "−"
+          }),
+          /* @__PURE__ */ s("div", {
+            className: "quantity-selector-input",
+            children: /* @__PURE__ */ s(I, {
+              disabled: n,
+              id: d,
+              max: t,
+              min: r,
+              onChange: g,
+              ref: v,
+              step: o,
+              value: c
+            })
+          }),
+          /* @__PURE__ */ s(h, {
+            className: "quantity-selector-button quantity-selector-button-increase",
+            disabled: n || t !== void 0 && (c ?? 0) >= t,
+            onClick: b,
+            size: "small",
+            variant: "default",
+            type: "button",
+            children: "+"
+          })
+        ]
+      }),
+      l && /* @__PURE__ */ s("span", {
+        className: "quantity-selector-error-message",
+        children: l
+      }),
+      a && /* @__PURE__ */ s("span", {
+        className: "quantity-selector-success-message",
+        children: a
+      })
+    ]
+  });
+});
+export {
+  D as QuantitySelector
+};

package/dist/components/QuickAdd/QuickAdd.css

@@ -0,0 +1 @@
+.quick-add .quick-add-input{padding:var(--spacing-16) var(--spacing-24)}.quick-add .error-message{color:var(--body-danger-color);font-size:var(--font-size-xs);margin-top:var(--spacing-4)}

package/dist/components/QuickAdd/QuickAdd2.js

@@ -0,0 +1,56 @@
+import './QuickAdd.css';
+import { Modal as y } from "../Modal/Modal2.js";
+import { InputText as k } from "../InputText/InputText2.js";
+/* empty css         */
+import { useEffect as p, useState as o } from "react";
+import { jsx as t } from "react/jsx-runtime";
+var b = ({ isOpen: n = !1, onClose: a, placeholder: u, title: f, onSave: m, titleIcon: h, value: i = "", usePortal: v = !1 }) => {
+  const [c, s] = o(i), [r, d] = o(!1);
+  p(() => {
+    n && s(i);
+  }, [n, i]);
+  const l = async () => {
+    d(!0), await m(c), d(!1), a();
+  };
+  return /* @__PURE__ */ t("div", {
+    className: "quick-add",
+    children: /* @__PURE__ */ t(y, {
+      isOpen: n,
+      title: f,
+      titleIcon: h,
+      size: "small",
+      onClose: a,
+      onOverlayClick: a,
+      secondary: {
+        text: "Cancel",
+        variant: "default",
+        disabled: r,
+        onClick: a
+      },
+      primary: {
+        text: r ? "Saving..." : "Save",
+        variant: "success",
+        disabled: r,
+        onClick: l
+      },
+      usePortal: v,
+      children: /* @__PURE__ */ t("div", {
+        className: "quick-add-input",
+        children: /* @__PURE__ */ t(k, {
+          placeholder: u,
+          value: c,
+          onChange: (e) => {
+            s(e);
+          },
+          onKeyDown: (e) => {
+            e.key === "Enter" && l(), e.key === "Escape" && a();
+          },
+          autoFocus: !0
+        })
+      })
+    })
+  });
+};
+export {
+  b as QuickAdd
+};

package/dist/components/QuickNumberUpdate/QuickNumberUpdate.css

@@ -0,0 +1 @@
+.quick-number-update{gap:var(--spacing-24);padding:var(--spacing-24);flex-direction:column;display:flex}.quick-number-update-content{align-items:center;gap:var(--spacing-16);justify-content:center;display:flex}

package/dist/components/QuickNumberUpdate/QuickNumberUpdate2.js

@@ -0,0 +1,52 @@
+import './QuickNumberUpdate.css';
+import { Modal as h } from "../Modal/Modal2.js";
+import { InputNumber as k } from "../InputNumber/InputNumber2.js";
+/* empty css                  */
+import { useState as s } from "react";
+import { jsx as a } from "react/jsx-runtime";
+var N = ({ isOpen: l = !1, title: u, onClose: e, onSave: o, icon: d, value: m, min: v, max: p }) => {
+  const [r, f] = s(m), [t, i] = s(!1), c = async () => {
+    i(!0), await o(r), i(!1), e();
+  };
+  return /* @__PURE__ */ a(h, {
+    isOpen: l,
+    titleIcon: d,
+    title: u,
+    size: "small",
+    onClose: e,
+    onOverlayClick: e,
+    secondary: {
+      text: "Cancel",
+      variant: "default",
+      disabled: t,
+      onClick: e
+    },
+    primary: {
+      text: t ? "Saving..." : "Save",
+      variant: "success",
+      disabled: t,
+      onClick: c
+    },
+    children: /* @__PURE__ */ a("div", {
+      className: "quick-number-update",
+      children: /* @__PURE__ */ a("div", {
+        className: "quick-number-update-content",
+        children: /* @__PURE__ */ a(k, {
+          autoFocus: !0,
+          min: v,
+          max: p,
+          value: r,
+          onChange: (n) => {
+            f(n);
+          },
+          onKeyDown: (n) => {
+            n.key === "Enter" && c();
+          }
+        })
+      })
+    })
+  });
+};
+export {
+  N as QuickNumberUpdate
+};

package/dist/components/QuickOptionUpdate/QuickOptionUpdate.css

@@ -0,0 +1 @@
+.quick-set .quick-set-list{padding:var(--spacing-16);row-gap:var(--spacing-16);flex-direction:column;display:flex}.quick-set .error-message{color:var(--body-danger-color);font-size:var(--font-size-xs);margin-top:var(--spacing-4)}