@prodivix/ui 0.1.0

package/dist/form/PdxRadioGroup.js

@@ -0,0 +1,71 @@
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+/* empty css                   */
+import "@prodivix/shared";
+import { useState as I, useId as L, useEffect as V } from "react";
+function y({
+  label: s,
+  description: l,
+  message: r,
+  options: m,
+  value: d,
+  defaultValue: u,
+  name: p,
+  layout: x = "Vertical",
+  disabled: c = !1,
+  onChange: n,
+  className: h,
+  style: N,
+  id: P,
+  dataAttributes: f = {}
+}) {
+  const [b, o] = I(u || ""), v = L();
+  V(() => {
+    d !== void 0 && o(d);
+  }, [d]);
+  const G = d !== void 0 ? d : b, R = p || `prodivix-radio-${v}`, $ = (e) => {
+    d === void 0 && o(e), n && n(e);
+  }, D = `PdxRadioGroup ${x} ${c ? "Disabled" : ""} ${h || ""}`.trim(), F = { ...f };
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: `PdxField ${D}`,
+      style: N,
+      id: P,
+      ...F,
+      children: [
+        s && /* @__PURE__ */ a("div", { className: "PdxFieldHeader", children: /* @__PURE__ */ a("label", { className: "PdxFieldLabel", children: s }) }),
+        l && /* @__PURE__ */ a("div", { className: "PdxFieldDescription", children: l }),
+        /* @__PURE__ */ a("ul", { className: "PdxRadioGroupList", children: m.map((e) => {
+          const t = c || e.disabled;
+          return /* @__PURE__ */ a("li", { className: "PdxRadioGroupItem", children: /* @__PURE__ */ i(
+            "label",
+            {
+              className: `PdxRadioGroupLabel ${t ? "Disabled" : ""}`,
+              children: [
+                /* @__PURE__ */ a(
+                  "input",
+                  {
+                    type: "radio",
+                    name: R,
+                    value: e.value,
+                    checked: G === e.value,
+                    disabled: t,
+                    onChange: () => $(e.value)
+                  }
+                ),
+                /* @__PURE__ */ i("span", { className: "PdxRadioGroupText", children: [
+                  /* @__PURE__ */ a("span", { children: e.label }),
+                  e.description && /* @__PURE__ */ a("span", { className: "PdxRadioGroupDescription", children: e.description })
+                ] })
+              ]
+            }
+          ) }, e.value);
+        }) }),
+        r && /* @__PURE__ */ a("div", { className: "PdxFieldMessage", children: r })
+      ]
+    }
+  );
+}
+export {
+  y as default
+};

package/dist/form/PdxRange.js

@@ -0,0 +1,95 @@
+import { jsxs as l, jsx as c } from "react/jsx-runtime";
+/* empty css              */
+import "@prodivix/shared";
+import { useState as b, useEffect as j, useMemo as k } from "react";
+function L({
+  label: d,
+  description: m,
+  message: o,
+  min: n = 0,
+  max: s = 100,
+  step: x = 1,
+  value: t,
+  defaultValue: P,
+  disabled: i = !1,
+  showValue: p = !0,
+  onChange: u,
+  className: N,
+  style: f,
+  id: M,
+  dataAttributes: R = {}
+}) {
+  const [F, g] = b(
+    P || { min: n, max: s }
+  );
+  j(() => {
+    t && g(t);
+  }, [t?.min, t?.max]);
+  const e = t || F, h = (a) => {
+    t || g(a), u && u(a);
+  }, $ = (a) => {
+    const r = Math.min(Number(a.target.value), e.max);
+    h({ min: r, max: e.max });
+  }, v = (a) => {
+    const r = Math.max(Number(a.target.value), e.min);
+    h({ min: e.min, max: r });
+  }, y = k(() => {
+    const a = s - n || 1, r = (e.min - n) / a * 100, I = (e.max - n) / a * 100;
+    return {
+      "--range-start": `${r}%`,
+      "--range-end": `${I}%`
+    };
+  }, [e.min, e.max, n, s]), C = `PdxRange ${i ? "Disabled" : ""} ${N || ""}`.trim(), V = { ...R };
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: `PdxField ${C}`,
+      style: f,
+      id: M,
+      ...V,
+      children: [
+        d && /* @__PURE__ */ l("div", { className: "PdxFieldHeader", children: [
+          /* @__PURE__ */ c("label", { className: "PdxFieldLabel", children: d }),
+          p && /* @__PURE__ */ l("span", { className: "PdxRangeValue", children: [
+            e.min,
+            " - ",
+            e.max
+          ] })
+        ] }),
+        m && /* @__PURE__ */ c("div", { className: "PdxFieldDescription", children: m }),
+        /* @__PURE__ */ l("div", { className: "PdxRangeTrack", style: y, children: [
+          /* @__PURE__ */ c(
+            "input",
+            {
+              className: "PdxRangeInput",
+              type: "range",
+              min: n,
+              max: s,
+              step: x,
+              value: e.min,
+              disabled: i,
+              onChange: $
+            }
+          ),
+          /* @__PURE__ */ c(
+            "input",
+            {
+              className: "PdxRangeInput",
+              type: "range",
+              min: n,
+              max: s,
+              step: x,
+              value: e.max,
+              disabled: i,
+              onChange: v
+            }
+          )
+        ] }),
+        o && /* @__PURE__ */ c("div", { className: "PdxFieldMessage", children: o })
+      ]
+    }
+  );
+}
+export {
+  L as default
+};

