@prodivix/ui 0.1.0

package/dist/form/PdxSlider.js

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

package/dist/form/PdxTimePicker.js

@@ -0,0 +1,89 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+/* empty css                   */
+import "@prodivix/shared";
+function R({
+  label: l,
+  description: a,
+  message: d,
+  value: o,
+  placeholder: h,
+  size: P = "Medium",
+  state: s = "Default",
+  disabled: c = !1,
+  readOnly: r = !1,
+  required: t = !1,
+  min: x,
+  max: f,
+  name: p,
+  autoFocus: u = !1,
+  showIcon: N = !0,
+  onChange: n,
+  onFocus: v,
+  onBlur: k,
+  className: F,
+  style: $,
+  id: m,
+  dataAttributes: T = {},
+  onClick: g
+}) {
+  const C = `PdxTimePicker ${P} ${s} ${c ? "Disabled" : ""} ${r ? "ReadOnly" : ""} ${F || ""}`.trim(), D = { ...T }, M = (j) => {
+    n && n(j.target.value);
+  };
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: `PdxField ${C}`,
+      style: $,
+      ...D,
+      children: [
+        l && /* @__PURE__ */ i("div", { className: "PdxFieldHeader", children: [
+          /* @__PURE__ */ e("label", { className: "PdxFieldLabel", htmlFor: m, children: l }),
+          t && /* @__PURE__ */ e("span", { className: "PdxFieldRequired", children: "*" })
+        ] }),
+        a && /* @__PURE__ */ e("div", { className: "PdxFieldDescription", children: a }),
+        /* @__PURE__ */ i("div", { className: "PdxTimePickerControl", children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              className: "PdxTimePickerInput",
+              id: m,
+              type: "time",
+              placeholder: h,
+              value: o,
+              disabled: c,
+              readOnly: r,
+              required: t,
+              min: x,
+              max: f,
+              name: p,
+              autoFocus: u,
+              onChange: M,
+              onFocus: v,
+              onBlur: k,
+              onClick: g
+            }
+          ),
+          N && /* @__PURE__ */ e("span", { className: "PdxTimePickerIcon", children: /* @__PURE__ */ i(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              children: [
+                /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "9" }),
+                /* @__PURE__ */ e("path", { d: "M12 7v6l4 2" })
+              ]
+            }
+          ) })
+        ] }),
+        d && /* @__PURE__ */ e("div", { className: `PdxFieldMessage ${s}`, children: d })
+      ]
+    }
+  );
+}
+export {
+  R as default
+};

package/dist/form/PdxVerificationCode.js

