@memobit/libs 2.1.0 → 3.1.0

package/dist/components/Accordion/Accordion.css

@@ -0,0 +1 @@
+.accordion{gap:var(--spacing-8);flex-direction:column;display:flex}.accordion-item{background-color:var(--card-background-color);border:1px solid var(--border-color);border-radius:var(--radius-sm);transition:border-color .2s;overflow:hidden}.accordion-item:hover:not(.accordion-item--disabled){border-color:var(--body-accent-color)}.accordion-item__header{justify-content:space-between;align-items:center;gap:var(--spacing-12);width:100%;padding:var(--spacing-16);background-color:var(--card-background-color);cursor:pointer;text-align:left;border:none;transition:background-color .2s;display:flex}.accordion-item__header:hover:not(:disabled){background-color:var(--card-background-accent-color)}.accordion-item__header:disabled{cursor:not-allowed;opacity:.6}.accordion-item__title{align-items:center;gap:var(--spacing-8);color:var(--body-color);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);flex:1;display:flex}.accordion-item__icon{color:var(--body-color-muted);justify-content:center;align-items:center;transition:transform .3s;display:flex}.accordion-item__icon svg{display:block}.accordion-item--expanded .accordion-item__icon{transform:rotate(180deg)}.accordion-item--expanded .accordion-item__content-wrapper{opacity:1}.accordion-item--disabled{opacity:.6;pointer-events:none}.accordion-item__content-wrapper{opacity:0;max-height:0;transition:max-height .3s,opacity .3s;overflow:hidden}.accordion-item__content{padding:var(--spacing-16);padding-top:var(--spacing-8);color:var(--body-color);font-size:var(--font-size-sm);line-height:1.6}.accordion-item__content p{margin:0 0 var(--spacing-12) 0}.accordion-item__content p:last-child{margin-bottom:0}.accordion-item__content ul,.accordion-item__content ol{margin:0 0 var(--spacing-12) 0;padding-left:var(--spacing-24)}.accordion-item__content ul:last-child,.accordion-item__content ol:last-child{margin-bottom:0}.accordion-item__content li{margin-bottom:var(--spacing-4)}.accordion-item__content li:last-child{margin-bottom:0}

package/dist/components/Accordion/Accordion2.js

@@ -0,0 +1,79 @@
+import './Accordion.css';
+import { Icon as u } from "../Icon/Icon2.js";
+/* empty css          */
+import { useEffect as g, useRef as p, useState as _ } from "react";
+import { jsx as i, jsxs as h } from "react/jsx-runtime";
+var b = ({ items: o, allowMultiple: l = !1, defaultExpanded: a = [], onChange: d, className: c = "" }) => {
+  const [t, m] = _(a), s = (e) => {
+    if (o.find((n) => n.id === e)?.disabled) return;
+    let r;
+    l ? r = t.includes(e) ? t.filter((n) => n !== e) : [...t, e] : r = t.includes(e) ? [] : [e], m(r), d?.(r);
+  };
+  return /* @__PURE__ */ i("div", {
+    className: `accordion ${c}`,
+    children: o.map((e) => {
+      const r = t.includes(e.id);
+      return /* @__PURE__ */ i(v, {
+        id: e.id,
+        title: e.title,
+        icon: e.icon,
+        content: e.content,
+        isExpanded: r,
+        disabled: e.disabled,
+        onToggle: s
+      }, e.id);
+    })
+  });
+}, v = ({ id: o, title: l, icon: a, content: d, isExpanded: c, disabled: t = !1, onToggle: m }) => {
+  const s = p(null), e = p(!0);
+  return g(() => {
+    const n = s.current;
+    if (n) {
+      if (e.current) {
+        e.current = !1, n.style.maxHeight = c ? "none" : "0";
+        return;
+      }
+      if (c) {
+        n.style.maxHeight = `${n.scrollHeight}px`;
+        const f = (x) => {
+          x.propertyName === "max-height" && (n.style.maxHeight = "none");
+        };
+        return n.addEventListener("transitionend", f), () => n.removeEventListener("transitionend", f);
+      }
+      n.style.maxHeight = `${n.scrollHeight}px`, n.offsetHeight, n.style.maxHeight = "0";
+    }
+  }, [c]), /* @__PURE__ */ h("div", {
+    className: `accordion-item ${c ? "accordion-item--expanded" : ""} ${t ? "accordion-item--disabled" : ""}`,
+    children: [/* @__PURE__ */ h("button", {
+      type: "button",
+      className: "accordion-item__header",
+      onClick: () => {
+        t || m(o);
+      },
+      disabled: t,
+      children: [/* @__PURE__ */ h("span", {
+        className: "accordion-item__title",
+        children: [a && /* @__PURE__ */ i(u, { name: a }), /* @__PURE__ */ i("span", {
+          className: "accordion-item__title-text",
+          children: l
+        })]
+      }), /* @__PURE__ */ i("span", {
+        className: "accordion-item__icon",
+        children: /* @__PURE__ */ i(u, {
+          name: "caret-down",
+          size: "md"
+        })
+      })]
+    }), /* @__PURE__ */ i("div", {
+      ref: s,
+      className: "accordion-item__content-wrapper",
+      children: /* @__PURE__ */ i("div", {
+        className: "accordion-item__content",
+        children: d
+      })
+    })]
+  });
+};
+export {
+  b as Accordion
+};

