@memobit/libs 2.1.0 → 3.1.0

package/dist/components/MenuHamburger/MenuHamburger2.js

@@ -0,0 +1,65 @@
+import './MenuHamburger.css';
+import { Icon as H } from "../Icon/Icon2.js";
+import { Button as l } from "../Button/Button2.js";
+import { ContextMenu as v } from "../ContextMenu/ContextMenu2.js";
+import { useBreakpoint as f } from "../../hooks/useBreakpoint.js";
+/* empty css              */
+import { useState as N } from "react";
+import { jsx as n, jsxs as i } from "react/jsx-runtime";
+var I = ({ icon: b = "menu-hamburger", isCompact: o, items: t, label: c, showLabel: s = !0, disableResponsive: p = !1 }) => {
+  const { isAtLeast: M } = f(), [u, m] = N(null), h = (e) => {
+    m(e.currentTarget);
+  }, g = () => {
+    m(null);
+  }, r = p ? !0 : M("tablet");
+  if (t.length === 1) {
+    const e = t[0], a = r && s;
+    return /* @__PURE__ */ n("div", {
+      className: "MenuHamburger",
+      children: /* @__PURE__ */ n(l, {
+        variant: o || !r ? "plain" : "default",
+        onClick: e.onClick,
+        icon: e.icon,
+        className: `MenuHamburger_single-item ${a ? "" : "MenuHamburger_single-item--icon-only"} ${e.isActive ? "MenuHamburger_item--active" : ""}`,
+        children: a ? e.label : ""
+      })
+    });
+  }
+  const _ = (e) => {
+    e.onClick(), g();
+  }, d = r && s && !!c;
+  return /* @__PURE__ */ i("div", {
+    className: "MenuHamburger",
+    children: [/* @__PURE__ */ n(l, {
+      variant: o || !r ? "plain" : "default",
+      onClick: h,
+      icon: b,
+      className: d ? "" : "MenuHamburger_opener--icon-only",
+      children: d ? c : ""
+    }), u && /* @__PURE__ */ n(v, {
+      target: u,
+      onClose: g,
+      children: /* @__PURE__ */ n("div", {
+        className: "MenuHamburger_dropdown",
+        children: t.map((e, a) => /* @__PURE__ */ i("div", {
+          className: "MenuHamburger_entry",
+          children: [e.separator && /* @__PURE__ */ n("div", { className: "MenuHamburger_separator" }), /* @__PURE__ */ i(l, {
+            variant: "plain",
+            className: `MenuHamburger_item ${e.isActive ? "MenuHamburger_item--active" : ""}`,
+            onClick: () => _(e),
+            children: [/* @__PURE__ */ n("span", {
+              className: "MenuHamburger_item__icon",
+              children: e.icon ? /* @__PURE__ */ n(H, { name: e.icon }) : null
+            }), /* @__PURE__ */ n("span", {
+              className: "MenuHamburger_item__label",
+              children: e.label
+            })]
+          })]
+        }, a))
+      })
+    })]
+  });
+};
+export {
+  I as MenuHamburger
+};

package/dist/components/MiniSort/MiniSort.css

@@ -0,0 +1 @@
+.mini-sort{align-items:center;gap:var(--spacing-4);padding:var(--spacing-4);border:var(--spacing-1) solid var(--delimiter-color);border-radius:var(--radius);background:var(--card-background-accent-color);flex-wrap:wrap;display:inline-flex}.mini-sort--align-center{justify-content:center}.mini-sort--align-right{margin-left:auto}.mini-sort__button.button{justify-content:center;align-items:center;gap:var(--spacing-6);min-height:32px;padding:var(--spacing-4) var(--spacing-8);border-radius:calc(var(--radius) - var(--spacing-2));color:var(--body-color);cursor:pointer;font:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);transition:background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);background:0 0;border:0;display:inline-flex}.mini-sort__button.button:hover:not(:disabled){background:color-mix(in srgb, var(--body-accent-color) 10%, transparent);color:var(--body-color-accent)}.mini-sort__button.button:focus-visible{box-shadow:0 0 0 var(--spacing-2) color-mix(in srgb, var(--body-accent-color) 35%, transparent);outline:none}.mini-sort__button.button:disabled{cursor:not-allowed;opacity:.5}.mini-sort__button.button.is-active{background:var(--button-info-background-color);color:var(--button-info-color)}.mini-sort__button.button.is-active .mini-sort__icon{color:currentColor}.mini-sort__button.button>span{white-space:nowrap}.mini-sort__direction.button{padding:var(--spacing-4)}.mini-sort__icon{flex-shrink:0}

package/dist/components/MiniSort/MiniSort2.js