@@ -0,0 +1,90 @@
+import { jsxs as N, jsx as s } from "react/jsx-runtime";
+/* empty css                         */
+import "@prodivix/shared";
+import { useState as S, useRef as _, useEffect as B } from "react";
+function G({
+  label: d,
+  description: l,
+  message: f,
+  length: c = 6,
+  value: i,
+  defaultValue: C,
+  size: D = "Medium",
+  state: u = "Default",
+  disabled: m = !1,
+  autoFocus: v = !1,
+  masked: y = !1,
+  separator: p,
+  onChange: P,
+  onComplete: V,
+  className: F,
+  style: $,
+  id: I,
+  dataAttributes: M = {}
+}) {
+  const [j, h] = S(C || ""), r = _([]);
+  B(() => {
+    i !== void 0 && h(i);
+  }, [i]);
+  const w = i !== void 0 ? i : j, n = Array.from(
+    { length: c },
+    (a, e) => w[e] || ""
+  ), x = (a) => {
+    const e = a.join("");
+    i === void 0 && h(e), P && P(e), V && a.every((t) => t) && V(e);
+  }, b = (a) => (e) => {
+    const t = e.target.value.slice(-1), o = [...n];
+    o[a] = t, x(o), t && a < c - 1 && r.current[a + 1]?.focus();
+  }, k = (a) => (e) => {
+    e.key === "Backspace" && !n[a] && a > 0 && r.current[a - 1]?.focus();
+  }, A = (a) => {
+    const e = a.clipboardData.getData("text").slice(0, c);
+    if (!e)
+      return;
+    const t = Array.from(
+      { length: c },
+      (E, R) => e[R] || ""
+    );
+    x(t);
+    const o = Math.min(e.length, c - 1);
+    r.current[o]?.focus(), a.preventDefault();
+  }, K = `PdxVerificationCode ${D} ${u} ${m ? "Disabled" : ""} ${F || ""}`.trim(), L = { ...M };
+  return /* @__PURE__ */ N(
+    "div",
+    {
+      className: `PdxField ${K}`,
+      style: $,
+      id: I,
+      ...L,
+      children: [
+        d && /* @__PURE__ */ s("div", { className: "PdxFieldHeader", children: /* @__PURE__ */ s("label", { className: "PdxFieldLabel", children: d }) }),
+        l && /* @__PURE__ */ s("div", { className: "PdxFieldDescription", children: l }),
+        /* @__PURE__ */ s("div", { className: "PdxVerificationCodeInputs", children: n.map((a, e) => /* @__PURE__ */ N("div", { className: "PdxVerificationCodeItem", children: [
+          /* @__PURE__ */ s(
+            "input",
+            {
+              ref: (t) => {
+                r.current[e] = t;
+              },
+              className: "PdxVerificationCodeInput",
+              type: y ? "password" : "text",
+              inputMode: "numeric",
+              maxLength: 1,
+              value: a,
+              autoFocus: v && e === 0,
+              disabled: m,
+              onChange: b(e),
+              onKeyDown: k(e),
+              onPaste: A
+            }
+          ),
+          p && e < c - 1 && /* @__PURE__ */ s("span", { className: "PdxVerificationCodeSeparator", children: p })
+        ] }, e)) }),
+        f && /* @__PURE__ */ s("div", { className: `PdxFieldMessage ${u}`, children: f })
+      ]
+    }
+  );
+}
+export {
+  G as default
+};

package/dist/icon/PdxIcon.js

@@ -0,0 +1,73 @@
+import { jsx as a } from "react/jsx-runtime";
+import p from "react";
+import "@prodivix/shared";
+/* empty css             */
+const g = (n) => typeof n == "function" || typeof n == "object" && n !== null && "$$typeof" in n, d = (n, t = "currentColor", e) => /* @__PURE__ */ a(
+  "svg",
+  {
+    width: n ?? 24,
+    height: n ?? 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": e ? void 0 : !0,
+    "aria-label": e,
+    children: /* @__PURE__ */ a("circle", { cx: "12", cy: "12", r: "8", stroke: t, strokeWidth: "2" })
+  }
+);
+function u(n, t, e, r) {
+  if (!n)
+    return d(t, e, r);
+  if (p.isValidElement(n)) {
+    const s = n, l = s.props || {}, o = {};
+    if (t !== void 0)
+      if ("size" in l)
+        o.size = t;
+      else if (typeof s.type == "string" && s.type === "svg")
+        o.width = t, o.height = t;
+      else {
+        const f = l.style ?? {};
+        o.style = {
+          ...f,
+          width: t,
+          height: t
+        };
+      }
+    return e !== void 0 && ("color" in l ? o.color = e : l.fill !== void 0 || s.type === "svg" ? o.fill = e : o.stroke = e), r && s.type === "svg" && !l["aria-label"] && (o["aria-label"] = r), p.cloneElement(s, o);
+  }
+  if (!g(n))
+    return d(t, e, r);
+  const c = n, i = {};
+  return t !== void 0 && (i.size = t, i.width = t, i.height = t), e !== void 0 && (i.color = e, i.style = { color: e }), r && (i.title = r), /* @__PURE__ */ a(c, { ...i });
+}
+function P({
+  icon: n,
+  size: t = 24,
+  color: e = "currentColor",
+  title: r,
+  className: c,
+  style: i,
+  id: s,
+  dataAttributes: l = {},
+  onClick: o
+}) {
+  const f = `PdxIcon ${c || ""}`.trim(), h = { ...l }, m = t !== void 0 ? { fontSize: typeof t == "number" ? `${t}px` : t } : {}, y = r ? { role: "img", "aria-label": r } : { "aria-hidden": !0 };
+  return /* @__PURE__ */ a(
+    "span",
+    {
+      className: f,
+      style: {
+        ...m,
+        ...i
+      },
+      id: s,
+      onClick: o,
+      ...y,
+      ...h,
+      children: u(n, t, e, r)
+    }
+  );
+}
+export {
+  P as default
+};