package/dist/components/AlertDialog/AlertDialog.css

@@ -0,0 +1 @@
+.alert-dialog__body{padding:var(--spacing-16) var(--spacing-24);color:var(--modal-body-color)}.alert-dialog__body p{margin:0;line-height:1.5}

package/dist/components/AlertDialog/AlertDialog2.js

@@ -0,0 +1,26 @@
+import './AlertDialog.css';
+import { Modal as t } from "../Modal/Modal2.js";
+/* empty css            */
+import "react";
+import { jsx as o } from "react/jsx-runtime";
+var k = ({ isOpen: e = !1, message: i, primary: l, title: a }) => /* @__PURE__ */ o(t, {
+  isOpen: e,
+  title: a,
+  onClose: l?.onClick ? () => l.onClick() : void 0,
+  size: "small",
+  className: "alert-dialog",
+  primary: {
+    variant: l?.variant || "danger",
+    icon: l?.icon || "checkmark",
+    onClick: l?.onClick,
+    disabled: l?.disabled,
+    text: l?.text || "OK"
+  },
+  children: /* @__PURE__ */ o("div", {
+    className: "alert-dialog__body",
+    children: /* @__PURE__ */ o("p", { children: i })
+  })
+});
+export {
+  k as AlertDialog
+};

package/dist/components/AnalogClock/AnalogClock.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}.analog-clock{align-items:center;gap:var(--spacing-12);flex-direction:column;display:flex}.analog-clock--disabled{opacity:.5;pointer-events:none}.analog-clock__header{justify-content:center;align-items:center;gap:var(--spacing-12);display:flex}.analog-clock__readout{align-items:center;gap:var(--spacing-2);display:flex}.analog-clock__segment{border-radius:var(--radius-sm);color:var(--calendar-day-color);cursor:pointer;font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);padding:var(--spacing-4) var(--spacing-8);transition:background-color var(--transition-fast), color var(--transition-fast);background-color:#0000;border:none;line-height:1}.analog-clock__segment:hover:not(:disabled){background-color:var(--calendar-day-hover-background-color)}.analog-clock__segment--active{background-color:var(--calendar-day-selected-background-color);color:var(--calendar-day-selected-color)}.analog-clock__segment:disabled{cursor:not-allowed}.analog-clock__separator{color:var(--calendar-day-disabled-color);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);line-height:1}.analog-clock__period{gap:var(--spacing-2);flex-direction:column;display:flex}.analog-clock__period-button{border:var(--spacing-1) solid var(--calendar-border-color);border-radius:var(--radius-sm);color:var(--calendar-day-color);cursor:pointer;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);padding:var(--spacing-4) var(--spacing-8);transition:background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);background-color:#0000;line-height:1}.analog-clock__period-button:hover:not(:disabled){border-color:var(--calendar-day-selected-background-color)}.analog-clock__period-button--active{background-color:var(--calendar-day-selected-background-color);border-color:var(--calendar-day-selected-background-color);color:var(--calendar-day-selected-color)}.analog-clock__period-button:disabled{cursor:not-allowed}.analog-clock__dial{cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;outline:none}.analog-clock__dial:focus-visible .analog-clock__face{stroke:var(--calendar-day-selected-background-color);stroke-width:2px}.analog-clock__face{fill:var(--datepicker-input-background-color);stroke:var(--calendar-border-color);stroke-width:1px}.analog-clock__tick{stroke:var(--calendar-day-disabled-color);stroke-width:1px}.analog-clock__tick--major{stroke:var(--calendar-day-color);stroke-width:2px}.analog-clock__hand{stroke:var(--calendar-day-selected-background-color);stroke-width:2px}.analog-clock__knob,.analog-clock__pivot{fill:var(--calendar-day-selected-background-color)}.analog-clock__number{fill:var(--calendar-day-color);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);pointer-events:none;-webkit-user-select:none;user-select:none}.analog-clock__number--inner{fill:var(--calendar-day-weekend-color);font-size:var(--font-size-xs)}.analog-clock__number--selected{fill:var(--calendar-day-selected-color);font-weight:var(--font-weight-semibold)}

