@prodivix/ui 0.1.0

package/dist/input/PdxInput.js

@@ -0,0 +1,75 @@
+import { jsx as a, jsxs as k } from "react/jsx-runtime";
+/* empty css              */
+import "@prodivix/shared";
+function B({
+  type: u = "Text",
+  size: d = "Medium",
+  placeholder: f,
+  value: m,
+  state: s,
+  disabled: n = !1,
+  readOnly: l = !1,
+  required: c = !1,
+  minLength: i,
+  maxLength: x,
+  min: h,
+  max: o,
+  step: $,
+  pattern: I,
+  autoFocus: N = !1,
+  autoComplete: P,
+  name: g,
+  icon: e,
+  iconPosition: t = "Left",
+  onChange: p,
+  onFocus: C,
+  onBlur: L,
+  onKeyDown: j,
+  onKeyUp: v,
+  className: w,
+  style: R,
+  id: y,
+  dataAttributes: D = {},
+  onClick: E
+}) {
+  const M = `PdxInput ${d} ${s || ""} ${n ? "Disabled" : ""} ${l ? "ReadOnly" : ""} ${e ? "WithIcon" : ""} ${t} ${w || ""}`.trim(), T = { ...D }, W = (b) => {
+    p && p(b.target.value);
+  }, r = /* @__PURE__ */ a(
+    "input",
+    {
+      className: M,
+      style: R,
+      id: y,
+      type: u.toLowerCase(),
+      placeholder: f,
+      value: m,
+      disabled: n,
+      readOnly: l,
+      required: c,
+      minLength: i,
+      maxLength: x,
+      min: h,
+      max: o,
+      step: $,
+      pattern: I,
+      autoFocus: N,
+      autoComplete: P,
+      name: g,
+      onChange: W,
+      onFocus: C,
+      onBlur: L,
+      onKeyDown: j,
+      onKeyUp: v,
+      onClick: E,
+      ...T
+    }
+  );
+  return e ? /* @__PURE__ */ k("div", { className: "PdxInput-wrapper", children: [
+    t === "Left" && /* @__PURE__ */ a("span", { className: "PdxInput-icon", children: e }),
+    r,
+    t === "Right" && /* @__PURE__ */ a("span", { className: "PdxInput-icon", children: e })
+  ] }) : r;
+}
+export {
+  B as default
+};

package/dist/input/PdxSearch.js

