@prodivix/ui 0.1.0

package/dist/data/PdxTable.js

@@ -0,0 +1,61 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+/* empty css              */
+import "@prodivix/shared";
+function j({
+  data: l,
+  columns: r,
+  size: p = "Medium",
+  bordered: c = !1,
+  striped: f = !1,
+  hoverable: x = !1,
+  title: i,
+  caption: s,
+  emptyText: b = "No data",
+  className: N,
+  style: m,
+  id: $,
+  dataAttributes: g = {}
+}) {
+  const P = `PdxTable ${p} ${c ? "Bordered" : ""} ${f ? "Striped" : ""} ${x ? "Hoverable" : ""} ${N || ""}`.trim(), T = { ...g };
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: "PdxTableWrapper",
+      style: m,
+      id: $,
+      ...T,
+      children: [
+        i && /* @__PURE__ */ e("div", { className: "PdxTableTitle", children: i }),
+        /* @__PURE__ */ t("table", { className: P, children: [
+          s && /* @__PURE__ */ e("caption", { children: s }),
+          /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { children: r.map((a) => /* @__PURE__ */ e(
+            "th",
+            {
+              style: { width: a.width },
+              className: `Align${a.align || "Left"}`,
+              children: a.title
+            },
+            a.key
+          )) }) }),
+          /* @__PURE__ */ t("tbody", { children: [
+            l.length === 0 && /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e("td", { className: "PdxTableEmpty", colSpan: r.length, children: b }) }),
+            l.map((a, n) => /* @__PURE__ */ e("tr", { children: r.map((d) => {
+              const h = d.dataIndex ? a[d.dataIndex] : void 0;
+              return /* @__PURE__ */ e(
+                "td",
+                {
+                  className: `Align${d.align || "Left"}`,
+                  children: d.render ? d.render(h, a, n) : h
+                },
+                d.key
+              );
+            }) }, n))
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  j as default
+};

package/dist/data/PdxTag.js

@@ -0,0 +1,36 @@
+import { jsxs as u, jsx as a } from "react/jsx-runtime";
+/* empty css            */
+import "@prodivix/shared";
+import { X as x } from "lucide-react";
+function $({
+  text: s,
+  color: t = "Default",
+  size: e = "Medium",
+  variant: o = "Soft",
+  closable: l = !1,
+  onClose: r,
+  className: n,
+  style: i,
+  id: m,
+  dataAttributes: c = {},
+  onClick: d
+}) {
+  const p = `PdxTag ${e} ${t} ${o} ${n || ""}`.trim(), f = { ...c };
+  return /* @__PURE__ */ u(
+    "span",
+    {
+      className: p,
+      style: i,
+      id: m,
+      onClick: d,
+      ...f,
+      children: [
+        /* @__PURE__ */ a("span", { className: "PdxTagText", children: s }),
+        l && /* @__PURE__ */ a("button", { type: "button", className: "PdxTagClose", onClick: r, children: /* @__PURE__ */ a(x, { size: 12 }) })
+      ]
+    }
+  );
+}
+export {
+  $ as default
+};

package/dist/data/PdxTimeline.js

@@ -0,0 +1,32 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+/* empty css                 */
+import "@prodivix/shared";
+function p({
+  items: s,
+  className: d,
+  style: n,
+  id: a,
+  dataAttributes: m = {}
+}) {
+  const t = `PdxTimeline ${d || ""}`.trim(), c = { ...m };
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: t,
+      style: n,
+      id: a,
+      ...c,
+      children: s.map((i, r) => /* @__PURE__ */ l("div", { className: "PdxTimelineItem", children: [
+        /* @__PURE__ */ e("div", { className: `PdxTimelineDot ${i.status || "Default"}` }),
+        /* @__PURE__ */ l("div", { className: "PdxTimelineContent", children: [
+          /* @__PURE__ */ e("div", { className: "PdxTimelineTitle", children: i.title }),
+          i.time && /* @__PURE__ */ e("div", { className: "PdxTimelineTime", children: i.time }),
+          i.description && /* @__PURE__ */ e("div", { className: "PdxTimelineDescription", children: i.description })
+        ] })
+      ] }, r))
+    }
+  );
+}
+export {
+  p as default
+};

package/dist/data/PdxTree.js