package/dist/components/AnalogClock/AnalogClock2.js

@@ -0,0 +1,293 @@
+import './AnalogClock.css';
+/* empty css            */
+import { useMemo as b, useRef as K, useState as nn } from "react";
+import { Fragment as rn, jsx as u, jsxs as m } from "react/jsx-runtime";
+var p = (r) => r.toString().padStart(2, "0"), N = (r, g, h) => {
+  const k = (h - 90) * Math.PI / 180;
+  return {
+    x: r + g * Math.cos(k),
+    y: r + g * Math.sin(k)
+  };
+}, en = (r) => r === 0 || r > 12, an = ({ value: r, onChange: g, format: h = "24h", withSeconds: k = !1, minuteStep: A = 1, secondStep: w = 1, size: d = 232, disabled: l = !1, showHeader: q = !0, autoAdvance: E = !0, mode: D, onModeChange: L, className: X = "" }) => {
+  const [Y, G] = nn("hours"), I = K(null), M = K(!1), s = D ?? Y, f = r.hours >= 12, e = b(() => {
+    const n = d / 2, t = d * 0.078, c = n - t - d * 0.018, a = c - t * 1.85;
+    return {
+      center: n,
+      knobRadius: t,
+      outerRadius: c,
+      innerRadius: a,
+      ringThreshold: (c + a) / 2
+    };
+  }, [d]), y = (n) => {
+    D === void 0 && G(n), L?.(n);
+  }, C = () => {
+    if (E) {
+      if (s === "hours") {
+        y("minutes");
+        return;
+      }
+      s === "minutes" && k && y("seconds");
+    }
+  }, J = b(() => {
+    if (s === "hours") {
+      if (h === "12h") return Array.from({ length: 12 }, (a, i) => {
+        const o = i + 1;
+        return {
+          degrees: o * 30,
+          inner: !1,
+          label: `${o}`,
+          selected: (r.hours % 12 || 12) === o,
+          value: o
+        };
+      });
+      const t = Array.from({ length: 12 }, (a, i) => {
+        const o = i + 1;
+        return {
+          degrees: o * 30,
+          inner: !1,
+          label: `${o}`,
+          selected: r.hours === o,
+          value: o
+        };
+      }), c = Array.from({ length: 12 }, (a, i) => {
+        const o = i === 0 ? 0 : i + 12;
+        return {
+          degrees: i * 30,
+          inner: !0,
+          label: p(o),
+          selected: r.hours === o,
+          value: o
+        };
+      });
+      return [...t, ...c];
+    }
+    const n = s === "minutes" ? r.minutes : r.seconds;
+    return Array.from({ length: 12 }, (t, c) => {
+      const a = c * 5;
+      return {
+        degrees: a * 6,
+        inner: !1,
+        label: p(a),
+        selected: n === a,
+        value: a
+      };
+    });
+  }, [
+    s,
+    h,
+    r.hours,
+    r.minutes,
+    r.seconds
+  ]), j = b(() => s === "hours" ? {
+    degrees: r.hours % 12 * 30,
+    radius: h === "24h" && en(r.hours) ? e.innerRadius : e.outerRadius
+  } : {
+    degrees: (s === "minutes" ? r.minutes : r.seconds) * 6,
+    radius: e.outerRadius
+  }, [
+    s,
+    h,
+    e.innerRadius,
+    e.outerRadius,
+    r.hours,
+    r.minutes,
+    r.seconds
+  ]), R = N(e.center, j.radius, j.degrees), O = (n, t) => {
+    const c = I.current?.getBoundingClientRect();
+    if (!c || c.width === 0) return;
+    const a = d / c.width, i = (n - c.left) * a - e.center, o = (t - c.top) * a - e.center, z = Math.sqrt(i * i + o * o);
+    let x = Math.atan2(i, -o) * 180 / Math.PI;
+    if (x < 0 && (x += 360), s === "hours") {
+      const _ = Math.round(x / 30) % 12;
+      if (h === "12h") {
+        const F = _ === 0 ? 12 : _;
+        return {
+          ...r,
+          hours: f ? F % 12 + 12 : F % 12
+        };
+      }
+      const v = z < e.ringThreshold ? _ === 0 ? 0 : _ + 12 : _ === 0 ? 12 : _;
+      return {
+        ...r,
+        hours: v
+      };
+    }
+    const U = s === "minutes" ? A : w, B = Math.round(Math.round(x / 6) / U) * U % 60;
+    return s === "minutes" ? {
+      ...r,
+      minutes: B
+    } : {
+      ...r,
+      seconds: B
+    };
+  }, P = (n) => {
+    const t = O(n.clientX, n.clientY);
+    t && g(t);
+  }, Q = (n) => {
+    l || (M.current = !0, n.currentTarget.setPointerCapture(n.pointerId), P(n));
+  }, S = (n) => {
+    l || !M.current || P(n);
+  }, V = (n) => {
+    l || !M.current || (M.current = !1, n.currentTarget.releasePointerCapture(n.pointerId), P(n), C());
+  }, H = (n) => {
+    if (s === "hours") {
+      if (h === "12h") {
+        const t = ((r.hours % 12 || 12) - 1 + n + 12) % 12 + 1;
+        g({
+          ...r,
+          hours: f ? t % 12 + 12 : t % 12
+        });
+        return;
+      }
+      g({
+        ...r,
+        hours: (r.hours + n + 24) % 24
+      });
+      return;
+    }
+    if (s === "minutes") {
+      g({
+        ...r,
+        minutes: (r.minutes + n * A + 60) % 60
+      });
+      return;
+    }
+    g({
+      ...r,
+      seconds: (r.seconds + n * w + 60) % 60
+    });
+  }, W = (n) => {
+    if (!l) {
+      if (n.key === "ArrowUp" || n.key === "ArrowRight") {
+        n.preventDefault(), H(1);
+        return;
+      }
+      if (n.key === "ArrowDown" || n.key === "ArrowLeft") {
+        n.preventDefault(), H(-1);
+        return;
+      }
+      (n.key === "Enter" || n.key === " ") && (n.preventDefault(), C());
+    }
+  }, T = (n) => {
+    l || n === f || g({
+      ...r,
+      hours: n ? r.hours % 12 + 12 : r.hours % 12
+    });
+  }, $ = (n) => `analog-clock__segment${s === n ? " analog-clock__segment--active" : ""}`, Z = h === "12h" ? r.hours % 12 || 12 : r.hours;
+  return /* @__PURE__ */ m("div", {
+    className: `analog-clock${l ? " analog-clock--disabled" : ""} ${X}`.trim(),
+    children: [q && /* @__PURE__ */ m("div", {
+      className: "analog-clock__header",
+      children: [/* @__PURE__ */ m("div", {
+        className: "analog-clock__readout",
+        children: [
+          /* @__PURE__ */ u("button", {
+            type: "button",
+            className: $("hours"),
+            disabled: l,
+            onClick: () => y("hours"),
+            children: p(Z)
+          }),
+          /* @__PURE__ */ u("span", {
+            className: "analog-clock__separator",
+            children: ":"
+          }),
+          /* @__PURE__ */ u("button", {
+            type: "button",
+            className: $("minutes"),
+            disabled: l,
+            onClick: () => y("minutes"),
+            children: p(r.minutes)
+          }),
+          k && /* @__PURE__ */ m(rn, { children: [/* @__PURE__ */ u("span", {
+            className: "analog-clock__separator",
+            children: ":"
+          }), /* @__PURE__ */ u("button", {
+            type: "button",
+            className: $("seconds"),
+            disabled: l,
+            onClick: () => y("seconds"),
+            children: p(r.seconds)
+          })] })
+        ]
+      }), h === "12h" && /* @__PURE__ */ m("div", {
+        className: "analog-clock__period",
+        children: [/* @__PURE__ */ u("button", {
+          type: "button",
+          className: `analog-clock__period-button${f ? "" : " analog-clock__period-button--active"}`,
+          disabled: l,
+          onClick: () => T(!1),
+          children: "AM"
+        }), /* @__PURE__ */ u("button", {
+          type: "button",
+          className: `analog-clock__period-button${f ? " analog-clock__period-button--active" : ""}`,
+          disabled: l,
+          onClick: () => T(!0),
+          children: "PM"
+        })]
+      })]
+    }), /* @__PURE__ */ m("svg", {
+      ref: I,
+      className: "analog-clock__dial",
+      width: d,
+      height: d,
+      viewBox: `0 0 ${d} ${d}`,
+      tabIndex: l ? -1 : 0,
+      onPointerDown: Q,
+      onPointerMove: S,
+      onPointerUp: V,
+      onKeyDown: W,
+      children: [
+        /* @__PURE__ */ u("circle", {
+          className: "analog-clock__face",
+          cx: e.center,
+          cy: e.center,
+          r: e.center - 1
+        }),
+        s !== "hours" && Array.from({ length: 60 }, (n, t) => {
+          const c = t % 5 === 0, a = N(e.center, e.outerRadius + e.knobRadius * 0.55, t * 6), i = N(e.center, e.outerRadius + e.knobRadius * (c ? 0.95 : 0.8), t * 6);
+          return /* @__PURE__ */ u("line", {
+            className: `analog-clock__tick${c ? " analog-clock__tick--major" : ""}`,
+            x1: a.x,
+            y1: a.y,
+            x2: i.x,
+            y2: i.y
+          }, `tick-${t}`);
+        }),
+        /* @__PURE__ */ u("line", {
+          className: "analog-clock__hand",
+          x1: e.center,
+          y1: e.center,
+          x2: R.x,
+          y2: R.y
+        }),
+        /* @__PURE__ */ u("circle", {
+          className: "analog-clock__knob",
+          cx: R.x,
+          cy: R.y,
+          r: e.knobRadius
+        }),
+        /* @__PURE__ */ u("circle", {
+          className: "analog-clock__pivot",
+          cx: e.center,
+          cy: e.center,
+          r: d * 0.017
+        }),
+        J.map((n) => {
+          const t = N(e.center, n.inner ? e.innerRadius : e.outerRadius, n.degrees);
+          return /* @__PURE__ */ u("text", {
+            className: `analog-clock__number${n.inner ? " analog-clock__number--inner" : ""}${n.selected ? " analog-clock__number--selected" : ""}`,
+            x: t.x,
+            y: t.y,
+            textAnchor: "middle",
+            dominantBaseline: "central",
+            children: n.label
+          }, `${s}-${n.inner ? "inner" : "outer"}-${n.value}`);
+        })
+      ]
+    })]
+  });
+};
+export {
+  an as AnalogClock
+};

