@memobit/libs 3.0.0 → 3.1.1

package/dist/components/Button/Button2.js

@@ -0,0 +1,32 @@
+import './Button.css';
+import { Icon as d } from "../Icon/Icon2.js";
+/* empty css       */
+import w from "react";
+import { Fragment as o, jsx as t, jsxs as l } from "react/jsx-runtime";
+var z = w.forwardRef(({ borders: m = "rounded", children: r, className: u, disabled: p = !1, fullWidth: i = !1, icon: e, iconVariant: n = "default", loading: f = !1, onClick: b, emojiIcon: s, size: g = "medium", style: $, sufixIcon: a, title: v, type: h = "button", variant: y = "default" }, N) => /* @__PURE__ */ t("button", {
+  ref: N,
+  className: `button button-${g} button-${y} ${m === "rounded" ? "button-rounded" : ""} ${i ? "is-full-width" : ""} ${u || ""}`,
+  disabled: p,
+  onClick: b,
+  style: $,
+  title: v,
+  type: h,
+  children: f ? /* @__PURE__ */ l(o, { children: [/* @__PURE__ */ t("span", { className: "button__spinner" }), /* @__PURE__ */ t("span", { children: r || "Loading..." })] }) : /* @__PURE__ */ l(o, { children: [
+    e !== void 0 && (typeof e == "string" ? /* @__PURE__ */ t(d, {
+      size: "lg",
+      name: e,
+      variant: n
+    }) : e),
+    s && /* @__PURE__ */ t("span", { children: s }),
+    r && /* @__PURE__ */ t("span", { children: r }),
+    a !== void 0 && (typeof a == "string" ? /* @__PURE__ */ t(d, {
+      size: "lg",
+      name: a,
+      variant: n
+    }) : a)
+  ] })
+}));
+z.displayName = "Button";
+export {
+  z as Button
+};

package/dist/components/Calendar/Calendar.css