@@ -0,0 +1,71 @@
+import { jsx as s, jsxs as f } from "react/jsx-runtime";
+/* empty css             */
+import "@prodivix/shared";
+import { useState as $, useEffect as j, useMemo as k } from "react";
+import { Minus as w, Plus as z } from "lucide-react";
+function A({
+  data: h,
+  expandedKeys: r,
+  defaultExpandedKeys: p,
+  selectedKey: x,
+  onToggle: l,
+  onSelect: n,
+  className: N,
+  style: P,
+  id: b,
+  dataAttributes: T = {}
+}) {
+  const [E, c] = $(
+    p || []
+  );
+  j(() => {
+    r && c(r);
+  }, [r]);
+  const a = r || E, d = k(
+    () => new Set(a),
+    [a]
+  ), C = (t) => {
+    const i = d.has(t) ? a.filter((e) => e !== t) : [...a, t];
+    r || c(i), l && l(i);
+  }, S = (t) => {
+    t.disabled || n && n(t);
+  }, o = (t, i) => t.map((e) => {
+    const m = !!e.children?.length, u = d.has(e.id);
+    return /* @__PURE__ */ f("div", { className: "PdxTreeNode", children: [
+      /* @__PURE__ */ f("div", { className: "PdxTreeRow", style: { paddingLeft: i * 16 }, children: [
+        m ? /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            className: "PdxTreeToggle",
+            onClick: () => C(e.id),
+            children: u ? /* @__PURE__ */ s(w, { size: 14 }) : /* @__PURE__ */ s(z, { size: 14 })
+          }
+        ) : /* @__PURE__ */ s("span", { className: "PdxTreeSpacer" }),
+        /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            className: `PdxTreeLabel ${x === e.id ? "Selected" : ""} ${e.disabled ? "Disabled" : ""}`,
+            onClick: () => S(e),
+            children: e.label
+          }
+        )
+      ] }),
+      m && u && /* @__PURE__ */ s("div", { className: "PdxTreeChildren", children: o(e.children || [], i + 1) })
+    ] }, e.id);
+  }), g = `PdxTree ${N || ""}`.trim(), v = { ...T };
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: g,
+      style: P,
+      id: b,
+      ...v,
+      children: o(h, 0)
+    }
+  );
+}
+export {
+  A as default
+};

package/dist/data/PdxTreeSelect.js

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

package/dist/embed/PdxEmbed.js

@@ -0,0 +1,109 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+function C(t, e) {
+  switch (t) {
+    case "YouTube":
+      const a = e.match(
+        /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/
+      );
+      return a ? `https://www.youtube.com/embed/${a[1]}` : e;
+    case "Vimeo":
+      const c = e.match(/vimeo\.com\/(\d+)/);
+      return c ? `https://player.vimeo.com/video/${c[1]}` : e;
+    case "Twitter":
+      return e;
+    case "Instagram":
+      return e;
+    case "Facebook":
+      return e.match(/facebook\.com\/.*\/videos\/(\d+)/) ? `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(e)}` : e;
+    default:
+      return e;
+  }
+}
+function R({
+  type: t,
+  url: e,
+  title: a,
+  allowFullScreen: c = !1,
+  loading: s = "Lazy",
+  width: w,
+  height: v,
+  aspectRatio: i = "16:9",
+  className: y,
+  style: g,
+  id: n,
+  dataAttributes: $ = {},
+  onLoad: r,
+  onError: d,
+  ...m
+}) {
+  const h = `PdxEmbed ${t} ${i.replace(":", "-")} ${y || ""}`.trim(), l = { ...$ }, b = {
+    ...g,
+    width: w || "100%",
+    height: v || "auto"
+  }, f = {
+    position: "relative",
+    width: "100%",
+    aspectRatio: {
+      "16:9": "16 / 9",
+      "4:3": "4 / 3",
+      "1:1": "1 / 1",
+      "21:9": "21 / 9"
+    }[i],
+    overflow: "hidden",
+    backgroundColor: "#f5f5f5",
+    borderRadius: "8px"
+  }, u = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    border: "none"
+  }, p = C(t, e);
+  return t === "Twitter" || t === "Instagram" ? /* @__PURE__ */ o(
+    "div",
+    {
+      className: h,
+      style: b,
+      id: n,
+      ...l,
+      children: /* @__PURE__ */ o("div", { style: f, children: /* @__PURE__ */ o(
+        "iframe",
+        {
+          style: u,
+          src: p,
+          title: a || `${t} embed`,
+          loading: s.toLowerCase(),
+          onLoad: r,
+          onError: d,
+          ...m
+        }
+      ) })
+    }
+  ) : /* @__PURE__ */ o(
+    "div",
+    {
+      className: h,
+      style: b,
+      id: n,
+      ...l,
+      children: /* @__PURE__ */ o("div", { style: f, children: /* @__PURE__ */ o(
+        "iframe",
+        {
+          style: u,
+          src: p,
+          title: a || `${t} embed`,
+          allowFullScreen: c,
+          loading: s.toLowerCase(),
+          onLoad: r,
+          onError: d,
+          ...m
+        }
+      ) })
+    }
+  );
+}
+export {
+  R as default
+};