package/dist/form/PdxRating.js

@@ -0,0 +1,62 @@
+import { jsxs as y, jsx as e } from "react/jsx-runtime";
+/* empty css               */
+import "@prodivix/shared";
+import { Star as b } from "lucide-react";
+import { useState as m, useEffect as j } from "react";
+function k({
+  label: n,
+  description: r,
+  message: s,
+  value: t,
+  defaultValue: f = 0,
+  max: x = 5,
+  size: P = "Medium",
+  readOnly: h = !1,
+  disabled: i = !1,
+  onChange: d,
+  className: p,
+  style: N,
+  id: v,
+  dataAttributes: V = {}
+}) {
+  const [g, o] = m(f), [c, u] = m(null);
+  j(() => {
+    t !== void 0 && o(t);
+  }, [t]);
+  const F = c !== null ? c : t !== void 0 ? t : g, R = (l) => {
+    h || i || (t === void 0 && o(l), d && d(l));
+  }, S = `PdxRating ${P} ${i ? "Disabled" : ""} ${p || ""}`.trim(), $ = { ...V };
+  return /* @__PURE__ */ y(
+    "div",
+    {
+      className: `PdxField ${S}`,
+      style: N,
+      id: v,
+      ...$,
+      children: [
+        n && /* @__PURE__ */ e("div", { className: "PdxFieldHeader", children: /* @__PURE__ */ e("label", { className: "PdxFieldLabel", children: n }) }),
+        r && /* @__PURE__ */ e("div", { className: "PdxFieldDescription", children: r }),
+        /* @__PURE__ */ e("div", { className: "PdxRatingStars", children: Array.from({ length: x }, (l, M) => {
+          const a = M + 1;
+          return /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              className: `PdxRatingStar ${F >= a ? "Active" : ""}`,
+              onClick: () => R(a),
+              onMouseEnter: () => u(a),
+              onMouseLeave: () => u(null),
+              disabled: i,
+              children: /* @__PURE__ */ e(b, { className: "PdxRatingIcon" })
+            },
+            a
+          );
+        }) }),
+        s && /* @__PURE__ */ e("div", { className: "PdxFieldMessage", children: s })
+      ]
+    }
+  );
+}
+export {
+  k as default
+};

package/dist/form/PdxRegexInput.js