@@ -0,0 +1 @@
+:root{--radius-sm:4px;--radius:8px;--radius-full:9999px;--checkbox-size:18px;--radio-size:18px;--body-background-glow:none;--spacing-1:1px;--spacing-2:2px;--spacing-4:4px;--spacing-6:6px;--spacing-8:8px;--spacing-12:12px;--spacing-16:16px;--spacing-20:20px;--spacing-24:24px;--spacing-32:32px;--spacing-40:40px;--spacing-48:48px;--spacing-60:60px;--spacing-64:64px;--spacing-80:80px;--spacing-100:100px;--spacing-200:200px;--spacing-300:300px;--spacing-400:400px;--font-size-xxs:.625rem;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-md:1rem;--font-size-lg:1.25rem;--font-size-xl:1.5rem;--font-size-xxl:2rem;--font-size-xxxl:3rem;--font-family-display:var(--font-family,sans-serif);--font-family-mono:ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;--form-control-font-family:var(--font-family,sans-serif);--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-none:1;--line-height-tight:1.2;--line-height-normal:1.5;--line-height-loose:1.8;--duration-hover:.2s;--duration-fade:.3s;--duration-slide:.4s;--transition-fast:.15s ease-in-out;--transition-moderate:.3s ease-in-out;--transition-slow:.5s ease-in-out}.calendar{background-color:var(--calendar-background-color);border:1px solid var(--calendar-border-color);border-radius:var(--radius);padding:var(--spacing-16);-webkit-user-select:none;user-select:none;width:280px}.calendar__header{justify-content:space-between;align-items:center;gap:var(--spacing-8);margin-bottom:var(--spacing-16);display:flex}.calendar__month-year{justify-content:center;align-items:center;gap:var(--spacing-4);font-weight:var(--font-weight-medium);color:var(--calendar-header-color);font-size:var(--font-size-md);flex:1;display:flex}.calendar__header-label{color:var(--calendar-header-color);font-weight:var(--font-weight-medium);font-size:var(--font-size-md);padding:var(--spacing-4) var(--spacing-8)}.calendar__header-button{color:var(--calendar-header-color);font-weight:var(--font-weight-medium);font-size:var(--font-size-md);cursor:pointer;padding:var(--spacing-4) var(--spacing-8);border-radius:var(--radius-sm);background:0 0;border:none;transition:background-color .2s}.calendar__header-button:hover{background-color:var(--calendar-day-hover-background-color)}.calendar__nav-button{border:1px solid var(--calendar-border-color);border-radius:var(--radius-sm);color:var(--calendar-header-color);cursor:pointer;background:0 0;justify-content:center;align-items:center;width:32px;height:32px;padding:0;font-size:20px;transition:background-color .2s,border-color .2s;display:flex}.calendar__nav-button:hover:not(:disabled){background-color:var(--calendar-day-hover-background-color);border-color:var(--calendar-day-selected-background-color)}.calendar__nav-button:disabled{opacity:.5;cursor:not-allowed}.calendar__today-section{margin-bottom:var(--spacing-12);justify-content:center;display:flex}.calendar__today-button{border:1px solid var(--calendar-border-color);border-radius:var(--radius-sm);color:var(--calendar-day-selected-background-color);cursor:pointer;padding:var(--spacing-4) var(--spacing-12);font-size:var(--font-size-sm);background:0 0;transition:background-color .2s,border-color .2s}.calendar__today-button:hover{background-color:var(--calendar-day-hover-background-color);border-color:var(--calendar-day-selected-background-color)}.calendar__weekdays{gap:var(--spacing-4);margin-bottom:var(--spacing-8);grid-template-columns:repeat(7,1fr);display:grid}.calendar__weekday{text-align:center;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--calendar-header-color);padding:var(--spacing-4) 0}.calendar__days{gap:var(--spacing-4);flex-direction:column;display:flex}.calendar__week{gap:var(--spacing-4);grid-template-columns:repeat(7,1fr);display:grid}.calendar__day{border-radius:var(--radius-sm);color:var(--calendar-day-color);cursor:pointer;font-size:var(--font-size-sm);padding:var(--spacing-8);text-align:center;aspect-ratio:1;background:0 0;border:1px solid #0000;justify-content:center;align-items:center;transition:background-color .2s,border-color .2s,color .2s;display:flex}.calendar__day:hover:not(:disabled):not(.calendar__day--disabled){background-color:var(--calendar-day-hover-background-color)}.calendar__day--other-month{color:var(--calendar-day-disabled-color);opacity:.4}.calendar__day--selected{background-color:var(--calendar-day-selected-background-color);color:var(--calendar-day-selected-color);border-color:var(--calendar-day-selected-background-color)}.calendar__day--in-range{background-color:var(--calendar-day-hover-background-color);border-color:var(--calendar-day-selected-background-color)}.calendar__day--hover-range{background-color:var(--calendar-day-hover-background-color);opacity:.5}.calendar__day--today{border-color:var(--calendar-day-today-border-color);font-weight:var(--font-weight-medium)}.calendar__day--weekend{color:var(--calendar-day-weekend-color)}.calendar__day--disabled{color:var(--calendar-day-disabled-color);cursor:not-allowed;opacity:.4}.calendar__day--disabled:hover{background-color:#0000}.calendar__years-grid,.calendar__months-grid{gap:var(--spacing-8);padding:var(--spacing-8) 0;grid-template-columns:repeat(3,1fr);display:grid}.calendar__year-item,.calendar__month-item{border-radius:var(--radius-sm);color:var(--calendar-day-color);cursor:pointer;font-size:var(--font-size-sm);padding:var(--spacing-12) var(--spacing-8);text-align:center;background:0 0;border:1px solid #0000;transition:background-color .2s,border-color .2s,color .2s}.calendar__year-item:hover,.calendar__month-item:hover{background-color:var(--calendar-day-hover-background-color)}.calendar__year-item--selected,.calendar__month-item--selected{background-color:var(--calendar-day-selected-background-color);color:var(--calendar-day-selected-color);border-color:var(--calendar-day-selected-background-color)}.calendar__year-item--current,.calendar__month-item--current{border-color:var(--calendar-day-today-border-color);font-weight:var(--font-weight-medium)}

package/dist/components/Calendar/Calendar2.js

@@ -0,0 +1,279 @@
+import './Calendar.css';
+import { Tooltip as f } from "../Tooltip/Tooltip2.js";
+import { addMonths as H, getMonthMatrix as ue, isAfter as _e, isBefore as x, isSameDay as _, isToday as he, isWeekend as me } from "../../helpers/Datetime.js";
+/* empty css         */
+import { useMemo as fe, useState as M } from "react";
+import { Fragment as V, jsx as n, jsxs as h } from "react/jsx-runtime";
+var d = 12, T = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+], ye = [
+  "Sun",
+  "Mon",
+  "Tue",
+  "Wed",
+  "Thu",
+  "Fri",
+  "Sat"
+], ge = [
+  "Mon",
+  "Tue",
+  "Wed",
+  "Thu",
+  "Fri",
+  "Sat",
+  "Sun"
+], Fe = ({ value: r, onChange: m, mode: i = "single", minDate: A, maxDate: v, disabledDates: p, firstDayOfWeek: D = 0, showToday: j = !0, yearOnly: I = !1, className: G = "", currentMonth: R, onMonthChange: c, showHeader: F = !0, rangeStart: J, onRangeStartChange: Y }) => {
+  const [P, u] = M(() => {
+    if (r) {
+      if (r instanceof Date) return new Date(r.getFullYear(), r.getMonth(), 1);
+      if ("start" in r) return new Date(r.start.getFullYear(), r.start.getMonth(), 1);
+      if (Array.isArray(r) && r.length > 0) return new Date(r[0].getFullYear(), r[0].getMonth(), 1);
+    }
+    return new Date((/* @__PURE__ */ new Date()).getFullYear(), (/* @__PURE__ */ new Date()).getMonth(), 1);
+  }), [y, g] = M("days"), [b, S] = M(() => {
+    const e = (R ?? P).getFullYear();
+    return Math.floor(e / d) * d;
+  }), [O, E] = M(null), a = R ?? P, o = J ?? O, B = fe(() => ue(a.getFullYear(), a.getMonth(), D), [a, D]), W = D === 1 ? ge : ye, k = (e) => A && x(e, A) || v && _e(e, v) ? !0 : p ? typeof p == "function" ? p(e) : p.some((t) => _(t, e)) : !1, q = (e) => {
+    if (!r) return !1;
+    if (i === "single" && r instanceof Date) return _(e, r);
+    if (i === "range") {
+      if (o) return _(e, o);
+      if (r && "start" in r) return _(e, r.start) || _(e, r.end);
+    }
+    return i === "multiple" && Array.isArray(r) ? r.some((t) => _(t, e)) : !1;
+  }, z = (e) => {
+    if (i === "range" && r && "start" in r) {
+      const { start: t, end: l } = r, s = e.getTime();
+      return s > t.getTime() && s < l.getTime();
+    }
+    return !1;
+  }, K = (e) => i === "range" && o ? e.getTime() > o.getTime() : !1, L = (e) => e.getMonth() === a.getMonth(), Q = (e) => {
+    if (!k(e)) {
+      if (i === "single") m?.(e);
+      else if (i === "range") if (!o) Y ? Y(e) : (E(e), m?.(void 0));
+      else {
+        const t = x(e, o) ? e : o, l = x(e, o) ? o : e;
+        m?.({
+          start: t,
+          end: l
+        }), Y ? Y(null) : E(null);
+      }
+      else if (i === "multiple") {
+        const t = Array.isArray(r) ? r : [], l = t.findIndex((s) => _(s, e));
+        if (l >= 0) {
+          const s = t.filter((w, N) => N !== l);
+          m?.(s.length > 0 ? s : void 0);
+        } else m?.([...t, e]);
+      }
+    }
+  }, U = () => {
+    const e = H(a, -1);
+    c ? c(e) : u(e);
+  }, X = () => {
+    const e = H(a, 1);
+    c ? c(e) : u(e);
+  }, Z = () => {
+    const e = /* @__PURE__ */ new Date(), t = new Date(e.getFullYear(), e.getMonth(), 1);
+    c ? c(t) : u(t), g("days"), i === "single" && m?.(e);
+  }, C = () => {
+    F && g("months");
+  }, $ = () => {
+    F && (S(Math.floor(a.getFullYear() / d) * d), g("years"));
+  }, ee = (e) => {
+    const t = new Date(a.getFullYear(), e, 1);
+    c ? c(t) : u(t), g("days");
+  }, te = (e) => {
+    const t = new Date(e, a.getMonth(), 1);
+    c ? c(t) : u(t), g("months");
+  }, ne = () => {
+    S(b - d);
+  }, re = () => {
+    S(b + d);
+  }, ae = () => {
+    const e = new Date(a.getFullYear() - 1, a.getMonth(), 1);
+    c ? c(e) : u(e);
+  }, se = () => {
+    const e = new Date(a.getFullYear() + 1, a.getMonth(), 1);
+    c ? c(e) : u(e);
+  }, le = () => {
+    const e = [];
+    for (let t = 0; t < d; t++) e.push(b + t);
+    return e;
+  }, ce = (e) => {
+    const t = ["calendar__day"];
+    return L(e) ? (q(e) && t.push("calendar__day--selected"), z(e) && t.push("calendar__day--in-range"), K(e) && t.push("calendar__day--hover-range")) : t.push("calendar__day--other-month"), he(e) && t.push("calendar__day--today"), me(e) && t.push("calendar__day--weekend"), k(e) && t.push("calendar__day--disabled"), t.join(" ");
+  }, ie = () => y === "years" ? /* @__PURE__ */ h("div", {
+    className: "calendar__header",
+    children: [
+      /* @__PURE__ */ n(f, {
+        title: "Previous years",
+        children: /* @__PURE__ */ n("button", {
+          type: "button",
+          className: "calendar__nav-button",
+          onClick: ne,
+          children: "‹"
+        })
+      }),
+      /* @__PURE__ */ h("div", {
+        className: "calendar__month-year",
+        children: [
+          b,
+          " - ",
+          b + d - 1
+        ]
+      }),
+      /* @__PURE__ */ n(f, {
+        title: "Next years",
+        children: /* @__PURE__ */ n("button", {
+          type: "button",
+          className: "calendar__nav-button",
+          onClick: re,
+          children: "›"
+        })
+      })
+    ]
+  }) : y === "months" ? /* @__PURE__ */ h("div", {
+    className: "calendar__header",
+    children: [
+      /* @__PURE__ */ n(f, {
+        title: "Previous year",
+        children: /* @__PURE__ */ n("button", {
+          type: "button",
+          className: "calendar__nav-button",
+          onClick: ae,
+          children: "‹"
+        })
+      }),
+      /* @__PURE__ */ n("button", {
+        type: "button",
+        className: "calendar__header-button",
+        onClick: $,
+        children: a.getFullYear()
+      }),
+      /* @__PURE__ */ n(f, {
+        title: "Next year",
+        children: /* @__PURE__ */ n("button", {
+          type: "button",
+          className: "calendar__nav-button",
+          onClick: se,
+          children: "›"
+        })
+      })
+    ]
+  }) : /* @__PURE__ */ h("div", {
+    className: "calendar__header",
+    children: [
+      /* @__PURE__ */ n(f, {
+        title: "Previous month",
+        children: /* @__PURE__ */ n("button", {
+          type: "button",
+          className: "calendar__nav-button",
+          onClick: U,
+          children: "‹"
+        })
+      }),
+      /* @__PURE__ */ n("div", {
+        className: "calendar__month-year",
+        children: I ? /* @__PURE__ */ n("span", {
+          className: "calendar__header-label",
+          children: T[a.getMonth()]
+        }) : /* @__PURE__ */ h(V, { children: [/* @__PURE__ */ n("button", {
+          type: "button",
+          className: "calendar__header-button",
+          onClick: C,
+          children: T[a.getMonth()]
+        }), /* @__PURE__ */ n("button", {
+          type: "button",
+          className: "calendar__header-button",
+          onClick: $,
+          children: a.getFullYear()
+        })] })
+      }),
+      /* @__PURE__ */ n(f, {
+        title: "Next month",
+        children: /* @__PURE__ */ n("button", {
+          type: "button",
+          className: "calendar__nav-button",
+          onClick: X,
+          children: "›"
+        })
+      })
+    ]
+  }), oe = () => {
+    const e = le(), t = (/* @__PURE__ */ new Date()).getFullYear(), l = a.getFullYear();
+    return /* @__PURE__ */ n("div", {
+      className: "calendar__years-grid",
+      children: e.map((s) => /* @__PURE__ */ n("button", {
+        type: "button",
+        className: `calendar__year-item ${s === l ? "calendar__year-item--selected" : ""} ${s === t ? "calendar__year-item--current" : ""}`,
+        onClick: () => te(s),
+        children: s
+      }, s))
+    });
+  }, de = () => {
+    const e = (/* @__PURE__ */ new Date()).getMonth(), t = (/* @__PURE__ */ new Date()).getFullYear(), l = a.getMonth(), s = a.getFullYear();
+    return /* @__PURE__ */ n("div", {
+      className: "calendar__months-grid",
+      children: T.map((w, N) => /* @__PURE__ */ n("button", {
+        type: "button",
+        className: `calendar__month-item ${N === l && s === a.getFullYear() ? "calendar__month-item--selected" : ""} ${N === e && t === a.getFullYear() ? "calendar__month-item--current" : ""}`,
+        onClick: () => ee(N),
+        children: w.substring(0, 3)
+      }, w))
+    });
+  };
+  return /* @__PURE__ */ h("div", {
+    className: `calendar ${G}`,
+    children: [
+      F && ie(),
+      y === "years" && oe(),
+      y === "months" && de(),
+      y === "days" && /* @__PURE__ */ h(V, { children: [
+        j && !I && /* @__PURE__ */ n("div", {
+          className: "calendar__today-section",
+          children: /* @__PURE__ */ n("button", {
+            type: "button",
+            className: "calendar__today-button",
+            onClick: Z,
+            children: "Today"
+          })
+        }),
+        /* @__PURE__ */ n("div", {
+          className: "calendar__weekdays",
+          children: W.map((e) => /* @__PURE__ */ n("div", {
+            className: "calendar__weekday",
+            children: e
+          }, e))
+        }),
+        /* @__PURE__ */ n("div", {
+          className: "calendar__days",
+          children: B.map((e, t) => /* @__PURE__ */ n("div", {
+            className: "calendar__week",
+            children: e.map((l, s) => /* @__PURE__ */ n("button", {
+              type: "button",
+              className: ce(l),
+              onClick: () => Q(l),
+              disabled: k(l),
+              title: l.toDateString(),
+              children: l.getDate()
+            }, s))
+          }, t))
+        })
+      ] })
+    ]
+  });
+};
+export {
+  Fe as Calendar
+};

