@prodivix/ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Minsecrus 2025
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/button/PdxButton.js

@@ -0,0 +1,70 @@
+import { jsx as n, jsxs as h } from "react/jsx-runtime";
+/* empty css               */
+import "@prodivix/shared";
+function o({
+  text: u,
+  size: p = "Medium",
+  category: c = "Secondary",
+  disabled: N = !1,
+  onlyIcon: d = !1,
+  icon: r,
+  iconPosition: f = "Right",
+  className: $,
+  style: a,
+  id: e,
+  dataAttributes: i = {},
+  onClick: s,
+  as: x = "button"
+}) {
+  const t = `PdxButton ${p} ${c} ${d ? "OnlyIcon" : ""} ${N ? "Disabled" : ""} ${$ || ""}`.trim(), l = { ...i }, m = x;
+  return d && r ? /* @__PURE__ */ n(
+    m,
+    {
+      className: t,
+      style: a,
+      id: e,
+      onClick: s,
+      ...l,
+      children: r
+    }
+  ) : r && f === "Left" ? /* @__PURE__ */ h(
+    m,
+    {
+      className: t,
+      style: a,
+      id: e,
+      onClick: s,
+      ...l,
+      children: [
+        r,
+        /* @__PURE__ */ n("span", { children: u })
+      ]
+    }
+  ) : r && f === "Right" ? /* @__PURE__ */ h(
+    m,
+    {
+      className: t,
+      style: a,
+      id: e,
+      onClick: s,
+      ...l,
+      children: [
+        /* @__PURE__ */ n("span", { children: u }),
+        r
+      ]
+    }
+  ) : /* @__PURE__ */ n(
+    m,
+    {
+      className: t,
+      style: a,
+      id: e,
+      onClick: s,
+      ...l,
+      children: u
+    }
+  );
+}
+export {
+  o as default
+};

package/dist/button/PdxButtonLink.js

@@ -0,0 +1,11 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import "react-router";
+import i from "./PdxButton.js";
+import d from "../link/PdxLink.js";
+function u(t) {
+  return /* @__PURE__ */ o(d, { className: "PdxButtonLink", to: t.to, disabled: t.disabled, children: /* @__PURE__ */ o(i, { ...t }) });
+}
+export {
+  u as default
+};

package/dist/container/PdxCard.js

@@ -0,0 +1,32 @@
+import { jsx as $ } from "react/jsx-runtime";
+/* empty css             */
+import "@prodivix/shared";
+function C({
+  children: a,
+  size: e = "Medium",
+  variant: r = "Default",
+  padding: t = "Medium",
+  hoverable: d = !1,
+  clickable: l = !1,
+  className: s,
+  style: i,
+  id: o,
+  dataAttributes: m = {},
+  onClick: f
+}) {
+  const u = `PdxCard ${e} ${r} Padding${t} ${d ? "Hoverable" : ""} ${l ? "Clickable" : ""} ${s || ""}`.trim(), n = { ...m };
+  return /* @__PURE__ */ $(
+    "div",
+    {
+      className: u,
+      style: i,
+      id: o,
+      onClick: f,
+      ...n,
+      children: a
+    }
+  );
+}
+export {
+  C as default
+};

package/dist/container/PdxDiv.js