package/dist/icon/PdxIconLink.js

@@ -0,0 +1,13 @@
+import { jsx as r } from "react/jsx-runtime";
+import "react";
+import "react-router";
+import m from "./PdxIcon.js";
+import c from "../link/PdxLink.js";
+/* empty css                 */
+function P(t) {
+  const { to: i, title: o, ...n } = t;
+  return /* @__PURE__ */ r(c, { className: "PdxIconLink", to: i, title: o, children: /* @__PURE__ */ r(m, { ...n, title: o }) });
+}
+export {
+  P as default
+};

package/dist/image/PdxAvatar.js

@@ -0,0 +1,38 @@
+import { jsxs as P, jsx as r } from "react/jsx-runtime";
+import C from "react";
+import "@prodivix/shared";
+function I({
+  src: t,
+  alt: e = "Avatar",
+  size: d = "Medium",
+  shape: c = "Circle",
+  fallback: n,
+  initials: s,
+  status: a,
+  className: m,
+  style: l,
+  id: p,
+  dataAttributes: u = {},
+  onError: o,
+  ...i
+}) {
+  const [f, x] = C.useState(!1), h = `PdxAvatar ${d} ${c} ${a ? `status-${a}` : ""} ${m || ""}`.trim(), v = { ...u };
+  return /* @__PURE__ */ P(
+    "div",
+    {
+      className: h,
+      style: l,
+      id: p,
+      ...v,
+      children: [
+        t && !f ? /* @__PURE__ */ r("img", { src: t, alt: e, onError: (A) => {
+          x(!0), o && o(A);
+        }, ...i }) : s ? /* @__PURE__ */ r("span", { className: "PdxAvatar-initials", children: s }) : n ? /* @__PURE__ */ r("img", { src: n, alt: e, ...i }) : /* @__PURE__ */ r("span", { className: "PdxAvatar-placeholder", children: e.charAt(0).toUpperCase() }),
+        a && /* @__PURE__ */ r("span", { className: "PdxAvatar-status" })
+      ]
+    }
+  );
+}
+export {
+  I as default
+};

package/dist/image/PdxImage.js

@@ -0,0 +1,39 @@
+import { jsx as g } from "react/jsx-runtime";
+/* empty css              */
+import "react";
+import "@prodivix/shared";
+function I({
+  src: o,
+  alt: a,
+  size: t = "Medium",
+  fit: e = "Cover",
+  shape: m = "Rounded",
+  loading: r = "Lazy",
+  className: s,
+  style: i,
+  id: d,
+  dataAttributes: n = {},
+  onLoad: l,
+  onError: p,
+  ...u
+}) {
+  const c = `PdxImage ${t} ${e} ${m} ${s || ""}`.trim(), f = { ...n };
+  return /* @__PURE__ */ g(
+    "img",
+    {
+      className: c,
+      style: i,
+      id: d,
+      src: o,
+      alt: a,
+      loading: r.toLowerCase(),
+      onLoad: l,
+      onError: p,
+      ...f,
+      ...u
+    }
+  );
+}
+export {
+  I as default
+};

package/dist/image/PdxImageGallery.js