package/dist/components/CalendarHeatmap/CalendarHeatmap.css

@@ -0,0 +1 @@
+.calendar-heatmap{overflow-x:auto}.calendar-heatmap__months,.calendar-heatmap__row{align-items:center;gap:2px;display:flex}.calendar-heatmap__months{margin-bottom:2px}.calendar-heatmap__spacer{flex-shrink:0;width:28px}.calendar-heatmap__month-label{width:12px;min-width:12px;font-size:var(--font-size-xs);color:var(--body-color-muted);white-space:nowrap;overflow:visible}.calendar-heatmap__day-label{width:28px;min-width:28px;font-size:var(--font-size-xs);color:var(--body-color-muted);flex-shrink:0}.calendar-heatmap__cell{border-radius:var(--radius-sm);cursor:default;width:12px;min-width:12px;height:12px;transition:opacity var(--transition-fast)}.calendar-heatmap__cell:hover{opacity:.75}.calendar-heatmap__legend{align-items:center;gap:var(--spacing-4);margin-top:var(--spacing-8);font-size:var(--font-size-xs);color:var(--body-color-muted);justify-content:flex-end;display:flex}.calendar-heatmap__legend-cell{border-radius:var(--radius-sm);width:12px;min-width:12px;height:12px}

package/dist/components/CalendarHeatmap/CalendarHeatmap2.js