@@ -0,0 +1,80 @@
+import { jsx as j } from "react/jsx-runtime";
+/* empty css            */
+import "@prodivix/shared";
+function S({
+  children: n,
+  display: x = "Block",
+  flexDirection: l,
+  justifyContent: v,
+  alignItems: c,
+  gap: e,
+  padding: o,
+  margin: p,
+  width: t,
+  height: r,
+  maxWidth: s,
+  maxHeight: $,
+  overflow: b = "Visible",
+  textAlign: m,
+  backgroundColor: u,
+  borderRadius: f,
+  border: y,
+  className: i,
+  style: C,
+  id: L,
+  dataAttributes: P = {},
+  onClick: a
+}) {
+  const D = `PdxDiv ${x} ${b} ${m || ""} ${i || ""}`.trim(), N = { ...P }, Z = {
+    ...C,
+    ...l && {
+      flexDirection: l.replace(/([A-Z])/g, "-$1").toLowerCase().replace(/^-/, "")
+    },
+    ...v && {
+      justifyContent: v.replace(/([A-Z])/g, "-$1").toLowerCase().replace(/^-/, "")
+    },
+    ...c && {
+      alignItems: c.toLowerCase()
+    },
+    ...e !== void 0 && {
+      gap: typeof e == "number" ? `${e}px` : e
+    },
+    ...o !== void 0 && {
+      padding: typeof o == "number" ? `${o}px` : o
+    },
+    ...p !== void 0 && {
+      margin: typeof p == "number" ? `${p}px` : p
+    },
+    ...t !== void 0 && {
+      width: typeof t == "number" ? `${t}px` : t
+    },
+    ...r !== void 0 && {
+      height: typeof r == "number" ? `${r}px` : r
+    },
+    ...s !== void 0 && {
+      maxWidth: typeof s == "number" ? `${s}px` : s
+    },
+    ...$ !== void 0 && {
+      maxHeight: typeof $ == "number" ? `${$}px` : $
+    },
+    ...u && { backgroundColor: u },
+    ...f !== void 0 && {
+      borderRadius: typeof f == "number" ? `${f}px` : f
+    },
+    ...y && { border: y }
+  };
+  return /* @__PURE__ */ j(
+    "div",
+    {
+      className: D,
+      style: Z,
+      id: L,
+      onClick: a,
+      ...N,
+      children: n
+    }
+  );
+}
+export {
+  S as default
+};

package/dist/container/PdxPanel.js