package/dist/components/AngleSlider/AngleSlider.css

@@ -0,0 +1 @@
+.angle-slider{align-items:center;gap:var(--spacing-4);--_angle-accent:var(--body-accent-color);flex-direction:column;display:flex}.angle-slider--info{--_angle-accent:var(--rating-color-info)}.angle-slider--success{--_angle-accent:var(--rating-color-success)}.angle-slider--warning{--_angle-accent:var(--rating-color-warning)}.angle-slider--danger{--_angle-accent:var(--rating-color-danger)}.angle-slider__dial{width:var(--_angle-size);height:var(--_angle-size);cursor:grab;touch-action:none}.angle-slider__dial:active{cursor:grabbing}.angle-slider__dial:focus-visible{outline:var(--spacing-2) solid var(--form-control-focus-ring);outline-offset:var(--spacing-2);border-radius:var(--radius-full)}.angle-slider__track{fill:var(--slider-track-background-color);stroke:var(--slider-track-border-color);stroke-width:3px}.angle-slider__tick{stroke:var(--slider-track-border-color);stroke-width:1px}.angle-slider__progress{fill:none;stroke:var(--_angle-accent);stroke-width:3px;stroke-linecap:round}.angle-slider__pointer{stroke:var(--_angle-accent);stroke-width:2px;stroke-linecap:round}.angle-slider__handle{fill:var(--slider-thumb-background-color);stroke:var(--_angle-accent);stroke-width:2px;transition:fill var(--transition-fast)}.angle-slider__dial:hover .angle-slider__handle{fill:var(--slider-thumb-hover-background-color)}.angle-slider__value{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums;line-height:var(--line-height-none);color:var(--_angle-accent)}.angle-slider__label{font-size:var(--font-size-sm);color:var(--body-color-muted)}.angle-slider--disabled{opacity:.5}.angle-slider--disabled .angle-slider__dial{cursor:not-allowed}