@@ -0,0 +1,52 @@
+import './MiniSort.css';
+import { Icon as t } from "../Icon/Icon2.js";
+import { Button as d } from "../Button/Button2.js";
+import { Tooltip as u } from "../Tooltip/Tooltip2.js";
+/* empty css         */
+import "react";
+import { jsx as l, jsxs as b } from "react/jsx-runtime";
+var j = ({ items: e, sortKey: n, sortDirection: i, onSort: r, align: m = "left", showDirectionToggle: s = !1, className: v = "" }) => e.length === 0 ? null : /* @__PURE__ */ b("div", {
+  className: [
+    "mini-sort",
+    `mini-sort--align-${m}`,
+    v
+  ].filter(Boolean).join(" "),
+  children: [e.map((a, p) => {
+    const c = a.direction ?? "asc", o = s ? n === a.value : n === a.value && i === c;
+    return /* @__PURE__ */ l(u, {
+      title: `Sort by ${typeof a.label == "string" || typeof a.label == "number" ? String(a.label) : a.value}${s ? "" : ` ${c === "asc" ? "ascending" : "descending"}`}`,
+      children: /* @__PURE__ */ l(d, {
+        className: `mini-sort__button${o ? " is-active" : ""}`,
+        disabled: a.disabled,
+        icon: a.icon ? /* @__PURE__ */ l(t, {
+          className: "mini-sort__icon",
+          name: a.icon,
+          size: "sm",
+          variant: o ? "accent" : "muted"
+        }) : void 0,
+        size: "small",
+        variant: "ghost",
+        onClick: () => r(a.value, s && n === a.value ? i : c),
+        children: a.label ?? a.value
+      })
+    }, `${a.value}-${p}`);
+  }), s && /* @__PURE__ */ l(u, {
+    title: `Direction: ${i === "asc" ? "ascending" : "descending"}`,
+    children: /* @__PURE__ */ l(d, {
+      className: "mini-sort__button mini-sort__direction",
+      disabled: n === null,
+      icon: /* @__PURE__ */ l(t, {
+        className: "mini-sort__icon",
+        name: i === "asc" ? "arrow-up" : "arrow-down",
+        size: "sm",
+        variant: "accent"
+      }),
+      size: "small",
+      variant: "ghost",
+      onClick: () => n !== null && r(n, i === "asc" ? "desc" : "asc")
+    })
+  })]
+});
+export {
+  j as MiniSort
+};

package/dist/components/MiniStatsCard/MiniStatsCard.css