@@ -0,0 +1,89 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import "react";
+/* empty css               */
+import "@prodivix/shared";
+function $({
+  size: h = "Medium",
+  placeholder: s = "Search...",
+  value: t = "",
+  disabled: a = !1,
+  onClear: n,
+  onSearch: i,
+  className: d,
+  style: m,
+  id: p,
+  dataAttributes: f = {},
+  onChange: l,
+  onKeyDown: o,
+  ...x
+}) {
+  const u = `PdxSearch ${h} ${a ? "Disabled" : ""} ${t ? "HasValue" : ""} ${d || ""}`.trim(), C = { ...f }, g = () => {
+    n && n();
+  };
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: u,
+      style: m,
+      id: p,
+      ...C,
+      children: [
+        /* @__PURE__ */ e("span", { className: "PdxSearchIcon", children: /* @__PURE__ */ c(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            children: [
+              /* @__PURE__ */ e("circle", { cx: "11", cy: "11", r: "8" }),
+              /* @__PURE__ */ e("path", { d: "m21 21-4.35-4.35" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ e(
+          "input",
+          {
+            type: "text",
+            placeholder: s,
+            value: t,
+            disabled: a,
+            onChange: (r) => {
+              l && l(r.target.value);
+            },
+            onKeyDown: (r) => {
+              r.key === "Enter" && i && i(t), o && o(r);
+            },
+            ...x
+          }
+        ),
+        t && !a && /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: "PdxSearchClear",
+            onClick: g,
+            "aria-label": "Clear search",
+            children: /* @__PURE__ */ e(
+              "svg",
+              {
+                width: "14",
+                height: "14",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                children: /* @__PURE__ */ e("path", { d: "M18 6 6 18M6 6l12 12" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  $ as default
+};

package/dist/input/PdxTextarea.js

@@ -0,0 +1,72 @@
+import { jsx as B } from "react/jsx-runtime";
+/* empty css                 */
+import "react";
+import "@prodivix/shared";
+function L({
+  size: l = "Medium",
+  placeholder: i,
+  value: n,
+  state: e,
+  disabled: t = !1,
+  readOnly: a = !1,
+  required: c = !1,
+  minLength: f,
+  maxLength: m,
+  rows: p = 4,
+  cols: h,
+  wrap: u,
+  resize: o = "Both",
+  autoFocus: x = !1,
+  name: z,
+  onChange: r,
+  onFocus: $,
+  onBlur: d,
+  onKeyDown: g,
+  onKeyUp: y,
+  className: C,
+  style: M,
+  id: N,
+  dataAttributes: P = {},
+  onClick: R
+}) {
+  const b = `PdxTextarea ${l} ${e || ""} ${t ? "Disabled" : ""} ${a ? "ReadOnly" : ""} ${o} ${C || ""}`.trim(), v = { ...P }, w = (s) => {
+    r && r(s.target.value);
+  };
+  return /* @__PURE__ */ B(
+    "textarea",
+    {
+      className: b,
+      style: { ...{
+        resize: {
+          None: "none",
+          Horizontal: "horizontal",
+          Vertical: "vertical",
+          Both: "both"
+        }[o] || "both"
+      }, ...M },
+      id: N,
+      placeholder: i,
+      value: n,
+      disabled: t,
+      readOnly: a,
+      required: c,
+      minLength: f,
+      maxLength: m,
+      rows: p,
+      cols: h,
+      wrap: u?.toLowerCase(),
+      autoFocus: x,
+      name: z,
+      onChange: w,
+      onFocus: $,
+      onBlur: d,
+      onKeyDown: g,
+      onKeyUp: y,
+      onClick: R,
+      ...v
+    }
+  );
+}
+export {
+  L as default
+};

package/dist/link/PdxLink.js

@@ -0,0 +1,34 @@
+import { jsx as P } from "react/jsx-runtime";
+import "react";
+import { Link as h } from "react-router";
+import "@prodivix/shared";
+/* empty css             */
+function v({
+  to: s,
+  text: r,
+  title: e,
+  disabled: t = !1,
+  children: i,
+  className: a,
+  style: l,
+  id: c,
+  dataAttributes: m = {},
+  onClick: n,
+  as: p = h
+}) {
+  const f = i ?? r ?? "Link", k = `PdxLink ${t ? "Disabled" : ""} ${a || ""}`.trim(), d = { ...m }, u = p, o = {
+    to: s,
+    className: k,
+    style: l,
+    id: c,
+    title: e,
+    onClick: n,
+    ...d
+  }, x = t ? (L) => {
+    L.preventDefault();
+  } : n;
+  return o.onClick = x, /* @__PURE__ */ P(u, { ...o, children: f });
+}
+export {
+  v as default
+};

package/dist/nav/PdxAnchorNavigation.js

@@ -0,0 +1,37 @@
+import { jsx as r } from "react/jsx-runtime";
+/* empty css                         */
+import "@prodivix/shared";
+function m({
+  items: o,
+  activeId: n,
+  orientation: i = "Vertical",
+  onSelect: c,
+  className: l,
+  style: t,
+  id: s,
+  dataAttributes: d = {}
+}) {
+  const e = `PdxAnchorNavigation ${i} ${l || ""}`.trim(), h = { ...d };
+  return /* @__PURE__ */ r(
+    "nav",
+    {
+      className: e,
+      style: t,
+      id: s,
+      ...h,
+      children: o.map((a) => /* @__PURE__ */ r(
+        "a",
+        {
+          href: a.href || `#${a.id}`,
+          className: `PdxAnchorNavigationItem ${n === a.id ? "Active" : ""}`,
+          onClick: () => c?.(a),
+          children: a.label
+        },
+        a.id
+      ))
+    }
+  );
+}
+export {
+  m as default
+};

package/dist/nav/PdxBreadcrumb.js

@@ -0,0 +1,30 @@
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+/* empty css                   */
+import "@prodivix/shared";
+function f({
+  items: c,
+  separator: e = "/",
+  className: l,
+  style: n,
+  id: s,
+  dataAttributes: d = {}
+}) {
+  const o = `PdxBreadcrumb ${l || ""}`.trim(), p = { ...d };
+  return /* @__PURE__ */ r(
+    "nav",
+    {
+      className: o,
+      style: n,
+      id: s,
+      ...p,
+      children: c.map((a, h) => /* @__PURE__ */ m("span", { className: "PdxBreadcrumbItem", children: [
+        a.icon && /* @__PURE__ */ r("span", { className: "PdxBreadcrumbIcon", children: a.icon }),
+        a.href ? /* @__PURE__ */ r("a", { href: a.href, children: a.label }) : /* @__PURE__ */ r("span", { children: a.label }),
+        h < c.length - 1 && /* @__PURE__ */ r("span", { className: "PdxBreadcrumbSeparator", children: e })
+      ] }, a.label))
+    }
+  );
+}
+export {
+  f as default
+};

package/dist/nav/PdxCollapse.js

@@ -0,0 +1,64 @@
+import { jsx as l, jsxs as r } from "react/jsx-runtime";
+/* empty css                 */
+import "@prodivix/shared";
+import { Minus as h, Plus as I } from "lucide-react";
+import { useState as $, useEffect as j } from "react";
+function E({
+  items: d,
+  activeKeys: n,
+  defaultActiveKeys: i,
+  accordion: c = !1,
+  onChange: o,
+  className: p,
+  style: u,
+  id: f,
+  dataAttributes: m = {}
+}) {
+  const [x, a] = $(
+    i || []
+  );
+  j(() => {
+    n && a(n);
+  }, [n]);
+  const t = n || x, C = (s) => {
+    let e = [];
+    c ? e = t.includes(s) ? [] : [s] : e = t.includes(s) ? t.filter((b) => b !== s) : [...t, s], n || a(e), o && o(e);
+  }, P = `PdxCollapse ${p || ""}`.trim(), N = { ...m };
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: P,
+      style: u,
+      id: f,
+      ...N,
+      children: d.map((s) => {
+        const e = t.includes(s.key);
+        return /* @__PURE__ */ r(
+          "div",
+          {
+            className: `PdxCollapseItem ${e ? "Open" : ""} ${s.disabled ? "Disabled" : ""}`,
+            children: [
+              /* @__PURE__ */ r(
+                "button",
+                {
+                  type: "button",
+                  className: "PdxCollapseHeader",
+                  onClick: () => !s.disabled && C(s.key),
+                  children: [
+                    /* @__PURE__ */ l("span", { children: s.title }),
+                    /* @__PURE__ */ l("span", { className: "PdxCollapseIcon", children: e ? /* @__PURE__ */ l(h, { size: 14 }) : /* @__PURE__ */ l(I, { size: 14 }) })
+                  ]
+                }
+              ),
+              e && /* @__PURE__ */ l("div", { className: "PdxCollapseContent", children: s.content })
+            ]
+          },
+          s.key
+        );
+      })
+    }
+  );
+}
+export {
+  E as default
+};

package/dist/nav/PdxNav.js

@@ -0,0 +1,48 @@
+import { jsx as e } from "react/jsx-runtime";
+import "react";
+/* empty css            */
+function t({
+  columns: a = 2,
+  canHide: n = !1,
+  isFloat: s = !1,
+  backgroundStyle: d = "Solid",
+  children: i,
+  className: r,
+  style: l,
+  id: o,
+  dataAttributes: N = {},
+  onClick: c,
+  as: m = "nav"
+}) {
+  const v = `PdxNav Columns-${a} ${s ? "Float" : ""} ${n ? "CanHide" : ""} ${d} ${r || ""}`.trim(), f = { ...N };
+  return /* @__PURE__ */ e(
+    m,
+    {
+      className: v,
+      style: l,
+      id: o,
+      onClick: c,
+      ...f,
+      children: i
+    }
+  );
+}
+function u({ children: a }) {
+  return /* @__PURE__ */ e("div", { className: "PdxNavLeft", children: a });
+}
+function x({ children: a }) {
+  return /* @__PURE__ */ e("div", { className: "PdxNavCenter", children: a });
+}
+function P({ children: a }) {
+  return /* @__PURE__ */ e("div", { className: "PdxNavRight", children: a });
+}
+function g({ heading: a }) {
+  return /* @__PURE__ */ e("h1", { className: "PdxNavHeading", children: a });
+}
+t.Left = u;
+t.Center = x;
+t.Right = P;
+t.Heading = g;
+export {
+  t as default
+};

package/dist/nav/PdxNavbar.js

@@ -0,0 +1,43 @@
+import { jsx as a, jsxs as b, Fragment as f } from "react/jsx-runtime";
+/* empty css               */
+import "@prodivix/shared";
+function u({
+  brand: s,
+  items: l = [],
+  actions: d,
+  variant: c = "Solid",
+  size: i = "Medium",
+  sticky: t = !1,
+  children: e,
+  className: n,
+  style: m,
+  id: v,
+  dataAttributes: N = {}
+}) {
+  const o = `PdxNavbar ${i} ${c} ${t ? "Sticky" : ""} ${n || ""}`.trim(), x = { ...N };
+  return /* @__PURE__ */ a(
+    "nav",
+    {
+      className: o,
+      style: m,
+      id: v,
+      ...x,
+      children: e || /* @__PURE__ */ b(f, { children: [
+        /* @__PURE__ */ a("div", { className: "PdxNavbarBrand", children: s }),
+        /* @__PURE__ */ a("div", { className: "PdxNavbarItems", children: l.map((r) => /* @__PURE__ */ a(
+          "a",
+          {
+            href: r.href || "#",
+            className: `PdxNavbarItem ${r.active ? "Active" : ""}`,
+            children: r.label
+          },
+          r.label
+        )) }),
+        /* @__PURE__ */ a("div", { className: "PdxNavbarActions", children: d })
+      ] })
+    }
+  );
+}
+export {
+  u as default
+};

package/dist/nav/PdxOutlet.js

@@ -0,0 +1,26 @@
+import { jsx as e } from "react/jsx-runtime";
+import "@prodivix/shared";
+/* empty css               */
+function n({
+  emptyText: i = "Outlet is empty.",
+  children: t,
+  className: l,
+  style: m,
+  id: o,
+  dataAttributes: s = {}
+}) {
+  const r = t != null;
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: `PdxOutlet ${l ?? ""}`.trim(),
+      style: m,
+      id: o,
+      ...s,
+      children: r ? t : /* @__PURE__ */ e("div", { className: "PdxOutletEmpty", children: i })
+    }
+  );
+}
+export {
+  n as default
+};

package/dist/nav/PdxPagination.js

@@ -0,0 +1,66 @@
+import { jsxs as C, jsx as s } from "react/jsx-runtime";
+/* empty css                   */
+import "@prodivix/shared";
+function A({
+  page: e,
+  total: d,
+  pageSize: h = 10,
+  maxButtons: i = 5,
+  onChange: c,
+  className: m,
+  style: f,
+  id: M,
+  dataAttributes: p = {}
+}) {
+  const n = Math.max(1, Math.ceil(d / h)), a = Math.min(Math.max(1, e), n), u = Math.floor(i / 2);
+  let o = Math.max(1, a - u), r = Math.min(n, o + i - 1);
+  o = Math.max(1, r - i + 1);
+  const x = Array.from(
+    { length: r - o + 1 },
+    (t, y) => o + y
+  ), l = (t) => {
+    t < 1 || t > n || c && c(t);
+  }, P = `PdxPagination ${m || ""}`.trim(), b = { ...p };
+  return /* @__PURE__ */ C(
+    "div",
+    {
+      className: P,
+      style: f,
+      id: M,
+      ...b,
+      children: [
+        /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            onClick: () => l(a - 1),
+            disabled: a === 1,
+            children: "Prev"
+          }
+        ),
+        x.map((t) => /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            className: t === a ? "Active" : "",
+            onClick: () => l(t),
+            children: t
+          },
+          t
+        )),
+        /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            onClick: () => l(a + 1),
+            disabled: a === n,
+            children: "Next"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  A as default
+};