package/dist/components/AngleSlider/AngleSlider2.js

@@ -0,0 +1,135 @@
+import './AngleSlider.css';
+/* empty css            */
+import { useCallback as c, useMemo as G, useRef as A } from "react";
+import { jsx as f, jsxs as m } from "react/jsx-runtime";
+var d = 42, o = 50, U = 2 * Math.PI * d, D = 360, $ = (e) => e * Math.PI / 180, N = (e, h) => ({
+  x: o + h * Math.sin($(e)),
+  y: o - h * Math.cos($(e))
+}), q = ({ disabled: e = !1, label: h, max: i = D, min: a = 0, onChange: u, size: j = 120, step: l = 1, tickStep: p = 45, keyboardStep: w, showValue: T = !0, value: y, variant: B = "accent" }) => {
+  const R = A(null), g = A(!1), P = Math.max(1, i - a), _ = c((r) => {
+    const n = l > 0 ? Math.round(r / l) * l : r;
+    return Math.min(i, Math.max(a, n));
+  }, [
+    i,
+    a,
+    l
+  ]), k = c((r, n) => {
+    const t = R.current;
+    if (!t) return null;
+    const s = t.getBoundingClientRect(), E = r - (s.left + s.width / 2), I = n - (s.top + s.height / 2);
+    return E === 0 && I === 0 ? null : (Math.atan2(E, -I) * 180 / Math.PI + D) % D;
+  }, []), x = c((r, n) => {
+    const t = k(r, n);
+    t !== null && u(_(t));
+  }, [
+    k,
+    _,
+    u
+  ]), C = c((r) => {
+    e || (r.preventDefault(), r.currentTarget.setPointerCapture(r.pointerId), g.current = !0, x(r.clientX, r.clientY));
+  }, [e, x]), F = c((r) => {
+    !g.current || e || x(r.clientX, r.clientY);
+  }, [e, x]), K = c((r) => {
+    g.current && (r.currentTarget.releasePointerCapture(r.pointerId), g.current = !1);
+  }, []), X = c((r) => {
+    if (e) return;
+    const n = w ?? (l > 0 ? l : 1), t = r.key === "PageUp" ? n * 10 : r.key === "PageDown" ? -n * 10 : 0, s = r.key === "ArrowRight" || r.key === "ArrowUp" ? n : r.key === "ArrowLeft" || r.key === "ArrowDown" ? -n : 0;
+    if (r.key === "Home") {
+      r.preventDefault(), u(a);
+      return;
+    }
+    if (r.key === "End") {
+      r.preventDefault(), u(i);
+      return;
+    }
+    t === 0 && s === 0 || (r.preventDefault(), u(_(y + t + s)));
+  }, [
+    _,
+    e,
+    w,
+    i,
+    a,
+    u,
+    l,
+    y
+  ]), Y = G(() => {
+    if (!p || p <= 0) return [];
+    const r = [];
+    for (let n = a; n < a + P; n += p) r.push(n);
+    return r;
+  }, [
+    a,
+    P,
+    p
+  ]), z = (Math.min(i, Math.max(a, y)) - a) / P, M = N(y, d);
+  return /* @__PURE__ */ m("div", {
+    className: [
+      "angle-slider",
+      `angle-slider--${B}`,
+      e ? "angle-slider--disabled" : ""
+    ].filter(Boolean).join(" "),
+    style: { "--_angle-size": `${j}px` },
+    children: [
+      /* @__PURE__ */ m("svg", {
+        className: "angle-slider__dial",
+        onKeyDown: X,
+        onPointerDown: C,
+        onPointerMove: F,
+        onPointerUp: K,
+        ref: R,
+        tabIndex: e ? -1 : 0,
+        viewBox: "0 0 100 100",
+        children: [
+          /* @__PURE__ */ f("circle", {
+            className: "angle-slider__track",
+            cx: o,
+            cy: o,
+            r: d
+          }),
+          Y.map((r) => {
+            const n = N(r, d), t = N(r, d - 6);
+            return /* @__PURE__ */ f("line", {
+              className: "angle-slider__tick",
+              x1: t.x,
+              x2: n.x,
+              y1: t.y,
+              y2: n.y
+            }, r);
+          }),
+          /* @__PURE__ */ f("circle", {
+            className: "angle-slider__progress",
+            cx: o,
+            cy: o,
+            r: d,
+            strokeDasharray: `${U * z} ${U}`,
+            transform: `rotate(-90 ${o} ${o})`
+          }),
+          /* @__PURE__ */ f("line", {
+            className: "angle-slider__pointer",
+            x1: o,
+            x2: M.x,
+            y1: o,
+            y2: M.y
+          }),
+          /* @__PURE__ */ f("circle", {
+            className: "angle-slider__handle",
+            cx: M.x,
+            cy: M.y,
+            r: 7
+          })
+        ]
+      }),
+      T && /* @__PURE__ */ m("span", {
+        className: "angle-slider__value",
+        children: [Math.round(y), "°"]
+      }),
+      h && /* @__PURE__ */ f("span", {
+        className: "angle-slider__label",
+        children: h
+      })
+    ]
+  });
+};
+export {
+  q as AngleSlider
+};