@@ -0,0 +1 @@
+.mini-stats-card__content{gap:var(--spacing-12);padding:var(--spacing-24);flex-direction:column;display:flex}@media (width<=768px){.mini-stats-card__content{gap:var(--spacing-4);padding:var(--spacing-12)}}.mini-stats-card__value-container{align-items:center;gap:var(--spacing-8);display:flex}.mini-stats-card__value{align-items:baseline;gap:var(--spacing-4);line-height:1.2;display:flex}.mini-stats-card__value-number{font-family:var(--font-family-display);font-size:var(--font-size-xxl);font-weight:var(--font-weight-bold)}@media (width<=768px){.mini-stats-card__value-number{font-size:var(--font-size-lg)}}.mini-stats-card__value-unit{font-size:var(--font-size-md);font-weight:var(--font-weight-medium);opacity:.8}@media (width<=768px){.mini-stats-card__value-unit{font-size:var(--font-size-sm)}}.mini-stats-card__value--default{color:var(--body-color)}.mini-stats-card__value--success{color:var(--rating-color-success)}.mini-stats-card__value--warning{color:var(--rating-color-warning)}.mini-stats-card__value--danger{color:var(--rating-color-danger)}.mini-stats-card__value--info{color:var(--rating-color-info)}.mini-stats-card__label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--body-color-muted)}.mini-stats-card__trend{align-items:center;gap:var(--spacing-2);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);display:flex}.mini-stats-card__trend-arrow{font-size:var(--font-size-md)}.mini-stats-card__trend--success{color:var(--rating-color-success)}.mini-stats-card__trend--warning{color:var(--rating-color-warning)}.mini-stats-card__trend--danger{color:var(--rating-color-danger)}.mini-stats-card__footer{padding:var(--spacing-12) var(--spacing-24);border-top:var(--spacing-1) solid var(--border-color);justify-content:center;align-items:center;display:flex}.mini-stats-card--align-left .mini-stats-card__content{align-items:flex-start}.mini-stats-card--align-left .mini-stats-card__label{text-align:left}.mini-stats-card--align-center .mini-stats-card__content{align-items:center}.mini-stats-card--align-center .mini-stats-card__label{text-align:center}.mini-stats-card--align-right .mini-stats-card__content{align-items:flex-end}.mini-stats-card--align-right .mini-stats-card__label{text-align:right}.mini-stats-card--filled{border-color:#0000}.mini-stats-card--filled.mini-stats-card--variant-default{background-color:var(--card-background-accent-color);background-image:var(--card-tint-default-background,radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--body-accent-color) 14%, transparent) 0%, transparent 70%));border-color:color-mix(in srgb, var(--body-accent-color) 22%, transparent)}.mini-stats-card--filled.mini-stats-card--variant-success{background-color:var(--card-background-color);background-image:var(--card-tint-success-background,radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--rating-color-success) 18%, transparent) 0%, transparent 70%));border-color:color-mix(in srgb, var(--rating-color-success) 32%, transparent)}.mini-stats-card--filled.mini-stats-card--variant-warning{background-color:var(--card-background-color);background-image:var(--card-tint-warning-background,radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--rating-color-warning) 18%, transparent) 0%, transparent 70%));border-color:color-mix(in srgb, var(--rating-color-warning) 32%, transparent)}.mini-stats-card--filled.mini-stats-card--variant-danger{background-color:var(--card-background-color);background-image:var(--card-tint-danger-background,radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--rating-color-danger) 18%, transparent) 0%, transparent 70%));border-color:color-mix(in srgb, var(--rating-color-danger) 32%, transparent)}.mini-stats-card--filled.mini-stats-card--variant-info{background-color:var(--card-background-color);background-image:var(--card-tint-info-background,radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--rating-color-info) 18%, transparent) 0%, transparent 70%));border-color:color-mix(in srgb, var(--rating-color-info) 32%, transparent)}

package/dist/components/MiniStatsCard/MiniStatsCard2.js

@@ -0,0 +1,67 @@
+import './MiniStatsCard.css';
+import { Card as g } from "../Card/Card2.js";
+/* empty css              */
+import "react";
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+var V = ({ label: o, value: _, unit: t, variant: r = "default", align: u = "center", labelPosition: e = "bottom", trend: i, trendUnit: n = "%", trendLabel: v, trendVariant: h = "success", footer: c, filled: d = !1, className: N = "" }) => {
+  const p = () => /* @__PURE__ */ s("div", {
+    className: `mini-stats-card__value mini-stats-card__value--${r}`,
+    children: [/* @__PURE__ */ a("span", {
+      className: "mini-stats-card__value-number",
+      children: _
+    }), t && /* @__PURE__ */ a("span", {
+      className: "mini-stats-card__value-unit",
+      children: t
+    })]
+  }), l = () => /* @__PURE__ */ a("div", {
+    className: "mini-stats-card__label",
+    children: o
+  }), f = () => {
+    if (i === void 0) return null;
+    const $ = i > 0, b = i < 0, m = Math.abs(i), x = v ?? (n ? `${m}${n}` : `${m}`);
+    return /* @__PURE__ */ s("div", {
+      className: `mini-stats-card__trend mini-stats-card__trend--${h}`,
+      children: [
+        $ && /* @__PURE__ */ a("span", {
+          className: "mini-stats-card__trend-arrow",
+          children: "↑"
+        }),
+        b && /* @__PURE__ */ a("span", {
+          className: "mini-stats-card__trend-arrow",
+          children: "↓"
+        }),
+        /* @__PURE__ */ a("span", {
+          className: "mini-stats-card__trend-value",
+          children: x
+        })
+      ]
+    });
+  };
+  return /* @__PURE__ */ s(g, {
+    className: [
+      "mini-stats-card",
+      `mini-stats-card--align-${u}`,
+      d ? "mini-stats-card--filled" : "",
+      d ? `mini-stats-card--variant-${r}` : "",
+      N
+    ].filter(Boolean).join(" "),
+    noPadding: !0,
+    children: [/* @__PURE__ */ s("div", {
+      className: "mini-stats-card__content",
+      children: [
+        e === "top" && l(),
+        /* @__PURE__ */ s("div", {
+          className: "mini-stats-card__value-container",
+          children: [p(), f()]
+        }),
+        e === "bottom" && l()
+      ]
+    }), c && /* @__PURE__ */ a("div", {
+      className: "mini-stats-card__footer",
+      children: c
+    })]
+  });
+};
+export {
+  V as MiniStatsCard
+};

package/dist/components/Minimap/Minimap.css

@@ -0,0 +1 @@
+.minimap{gap:var(--spacing-4);padding:var(--spacing-8) var(--spacing-12);background-color:var(--card-background-color);border-bottom:1px solid var(--card-border-color);flex-direction:column;display:flex}.minimap__caption{font-size:var(--font-size-xxs);letter-spacing:.18em;text-transform:uppercase;color:var(--body-color-muted)}.minimap__track{height:var(--spacing-40);cursor:pointer;touch-action:none;position:relative}.minimap__bars{inset:0 0 var(--spacing-6) 0;align-items:flex-end;gap:var(--spacing-1);display:flex;position:absolute}.minimap__bar{min-height:var(--spacing-1);background-color:var(--body-color-muted);opacity:.4;flex:1}.minimap__bands{height:var(--spacing-4);position:absolute;bottom:0;left:0;right:0}.minimap__band{position:absolute;top:0;bottom:0}.minimap__viewport{top:calc(-1 * var(--spacing-2));bottom:calc(-1 * var(--spacing-2));background-color:color-mix(in srgb, var(--body-accent-color) 14%, transparent);border-left:var(--spacing-2) solid var(--body-accent-color);border-right:var(--spacing-2) solid var(--body-accent-color);pointer-events:none;position:absolute}

package/dist/components/Minimap/Minimap2.js

@@ -0,0 +1,62 @@
+import './Minimap.css';
+/* empty css        */
+import { useCallback as o, useRef as _ } from "react";
+import { jsx as n, jsxs as g } from "react/jsx-runtime";
+var a = (r) => Math.max(0, Math.min(1, r)), T = ({ buckets: r, viewportStart: l, viewportEnd: v, onScrub: p, bands: s, caption: d, className: P = "" }) => {
+  const h = _(null), m = _(!1), i = Math.max(0, v - l), M = Math.max(1, ...r), c = o((t) => {
+    const e = h.current;
+    if (!e) return;
+    const f = e.getBoundingClientRect(), w = a((t - f.left) / f.width);
+    p(Math.max(0, Math.min(1 - i, w - i / 2)));
+  }, [p, i]), x = o((t) => {
+    m.current = !0, t.currentTarget.setPointerCapture(t.pointerId), c(t.clientX);
+  }, [c]), N = o((t) => {
+    m.current && c(t.clientX);
+  }, [c]), u = o((t) => {
+    m.current = !1, t.currentTarget.hasPointerCapture(t.pointerId) && t.currentTarget.releasePointerCapture(t.pointerId);
+  }, []);
+  return /* @__PURE__ */ g("div", {
+    className: `minimap ${P}`.trim(),
+    children: [d && /* @__PURE__ */ n("div", {
+      className: "minimap__caption",
+      children: d
+    }), /* @__PURE__ */ g("div", {
+      ref: h,
+      className: "minimap__track",
+      onPointerDown: x,
+      onPointerMove: N,
+      onPointerUp: u,
+      onPointerCancel: u,
+      children: [
+        /* @__PURE__ */ n("div", {
+          className: "minimap__bars",
+          children: r.map((t, e) => /* @__PURE__ */ n("span", {
+            className: "minimap__bar",
+            style: { height: `${t / M * 100}%` }
+          }, e))
+        }),
+        s && s.length > 0 && /* @__PURE__ */ n("div", {
+          className: "minimap__bands",
+          children: s.map((t, e) => /* @__PURE__ */ n("span", {
+            className: "minimap__band",
+            style: {
+              left: `${a(t.start) * 100}%`,
+              width: `${a(t.end - t.start) * 100}%`,
+              background: t.color
+            }
+          }, e))
+        }),
+        /* @__PURE__ */ n("div", {
+          className: "minimap__viewport",
+          style: {
+            left: `${a(l) * 100}%`,
+            width: `${a(i) * 100}%`
+          }
+        })
+      ]
+    })]
+  });
+};
+export {
+  T as Minimap
+};

package/dist/components/Modal/Modal.css

@@ -0,0 +1 @@
+.modal-overlay{background-color:var(--backdrop-color);z-index:1100;padding:var(--spacing-16);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--modal-background-color);-webkit-backdrop-filter:var(--modal-backdrop-filter,none);border:var(--spacing-1) solid var(--modal-border-color);border-radius:var(--radius);width:100%;max-width:800px;max-height:90vh;box-shadow:var(--modal-surface-box-shadow,var(--modal-box-shadow));-webkit-overflow-scrolling:touch;touch-action:pan-y;flex-direction:column;display:flex;position:relative}.modal:hover{box-shadow:var(--modal-box-shadow-hover)}.modal__header{padding:var(--spacing-16) var(--spacing-24);border-bottom:var(--spacing-1) solid var(--modal-border-color);justify-content:space-between;align-items:center;gap:var(--spacing-12);flex-shrink:0;display:flex}.modal__header h2{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--modal-title-color,var(--modal-header-color));font-family:var(--modal-title-font-family,var(--font-family,sans-serif));font-size:var(--modal-title-font-size,var(--font-size-xl));font-style:var(--modal-title-font-style,normal);font-weight:var(--modal-title-font-weight,var(--font-weight-semibold));letter-spacing:var(--modal-title-letter-spacing,normal);text-transform:var(--modal-title-text-transform,none);flex:1;margin:0;overflow:hidden}.modal__close{width:32px;height:32px;padding:var(--spacing-4);flex-shrink:0;justify-content:center;font-size:1.5rem;line-height:1}.modal__body{box-sizing:border-box;padding:var(--spacing-16);-webkit-overflow-scrolling:touch;flex:auto;min-height:0;overflow-y:auto}.modal__body--no-padding{padding:0}.modal__footer{padding:var(--spacing-24);gap:var(--spacing-16);border-top:var(--spacing-1) solid var(--modal-border-color);flex-shrink:0;justify-content:flex-end;display:flex}.modal--small{max-width:400px}.modal--small h2{color:var(--modal-title-color,var(--modal-header-color));font-size:var(--modal-title-font-size);margin:0}.modal--medium{max-width:768px}.modal--large{max-width:900px}.modal--auto{max-width:fit-content}.modal--full-height{height:100%}@media (width<=768px){.modal-overlay,.modal__body{padding:var(--spacing-8)}.modal__body--no-padding{padding:0}.modal__footer{justify-content:space-between}}