@@ -0,0 +1,76 @@
+import { jsxs as P, jsx as t } from "react/jsx-runtime";
+/* empty css                   */
+import "@prodivix/shared";
+import { useState as w, useEffect as y, useMemo as L } from "react";
+function z({
+  label: o,
+  description: i,
+  message: v,
+  invalidMessage: N = "Invalid format",
+  validMessage: R = "Looks good",
+  pattern: s,
+  value: e,
+  defaultValue: F,
+  placeholder: $,
+  size: D = "Medium",
+  state: r = "Default",
+  disabled: d = !1,
+  required: c = !1,
+  onChange: u,
+  className: E,
+  style: I,
+  id: l,
+  dataAttributes: V = {}
+}) {
+  const [M, f] = w(F || "");
+  y(() => {
+    e !== void 0 && f(e);
+  }, [e]);
+  const a = e !== void 0 ? e : M, x = L(() => {
+    try {
+      if (s instanceof RegExp) {
+        const n = s.flags.replace("g", "");
+        return new RegExp(s.source, n);
+      }
+      return new RegExp(s);
+    } catch {
+      return;
+    }
+  }, [s]), m = x ? x.test(a) : !0, g = r !== "Default" ? r : a ? m ? "Success" : "Error" : "Default", C = (n) => {
+    const h = n.target.value;
+    e === void 0 && f(h), u && u(h);
+  }, S = `PdxRegexInput ${D} ${g} ${d ? "Disabled" : ""} ${E || ""}`.trim(), j = { ...V }, p = v || (a ? m ? R : N : void 0);
+  return /* @__PURE__ */ P(
+    "div",
+    {
+      className: `PdxField ${S}`,
+      style: I,
+      id: l,
+      ...j,
+      children: [
+        o && /* @__PURE__ */ P("div", { className: "PdxFieldHeader", children: [
+          /* @__PURE__ */ t("label", { className: "PdxFieldLabel", htmlFor: l, children: o }),
+          c && /* @__PURE__ */ t("span", { className: "PdxFieldRequired", children: "*" })
+        ] }),
+        i && /* @__PURE__ */ t("div", { className: "PdxFieldDescription", children: i }),
+        /* @__PURE__ */ t(
+          "input",
+          {
+            className: "PdxRegexInputControl",
+            id: l,
+            type: "text",
+            placeholder: $,
+            value: a,
+            disabled: d,
+            required: c,
+            onChange: C
+          }
+        ),
+        p && /* @__PURE__ */ t("div", { className: `PdxFieldMessage ${g}`, children: p })
+      ]
+    }
+  );
+}
+export {
+  z as default
+};

package/dist/form/PdxRegionPicker.js

@@ -0,0 +1,121 @@
+import { jsxs as l, jsx as c } from "react/jsx-runtime";
+/* empty css                     */
+import "@prodivix/shared";
+import { useState as q, useEffect as E } from "react";
+const P = (s, r) => {
+  if (r)
+    return s.find((d) => d.value === r)?.label;
+};
+function G({
+  label: s,
+  description: r,
+  message: d,
+  size: y = "Medium",
+  state: m = "Default",
+  disabled: a = !1,
+  required: C = !1,
+  options: x,
+  value: t,
+  defaultValue: N,
+  placeholder: o,
+  onChange: p,
+  className: b,
+  style: R,
+  id: k,
+  dataAttributes: F = {}
+}) {
+  const [$, f] = q(
+    N || {}
+  );
+  E(() => {
+    t && f(t);
+  }, [t?.province, t?.city, t?.district]);
+  const i = t || $, v = x, h = v.find(
+    (e) => e.value === i.province
+  )?.children || [], g = h.find((e) => e.value === i.city)?.children || [], u = (e) => {
+    const n = {
+      province: P(v, e.province),
+      city: P(h, e.city),
+      district: P(g, e.district)
+    };
+    t || f(e), p && p(e, n);
+  }, D = (e) => {
+    const n = e.target.value || void 0;
+    u({ province: n, city: void 0, district: void 0 });
+  }, S = (e) => {
+    const n = e.target.value || void 0;
+    u({
+      province: i.province,
+      city: n,
+      district: void 0
+    });
+  }, j = (e) => {
+    const n = e.target.value || void 0;
+    u({
+      province: i.province,
+      city: i.city,
+      district: n
+    });
+  }, L = `PdxRegionPicker ${y} ${m} ${a ? "Disabled" : ""} ${b || ""}`.trim(), M = { ...F };
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: `PdxField ${L}`,
+      style: R,
+      id: k,
+      ...M,
+      children: [
+        s && /* @__PURE__ */ l("div", { className: "PdxFieldHeader", children: [
+          /* @__PURE__ */ c("label", { className: "PdxFieldLabel", children: s }),
+          C && /* @__PURE__ */ c("span", { className: "PdxFieldRequired", children: "*" })
+        ] }),
+        r && /* @__PURE__ */ c("div", { className: "PdxFieldDescription", children: r }),
+        /* @__PURE__ */ l("div", { className: "PdxRegionPickerControls", children: [
+          /* @__PURE__ */ l(
+            "select",
+            {
+              className: "PdxRegionPickerSelect",
+              disabled: a,
+              value: i.province || "",
+              onChange: D,
+              children: [
+                /* @__PURE__ */ c("option", { value: "", children: o?.province || "Province" }),
+                v.map((e) => /* @__PURE__ */ c("option", { value: e.value, children: e.label }, e.value))
+              ]
+            }
+          ),
+          /* @__PURE__ */ l(
+            "select",
+            {
+              className: "PdxRegionPickerSelect",
+              disabled: a || !i.province,
+              value: i.city || "",
+              onChange: S,
+              children: [
+                /* @__PURE__ */ c("option", { value: "", children: o?.city || "City" }),
+                h.map((e) => /* @__PURE__ */ c("option", { value: e.value, children: e.label }, e.value))
+              ]
+            }
+          ),
+          /* @__PURE__ */ l(
+            "select",
+            {
+              className: "PdxRegionPickerSelect",
+              disabled: a || !i.city,
+              value: i.district || "",
+              onChange: j,
+              children: [
+                /* @__PURE__ */ c("option", { value: "", children: o?.district || "District" }),
+                g.map((e) => /* @__PURE__ */ c("option", { value: e.value, children: e.label }, e.value))
+              ]
+            }
+          )
+        ] }),
+        d && /* @__PURE__ */ c("div", { className: `PdxFieldMessage ${m}`, children: d })
+      ]
+    }
+  );
+}
+export {
+  G as default
+};