@@ -0,0 +1,91 @@
+import './CalendarHeatmap.css';
+/* empty css                */
+import { Fragment as S } from "react";
+import { jsx as n, jsxs as d } from "react/jsx-runtime";
+var f = [
+  "Mon",
+  "",
+  "Wed",
+  "",
+  "Fri",
+  "",
+  ""
+], w = (t) => t === 0 ? "var(--card-background-accent-color)" : t === 1 ? "rgba(136, 132, 216, 0.35)" : t <= 3 ? "rgba(136, 132, 216, 0.65)" : "#8884d8", N = (t) => `${t.getFullYear()}-${String(t.getMonth() + 1).padStart(2, "0")}-${String(t.getDate()).padStart(2, "0")}`, $ = ({ data: t, startDate: h, endDate: u, colorFn: p = w, countLabel: g = "event" }) => {
+  const o = new Date(u ?? /* @__PURE__ */ new Date());
+  o.setHours(0, 0, 0, 0);
+  const c = new Date(h);
+  c.setHours(0, 0, 0, 0);
+  const D = (c.getDay() + 6) % 7;
+  c.setDate(c.getDate() - D);
+  const _ = new Map(t.map((e) => [e.date, e.count])), i = [], l = new Date(c);
+  for (; l <= o; ) {
+    const e = [];
+    for (let a = 0; a < 7; a++) {
+      if (l > o) e.push(null);
+      else {
+        const r = N(l);
+        e.push({
+          dateStr: r,
+          displayDate: l.toLocaleDateString("en-US", {
+            month: "short",
+            day: "numeric"
+          }),
+          count: _.get(r) ?? 0
+        });
+      }
+      l.setDate(l.getDate() + 1);
+    }
+    i.push(e);
+  }
+  const v = i.map((e) => {
+    const a = e.find((m) => m !== null);
+    if (!a) return null;
+    const r = /* @__PURE__ */ new Date(a.dateStr + "T00:00:00");
+    return r.getDate() <= 7 ? r.toLocaleDateString("en-US", { month: "short" }) : null;
+  });
+  return /* @__PURE__ */ d("div", {
+    className: "calendar-heatmap",
+    children: [
+      /* @__PURE__ */ d("div", {
+        className: "calendar-heatmap__months",
+        children: [/* @__PURE__ */ n("div", { className: "calendar-heatmap__spacer" }), v.map((e, a) => /* @__PURE__ */ n("div", {
+          className: "calendar-heatmap__month-label",
+          children: e ?? ""
+        }, a))]
+      }),
+      f.map((e, a) => /* @__PURE__ */ n(S, { children: /* @__PURE__ */ d("div", {
+        className: "calendar-heatmap__row",
+        children: [/* @__PURE__ */ n("div", {
+          className: "calendar-heatmap__day-label",
+          children: e
+        }), i.map((r, m) => {
+          const s = r[a];
+          return /* @__PURE__ */ n("div", {
+            className: "calendar-heatmap__cell",
+            style: { background: s ? p(s.count) : "transparent" },
+            title: s ? `${s.displayDate}: ${s.count} ${g}${s.count !== 1 ? "s" : ""}` : void 0
+          }, m);
+        })]
+      }) }, a)),
+      /* @__PURE__ */ d("div", {
+        className: "calendar-heatmap__legend",
+        children: [
+          /* @__PURE__ */ n("span", { children: "Less" }),
+          [
+            0,
+            1,
+            2,
+            4
+          ].map((e) => /* @__PURE__ */ n("div", {
+            className: "calendar-heatmap__legend-cell",
+            style: { background: p(e) }
+          }, e)),
+          /* @__PURE__ */ n("span", { children: "More" })
+        ]
+      })
+    ]
+  });
+};
+export {
+  $ as CalendarHeatmap
+};