package/dist/embed/PdxIframe.js

@@ -0,0 +1,76 @@
+import { jsx as e } from "react/jsx-runtime";
+import "react";
+function I({
+  src: o,
+  srcDoc: a,
+  title: r,
+  allow: i,
+  allowFullScreen: s = !1,
+  loading: l = "Lazy",
+  referrerPolicy: n,
+  sandbox: d,
+  width: f,
+  height: c,
+  aspectRatio: t = "16:9",
+  className: p,
+  style: m,
+  id: h,
+  dataAttributes: y = {},
+  onLoad: u,
+  onError: w,
+  ...x
+}) {
+  const C = `PdxIframe ${t.replace(":", "-")} ${p || ""}`.trim(), b = { ...y }, g = {
+    ...m,
+    width: f || "100%",
+    height: c || "auto"
+  }, v = {
+    position: "relative",
+    width: "100%",
+    aspectRatio: {
+      "16:9": "16 / 9",
+      "4:3": "4 / 3",
+      "1:1": "1 / 1",
+      "21:9": "21 / 9"
+    }[t],
+    overflow: "hidden",
+    backgroundColor: "#f5f5f5",
+    borderRadius: "8px"
+  };
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: C,
+      style: g,
+      id: h,
+      ...b,
+      children: /* @__PURE__ */ e("div", { style: v, children: /* @__PURE__ */ e(
+        "iframe",
+        {
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            border: "none"
+          },
+          src: o,
+          srcDoc: a,
+          title: r,
+          allow: i,
+          allowFullScreen: s,
+          loading: l.toLowerCase(),
+          referrerPolicy: n?.toLowerCase(),
+          sandbox: d,
+          onLoad: u,
+          onError: w,
+          ...x
+        }
+      ) })
+    }
+  );
+}
+export {
+  I as default
+};

package/dist/feedback/PdxDrawer.js

@@ -0,0 +1,45 @@
+import { jsx as r, jsxs as v } from "react/jsx-runtime";
+/* empty css               */
+import "@prodivix/shared";
+function f({
+  open: s,
+  title: d,
+  children: t,
+  footer: e,
+  placement: a = "Right",
+  size: i = 360,
+  closeOnOverlayClick: l = !0,
+  onClose: c,
+  className: n,
+  style: o,
+  id: m,
+  dataAttributes: x = {}
+}) {
+  if (!s) return null;
+  const h = `PdxDrawer ${a} ${n || ""}`.trim(), w = { ...x }, P = a === "Top" || a === "Bottom" ? { height: i, ...o } : { width: i, ...o };
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: "PdxDrawerOverlay",
+      onClick: l ? c : void 0,
+      children: /* @__PURE__ */ v(
+        "div",
+        {
+          className: h,
+          style: P,
+          id: m,
+          ...w,
+          onClick: (u) => u.stopPropagation(),
+          children: [
+            d && /* @__PURE__ */ r("div", { className: "PdxDrawerHeader", children: d }),
+            /* @__PURE__ */ r("div", { className: "PdxDrawerBody", children: t }),
+            e && /* @__PURE__ */ r("div", { className: "PdxDrawerFooter", children: e })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  f as default
+};

package/dist/feedback/PdxEmpty.js

@@ -0,0 +1,33 @@
+import { jsxs as n, jsx as s } from "react/jsx-runtime";
+/* empty css              */
+import "@prodivix/shared";
+function P({
+  title: m = "No data",
+  description: t,
+  icon: d,
+  action: a,
+  className: e,
+  style: i,
+  id: l,
+  dataAttributes: r = {}
+}) {
+  const c = `PdxEmpty ${e || ""}`.trim(), p = { ...r };
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: c,
+      style: i,
+      id: l,
+      ...p,
+      children: [
+        d && /* @__PURE__ */ s("div", { className: "PdxEmptyIcon", children: d }),
+        /* @__PURE__ */ s("div", { className: "PdxEmptyTitle", children: m }),
+        t && /* @__PURE__ */ s("div", { className: "PdxEmptyDescription", children: t }),
+        a && /* @__PURE__ */ s("div", { className: "PdxEmptyAction", children: a })
+      ]
+    }
+  );
+}
+export {
+  P as default
+};

package/dist/feedback/PdxMessage.js

@@ -0,0 +1,32 @@
+import { jsxs as d, jsx as s } from "react/jsx-runtime";
+/* empty css                */
+import "@prodivix/shared";
+import { X as p } from "lucide-react";
+function g({
+  text: e,
+  type: t = "Info",
+  closable: o = !1,
+  onClose: a,
+  className: r,
+  style: n,
+  id: i,
+  dataAttributes: l = {}
+}) {
+  const m = `PdxMessage ${t} ${r || ""}`.trim(), c = { ...l };
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: m,
+      style: n,
+      id: i,
+      ...c,
+      children: [
+        /* @__PURE__ */ s("span", { children: e }),
+        o && /* @__PURE__ */ s("button", { type: "button", className: "PdxMessageClose", onClick: a, children: /* @__PURE__ */ s(p, { size: 14 }) })
+      ]
+    }
+  );
+}
+export {
+  g as default
+};

