@prodivix/ui 0.1.0

package/dist/feedback/PdxPopover.js

@@ -0,0 +1,59 @@
+import { jsxs as n, jsx as l } from "react/jsx-runtime";
+/* empty css                */
+import "@prodivix/shared";
+import { useState as O, useEffect as j } from "react";
+function H({
+  title: r,
+  content: c,
+  trigger: d = "Click",
+  open: e,
+  defaultOpen: P = !1,
+  onOpenChange: o,
+  panelClassName: m,
+  panelStyle: p,
+  children: f,
+  className: v,
+  style: u,
+  id: x,
+  dataAttributes: N = {}
+}) {
+  const [g, t] = O(P);
+  j(() => {
+    e !== void 0 && t(e);
+  }, [e]);
+  const i = e !== void 0 ? e : g, s = (a) => {
+    e === void 0 && t(a), o && o(a);
+  }, h = `PdxPopover ${v || ""}`.trim(), C = { ...N };
+  return /* @__PURE__ */ n(
+    "span",
+    {
+      className: h,
+      style: u,
+      id: x,
+      ...C,
+      ...d === "Hover" ? {
+        onMouseEnter: () => s(!0),
+        onMouseLeave: () => s(!1)
+      } : {
+        onClick: () => s(!i)
+      },
+      children: [
+        f,
+        i && /* @__PURE__ */ n(
+          "span",
+          {
+            className: `PdxPopoverPanel ${m || ""}`.trim(),
+            style: p,
+            children: [
+              r && /* @__PURE__ */ l("div", { className: "PdxPopoverTitle", children: r }),
+              /* @__PURE__ */ l("div", { className: "PdxPopoverContent", children: c })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  H as default
+};

package/dist/feedback/PdxSkeleton.js

@@ -0,0 +1,23 @@
+import { jsx as e } from "react/jsx-runtime";
+/* empty css                 */
+import "@prodivix/shared";
+function N({
+  variant: t = "Text",
+  width: m,
+  height: n,
+  lines: s = 1,
+  className: c,
+  style: d,
+  id: o,
+  dataAttributes: i = {}
+}) {
+  const r = `PdxSkeleton ${t} ${c || ""}`.trim(), l = { ...i }, a = {
+    width: m,
+    height: n,
+    ...d
+  };
+  return t === "Text" && s > 1 ? /* @__PURE__ */ e("div", { className: "PdxSkeletonGroup", id: o, ...l, children: Array.from({ length: s }).map((x, p) => /* @__PURE__ */ e("div", { className: r, style: a }, p)) }) : /* @__PURE__ */ e("div", { className: r, style: a, id: o, ...l });
+}
+export {
+  N as default
+};

package/dist/feedback/PdxTooltip.js

@@ -0,0 +1,30 @@
+import { jsxs as e, jsx as m } from "react/jsx-runtime";
+/* empty css                */
+import "@prodivix/shared";
+function f({
+  content: o,
+  placement: t = "Top",
+  children: s,
+  className: a,
+  style: l,
+  id: n,
+  dataAttributes: p = {}
+}) {
+  const r = `PdxTooltip ${a || ""}`.trim(), i = { ...p };
+  return /* @__PURE__ */ e(
+    "span",
+    {
+      className: r,
+      style: l,
+      id: n,
+      ...i,
+      children: [
+        s,
+        /* @__PURE__ */ m("span", { className: `PdxTooltipContent ${t}`, children: o })
+      ]
+    }
+  );
+}
+export {
+  f as default
+};

package/dist/form/PdxColorPicker.js

@@ -0,0 +1,75 @@
+import { jsxs as x, jsx as r } from "react/jsx-runtime";
+/* empty css                    */
+import "@prodivix/shared";
+import { useState as v, useEffect as y } from "react";
+const i = (e) => e ? e.startsWith("#") ? e : `#${e}` : "#000000";
+function I({
+  label: e,
+  description: a,
+  message: n,
+  value: t,
+  defaultValue: f = "#3f3f3f",
+  size: u = "Medium",
+  disabled: l = !1,
+  showTextInput: p = !0,
+  onChange: c,
+  className: C,
+  style: h,
+  id: N,
+  dataAttributes: k = {}
+}) {
+  const [g, d] = v(f);
+  y(() => {
+    t !== void 0 && d(t);
+  }, [t]);
+  const s = t !== void 0 ? t : g, m = (o) => {
+    const P = i(o);
+    t === void 0 && d(P), c && c(P);
+  }, F = `PdxColorPicker ${u} ${l ? "Disabled" : ""} ${C || ""}`.trim(), $ = { ...k };
+  return /* @__PURE__ */ x(
+    "div",
+    {
+      className: `PdxField ${F}`,
+      style: h,
+      id: N,
+      ...$,
+      children: [
+        e && /* @__PURE__ */ r("div", { className: "PdxFieldHeader", children: /* @__PURE__ */ r("label", { className: "PdxFieldLabel", children: e }) }),
+        a && /* @__PURE__ */ r("div", { className: "PdxFieldDescription", children: a }),
+        /* @__PURE__ */ x("div", { className: "PdxColorPickerControls", children: [
+          /* @__PURE__ */ r(
+            "input",
+            {
+              className: "PdxColorPickerInput",
+              type: "color",
+              value: i(s),
+              disabled: l,
+              onChange: (o) => m(o.target.value)
+            }
+          ),
+          p && /* @__PURE__ */ r(
+            "input",
+            {
+              className: "PdxColorPickerText",
+              type: "text",
+              value: i(s),
+              disabled: l,
+              onChange: (o) => m(o.target.value)
+            }
+          ),
+          /* @__PURE__ */ r(
+            "span",
+            {
+              className: "PdxColorPickerSwatch",
+              style: { backgroundColor: i(s) }
+            }
+          )
+        ] }),
+        n && /* @__PURE__ */ r("div", { className: "PdxFieldMessage", children: n })
+      ]
+    }
+  );
+}
+export {
+  I as default
+};

package/dist/form/PdxDatePicker.js

@@ -0,0 +1,89 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+/* empty css                   */
+import "@prodivix/shared";
+function b({
+  label: l,
+  description: i,
+  message: d,
+  value: o,
+  placeholder: x,
+  size: P = "Medium",
+  state: s = "Default",
+  disabled: t = !1,
+  readOnly: r = !1,
+  required: c = !1,
+  min: m,
+  max: f,
+  name: p,
+  autoFocus: u = !1,
+  showIcon: v = !0,
+  onChange: n,
+  onFocus: N,
+  onBlur: D,
+  className: k,
+  style: F,
+  id: h,
+  dataAttributes: $ = {},
+  onClick: g
+}) {
+  const M = `PdxDatePicker ${P} ${s} ${t ? "Disabled" : ""} ${r ? "ReadOnly" : ""} ${k || ""}`.trim(), C = { ...$ }, w = (j) => {
+    n && n(j.target.value);
+  };
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: `PdxField ${M}`,
+      style: F,
+      ...C,
+      children: [
+        l && /* @__PURE__ */ a("div", { className: "PdxFieldHeader", children: [
+          /* @__PURE__ */ e("label", { className: "PdxFieldLabel", htmlFor: h, children: l }),
+          c && /* @__PURE__ */ e("span", { className: "PdxFieldRequired", children: "*" })
+        ] }),
+        i && /* @__PURE__ */ e("div", { className: "PdxFieldDescription", children: i }),
+        /* @__PURE__ */ a("div", { className: "PdxDatePickerControl", children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              className: "PdxDatePickerInput",
+              id: h,
+              type: "date",
+              placeholder: x,
+              value: o,
+              disabled: t,
+              readOnly: r,
+              required: c,
+              min: m,
+              max: f,
+              name: p,
+              autoFocus: u,
+              onChange: w,
+              onFocus: N,
+              onBlur: D,
+              onClick: g
+            }
+          ),
+          v && /* @__PURE__ */ e("span", { className: "PdxDatePickerIcon", children: /* @__PURE__ */ a(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              children: [
+                /* @__PURE__ */ e("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
+                /* @__PURE__ */ e("path", { d: "M16 2v4M8 2v4M3 10h18" })
+              ]
+            }
+          ) })
+        ] }),
+        d && /* @__PURE__ */ e("div", { className: `PdxFieldMessage ${s}`, children: d })
+      ]
+    }
+  );
+}
+export {
+  b as default
+};

package/dist/form/PdxDateRangePicker.js

@@ -0,0 +1,90 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+/* empty css                        */
+import "@prodivix/shared";
+function S({
+  label: n,
+  description: r,
+  message: P,
+  startValue: o,
+  endValue: p,
+  startPlaceholder: D,
+  endPlaceholder: R,
+  size: g = "Medium",
+  state: x = "Default",
+  disabled: t = !1,
+  readOnly: s = !1,
+  required: d = !1,
+  min: m,
+  max: f,
+  name: h,
+  onChange: l,
+  onStartChange: u,
+  onEndChange: N,
+  className: F,
+  style: $,
+  id: v,
+  dataAttributes: k = {}
+}) {
+  const j = `PdxDateRangePicker ${g} ${x} ${t ? "Disabled" : ""} ${s ? "ReadOnly" : ""} ${F || ""}`.trim(), I = { ...k }, M = (c) => {
+    const a = c.target.value;
+    u && u(a), l && l({ start: a, end: p || "" });
+  }, y = (c) => {
+    const a = c.target.value;
+    N && N(a), l && l({ start: o || "", end: a });
+  };
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: `PdxField ${j}`,
+      style: $,
+      ...I,
+      children: [
+        n && /* @__PURE__ */ i("div", { className: "PdxFieldHeader", children: [
+          /* @__PURE__ */ e("label", { className: "PdxFieldLabel", htmlFor: v, children: n }),
+          d && /* @__PURE__ */ e("span", { className: "PdxFieldRequired", children: "*" })
+        ] }),
+        r && /* @__PURE__ */ e("div", { className: "PdxFieldDescription", children: r }),
+        /* @__PURE__ */ i("div", { className: "PdxDateRangePickerControls", children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              className: "PdxDateRangePickerInput",
+              id: v,
+              type: "date",
+              placeholder: D,
+              value: o,
+              disabled: t,
+              readOnly: s,
+              required: d,
+              min: m,
+              max: f,
+              name: h,
+              onChange: M
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: "PdxDateRangePickerSeparator", children: "to" }),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              className: "PdxDateRangePickerInput",
+              type: "date",
+              placeholder: R,
+              value: p,
+              disabled: t,
+              readOnly: s,
+              required: d,
+              min: m,
+              max: f,
+              name: h,
+              onChange: y
+            }
+          )
+        ] }),
+        P && /* @__PURE__ */ e("div", { className: `PdxFieldMessage ${x}`, children: P })
+      ]
+    }
+  );
+}
+export {
+  S as default
+};