package/dist/components/Card/Card.css

@@ -0,0 +1 @@
+.card{background:var(--card-background-color);-webkit-backdrop-filter:var(--card-backdrop-filter,none);border:var(--spacing-1) solid;border-color:var(--card-border-color);column-gap:var(--spacing-16);padding:var(--spacing-16);border-radius:var(--radius);color:var(--card-color);box-shadow:var(--card-surface-box-shadow,var(--card-box-shadow));flex-direction:column;display:flex;position:relative}.card:hover{border-color:var(--card-hover-border-color)}.card.no-padding{padding:0}.card.is-highlighted{background-color:var(--card-background-accent-color);border-left:var(--spacing-4) solid var(--card-border-accent-color);color:var(--card-accent-color)}.card.card-variant-success{border-left:var(--spacing-4) solid var(--rating-color-success);background-image:var(--card-tint-success-background,radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--rating-color-success) 14%, transparent) 0%, transparent 70%))}.card.card-variant-warning{border-left:var(--spacing-4) solid var(--rating-color-warning);background-image:var(--card-tint-warning-background,radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--rating-color-warning) 14%, transparent) 0%, transparent 70%))}.card.card-variant-danger{border-left:var(--spacing-4) solid var(--rating-color-danger);background-image:var(--card-tint-danger-background,radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--rating-color-danger) 14%, transparent) 0%, transparent 70%))}.card.card-variant-info{border-left:var(--spacing-4) solid var(--rating-color-info);background-image:var(--card-tint-info-background,radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--rating-color-info) 14%, transparent) 0%, transparent 70%))}.card.is-clickable:hover{cursor:pointer}.card h3{margin:0 0 var(--spacing-16) 0;color:var(--card-title-color,inherit);font-family:var(--card-title-font-family,var(--font-family,sans-serif));font-size:var(--card-title-font-size,var(--font-size-md));font-style:var(--card-title-font-style,normal);font-weight:var(--card-title-font-weight,var(--font-weight-bold));letter-spacing:var(--card-title-letter-spacing,normal);text-transform:var(--card-title-text-transform,none);column-gap:var(--spacing-16);flex-direction:row;justify-content:space-between;align-items:center;display:flex}.card h3 .card-title-content{align-items:center;gap:var(--spacing-8);min-width:0;display:inline-flex}.card h3.card-content-hidden{margin:0}.card h3 .opener-button:hover{cursor:pointer}.card h3 .opener-button svg{transition:transform .2s ease-in-out}.card h3 .opener-button.opener-button-extended svg{transform:rotate(180deg)}.card .card-content{height:fit-content;transition:all .5s}.card .card-content.card-content-collapsed{height:0;overflow:hidden}.card .card-footer{background-color:var(--card-footer-background-color);border-radius:0 0 var(--radius) var(--radius)}.card .card-footer.card-footer-collapsed{display:none}@media (width<=768px){.card{padding:var(--spacing-8)}}

package/dist/components/Card/Card2.js

@@ -0,0 +1,47 @@
+import './Card.css';
+import { Icon as m } from "../Icon/Icon2.js";
+import { useComponentEffect as v } from "../../hooks/useComponentEffect.js";
+/* empty css     */
+import { useEffect as g, useState as x } from "react";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+var z = ({ children: f, className: p, footerContent: r, icon: n, isCollapsed: c, isCollapsible: s, isFooterCollapsible: h = !0, isHighlighted: u, noPadding: $, onClick: d, title: o, variant: l = "default" }) => {
+  const [a, i] = x(c || !1), N = v("Card");
+  g(() => {
+    typeof c == "boolean" && i(c);
+  }, [c]);
+  const b = l !== "default" ? `card-variant-${l}` : "";
+  return /* @__PURE__ */ t("div", {
+    className: `card ${p || ""} ${$ ? "no-padding" : ""} ${u ? "is-highlighted" : ""} ${b} ${d ? "is-clickable" : ""} ${N}`,
+    onClick: d,
+    children: [
+      (o || s) && /* @__PURE__ */ t("h3", {
+        className: `${a ? "card-content-hidden" : ""}`,
+        children: [/* @__PURE__ */ t("span", {
+          className: "card-title-content",
+          children: [n && /* @__PURE__ */ e(m, { name: n }), o]
+        }), s && /* @__PURE__ */ e("span", {
+          className: "collapsible-button",
+          onClick: () => i(!a),
+          children: /* @__PURE__ */ e("span", {
+            className: `opener-button ${a ? "opener-button-extended" : ""}`,
+            children: /* @__PURE__ */ e(m, {
+              name: "caret-up",
+              size: "lg"
+            })
+          })
+        })]
+      }),
+      /* @__PURE__ */ e("div", {
+        className: `card-content ${a ? "card-content-collapsed" : ""}`,
+        children: f
+      }),
+      r && /* @__PURE__ */ e("div", {
+        className: `card-footer ${a && h ? "card-footer-collapsed" : ""}`,
+        children: r
+      })
+    ]
+  });
+};
+export {
+  z as Card
+};

package/dist/components/Checkbox/Checkbox.css