package/dist/components/Modal/Modal2.js

@@ -0,0 +1,87 @@
+import './Modal.css';
+import { Icon as L } from "../Icon/Icon2.js";
+import { useBodyScrollLock as P } from "../../hooks/useBodyScrollLock.js";
+import { useComponentEffect as R } from "../../hooks/useComponentEffect.js";
+import { Button as c } from "../Button/Button2.js";
+import { Tooltip as j } from "../Tooltip/Tooltip2.js";
+/* empty css      */
+import { useEffect as w, useRef as h } from "react";
+import { jsx as o, jsxs as i } from "react/jsx-runtime";
+import { createPortal as B } from "react-dom";
+var H = ({ children: r, className: k, fullHeight: p = !1, isOpen: a, noPadding: C = !1, onClose: t, onOverlayClick: _, primary: l, secondary: e, size: b = "auto", tertiary: n, title: g, titleIcon: m, usePortal: x = !1 }) => {
+  const E = R("Modal");
+  P(a);
+  const N = h(null), s = h(null);
+  if (w(() => {
+    if (!a) return;
+    const d = (u) => {
+      if (u.key !== "Escape" || !t) return;
+      const v = document.querySelectorAll(".modal-overlay");
+      v[v.length - 1] === s.current && (u.stopPropagation(), t());
+    };
+    return document.addEventListener("keydown", d), () => document.removeEventListener("keydown", d);
+  }, [a, t]), !a) return null;
+  const $ = l || e || n, f = /* @__PURE__ */ o("div", {
+    ref: s,
+    className: "modal-overlay",
+    onClick: _,
+    children: /* @__PURE__ */ i("div", {
+      ref: N,
+      className: `modal modal--${b} ${p ? "modal--full-height" : ""} ${k || ""} ${E}`,
+      onClick: (d) => d.stopPropagation(),
+      children: [
+        /* @__PURE__ */ i("div", {
+          className: "modal__header",
+          children: [/* @__PURE__ */ i("h2", { children: [
+            m ? /* @__PURE__ */ o(L, { name: m }) : null,
+            " ",
+            g
+          ] }), /* @__PURE__ */ o(j, {
+            title: "Close modal",
+            children: /* @__PURE__ */ o(c, {
+              className: "modal__close",
+              icon: "clear",
+              onClick: t,
+              size: "medium",
+              variant: "ghost"
+            })
+          })]
+        }),
+        r != null && /* @__PURE__ */ o("div", {
+          className: `modal__body ${C ? "modal__body--no-padding" : ""}`,
+          children: r
+        }),
+        $ && /* @__PURE__ */ i("div", {
+          className: "modal__footer",
+          children: [
+            n && /* @__PURE__ */ o(c, {
+              variant: n.variant || "default",
+              icon: n.icon,
+              onClick: n.onClick,
+              disabled: n.disabled,
+              children: n.text
+            }),
+            e && /* @__PURE__ */ o(c, {
+              variant: e.variant || "default",
+              icon: e.icon || "clear",
+              onClick: e.onClick,
+              disabled: e.disabled,
+              children: e.text
+            }),
+            l && /* @__PURE__ */ o(c, {
+              variant: l.variant || "success",
+              icon: l.icon || "checkmark",
+              onClick: l.onClick,
+              disabled: l.disabled,
+              children: l.text
+            })
+          ]
+        })
+      ]
+    })
+  });
+  return x ? B(f, document.body) : f;
+};
+export {
+  H as Modal
+};