@@ -0,0 +1,77 @@
+import { jsx as r, jsxs as S } from "react/jsx-runtime";
+import { useState as j } from "react";
+import "@prodivix/shared";
+function R({
+  images: o,
+  layout: t = "Grid",
+  columns: m = 3,
+  gap: f = "Medium",
+  size: u = "Medium",
+  shape: p = "Rounded",
+  fit: y = "Cover",
+  showCaptions: g = !1,
+  selectable: i = !1,
+  maxSelection: c,
+  onImageClick: d,
+  onSelectionChange: n,
+  className: G,
+  style: h,
+  id: I,
+  dataAttributes: $ = {},
+  ...v
+}) {
+  const [s, P] = j([]), N = `PdxImageGallery ${t} ${f} ${G || ""}`.trim(), k = { ...$ }, C = (l, e) => {
+    if (d && d(l, e), i) {
+      const a = s.includes(e) ? s.filter((M) => M !== e) : [...s, e];
+      if (c && a.length > c)
+        return;
+      P(a), n && n(a);
+    }
+  };
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: N,
+      style: { ...t === "Grid" || t === "Masonry" ? {
+        display: "grid",
+        gridTemplateColumns: `repeat(${m}, 1fr)`
+      } : {}, ...h },
+      id: I,
+      ...k,
+      ...v,
+      children: o.map((l, e) => /* @__PURE__ */ S(
+        "div",
+        {
+          className: `PdxImageGallery-item ${u} ${p} ${s.includes(e) ? "selected" : ""}`,
+          onClick: () => C(l, e),
+          children: [
+            /* @__PURE__ */ r(
+              "img",
+              {
+                src: l.thumbnail || l.src,
+                alt: l.alt || `Image ${e + 1}`,
+                className: `PdxImageGallery-image ${y}`,
+                loading: "lazy"
+              }
+            ),
+            g && l.caption && /* @__PURE__ */ r("div", { className: "PdxImageGallery-caption", children: l.caption }),
+            i && s.includes(e) && /* @__PURE__ */ r("div", { className: "PdxImageGallery-check", children: /* @__PURE__ */ r(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                children: /* @__PURE__ */ r("polyline", { points: "20 6 9 17 4 12" })
+              }
+            ) })
+          ]
+        },
+        e
+      ))
+    }
+  );
+}
+export {
+  R as default
+};

package/dist/index.js