@@ -0,0 +1 @@
+.checkbox-wrapper{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:flex-start;display:inline-flex}.checkbox-wrapper--disabled{cursor:not-allowed;opacity:.6}.checkbox-input{opacity:0;pointer-events:none;z-index:-1;border:none;width:0;height:0;margin:0;padding:0;position:absolute}.checkbox-input:focus+.checkbox-label .checkbox-box{border-color:var(--form-control-selection-background-color);box-shadow:0 0 0 var(--spacing-2) var(--form-control-focus-ring);outline:none}.checkbox-input:checked+.checkbox-label .checkbox-box{background-color:var(--form-control-selection-background-color);border-color:var(--form-control-selection-background-color)}.checkbox-input:checked+.checkbox-label .checkbox-box:after{opacity:1;transform:translate(-50%,-50%)scale(1)}.checkbox-input:indeterminate+.checkbox-label .checkbox-box{background-color:var(--form-control-selection-background-color);border-color:var(--form-control-selection-background-color)}.checkbox-input:indeterminate+.checkbox-label .checkbox-box:after{content:"";background-color:var(--form-control-selection-color);opacity:1;border-radius:2px;width:10px;height:2px;transition:all .2s;transform:translate(-50%,-50%)scale(1)}.checkbox-input:disabled+.checkbox-label{cursor:not-allowed}.checkbox-label{align-items:flex-start;gap:var(--spacing-8);cursor:pointer;min-height:var(--checkbox-size);display:flex}.checkbox-box{width:var(--checkbox-size);height:var(--checkbox-size);min-width:var(--checkbox-size);border:var(--spacing-1) solid var(--form-control-selection-border-color);border-radius:var(--radius-sm);background-color:#0000;justify-content:center;align-items:center;transition:all .2s;display:flex;position:relative}.checkbox-box:hover{border-color:var(--form-control-selection-background-color)}.checkbox-box:after{content:"✓";color:var(--form-control-selection-color);font-size:var(--font-size-xs);opacity:0;font-weight:700;line-height:1;transition:all .2s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(0)}.checkbox-text{align-items:center;gap:var(--spacing-6);color:var(--form-control-selection-label-color);font-size:var(--font-size-sm);margin-top:var(--spacing-2);line-height:1.4;display:inline-flex}

package/dist/components/Checkbox/Checkbox2.js

@@ -0,0 +1,35 @@
+import './Checkbox.css';
+import { Icon as i } from "../Icon/Icon2.js";
+/* empty css         */
+import { useEffect as f, useId as b, useRef as u } from "react";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+var g = ({ checked: c = !1, onChange: p, label: r, icon: s, disabled: o = !1, id: m, indeterminate: n = !1 }) => {
+  const x = b(), l = m || x, a = u(null);
+  return f(() => {
+    a.current && (a.current.indeterminate = n && !c);
+  }, [n, c]), /* @__PURE__ */ t("div", {
+    className: `checkbox-wrapper ${o ? "checkbox-wrapper--disabled" : ""}`,
+    children: [/* @__PURE__ */ e("input", {
+      type: "checkbox",
+      id: l,
+      className: "checkbox-input",
+      ref: a,
+      checked: c,
+      onChange: (h) => p?.(h.target.checked),
+      disabled: o
+    }), /* @__PURE__ */ t("label", {
+      htmlFor: l,
+      className: "checkbox-label",
+      children: [/* @__PURE__ */ e("span", { className: "checkbox-box" }), (s || r) && /* @__PURE__ */ t("span", {
+        className: "checkbox-text",
+        children: [s && /* @__PURE__ */ e(i, { name: s }), r && /* @__PURE__ */ e("span", {
+          className: "checkbox-text-label",
+          children: r
+        })]
+      })]
+    })]
+  });
+};
+export {
+  g as Checkbox
+};

package/dist/components/Chip/Chip.css

@@ -0,0 +1 @@
+.chip{--chip-color:var(--body-accent-color);justify-content:center;align-items:center;gap:var(--spacing-8);border:var(--spacing-1) solid var(--delimiter-color);max-width:100%;color:var(--body-color);cursor:pointer;font-family:inherit;font-size:var(--font-size-sm);background:0 0;border-radius:999px;transition:background .2s,border-color .2s,color .2s;display:inline-flex}.chip:hover:not(:disabled){border-color:var(--chip-hover-border-color,var(--chip-color));background:var(--chip-hover-background-color,var(--card-background-accent-color));color:var(--chip-hover-color,var(--body-color-accent))}.chip:disabled{cursor:not-allowed;opacity:.6}.chip--selected,.chip--selected:hover:not(:disabled){border-color:var(--chip-selected-border-color,var(--body-accent-color));background:var(--chip-selected-background-color,var(--card-background-accent-color));color:var(--chip-selected-color,var(--body-accent-color))}.chip--plain{background:0 0;border-color:#0000}.chip--default{--chip-color:var(--body-accent-color)}.chip--info{--chip-color:var(--button-info-background-color)}.chip--success{--chip-color:var(--button-success-background-color)}.chip--warning{--chip-color:var(--button-warning-background-color)}.chip--danger{--chip-color:var(--button-danger-background-color)}.chip--custom.chip--selected,.chip--info.chip--selected,.chip--success.chip--selected,.chip--warning.chip--selected,.chip--danger.chip--selected,.chip--custom.chip--selected:hover:not(:disabled),.chip--info.chip--selected:hover:not(:disabled),.chip--success.chip--selected:hover:not(:disabled),.chip--warning.chip--selected:hover:not(:disabled),.chip--danger.chip--selected:hover:not(:disabled){border-color:var(--chip-color);background:color-mix(in srgb, var(--chip-color) 18%, transparent);color:var(--chip-color)}.chip--custom{background:color-mix(in srgb, var(--chip-color) 22%, transparent);color:var(--body-color)}.chip--custom:hover:not(:disabled){background:color-mix(in srgb, var(--chip-color) 32%, transparent)}.chip--custom.chip--selected,.chip--custom.chip--selected:hover:not(:disabled){background:var(--chip-color);border-color:var(--chip-color);color:var(--button-default-color,white)}.chip--xsmall{min-height:var(--spacing-20);gap:var(--spacing-4);padding:var(--spacing-2) var(--spacing-8);font-size:var(--font-size-xxs)}.chip--small{min-height:var(--spacing-24);gap:var(--spacing-4);padding:var(--spacing-4) var(--spacing-12);font-size:var(--font-size-xs)}.chip--medium{min-height:var(--spacing-32);gap:var(--spacing-8);padding:var(--spacing-8) 14px;font-size:var(--font-size-sm)}.chip--large{min-height:var(--spacing-40);gap:var(--spacing-12);padding:var(--spacing-12) var(--spacing-20);font-size:var(--font-size-md)}.chip__swatch{background-color:var(--chip-color);border-radius:999px;flex-shrink:0;width:10px;height:10px}.chip__label{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.chip__count{color:var(--body-color-muted);font-size:var(--font-size-xs);flex-shrink:0}.chip>.icon{flex-shrink:0}.chip--selected .chip__count{color:var(--chip-selected-count-color,var(--body-color-muted))}.chip--xsmall .chip__swatch{width:var(--spacing-4);height:var(--spacing-4)}.chip--small .chip__swatch{width:var(--spacing-8);height:var(--spacing-8)}.chip--large .chip__swatch{width:var(--spacing-12);height:var(--spacing-12)}.chip--xsmall .chip__count{font-size:var(--font-size-xxs)}.chip--large .chip__count{font-size:var(--font-size-sm)}

package/dist/components/Chip/Chip2.js

@@ -0,0 +1,31 @@
+import './Chip.css';
+import { Icon as d } from "../Icon/Icon2.js";
+/* empty css     */
+import "react";
+import { jsx as a, jsxs as f } from "react/jsx-runtime";
+var v = ({ children: p, className: c = "", color: s, count: e, disabled: t = !1, icon: i, onClick: m, selected: h = !1, size: l = "medium", title: o, type: r = "button", variant: n = "default" }) => /* @__PURE__ */ f("button", {
+  className: `chip chip--${l} ${s ? "chip--custom" : `chip--${n}`} ${h ? "chip--selected" : ""} ${c}`,
+  disabled: t,
+  onClick: m,
+  style: s ? { "--chip-color": s } : void 0,
+  title: o,
+  type: r,
+  children: [
+    s && /* @__PURE__ */ a("span", {
+      className: "chip__swatch",
+      style: { backgroundColor: s }
+    }),
+    i && /* @__PURE__ */ a(d, { name: i }),
+    /* @__PURE__ */ a("span", {
+      className: "chip__label",
+      children: p
+    }),
+    e !== void 0 && /* @__PURE__ */ a("span", {
+      className: "chip__count",
+      children: e
+    })
+  ]
+});
+export {
+  v as Chip
+};

package/dist/components/CollapsibleSection/CollapsibleSection.css

@@ -0,0 +1 @@
+.collapsible-section{gap:var(--spacing-16);flex-direction:column;flex-shrink:0;width:100%;display:flex}.collapsible-section__collapsed{gap:0}.collapsible-section__header{align-items:center;column-gap:var(--spacing-12);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}.collapsible-section__header:hover{opacity:.8}.collapsible-section__header--inline{cursor:default}.collapsible-section__header--inline:hover{opacity:1}.collapsible-section__header--size-small .collapsible-section__label,.collapsible-section__header--size-small .collapsible-section__icon .icon{font-size:var(--font-size-xs)}.collapsible-section__inline-toggle{align-items:center;gap:var(--spacing-8);padding:var(--spacing-4) var(--spacing-8);color:inherit;font:inherit;cursor:pointer;border-radius:var(--radius-sm);transition:background-color var(--transition-fast);background:0 0;border:none;display:inline-flex}.collapsible-section__inline-toggle:hover{background-color:var(--list-hover-background-color)}.collapsible-section__label{font-weight:var(--font-weight-medium)}.collapsible-section__icon{justify-content:center;align-items:center;transition:transform .2s ease-in-out;display:flex}.collapsible-section__icon--collapsed{transform:scaleY(-1)}.collapsible-section__right-details{text-align:right;flex:1}.collapsible-section__header--space-between.collapsible-section__header{justify-content:space-between}.collapsible-section__header--space-between .collapsible-section__inline-toggle{flex:1;justify-content:space-between}.collapsible-section__header--swap.collapsible-section__header{flex-direction:row-reverse}.collapsible-section__header--swap.collapsible-section__header .collapsible-section__right-details{text-align:left}.collapsible-section__header--highlight{background-color:var(--card-background-accent-color);padding:var(--spacing-16);border-radius:var(--radius)}.collapsible-section__header--accent{color:var(--body-accent-color)}.collapsible-section__header--variant-success{color:var(--rating-color-success)}.collapsible-section__header--variant-warning{color:var(--rating-color-warning)}.collapsible-section__header--variant-info{color:var(--rating-color-info)}.collapsible-section__header--variant-danger{color:var(--rating-color-danger)}.collapsible-section__header--tint-default,.collapsible-section__header--tint-success,.collapsible-section__header--tint-warning,.collapsible-section__header--tint-info,.collapsible-section__header--tint-danger{padding:var(--spacing-8) var(--spacing-12);border-radius:var(--radius-sm)}.collapsible-section__header--tint-default{background-color:var(--card-background-accent-color)}.collapsible-section__header--tint-success{background-color:color-mix(in srgb, var(--rating-color-success) 12%, transparent)}.collapsible-section__header--tint-warning{background-color:color-mix(in srgb, var(--rating-color-warning) 12%, transparent)}.collapsible-section__header--tint-info{background-color:color-mix(in srgb, var(--rating-color-info) 12%, transparent)}.collapsible-section__header--tint-danger{background-color:color-mix(in srgb, var(--rating-color-danger) 12%, transparent)}.collapsible-section__content{opacity:1;gap:var(--spacing-12);flex-direction:column;height:fit-content;transition:height .3s ease-in-out,opacity .3s ease-in-out,padding .3s ease-in-out;display:flex;overflow:hidden}.collapsible-section__content--collapsed{opacity:0;height:0}.collapsible-section--with-card{background:var(--card-background-color);border:1px solid var(--card-border-color);border-radius:var(--radius);box-shadow:var(--card-box-shadow);gap:0;overflow:hidden}.collapsible-section--with-card>.collapsible-section__header{padding:var(--spacing-8) var(--spacing-12);background:var(--card-background-accent-color);border-bottom:1px solid var(--delimiter-color)}.collapsible-section--with-card>.collapsible-section__header.collapsible-section__header--tint-success{background-color:color-mix(in srgb, var(--rating-color-success) 12%, transparent)}.collapsible-section--with-card>.collapsible-section__header.collapsible-section__header--tint-warning{background-color:color-mix(in srgb, var(--rating-color-warning) 12%, transparent)}.collapsible-section--with-card>.collapsible-section__header.collapsible-section__header--tint-info{background-color:color-mix(in srgb, var(--rating-color-info) 12%, transparent)}.collapsible-section--with-card>.collapsible-section__header.collapsible-section__header--tint-danger{background-color:color-mix(in srgb, var(--rating-color-danger) 12%, transparent)}.collapsible-section--with-card>.collapsible-section__content{padding:var(--spacing-12)}.collapsible-section--with-card>.collapsible-section__content.collapsible-section__content--collapsed{padding-top:0;padding-bottom:0}@media (width<=768px){.collapsible-section{gap:var(--spacing-8)}}

package/dist/components/CollapsibleSection/CollapsibleSection2.js

@@ -0,0 +1,68 @@
+import './CollapsibleSection.css';
+import { Icon as l } from "../Icon/Icon2.js";
+/* empty css                   */
+import { useState as R } from "react";
+import { Fragment as S, jsx as e, jsxs as a } from "react/jsx-runtime";
+var E = ({ children: $, className: v = "", defaultCollapsed: C = !1, icon: c, isCollapsed: p, onToggle: N, rightDetails: _, title: o, toggleAccent: u, toggleHighlight: f, toggleMiddleIcon: i, toggleSize: r, toggleSpaceBetween: w, toggleSwap: k, toggleTint: d = "plain", toggleVariant: n, withCard: x = !1 }) => {
+  const [F, j] = R(C), b = p !== void 0, s = b ? p : F, h = () => {
+    const m = !s;
+    b || j(m), N?.(m);
+  }, t = !!_;
+  return /* @__PURE__ */ a("div", {
+    className: `collapsible-section ${x ? "collapsible-section--with-card" : ""} ${v} ${s ? "collapsible-section__collapsed" : ""}`,
+    children: [o && /* @__PURE__ */ e("div", {
+      className: `collapsible-section__header ${t ? "" : "collapsible-section__header--inline"} ${w ? "collapsible-section__header--space-between" : ""} ${k ? "collapsible-section__header--swap" : ""} ${f ? "collapsible-section__header--highlight" : ""} ${u ? "collapsible-section__header--accent" : ""} ${r ? `collapsible-section__header--size-${r}` : ""} ${n ? `collapsible-section__header--variant-${n}` : ""} ${d !== "plain" ? `collapsible-section__header--tint-${d}` : ""}`,
+      onClick: t ? h : void 0,
+      children: t ? /* @__PURE__ */ a(S, { children: [
+        /* @__PURE__ */ a("div", {
+          className: "collapsible-section__label",
+          children: [
+            c && /* @__PURE__ */ e(l, {
+              name: c,
+              variant: n
+            }),
+            " ",
+            o
+          ]
+        }),
+        i && /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(l, { name: i }) }),
+        /* @__PURE__ */ e("span", {
+          className: `collapsible-section__icon ${s ? "collapsible-section__icon--collapsed" : ""}`,
+          children: /* @__PURE__ */ e(l, { name: "caret-up" })
+        }),
+        /* @__PURE__ */ e("span", {
+          className: "collapsible-section__right-details",
+          children: _
+        })
+      ] }) : /* @__PURE__ */ a("button", {
+        type: "button",
+        className: "collapsible-section__inline-toggle",
+        onClick: h,
+        children: [
+          /* @__PURE__ */ a("span", {
+            className: "collapsible-section__label",
+            children: [
+              c && /* @__PURE__ */ e(l, {
+                name: c,
+                variant: n
+              }),
+              " ",
+              o
+            ]
+          }),
+          i && /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(l, { name: i }) }),
+          /* @__PURE__ */ e("span", {
+            className: `collapsible-section__icon ${s ? "collapsible-section__icon--collapsed" : ""}`,
+            children: /* @__PURE__ */ e(l, { name: "caret-up" })
+          })
+        ]
+      })
+    }), /* @__PURE__ */ e("div", {
+      className: `collapsible-section__content ${s ? "collapsible-section__content--collapsed" : ""}`,
+      children: $
+    })]
+  });
+};
+export {
+  E as CollapsibleSection
+};