package/dist/components/AppHeader/AppHeader.css

@@ -0,0 +1 @@
+.app-header{align-items:center;gap:var(--spacing-12);padding:var(--spacing-16);display:flex}.app-header--clickable{cursor:pointer}.app-header__separator{width:auto;margin-right:var(--spacing-16);margin-left:var(--spacing-16)}.app-header__icon{width:var(--spacing-40);height:var(--spacing-40);border-radius:var(--radius);background:var(--card-background-accent-color);color:var(--body-accent-color);font-size:var(--font-size-lg);flex-shrink:0;justify-content:center;align-items:center;display:flex}.app-header__copy{flex-direction:column;min-width:0;display:flex}.app-header__app-name{color:var(--body-color);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.app-header__headline{color:var(--body-color-muted);font-size:var(--font-size-sm);text-transform:uppercase;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}

package/dist/components/AppHeader/AppHeader2.js

@@ -0,0 +1,44 @@
+import './AppHeader.css';
+import { Icon as m } from "../Icon/Icon2.js";
+import { Separator as h } from "../Separator/Separator2.js";
+/* empty css          */
+import "react";
+import { Fragment as o, jsx as a, jsxs as e } from "react/jsx-runtime";
+var u = ({ emoji: r, icon: p, svg: s, appName: c, heading: n, onClick: d, className: l = "", showSeparator: i = !0 }) => /* @__PURE__ */ e(o, { children: [/* @__PURE__ */ e("div", {
+  className: [
+    "app-header",
+    d ? "app-header--clickable" : "",
+    l
+  ].filter(Boolean).join(" "),
+  onClick: d,
+  children: [
+    r && /* @__PURE__ */ a("span", {
+      className: "app-header__icon",
+      children: r
+    }),
+    s && /* @__PURE__ */ a("span", {
+      className: "app-header__icon",
+      children: s
+    }),
+    p && /* @__PURE__ */ a("span", {
+      className: "app-header__icon",
+      children: /* @__PURE__ */ a(m, { name: p })
+    }),
+    /* @__PURE__ */ e("div", {
+      className: "app-header__copy",
+      children: [c && /* @__PURE__ */ a("span", {
+        className: "app-header__app-name",
+        children: c
+      }), n && /* @__PURE__ */ a("span", {
+        className: "app-header__headline",
+        children: n
+      })]
+    })
+  ]
+}), i && /* @__PURE__ */ a(h, {
+  className: "app-header__separator",
+  spacing: 0
+})] });
+export {
+  u as AppHeader
+};

package/dist/components/Auth/ChangePasswordModal/ChangePasswordModal.css

@@ -0,0 +1 @@
+.ChangePasswordModal{gap:var(--spacing-24);padding:var(--spacing-24);flex-direction:column;display:flex}.ChangePasswordModal__field{gap:var(--spacing-8);flex-direction:column;display:flex}.ChangePasswordModal__label{color:var(--form-control-label-color,var(--body-color));font-size:var(--form-control-label-font-size,var(--font-size-sm));font-weight:var(--form-control-label-font-weight,500);letter-spacing:var(--form-control-label-letter-spacing,normal);text-transform:var(--form-control-label-text-transform,none)}.ChangePasswordModal__error{padding:var(--spacing-12);color:var(--body-danger-color);border:1px solid var(--body-danger-color);border-radius:var(--radius);font-size:var(--font-size-sm);text-align:center;background:#ff5a651a}