package/dist/form/PdxRichTextEditor.js

@@ -0,0 +1,177 @@
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+/* empty css                       */
+import "@prodivix/shared";
+import { Bold as M, Italic as $, Underline as q, List as A, ListOrdered as H, Link as V, Eraser as j } from "lucide-react";
+import { useState as L, useRef as D, useEffect as m } from "react";
+function X({
+  label: f,
+  description: b,
+  message: h,
+  value: l,
+  defaultValue: N,
+  placeholder: v = "Write something...",
+  disabled: t = !1,
+  readOnly: i = !1,
+  showToolbar: k = !0,
+  onChange: p,
+  className: P,
+  style: T,
+  id: E,
+  dataAttributes: R = {}
+}) {
+  const [S, C] = L(N || ""), [d, U] = L({
+    bold: !1,
+    italic: !1,
+    underline: !1,
+    unorderedList: !1,
+    orderedList: !1
+  }), n = D(null);
+  m(() => {
+    l !== void 0 && C(l);
+  }, [l]);
+  const s = l !== void 0 ? l : S;
+  m(() => {
+    n.current && n.current.innerHTML !== s && (n.current.innerHTML = s);
+  }, [s]);
+  const x = () => {
+    const o = n.current?.innerHTML || "";
+    l === void 0 && C(o), p && p(o);
+  }, c = () => {
+    typeof document > "u" || U({
+      bold: document.queryCommandState("bold"),
+      italic: document.queryCommandState("italic"),
+      underline: document.queryCommandState("underline"),
+      unorderedList: document.queryCommandState("insertUnorderedList"),
+      orderedList: document.queryCommandState("insertOrderedList")
+    });
+  }, I = () => {
+    !n.current || t || i || n.current.focus();
+  }, r = (o, B) => {
+    t || i || typeof document > "u" || (I(), document.execCommand(o, !1, B), c(), x());
+  }, g = () => {
+    if (t || i) return;
+    const o = typeof window < "u" ? window.prompt("Enter URL") : void 0;
+    o && r("createLink", o);
+  };
+  m(() => {
+    c();
+  }, []);
+  const a = s.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim(), y = a.length, z = a ? a.split(" ").length : 0, F = `PdxRichTextEditor ${t ? "Disabled" : ""} ${i ? "ReadOnly" : ""} ${P || ""}`.trim(), w = { ...R };
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: `PdxField ${F}`,
+      style: T,
+      id: E,
+      ...w,
+      children: [
+        f && /* @__PURE__ */ e("div", { className: "PdxFieldHeader", children: /* @__PURE__ */ e("label", { className: "PdxFieldLabel", children: f }) }),
+        b && /* @__PURE__ */ e("div", { className: "PdxFieldDescription", children: b }),
+        k && /* @__PURE__ */ u("div", { className: "PdxRichTextEditorToolbar", children: [
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              className: d.bold ? "Active" : "",
+              onClick: () => r("bold"),
+              disabled: t || i,
+              title: "Bold (Ctrl/Cmd+B)",
+              "aria-label": "Bold",
+              children: /* @__PURE__ */ e(M, { size: 14 })
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              className: d.italic ? "Active" : "",
+              onClick: () => r("italic"),
+              disabled: t || i,
+              title: "Italic (Ctrl/Cmd+I)",
+              "aria-label": "Italic",
+              children: /* @__PURE__ */ e($, { size: 14 })
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              className: d.underline ? "Active" : "",
+              onClick: () => r("underline"),
+              disabled: t || i,
+              title: "Underline (Ctrl/Cmd+U)",
+              "aria-label": "Underline",
+              children: /* @__PURE__ */ e(q, { size: 14 })
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              className: d.unorderedList ? "Active" : "",
+              onClick: () => r("insertUnorderedList"),
+              disabled: t || i,
+              title: "Bulleted list",
+              "aria-label": "Bulleted list",
+              children: /* @__PURE__ */ e(A, { size: 14 })
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              className: d.orderedList ? "Active" : "",
+              onClick: () => r("insertOrderedList"),
+              disabled: t || i,
+              title: "Numbered list",
+              "aria-label": "Numbered list",
+              children: /* @__PURE__ */ e(H, { size: 14 })
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: g,
+              disabled: t || i,
+              title: "Insert link",
+              "aria-label": "Insert link",
+              children: /* @__PURE__ */ e(V, { size: 14 })
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: () => r("removeFormat"),
+              disabled: t || i,
+              title: "Clear formatting",
+              "aria-label": "Clear formatting",
+              children: /* @__PURE__ */ e(j, { size: 14 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            ref: n,
+            className: "PdxRichTextEditorContent",
+            contentEditable: !t && !i,
+            "data-placeholder": v,
+            onInput: x,
+            onKeyUp: c,
+            onMouseUp: c
+          }
+        ),
+        /* @__PURE__ */ u("div", { className: "PdxRichTextEditorFooter", "aria-live": "polite", children: [
+          /* @__PURE__ */ e("span", { children: `${z} words` }),
+          /* @__PURE__ */ e("span", { children: `${y} chars` })
+        ] }),
+        h && /* @__PURE__ */ e("div", { className: "PdxFieldMessage", children: h })
+      ]
+    }
+  );
+}
+export {
+  X as default
+};

package/dist/form/PdxSelect.js

@@ -0,0 +1,69 @@
+import { jsxs as m, jsx as d } from "react/jsx-runtime";
+/* empty css               */
+import "@prodivix/shared";
+import { useState as g, useEffect as j } from "react";
+function I({
+  label: i,
+  description: t,
+  message: s,
+  options: c,
+  value: e,
+  defaultValue: u,
+  placeholder: f = "Select item",
+  size: x = "Medium",
+  disabled: r = !1,
+  onChange: n,
+  className: h,
+  style: v,
+  id: P,
+  dataAttributes: N = {}
+}) {
+  const [b, o] = g(u || "");
+  j(() => {
+    e !== void 0 && o(e);
+  }, [e]);
+  const p = e !== void 0 ? e : b, F = (l) => {
+    const a = l.target.value;
+    e === void 0 && o(a);
+    const $ = c.find((C) => C.value === a);
+    n && n(a, $);
+  }, S = `PdxSelect ${x} ${r ? "Disabled" : ""} ${h || ""}`.trim(), V = { ...N };
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: `PdxField ${S}`,
+      style: v,
+      id: P,
+      ...V,
+      children: [
+        i && /* @__PURE__ */ d("div", { className: "PdxFieldHeader", children: /* @__PURE__ */ d("label", { className: "PdxFieldLabel", children: i }) }),
+        t && /* @__PURE__ */ d("div", { className: "PdxFieldDescription", children: t }),
+        /* @__PURE__ */ m(
+          "select",
+          {
+            className: "PdxSelectControl",
+            disabled: r,
+            value: p,
+            onChange: F,
+            children: [
+              /* @__PURE__ */ d("option", { value: "", disabled: !0, hidden: !0, children: f }),
+              c.map((l) => /* @__PURE__ */ d(
+                "option",
+                {
+                  value: l.value,
+                  disabled: l.disabled,
+                  children: l.label
+                },
+                l.value
+              ))
+            ]
+          }
+        ),
+        s && /* @__PURE__ */ d("div", { className: "PdxFieldMessage", children: s })
+      ]
+    }
+  );
+}
+export {
+  I as default
+};