package/dist/components/ColorPicker/ColorPicker.css

@@ -0,0 +1 @@
+.color-picker{gap:var(--spacing-12);border:1px solid var(--delimiter-color);border-radius:var(--radius);padding:var(--spacing-16);background:var(--card-background-color);flex-direction:column;width:320px;display:flex}.color-picker__preview{border-radius:var(--radius);border:1px solid var(--delimiter-color);width:100%;height:40px}.color-picker__controls{gap:var(--spacing-12);flex-direction:column;display:flex}.color-picker__sv{border-radius:var(--radius);cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:180px;position:relative;overflow:hidden}.color-picker__sv-white,.color-picker__sv-black{position:absolute;inset:0}.color-picker__sv-white{background:linear-gradient(90deg,#fff,#fff0)}.color-picker__sv-black{background:linear-gradient(#0000,#000)}.color-picker__sv-handle{border:2px solid #fff;border-radius:50%;width:12px;height:12px;position:absolute;transform:translate(-6px,-6px);box-shadow:0 0 0 1px #0000004d}.color-picker__slider input[type=range]{width:100%}.color-picker__mode-toggle{gap:var(--spacing-8);display:flex}.color-picker__mode-toggle .button{padding:6px 10px}.color-picker__mode-toggle .button.is-active{border:1px solid var(--body-accent-color);color:var(--body-accent-color)}.color-picker__fields{gap:var(--spacing-8);grid-template-columns:1fr;display:grid}.color-picker__fields .input-text-wrapper,.color-picker__fields .input-number-wrapper{width:100%}.color-picker__fields--rgb,.color-picker__fields--hsl,.color-picker__fields--hex{grid-template-columns:repeat(3,1fr)}.color-picker__fields--hex .input-text-wrapper{grid-column:span 3}