package/dist/form/PdxFileUpload.js

@@ -0,0 +1,108 @@
+import { jsxs as a, jsx as l } from "react/jsx-runtime";
+/* empty css                   */
+import "@prodivix/shared";
+import { useState as z, useRef as I, useEffect as S } from "react";
+function B({
+  label: n,
+  description: r,
+  message: t,
+  accept: x,
+  multiple: o = !1,
+  disabled: i = !1,
+  required: u = !1,
+  showList: F = !0,
+  value: s,
+  defaultValue: P,
+  onChange: c,
+  className: N,
+  style: v,
+  id: U,
+  dataAttributes: g = {}
+}) {
+  const [p, h] = z(P || []), m = I(null);
+  S(() => {
+    s && h(s);
+  }, [s]);
+  const f = (e) => {
+    s || h(e), c && c(e);
+  }, D = (e) => {
+    const d = Array.from(e.target.files || []);
+    f(d);
+  }, k = (e) => {
+    if (e.preventDefault(), i) return;
+    const d = Array.from(e.dataTransfer.files || []);
+    f(d);
+  }, C = (e) => {
+    e.preventDefault();
+  }, M = () => {
+    i || m.current?.click();
+  }, $ = `PdxFileUpload ${i ? "Disabled" : ""} ${N || ""}`.trim(), y = { ...g };
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: `PdxField ${$}`,
+      style: v,
+      id: U,
+      ...y,
+      children: [
+        n && /* @__PURE__ */ a("div", { className: "PdxFieldHeader", children: [
+          /* @__PURE__ */ l("label", { className: "PdxFieldLabel", children: n }),
+          u && /* @__PURE__ */ l("span", { className: "PdxFieldRequired", children: "*" })
+        ] }),
+        r && /* @__PURE__ */ l("div", { className: "PdxFieldDescription", children: r }),
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: "PdxFileUploadDropzone",
+            onClick: M,
+            onDrop: k,
+            onDragOver: C,
+            children: [
+              /* @__PURE__ */ l("div", { className: "PdxFileUploadIcon", children: /* @__PURE__ */ a(
+                "svg",
+                {
+                  width: "20",
+                  height: "20",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  children: [
+                    /* @__PURE__ */ l("path", { d: "M12 3v12" }),
+                    /* @__PURE__ */ l("path", { d: "m7 8 5-5 5 5" }),
+                    /* @__PURE__ */ l("path", { d: "M5 21h14" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ l("div", { className: "PdxFileUploadText", children: "Click or drag files to upload" }),
+              /* @__PURE__ */ l("div", { className: "PdxFileUploadHint", children: o ? "Multiple files allowed" : "Single file only" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ l(
+          "input",
+          {
+            ref: m,
+            className: "PdxFileUploadInput",
+            type: "file",
+            accept: x,
+            multiple: o,
+            disabled: i,
+            onChange: D
+          }
+        ),
+        F && p.length > 0 && /* @__PURE__ */ l("ul", { className: "PdxFileUploadList", children: p.map((e) => /* @__PURE__ */ a("li", { className: "PdxFileUploadItem", children: [
+          /* @__PURE__ */ l("span", { className: "PdxFileUploadName", children: e.name }),
+          /* @__PURE__ */ a("span", { className: "PdxFileUploadSize", children: [
+            Math.round(e.size / 1024),
+            " KB"
+          ] })
+        ] }, `${e.name}-${e.size}`)) }),
+        t && /* @__PURE__ */ l("div", { className: "PdxFieldMessage", children: t })
+      ]
+    }
+  );
+}
+export {
+  B as default
+};

package/dist/form/PdxImageUpload.js

@@ -0,0 +1,87 @@
+import { jsxs as u, jsx as l } from "react/jsx-runtime";
+/* empty css                    */
+import "@prodivix/shared";
+import { useState as h, useRef as w, useEffect as x } from "react";
+function T({
+  label: i,
+  description: t,
+  message: d,
+  accept: g = "image/*",
+  multiple: P = !1,
+  disabled: s = !1,
+  required: v = !1,
+  value: r,
+  defaultValue: N,
+  onChange: n,
+  className: U,
+  style: I,
+  id: D,
+  dataAttributes: F = {}
+}) {
+  const [c, o] = h(N || []), [m, R] = h([]), p = w(null);
+  x(() => {
+    r && o(r);
+  }, [r]), x(() => {
+    const e = c.map((a) => URL.createObjectURL(a));
+    return R(e), () => {
+      e.forEach((a) => URL.revokeObjectURL(a));
+    };
+  }, [c]);
+  const f = (e) => {
+    r || o(e), n && n(e);
+  }, $ = (e) => {
+    const a = Array.from(e.target.files || []);
+    f(a);
+  }, k = (e) => {
+    if (e.preventDefault(), s) return;
+    const a = Array.from(e.dataTransfer.files || []);
+    f(a);
+  }, C = (e) => {
+    e.preventDefault();
+  }, L = () => {
+    s || p.current?.click();
+  }, j = `PdxImageUpload ${s ? "Disabled" : ""} ${U || ""}`.trim(), O = { ...F };
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: `PdxField ${j}`,
+      style: I,
+      id: D,
+      ...O,
+      children: [
+        i && /* @__PURE__ */ u("div", { className: "PdxFieldHeader", children: [
+          /* @__PURE__ */ l("label", { className: "PdxFieldLabel", children: i }),
+          v && /* @__PURE__ */ l("span", { className: "PdxFieldRequired", children: "*" })
+        ] }),
+        t && /* @__PURE__ */ l("div", { className: "PdxFieldDescription", children: t }),
+        /* @__PURE__ */ l(
+          "div",
+          {
+            className: "PdxImageUploadDropzone",
+            onClick: L,
+            onDrop: k,
+            onDragOver: C,
+            children: /* @__PURE__ */ l("div", { className: "PdxImageUploadText", children: "Click or drag images to upload" })
+          }
+        ),
+        /* @__PURE__ */ l(
+          "input",
+          {
+            ref: p,
+            className: "PdxImageUploadInput",
+            type: "file",
+            accept: g,
+            multiple: P,
+            disabled: s,
+            onChange: $
+          }
+        ),
+        m.length > 0 && /* @__PURE__ */ l("div", { className: "PdxImageUploadGrid", children: m.map((e, a) => /* @__PURE__ */ l("div", { className: "PdxImageUploadItem", children: /* @__PURE__ */ l("img", { src: e, alt: `Preview ${a + 1}` }) }, `${e}-${a}`)) }),
+        d && /* @__PURE__ */ l("div", { className: "PdxFieldMessage", children: d })
+      ]
+    }
+  );
+}
+export {
+  T as default
+};

package/dist/form/PdxPasswordStrength.js

@@ -0,0 +1,73 @@
+import { jsxs as h, jsx as s } from "react/jsx-runtime";
+/* empty css                         */
+import "@prodivix/shared";
+import { useState as y, useEffect as A } from "react";
+const j = (t, d) => {
+  let e = 0;
+  return t.length >= d && (e += 1), /[A-Z]/.test(t) && (e += 1), /[a-z]/.test(t) && (e += 1), /\d/.test(t) && (e += 1), /[^A-Za-z0-9]/.test(t) && (e += 1), Math.min(e, 4);
+};
+function I({
+  label: t,
+  description: d,
+  message: e,
+  value: r,
+  defaultValue: P,
+  size: f = "Medium",
+  disabled: n = !1,
+  required: x = !1,
+  minLength: p = 8,
+  showText: u = !0,
+  strengthLabels: g = ["Very weak", "Weak", "Medium", "Strong", "Very strong"],
+  onChange: l,
+  className: N,
+  style: S,
+  id: w,
+  dataAttributes: F = {}
+}) {
+  const [V, c] = y(P || "");
+  A(() => {
+    r !== void 0 && c(r);
+  }, [r]);
+  const o = r !== void 0 ? r : V, i = j(o, p), $ = (m) => {
+    const a = m.target.value;
+    r === void 0 && c(a), l && l(a);
+  }, M = `PdxPasswordStrength ${f} ${n ? "Disabled" : ""} ${N || ""}`.trim(), v = { ...F };
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      className: `PdxField ${M}`,
+      style: S,
+      id: w,
+      ...v,
+      children: [
+        t && /* @__PURE__ */ h("div", { className: "PdxFieldHeader", children: [
+          /* @__PURE__ */ s("label", { className: "PdxFieldLabel", children: t }),
+          x && /* @__PURE__ */ s("span", { className: "PdxFieldRequired", children: "*" })
+        ] }),
+        d && /* @__PURE__ */ s("div", { className: "PdxFieldDescription", children: d }),
+        /* @__PURE__ */ s(
+          "input",
+          {
+            className: "PdxPasswordStrengthInput",
+            type: "password",
+            value: o,
+            disabled: n,
+            onChange: $
+          }
+        ),
+        /* @__PURE__ */ s("div", { className: "PdxPasswordStrengthMeter", "aria-hidden": !0, children: Array.from({ length: 4 }).map((m, a) => /* @__PURE__ */ s(
+          "span",
+          {
+            className: `PdxPasswordStrengthBar ${i > a ? "Active" : ""} Level${i}`
+          },
+          a
+        )) }),
+        u && /* @__PURE__ */ s("div", { className: "PdxPasswordStrengthText", children: g[i] || "" }),
+        e && /* @__PURE__ */ s("div", { className: "PdxFieldMessage", children: e })
+      ]
+    }
+  );
+}
+export {
+  I as default
+};