package/dist/feedback/PdxModal.js

@@ -0,0 +1,49 @@
+import { jsx as d, jsxs as i } from "react/jsx-runtime";
+/* empty css              */
+import "@prodivix/shared";
+import { X as v } from "lucide-react";
+function y({
+  open: e,
+  title: a,
+  children: s,
+  footer: l,
+  size: c = "Medium",
+  closeOnOverlayClick: n = !0,
+  showClose: o = !0,
+  onClose: r,
+  className: t,
+  style: m,
+  id: u,
+  dataAttributes: x = {}
+}) {
+  if (!e) return null;
+  const p = `PdxModal ${c} ${t || ""}`.trim(), P = { ...x };
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: "PdxModalOverlay",
+      onClick: n ? r : void 0,
+      children: /* @__PURE__ */ i(
+        "div",
+        {
+          className: p,
+          style: m,
+          id: u,
+          ...P,
+          onClick: (M) => M.stopPropagation(),
+          children: [
+            (a || o) && /* @__PURE__ */ i("div", { className: "PdxModalHeader", children: [
+              a && /* @__PURE__ */ d("h3", { children: a }),
+              o && /* @__PURE__ */ d("button", { type: "button", className: "PdxModalClose", onClick: r, children: /* @__PURE__ */ d(v, { size: 16 }) })
+            ] }),
+            /* @__PURE__ */ d("div", { className: "PdxModalBody", children: s }),
+            l && /* @__PURE__ */ d("div", { className: "PdxModalFooter", children: l })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  y as default
+};

package/dist/feedback/PdxNotification.js

@@ -0,0 +1,46 @@
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+/* empty css                     */
+import "@prodivix/shared";
+import { X as x } from "lucide-react";
+function v({
+  title: s,
+  description: t,
+  type: c = "Info",
+  closable: e = !1,
+  actions: o,
+  onClose: n,
+  className: d,
+  style: l,
+  id: r,
+  dataAttributes: f = {}
+}) {
+  const m = `PdxNotification ${c} ${d || ""}`.trim(), N = { ...f };
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: m,
+      style: l,
+      id: r,
+      ...N,
+      children: [
+        /* @__PURE__ */ a("div", { className: "PdxNotificationHeader", children: [
+          /* @__PURE__ */ i("div", { className: "PdxNotificationTitle", children: s }),
+          e && /* @__PURE__ */ i(
+            "button",
+            {
+              type: "button",
+              className: "PdxNotificationClose",
+              onClick: n,
+              children: /* @__PURE__ */ i(x, { size: 16 })
+            }
+          )
+        ] }),
+        t && /* @__PURE__ */ i("div", { className: "PdxNotificationDescription", children: t }),
+        o && /* @__PURE__ */ i("div", { className: "PdxNotificationActions", children: o })
+      ]
+    }
+  );
+}
+export {
+  v as default
+};