@@ -0,0 +1,142 @@
+import { default as t } from "./button/PdxButton.js";
+import { default as o } from "./button/PdxButtonLink.js";
+import { default as x } from "./icon/PdxIconLink.js";
+import { default as l } from "./link/PdxLink.js";
+import { default as s } from "./nav/PdxNav.js";
+import { default as m } from "./nav/PdxNavbar.js";
+import { default as i } from "./nav/PdxSidebar.js";
+import { default as c } from "./nav/PdxBreadcrumb.js";
+import { default as S } from "./nav/PdxPagination.js";
+import { default as k } from "./nav/PdxAnchorNavigation.js";
+import { default as R } from "./nav/PdxTabs.js";
+import { default as h } from "./nav/PdxCollapse.js";
+import { default as C } from "./nav/PdxRoute.js";
+import { default as L } from "./nav/PdxOutlet.js";
+import { default as N } from "./icon/PdxIcon.js";
+import { default as E } from "./text/PdxText.js";
+import { default as w } from "./text/PdxHeading.js";
+import { default as M } from "./text/PdxParagraph.js";
+import { default as V } from "./text/PdxKbd.js";
+import { default as H } from "./input/PdxInput.js";
+import { default as O } from "./input/PdxTextarea.js";
+import { default as q } from "./input/PdxSearch.js";
+import { default as J } from "./form/PdxDatePicker.js";
+import { default as W } from "./form/PdxDateRangePicker.js";
+import { default as Y } from "./form/PdxTimePicker.js";
+import { default as _ } from "./form/PdxRegionPicker.js";
+import { default as ee } from "./form/PdxVerificationCode.js";
+import { default as te } from "./form/PdxPasswordStrength.js";
+import { default as oe } from "./form/PdxRegexInput.js";
+import { default as xe } from "./form/PdxFileUpload.js";
+import { default as le } from "./form/PdxImageUpload.js";
+import { default as se } from "./form/PdxRichTextEditor.js";
+import { default as me } from "./form/PdxRating.js";
+import { default as ie } from "./form/PdxColorPicker.js";
+import { default as ce } from "./form/PdxSlider.js";
+import { default as Se } from "./form/PdxRange.js";
+import { default as ke } from "./form/PdxSelect.js";
+import { default as Re } from "./form/PdxRadioGroup.js";
+import { default as he } from "./container/PdxDiv.js";
+import { default as Ce } from "./container/PdxSection.js";
+import { default as Le } from "./container/PdxCard.js";
+import { default as Ne } from "./container/PdxPanel.js";
+import { default as Ee } from "./image/PdxImage.js";
+import { default as we } from "./image/PdxAvatar.js";
+import { default as Me } from "./image/PdxImageGallery.js";
+import { default as Ve } from "./video/PdxVideo.js";
+import { default as He } from "./video/PdxAudio.js";
+import { default as Oe } from "./embed/PdxIframe.js";
+import { default as qe } from "./embed/PdxEmbed.js";
+import { default as Je } from "./data/PdxTable.js";
+import { default as We } from "./data/PdxDataGrid.js";
+import { default as Ye } from "./data/PdxList.js";
+import { default as _e } from "./data/PdxCheckList.js";
+import { default as ea } from "./data/PdxTree.js";
+import { default as ta } from "./data/PdxTreeSelect.js";
+import { default as oa } from "./data/PdxTag.js";
+import { default as xa } from "./data/PdxBadge.js";
+import { default as la } from "./data/PdxProgress.js";
+import { default as sa } from "./data/PdxSpinner.js";
+import { default as ma } from "./data/PdxStatistic.js";
+import { default as ia } from "./data/PdxTimeline.js";
+import { default as ca } from "./data/PdxSteps.js";
+import { default as Sa } from "./feedback/PdxModal.js";
+import { default as ka } from "./feedback/PdxDrawer.js";
+import { default as Ra } from "./feedback/PdxTooltip.js";
+import { default as ha } from "./feedback/PdxPopover.js";
+import { default as Ca } from "./feedback/PdxMessage.js";
+import { default as La } from "./feedback/PdxNotification.js";
+import { default as Na } from "./feedback/PdxEmpty.js";
+import { default as Ea } from "./feedback/PdxSkeleton.js";
+export {
+  k as PdxAnchorNavigation,
+  He as PdxAudio,
+  we as PdxAvatar,
+  xa as PdxBadge,
+  c as PdxBreadcrumb,
+  t as PdxButton,
+  o as PdxButtonLink,
+  Le as PdxCard,
+  _e as PdxCheckList,
+  h as PdxCollapse,
+  ie as PdxColorPicker,
+  We as PdxDataGrid,
+  J as PdxDatePicker,
+  W as PdxDateRangePicker,
+  he as PdxDiv,
+  ka as PdxDrawer,
+  qe as PdxEmbed,
+  Na as PdxEmpty,
+  xe as PdxFileUpload,
+  w as PdxHeading,
+  N as PdxIcon,
+  x as PdxIconLink,
+  Oe as PdxIframe,
+  Ee as PdxImage,
+  Me as PdxImageGallery,
+  le as PdxImageUpload,
+  H as PdxInput,
+  V as PdxKbd,
+  l as PdxLink,
+  Ye as PdxList,
+  Ca as PdxMessage,
+  Sa as PdxModal,
+  s as PdxNav,
+  m as PdxNavbar,
+  La as PdxNotification,
+  L as PdxOutlet,
+  S as PdxPagination,
+  Ne as PdxPanel,
+  M as PdxParagraph,
+  te as PdxPasswordStrength,
+  ha as PdxPopover,
+  la as PdxProgress,
+  Re as PdxRadioGroup,
+  Se as PdxRange,
+  me as PdxRating,
+  oe as PdxRegexInput,
+  _ as PdxRegionPicker,
+  se as PdxRichTextEditor,
+  C as PdxRoute,
+  q as PdxSearch,
+  Ce as PdxSection,
+  ke as PdxSelect,
+  i as PdxSidebar,
+  Ea as PdxSkeleton,
+  ce as PdxSlider,
+  sa as PdxSpinner,
+  ma as PdxStatistic,
+  ca as PdxSteps,
+  Je as PdxTable,
+  R as PdxTabs,
+  oa as PdxTag,
+  E as PdxText,
+  O as PdxTextarea,
+  Y as PdxTimePicker,
+  ia as PdxTimeline,
+  Ra as PdxTooltip,
+  ea as PdxTree,
+  ta as PdxTreeSelect,
+  ee as PdxVerificationCode,
+  Ve as PdxVideo
+};