package/dist/components/NavBar/NavBar.css

@@ -0,0 +1 @@
+.navbar{align-items:center;gap:var(--spacing-24);width:100%;padding:var(--spacing-12) var(--spacing-24);background:var(--card-background-color);border-bottom:var(--spacing-1) solid var(--delimiter-color);box-sizing:border-box;z-index:100;display:flex}.navbar--no-padding{padding:0}.navbar--fixed{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:color-mix(in srgb, var(--card-background-color) 85%, transparent);position:fixed;top:0;left:0;right:0}.navbar--sticky{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:color-mix(in srgb, var(--card-background-color) 85%, transparent);position:sticky;top:0}.navbar--static{position:static}.navbar__logo{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--body-color);flex-shrink:0;align-items:center;display:flex}.navbar__items{flex:1;align-items:center;min-width:0;display:flex}.navbar__item{align-self:stretch;align-items:center;gap:var(--spacing-8);padding:var(--spacing-12) var(--spacing-16);background-color:var(--button-default-background-color);color:var(--button-default-color);border:none;border-bottom:var(--spacing-1) solid var(--button-default-border-color);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;border-radius:0;text-decoration:none;display:flex;position:relative}.navbar__item:hover:not(.navbar__item--disabled){color:var(--button-default-hover-color);background-color:var(--button-default-hover-background-color);border-bottom-color:var(--button-default-hover-border-color);z-index:1;transform:translateY(-1px)}.navbar__item:active:not(.navbar__item--disabled){transform:translateY(0)}.navbar__item--active{color:var(--body-accent-color);z-index:1}.navbar__item--active:after{content:"";height:var(--spacing-2);background:var(--body-accent-color);border-radius:var(--radius-full);position:absolute;bottom:0;left:0;right:0}.navbar__item--disabled{opacity:.6;cursor:not-allowed}.navbar__item--expand{color:var(--body-accent-color);font-style:italic}.navbar__item-icon{font-size:var(--font-size-lg);flex-shrink:0;line-height:1}.navbar__item-label{flex-shrink:0}.navbar__actions{align-items:center;gap:var(--spacing-12);flex-shrink:0;display:flex}@media (width<=768px){.navbar{gap:var(--spacing-12);padding:var(--spacing-8) var(--spacing-16)}.navbar--no-padding{padding:0}.navbar__items{scrollbar-width:none;overflow-x:auto}.navbar__items::-webkit-scrollbar{display:none}.navbar__item{padding:var(--spacing-4) var(--spacing-12);font-size:var(--font-size-sm)}}