@@ -0,0 +1,71 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+/* empty css              */
+import "@prodivix/shared";
+import { useState as g } from "react";
+function M({
+  children: d,
+  size: o = "Medium",
+  variant: r = "Default",
+  padding: i = "Medium",
+  collapsible: a = !1,
+  collapsed: m = !1,
+  onToggle: t,
+  title: l,
+  className: c,
+  style: P,
+  id: f,
+  dataAttributes: p = {}
+}) {
+  const [s, h] = g(m), u = () => {
+    a && (h(!s), t && t());
+  }, x = `PdxPanel ${o} ${r} Padding${i} ${a ? "Collapsible" : ""} ${s ? "Collapsed" : ""} ${c || ""}`.trim(), C = { ...p };
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: x,
+      style: P,
+      id: f,
+      ...C,
+      children: [
+        l && /* @__PURE__ */ n(
+          "div",
+          {
+            className: "PdxPanelHeader",
+            onClick: a ? u : void 0,
+            children: [
+              /* @__PURE__ */ e("h3", { className: "PdxPanelTitle", children: l }),
+              a && /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  className: "PdxPanelToggle",
+                  "aria-label": s ? "Expand" : "Collapse",
+                  children: /* @__PURE__ */ e(
+                    "svg",
+                    {
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      style: {
+                        transform: s ? "rotate(-90deg)" : "rotate(0deg)",
+                        transition: "transform 0.2s ease"
+                      },
+                      children: /* @__PURE__ */ e("path", { d: "M6 9l6 6 6-6" })
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "PdxPanelContent", children: d })
+      ]
+    }
+  );
+}
+export {
+  M as default
+};

package/dist/container/PdxSection.js

@@ -0,0 +1,30 @@
+import { jsx as c } from "react/jsx-runtime";
+/* empty css                */
+import "@prodivix/shared";
+function x({
+  children: t,
+  size: e = "Medium",
+  backgroundColor: i = "Default",
+  padding: o = "Medium",
+  textAlign: a = "Left",
+  fullWidth: s = !1,
+  className: d,
+  style: l,
+  id: m,
+  dataAttributes: n = {}
+}) {
+  const r = `PdxSection ${e} ${i} Padding${o} ${a} ${s ? "FullWidth" : ""} ${d || ""}`.trim(), u = { ...n };
+  return /* @__PURE__ */ c(
+    "section",
+    {
+      className: r,
+      style: l,
+      id: m,
+      ...u,
+      children: t
+    }
+  );
+}
+export {
+  x as default
+};

package/dist/data/PdxBadge.js

@@ -0,0 +1,40 @@
+import { jsxs as g, jsx as u } from "react/jsx-runtime";
+/* empty css              */
+import "@prodivix/shared";
+function P({
+  count: s = 0,
+  max: e = 99,
+  dot: a = !1,
+  showZero: t = !1,
+  color: o,
+  children: d,
+  className: l,
+  style: n,
+  id: r,
+  dataAttributes: i = {}
+}) {
+  const p = s > e ? `${e}+` : s, c = a || s > 0 || t, m = `PdxBadge ${l || ""}`.trim(), f = { ...i };
+  return /* @__PURE__ */ g(
+    "span",
+    {
+      className: m,
+      style: n,
+      id: r,
+      ...f,
+      children: [
+        d,
+        c && /* @__PURE__ */ u(
+          "span",
+          {
+            className: `PdxBadgeCount ${a ? "Dot" : ""}`,
+            style: o ? { backgroundColor: o } : void 0,
+            children: !a && p
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  P as default
+};

package/dist/data/PdxCheckList.js

@@ -0,0 +1,58 @@
+import { jsx as c, jsxs as C } from "react/jsx-runtime";
+/* empty css                  */
+import "@prodivix/shared";
+import { useState as L, useEffect as P } from "react";
+function I({
+  items: i,
+  value: e,
+  defaultValue: r,
+  onChange: t,
+  className: o,
+  style: u,
+  id: f,
+  dataAttributes: h = {}
+}) {
+  const [x, a] = L(
+    r || []
+  );
+  P(() => {
+    e && a(e);
+  }, [e]);
+  const l = e || x, p = (s) => {
+    const d = l.includes(s) ? l.filter((m) => m !== s) : [...l, s];
+    e || a(d), t && t(d);
+  }, b = `PdxCheckList ${o || ""}`.trim(), k = { ...h };
+  return /* @__PURE__ */ c(
+    "ul",
+    {
+      className: b,
+      style: u,
+      id: f,
+      ...k,
+      children: i.map((s) => {
+        const n = l.includes(s.value) || s.checked;
+        return /* @__PURE__ */ c("li", { className: "PdxCheckListItem", children: /* @__PURE__ */ C(
+          "label",
+          {
+            className: `PdxCheckListLabel ${s.disabled ? "Disabled" : ""}`,
+            children: [
+              /* @__PURE__ */ c(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: n,
+                  disabled: s.disabled,
+                  onChange: () => p(s.value)
+                }
+              ),
+              /* @__PURE__ */ c("span", { children: s.label })
+            ]
+          }
+        ) }, s.value);
+      })
+    }
+  );
+}
+export {
+  I as default
+};

package/dist/data/PdxDataGrid.js

@@ -0,0 +1,70 @@
+import { jsxs as $, jsx as t } from "react/jsx-runtime";
+/* empty css                 */
+import "@prodivix/shared";
+function u({
+  data: s,
+  columns: r,
+  showHeader: p = !0,
+  striped: f = !1,
+  bordered: m = !1,
+  hoverable: x = !1,
+  rowKey: i,
+  emptyText: g = "No data",
+  className: h,
+  style: o,
+  id: v,
+  dataAttributes: N = {}
+}) {
+  const l = r.map(
+    (e) => typeof e.width == "number" ? `${e.width}px` : e.width || "1fr"
+  ).join(" "), P = `PdxDataGrid ${f ? "Striped" : ""} ${m ? "Bordered" : ""} ${x ? "Hoverable" : ""} ${h || ""}`.trim(), D = { ...N }, G = (e, d) => typeof i == "function" ? i(e) : String(typeof i == "string" ? e[i] : d);
+  return /* @__PURE__ */ $(
+    "div",
+    {
+      className: P,
+      style: o,
+      id: v,
+      ...D,
+      children: [
+        p && /* @__PURE__ */ t(
+          "div",
+          {
+            className: "PdxDataGridHeader",
+            style: { gridTemplateColumns: l },
+            children: r.map((e) => /* @__PURE__ */ t(
+              "div",
+              {
+                className: `PdxDataGridCell Align${e.align || "Left"}`,
+                children: e.title
+              },
+              e.key
+            ))
+          }
+        ),
+        s.length === 0 && /* @__PURE__ */ t("div", { className: "PdxDataGridEmpty", children: g }),
+        s.map((e, d) => /* @__PURE__ */ t(
+          "div",
+          {
+            className: "PdxDataGridRow",
+            style: { gridTemplateColumns: l },
+            children: r.map((a) => {
+              const n = a.dataIndex ? e[a.dataIndex] : void 0;
+              return /* @__PURE__ */ t(
+                "div",
+                {
+                  className: `PdxDataGridCell Align${a.align || "Left"}`,
+                  children: a.render ? a.render(n, e, d) : n
+                },
+                a.key
+              );
+            })
+          },
+          G(e, d)
+        ))
+      ]
+    }
+  );
+}
+export {
+  u as default
+};

package/dist/data/PdxList.js

@@ -0,0 +1,35 @@
+import { jsx as i, jsxs as r, Fragment as h } from "react/jsx-runtime";
+/* empty css             */
+import "@prodivix/shared";
+function f({
+  items: d,
+  size: e = "Medium",
+  bordered: l = !1,
+  split: c = !0,
+  renderItem: t,
+  className: n,
+  style: o,
+  id: x,
+  dataAttributes: m = {}
+}) {
+  const p = `PdxList ${e} ${l ? "Bordered" : ""} ${c ? "Split" : ""} ${n || ""}`.trim(), P = { ...m };
+  return /* @__PURE__ */ i(
+    "ul",
+    {
+      className: p,
+      style: o,
+      id: x,
+      ...P,
+      children: d.map((s, a) => /* @__PURE__ */ i("li", { className: "PdxListItem", children: t ? t(s, a) : /* @__PURE__ */ r(h, { children: [
+        /* @__PURE__ */ r("div", { className: "PdxListContent", children: [
+          /* @__PURE__ */ i("div", { className: "PdxListTitle", children: s.title }),
+          s.description && /* @__PURE__ */ i("div", { className: "PdxListDescription", children: s.description })
+        ] }),
+        s.extra && /* @__PURE__ */ i("div", { className: "PdxListExtra", children: s.extra })
+      ] }) }, a))
+    }
+  );
+}
+export {
+  f as default
+};

package/dist/data/PdxProgress.js

@@ -0,0 +1,38 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+/* empty css                 */
+import "@prodivix/shared";
+function f({
+  value: t,
+  size: i = "Medium",
+  status: c = "Default",
+  showLabel: a = !0,
+  label: s,
+  className: m,
+  style: n,
+  id: o,
+  dataAttributes: l = {}
+}) {
+  const d = Math.min(100, Math.max(0, t)), P = `PdxProgress ${i} ${c} ${m || ""}`.trim(), x = { ...l };
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: P,
+      style: n,
+      id: o,
+      ...x,
+      children: [
+        (s || a) && /* @__PURE__ */ r("div", { className: "PdxProgressHeader", children: [
+          s && /* @__PURE__ */ e("span", { children: s }),
+          a && /* @__PURE__ */ r("span", { children: [
+            d,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "PdxProgressTrack", children: /* @__PURE__ */ e("div", { className: "PdxProgressBar", style: { width: `${d}%` } }) })
+      ]
+    }
+  );
+}
+export {
+  f as default
+};

package/dist/data/PdxSpinner.js

@@ -0,0 +1,36 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+/* empty css                */
+import "@prodivix/shared";
+function u({
+  size: n = "Medium",
+  label: r,
+  color: s,
+  className: i,
+  style: a,
+  id: d,
+  dataAttributes: o = {}
+}) {
+  const p = `PdxSpinner ${n} ${i || ""}`.trim(), t = { ...o };
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: p,
+      style: a,
+      id: d,
+      ...t,
+      children: [
+        /* @__PURE__ */ e(
+          "span",
+          {
+            className: "PdxSpinnerCircle",
+            style: s ? { borderTopColor: s } : void 0
+          }
+        ),
+        r && /* @__PURE__ */ e("span", { className: "PdxSpinnerLabel", children: r })
+      ]
+    }
+  );
+}
+export {
+  u as default
+};

package/dist/data/PdxStatistic.js

@@ -0,0 +1,40 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+/* empty css                  */
+import "@prodivix/shared";
+import { TrendingUp as S, TrendingDown as f } from "lucide-react";
+function b({
+  title: i,
+  value: s,
+  prefix: c,
+  suffix: d,
+  trend: a,
+  precision: e,
+  color: n,
+  className: l,
+  style: m,
+  id: o,
+  dataAttributes: x = {}
+}) {
+  const P = typeof s == "number" && e !== void 0 ? s.toFixed(e) : s, p = `PdxStatistic ${a || ""} ${l || ""}`.trim(), N = { ...x };
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: p,
+      style: m,
+      id: o,
+      ...N,
+      children: [
+        i && /* @__PURE__ */ t("div", { className: "PdxStatisticTitle", children: i }),
+        /* @__PURE__ */ r("div", { className: "PdxStatisticValue", style: n ? { color: n } : void 0, children: [
+          a && /* @__PURE__ */ t("span", { className: "PdxStatisticTrend", children: a === "Up" ? /* @__PURE__ */ t(S, { className: "PdxStatisticTrendIcon" }) : /* @__PURE__ */ t(f, { className: "PdxStatisticTrendIcon" }) }),
+          c && /* @__PURE__ */ t("span", { className: "PdxStatisticPrefix", children: c }),
+          /* @__PURE__ */ t("span", { className: "PdxStatisticNumber", children: P }),
+          d && /* @__PURE__ */ t("span", { className: "PdxStatisticSuffix", children: d })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  b as default
+};

package/dist/data/PdxSteps.js

@@ -0,0 +1,37 @@
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+/* empty css              */
+import "@prodivix/shared";
+function S({
+  items: d,
+  current: a = 0,
+  direction: l = "Horizontal",
+  className: c,
+  style: n,
+  id: r,
+  dataAttributes: o = {}
+}) {
+  const p = `PdxSteps ${l} ${c || ""}`.trim(), m = { ...o };
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: p,
+      style: n,
+      id: r,
+      ...m,
+      children: d.map((e, s) => {
+        const P = s < a ? "Completed" : s === a ? "Active" : "Pending";
+        return /* @__PURE__ */ i("div", { className: `PdxStep ${P}`, children: [
+          /* @__PURE__ */ t("div", { className: "PdxStepIndicator", children: s + 1 }),
+          /* @__PURE__ */ i("div", { className: "PdxStepContent", children: [
+            /* @__PURE__ */ t("div", { className: "PdxStepTitle", children: e.title }),
+            e.description && /* @__PURE__ */ t("div", { className: "PdxStepDescription", children: e.description })
+          ] }),
+          s < d.length - 1 && /* @__PURE__ */ t("div", { className: "PdxStepConnector" })
+        ] }, e.title);
+      })
+    }
+  );
+}
+export {
+  S as default
+};