package/dist/components/NavBar/NavBar2.js

@@ -0,0 +1,64 @@
+import './NavBar.css';
+import { Icon as u } from "../Icon/Icon2.js";
+import { Button as o } from "../Button/Button2.js";
+/* empty css       */
+import { useState as x } from "react";
+import { jsx as n, jsxs as i } from "react/jsx-runtime";
+var j = ({ items: r, logo: d, actions: t, position: b = "static", className: m = "", renderItem: v, collapsible: e = !1, noPadding: f = !1 }) => {
+  const [s, l] = x(!1), h = (a) => {
+    a.disabled || (a.onClick && a.onClick(), e && l(!1));
+  }, p = (a) => /* @__PURE__ */ i("button", {
+    className: `navbar__item ${a.isActive ? "navbar__item--active" : ""} ${a.disabled ? "navbar__item--disabled" : ""}`,
+    onClick: () => h(a),
+    disabled: a.disabled,
+    children: [a.icon && /* @__PURE__ */ n("span", {
+      className: "navbar__item-icon",
+      children: a.icon ? /* @__PURE__ */ n(u, { name: a.icon }) : null
+    }), /* @__PURE__ */ n("span", {
+      className: "navbar__item-label",
+      children: a.label
+    })]
+  }, a.id), N = e && !s ? r.filter((a, c) => c === 0 || a.isActive) : r, _ = e && !s ? r.filter((a, c) => c > 0 && !a.isActive).length : 0;
+  return /* @__PURE__ */ i("nav", {
+    className: `navbar navbar--${b} ${m} ${f ? "navbar--no-padding" : ""}`,
+    children: [
+      d && /* @__PURE__ */ n("div", {
+        className: "navbar__logo",
+        children: d
+      }),
+      /* @__PURE__ */ i("div", {
+        className: "navbar__items",
+        children: [
+          N.map((a) => v ? v(a) : p(a)),
+          e && !s && _ > 0 && /* @__PURE__ */ n(o, {
+            className: "navbar__item navbar__item--expand",
+            onClick: () => l(!0),
+            children: /* @__PURE__ */ i("span", {
+              className: "navbar__item-label",
+              children: [
+                "+",
+                _,
+                " more"
+              ]
+            })
+          }),
+          e && s && /* @__PURE__ */ n(o, {
+            className: "navbar__item navbar__item--expand",
+            onClick: () => l(!1),
+            children: /* @__PURE__ */ n("span", {
+              className: "navbar__item-label",
+              children: "− Less"
+            })
+          })
+        ]
+      }),
+      t && /* @__PURE__ */ n("div", {
+        className: "navbar__actions",
+        children: t
+      })
+    ]
+  });
+};
+export {
+  j as NavBar
+};

package/dist/components/NotificationPanel/NotificationPanel.css

@@ -0,0 +1 @@
+.NotificationPanel{position:relative}.NotificationPanel__button{align-items:center;gap:var(--spacing-8);border:1px solid var(--border-color);border-radius:var(--radius);background:var(--card-background-color);color:var(--body-title-color);padding:var(--spacing-8) var(--spacing-12);cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);display:inline-flex}.NotificationPanel__button--critical{border-color:color-mix(in srgb, var(--button-danger-border-color) 55%, var(--border-color));background:color-mix(in srgb, var(--button-danger-border-color) 12%, transparent)}.NotificationPanel__badge{min-width:var(--spacing-20);height:var(--spacing-20);border-radius:var(--radius-full);font-size:var(--font-size-xs);background:var(--button-danger-background-color);color:var(--button-danger-color);padding:0 var(--spacing-4);justify-content:center;align-items:center;display:inline-flex}.NotificationPanel__backdrop{z-index:9998;position:fixed;inset:0}.NotificationPanel__panel{z-index:9999;background:var(--card-background-color);border:1px solid var(--border-color);border-radius:var(--radius);width:min(420px,80vw);box-shadow:var(--card-box-shadow);padding:var(--spacing-12);position:fixed;top:0;left:0}.NotificationPanel__title{margin:0 0 var(--spacing-8) 0;font-size:var(--font-size-sm);color:var(--body-title-color);font-weight:var(--font-weight-medium)}.NotificationPanel__list{gap:var(--spacing-4);flex-direction:column;max-height:260px;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.NotificationPanel__list::-webkit-scrollbar{width:var(--scrollbar-size)}.NotificationPanel__list::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.NotificationPanel__list::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color);border-radius:var(--scrollbar-radius)}.NotificationPanel__list::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover-color)}.NotificationPanel__list{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color)}.NotificationPanel__item{font-size:var(--font-size-sm);color:var(--body-color);padding:var(--spacing-8);border-radius:var(--radius-sm);border:1px solid #0000}.NotificationPanel__item--critical{border-color:color-mix(in srgb, var(--button-danger-border-color) 50%, var(--border-color));background:color-mix(in srgb, var(--button-danger-border-color) 10%, transparent)}.NotificationPanel__empty{color:var(--body-sub-title-color);font-size:var(--font-size-sm);margin:0}

package/dist/components/NotificationPanel/NotificationPanel2.js

@@ -0,0 +1,66 @@
+import './NotificationPanel.css';
+/* empty css                  */
+import { useEffect as p, useRef as N, useState as g } from "react";
+import { Fragment as k, jsx as n, jsxs as d } from "react/jsx-runtime";
+import { createPortal as w } from "react-dom";
+var S = ({ items: i, buttonLabel: _ = "Alerts", panelTitle: y = "Notifications", emptyMessage: P = "No active notifications." }) => {
+  const [o, m] = g(!1), [v, u] = g({ opacity: 0 }), s = N(null), f = N(null), b = i.some((t) => t.severity === "critical");
+  return p(() => {
+    if (!o || !s.current || !f.current) return;
+    const t = requestAnimationFrame(() => {
+      if (!s.current || !f.current) return;
+      const c = s.current.getBoundingClientRect(), a = f.current.getBoundingClientRect(), h = document.documentElement.clientWidth, R = document.documentElement.clientHeight, e = 8;
+      let l = c.bottom + e, r = c.right - a.width;
+      r < e && (r = e), r + a.width > h - e && (r = h - a.width - e), l + a.height > R - e && (l = c.top - a.height - e), l < e && (l = e), u({
+        position: "fixed",
+        top: l,
+        left: r,
+        opacity: 1
+      });
+    });
+    return () => cancelAnimationFrame(t);
+  }, [o]), p(() => {
+    if (!o) return;
+    const t = (c) => {
+      c.key === "Escape" && m(!1);
+    };
+    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+  }, [o]), /* @__PURE__ */ d("div", {
+    className: "NotificationPanel",
+    children: [/* @__PURE__ */ d("button", {
+      ref: s,
+      type: "button",
+      className: `NotificationPanel__button${b ? " NotificationPanel__button--critical" : ""}`,
+      onClick: () => {
+        u({ opacity: 0 }), m((t) => !t);
+      },
+      children: [_, i.length > 0 && /* @__PURE__ */ n("span", {
+        className: "NotificationPanel__badge",
+        children: i.length
+      })]
+    }), o && w(/* @__PURE__ */ d(k, { children: [/* @__PURE__ */ n("div", {
+      className: "NotificationPanel__backdrop",
+      onClick: () => m(!1)
+    }), /* @__PURE__ */ d("div", {
+      ref: f,
+      className: "NotificationPanel__panel",
+      style: v,
+      children: [/* @__PURE__ */ n("h4", {
+        className: "NotificationPanel__title",
+        children: y
+      }), i.length === 0 ? /* @__PURE__ */ n("p", {
+        className: "NotificationPanel__empty",
+        children: P
+      }) : /* @__PURE__ */ n("ul", {
+        className: "NotificationPanel__list",
+        children: i.map((t) => /* @__PURE__ */ n("li", {
+          className: `NotificationPanel__item${t.severity === "critical" ? " NotificationPanel__item--critical" : ""}`,
+          children: t.message
+        }, t.id))
+      })]
+    })] }), document.body)]
+  });
+};
+export {
+  S as NotificationPanel
+};

package/dist/components/Pagination/Pagination.css

@@ -0,0 +1 @@
+.pagination{align-items:center;gap:var(--spacing-12);flex-wrap:wrap;justify-content:space-around;width:100%;display:flex}.pagination__pages{justify-content:center;align-items:center;gap:var(--spacing-8);flex:1;display:flex}.pagination--left .pagination__pages{justify-content:flex-start}.pagination--center .pagination__pages{flex:none;justify-content:center}.pagination--right{flex-direction:row-reverse}.pagination--right .pagination__pages{justify-content:flex-end}.pagination .page-info{color:var(--body-color);font-size:var(--font-size-sm)}.pagination__page-size{align-items:center;gap:var(--spacing-8);font-size:var(--font-size-sm);color:var(--body-color);display:flex}.pagination__page-size .dropdown-container{min-width:120px}@media (width>=769px) and (width<=1024px){.pagination__pages{flex-wrap:wrap}.pagination .page-info{text-align:center;width:100%;margin-top:var(--spacing-8)}}@media (width<=768px){.pagination{flex-direction:column;align-items:stretch}.pagination__pages{flex-wrap:wrap;justify-content:center}.pagination__page-size{justify-content:center}}

package/dist/components/Pagination/Pagination2.js

@@ -0,0 +1,92 @@
+import './Pagination.css';
+import { Button as u } from "../Button/Button2.js";
+import { useBreakpoint as I } from "../../hooks/useBreakpoint.js";
+import { Dropdown as O } from "../Dropdown/Dropdown2.js";
+/* empty css           */
+import { useCallback as y, useEffect as H, useRef as L, useState as R } from "react";
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+var U = 45, V = 120, j = 45, C = 45, D = 8, G = 4, F = ({ currentPage: i, totalPages: r, totalItems: p, onPageChange: d, showPagesNumbers: M = !1, pageSizeOptions: o, pageSize: m, onPageSizeChange: v, pageSizeLabel: N = "Rows", horizontalAlign: x = "left" }) => {
+  const { isAtLeast: a, isMobile: A } = I(), f = L(null), [l, W] = R(A ? 0 : 2), h = y(() => {
+    const s = f.current, e = s?.parentElement;
+    if (!s || !e) return;
+    let n = 0;
+    for (const T of e.children) T !== s && (n += T.offsetWidth + D);
+    const w = e.clientWidth - n - ((a("desktop") ? V : j) * 2 + U * 2 + C * 2 + D * 6), B = Math.floor(w / 53), E = Math.min(G, Math.max(0, Math.floor(B / 2)));
+    W(E);
+  }, [a]);
+  H(() => {
+    const s = f.current, e = s?.parentElement;
+    if (!s || !e) return;
+    const n = new ResizeObserver(() => {
+      h();
+    });
+    return n.observe(s), n.observe(e), h(), () => n.disconnect();
+  }, [h]);
+  const b = o && m !== void 0 && v, _ = o?.map((s) => ({
+    label: `${s}`,
+    value: s
+  })), k = () => {
+    const s = [], e = [];
+    for (let n = Math.max(2, i - l); n <= Math.min(r - 1, i + l); n++) s.push(n);
+    return i - l > 2 ? e.push(1, "...") : e.push(1), e.push(...s), i + l < r - 1 ? e.push("...", r) : r > 1 && e.push(r), e;
+  };
+  return p !== void 0 && o?.length && p <= Math.min(...o) || r <= 1 && !b ? null : /* @__PURE__ */ c("div", {
+    className: `pagination pagination--${x}`,
+    children: [
+      r > 1 && /* @__PURE__ */ c("div", {
+        className: "pagination__pages",
+        ref: f,
+        children: [
+          /* @__PURE__ */ t(u, {
+            variant: "default",
+            borders: "sharp",
+            disabled: i === 1,
+            icon: "previous",
+            onClick: () => d(i - 1),
+            children: a("desktop") ? "Previous" : ""
+          }),
+          k().map((s, e) => /* @__PURE__ */ t(u, {
+            borders: "sharp",
+            variant: s === i ? "warning" : "default",
+            disabled: typeof s == "string",
+            onClick: () => typeof s == "number" && d(s),
+            children: s
+          }, e)),
+          /* @__PURE__ */ t(u, {
+            variant: "default",
+            borders: "sharp",
+            disabled: i === r,
+            sufixIcon: "next",
+            onClick: () => d(i + 1),
+            children: a("desktop") ? "Next" : ""
+          })
+        ]
+      }),
+      b && _ && /* @__PURE__ */ c("div", {
+        className: "pagination__page-size",
+        children: [/* @__PURE__ */ t("span", { children: N }), /* @__PURE__ */ t(O, {
+          name: "pageSize",
+          options: _,
+          value: m,
+          searchable: !1,
+          usePortal: !1,
+          onChange: (s) => {
+            s && !Array.isArray(s) && v(Number(s.value));
+          }
+        })]
+      }),
+      M && /* @__PURE__ */ c("span", {
+        className: "page-info",
+        children: [
+          "Page ",
+          i,
+          " of ",
+          r
+        ]
+      })
+    ]
+  });
+};
+export {
+  F as Pagination
+};

package/dist/components/PieChart/PieChart.css

@@ -0,0 +1 @@
+.pie-chart{color:var(--body-color);justify-content:center;align-items:center;display:inline-flex}.pie-chart svg{display:block;overflow:visible}.pie-chart--small{--pie-chart-label-font-size:var(--font-size-xs);--pie-chart-empty-label-font-size:var(--font-size-xs)}.pie-chart--medium{--pie-chart-label-font-size:var(--font-size-sm);--pie-chart-empty-label-font-size:var(--font-size-sm)}.pie-chart--large{--pie-chart-label-font-size:var(--font-size-md);--pie-chart-empty-label-font-size:var(--font-size-md)}.pie-chart__slice{stroke:var(--card-background-color);stroke-linejoin:round}.pie-chart__empty-circle{fill:var(--progress-bar-background-color);stroke:var(--delimiter-color);stroke-width:var(--spacing-1)}.pie-chart__empty-label{fill:var(--body-color-muted);font-size:var(--pie-chart-empty-label-font-size);font-weight:var(--font-weight-semibold)}.pie-chart__value-label{font-size:var(--pie-chart-label-font-size);font-weight:var(--font-weight-semibold);pointer-events:none}.pie-chart__value-label--inside{fill:#fff;paint-order:stroke;stroke:#0000008c;stroke-linejoin:round;stroke-width:3px}.pie-chart__value-label--outside{stroke:none}.pie-chart__leader-line{stroke-width:var(--spacing-1);stroke-linecap:round}