@memobit/libs 3.0.0 → 3.1.1

package/dist/components/Toast/Toast2.js

@@ -0,0 +1,39 @@
+import './Toast.css';
+import { Icon as m } from "../Icon/Icon2.js";
+import { Tooltip as n } from "../Tooltip/Tooltip2.js";
+/* empty css      */
+import { useEffect as p } from "react";
+import { jsx as t, jsxs as u } from "react/jsx-runtime";
+var N = ({ message: r, type: a = "success", onClose: s, position: i = "top-right", showDismissButton: c = !0, timeout: o = 3e3, action: e }) => (p(() => {
+  const l = setTimeout(() => {
+    s();
+  }, o);
+  return () => clearTimeout(l);
+}, [s, o]), /* @__PURE__ */ u("div", {
+  className: `toast toast--fixed toast-${a} toast--${i}`,
+  children: [
+    /* @__PURE__ */ t("span", {
+      className: "toast__message",
+      children: r
+    }),
+    e && /* @__PURE__ */ t("button", {
+      className: "toast__action",
+      onClick: e.onClick,
+      children: e.label
+    }),
+    c && /* @__PURE__ */ t(n, {
+      title: "Close",
+      children: /* @__PURE__ */ t("button", {
+        className: "toast__close",
+        onClick: s,
+        children: /* @__PURE__ */ t(m, {
+          name: "clear",
+          size: "sm"
+        })
+      })
+    })
+  ]
+}));
+export {
+  N as Toast
+};

package/dist/components/ToggleButtons/ToggleButtons.css

@@ -0,0 +1 @@
+.toggle-buttons{column-gap:var(--spacing-1);align-items:stretch;height:100%;display:flex}.toggle-buttons .button{margin-left:calc(var(--spacing-1) * -1);border-radius:0}.toggle-buttons .button:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm);margin-left:0}.toggle-buttons .button:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}.toggle-buttons .button:only-child{border-radius:var(--radius-sm)}.toggle-buttons--cards{column-gap:var(--spacing-6);height:auto}.toggle-buttons--cards>.tooltip-trigger{flex:1;display:flex}.toggle-buttons__card{justify-content:center;align-items:center;gap:var(--spacing-4);min-width:var(--spacing-64);padding:var(--spacing-12) var(--spacing-4);border:1px solid var(--form-control-border-color);border-radius:var(--radius-sm);cursor:pointer;background:var(--form-control-background-color);color:var(--body-sub-title-color);transition:var(--transition-fast);flex-direction:column;flex:1;display:flex}.toggle-buttons__card:hover{border-color:var(--button-warning-border-color);background:var(--button-warning-hover-background-color);color:var(--body-color)}.toggle-buttons__card--active{border-color:var(--button-warning-border-color);background:var(--button-warning-background-color);color:var(--button-warning-color)}.toggle-buttons__card-icon{width:var(--spacing-32);height:var(--spacing-32);justify-content:center;align-items:center;line-height:1;display:inline-flex}.toggle-buttons__card-icon .icon{width:100%;height:100%}.toggle-buttons__card-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);text-align:center;line-height:1.2}

package/dist/components/ToggleButtons/ToggleButtons2.js

@@ -0,0 +1,47 @@
+import './ToggleButtons.css';
+import { Icon as m } from "../Icon/Icon2.js";
+import { Button as u } from "../Button/Button2.js";
+import { Tooltip as b } from "../Tooltip/Tooltip2.js";
+import { useBreakpoint as g } from "../../hooks/useBreakpoint.js";
+/* empty css              */
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+var v = ({ activeVariant: l = "warning", state: n, onToggleChange: i, states: r, layout: c = "buttons", size: a = "medium" }) => {
+  const { isAtLeast: d } = g();
+  return c === "cards" ? /* @__PURE__ */ o("div", {
+    className: "toggle-buttons toggle-buttons--cards",
+    children: r.map((t) => {
+      const e = /* @__PURE__ */ p("button", {
+        type: "button",
+        className: `toggle-buttons__card${n === t.key ? " toggle-buttons__card--active" : ""}`,
+        onClick: () => i(t.key),
+        children: [t.icon && /* @__PURE__ */ o("span", {
+          className: "toggle-buttons__card-icon",
+          children: /* @__PURE__ */ o(m, {
+            name: t.icon,
+            size: "xl"
+          })
+        }), /* @__PURE__ */ o("span", {
+          className: "toggle-buttons__card-label",
+          children: t.label
+        })]
+      }, t.key);
+      return t.description ? /* @__PURE__ */ o(b, {
+        title: t.description,
+        children: e
+      }, t.key) : e;
+    })
+  }) : /* @__PURE__ */ o("div", {
+    className: "toggle-buttons",
+    children: r.map((t, e) => /* @__PURE__ */ o(u, {
+      size: a,
+      variant: n === t.key ? l : "default",
+      icon: t.icon,
+      onClick: () => i(t.key),
+      title: t.icon ? t.label : void 0,
+      children: d("tablet") || !t.icon ? t.label : ""
+    }, `btn-toggle2-${e}-${t.key}`))
+  });
+};
+export {
+  v as ToggleButtons
+};

package/dist/components/ToggleSwitch/ToggleSwitch.css

@@ -0,0 +1 @@
+.toggle-switch{cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;display:inline-flex}.toggle-switch:focus-visible .toggle-switch__track{box-shadow:0 0 0 var(--spacing-2) #007bff40}.toggle-switch__track{background-color:var(--button-danger-background-color);border:var(--spacing-1) solid var(--button-danger-border-color);align-items:center;transition:all .3s;display:flex;position:relative}.toggle-switch__label{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--button-danger-color);text-transform:uppercase;z-index:1;white-space:nowrap;margin-left:auto;line-height:1;transition:all .3s}.toggle-switch__thumb{left:var(--spacing-2);box-shadow:0 var(--spacing-2) var(--spacing-4) #0003;z-index:2;background-color:#fff;border-radius:50%;transition:all .3s;position:absolute}.toggle-switch.toggle-switch-small .toggle-switch__track{min-width:38px;height:16px;padding:var(--spacing-1) 6px var(--spacing-1) 18px;border-radius:8px}.toggle-switch.toggle-switch-small .toggle-switch__label{font-size:8px}.toggle-switch.toggle-switch-small .toggle-switch__thumb{width:14px;height:14px;left:var(--spacing-1)}.toggle-switch.toggle-switch-small.toggle-switch-checked .toggle-switch__track{padding-left:6px;padding-right:18px}.toggle-switch.toggle-switch-small.toggle-switch-checked .toggle-switch__label{margin-left:0;margin-right:auto}.toggle-switch.toggle-switch-small.toggle-switch-checked .toggle-switch__thumb{left:auto;right:var(--spacing-1)}.toggle-switch.toggle-switch-medium .toggle-switch__track{min-width:60px;height:28px;padding:var(--spacing-2) 8px var(--spacing-2) 28px;border-radius:14px}.toggle-switch.toggle-switch-medium .toggle-switch__label{font-size:var(--font-size-xs)}.toggle-switch.toggle-switch-medium .toggle-switch__thumb{width:22px;height:22px;left:var(--spacing-2)}.toggle-switch.toggle-switch-medium.toggle-switch-checked .toggle-switch__track{padding-left:8px;padding-right:28px}.toggle-switch.toggle-switch-medium.toggle-switch-checked .toggle-switch__label{margin-left:0;margin-right:auto}.toggle-switch.toggle-switch-medium.toggle-switch-checked .toggle-switch__thumb{left:auto;right:var(--spacing-2)}.toggle-switch.toggle-switch-large .toggle-switch__track{min-width:80px;height:36px;padding:var(--spacing-2) 10px var(--spacing-2) 36px;border-radius:18px}.toggle-switch.toggle-switch-large .toggle-switch__label{font-size:var(--font-size-sm)}.toggle-switch.toggle-switch-large .toggle-switch__thumb{width:30px;height:30px;left:var(--spacing-2)}.toggle-switch.toggle-switch-large.toggle-switch-checked .toggle-switch__track{padding-left:10px;padding-right:36px}.toggle-switch.toggle-switch-large.toggle-switch-checked .toggle-switch__label{margin-left:0;margin-right:auto}.toggle-switch.toggle-switch-large.toggle-switch-checked .toggle-switch__thumb{left:auto;right:var(--spacing-2)}.toggle-switch.toggle-switch-checked .toggle-switch__track{background-color:var(--button-success-background-color);border-color:var(--button-success-border-color)}.toggle-switch.toggle-switch-checked .toggle-switch__label{color:var(--button-success-color)}.toggle-switch.toggle-switch-default:not(.toggle-switch-checked) .toggle-switch__track{background-color:var(--button-default-background-color);border-color:var(--button-default-border-color)}.toggle-switch.toggle-switch-default:not(.toggle-switch-checked) .toggle-switch__label{color:var(--button-default-color)}.toggle-switch.toggle-switch-default.toggle-switch-checked .toggle-switch__track{background-color:var(--button-default-background-color);border-color:var(--button-default-border-color)}.toggle-switch.toggle-switch-default.toggle-switch-checked .toggle-switch__label{color:var(--button-default-color)}.toggle-switch.toggle-switch-success:not(.toggle-switch-checked) .toggle-switch__track{background-color:var(--button-default-background-color);border-color:var(--button-default-border-color)}.toggle-switch.toggle-switch-success:not(.toggle-switch-checked) .toggle-switch__label{color:var(--button-danger-color)}.toggle-switch.toggle-switch-success.toggle-switch-checked .toggle-switch__track{background-color:var(--button-success-background-color);border-color:var(--button-success-border-color)}.toggle-switch.toggle-switch-success.toggle-switch-checked .toggle-switch__label{color:var(--button-success-color)}.toggle-switch.toggle-switch-info:not(.toggle-switch-checked) .toggle-switch__track{background-color:var(--button-default-background-color);border-color:var(--button-default-border-color)}.toggle-switch.toggle-switch-info:not(.toggle-switch-checked) .toggle-switch__label{color:var(--button-danger-color)}.toggle-switch.toggle-switch-info.toggle-switch-checked .toggle-switch__track{background-color:var(--button-info-background-color);border-color:var(--button-info-border-color)}.toggle-switch.toggle-switch-info.toggle-switch-checked .toggle-switch__label{color:var(--button-info-color)}.toggle-switch.toggle-switch-warning:not(.toggle-switch-checked) .toggle-switch__track{background-color:var(--button-default-background-color);border-color:var(--button-default-border-color)}.toggle-switch.toggle-switch-warning:not(.toggle-switch-checked) .toggle-switch__label{color:var(--button-danger-color)}.toggle-switch.toggle-switch-warning.toggle-switch-checked .toggle-switch__track{background-color:var(--button-warning-background-color);border-color:var(--button-warning-border-color)}.toggle-switch.toggle-switch-warning.toggle-switch-checked .toggle-switch__label{color:var(--button-warning-color)}.toggle-switch.toggle-switch-danger .toggle-switch__track{background-color:var(--button-default-background-color);border-color:var(--button-default-border-color)}.toggle-switch.toggle-switch-danger .toggle-switch__label{color:var(--button-danger-color)}.toggle-switch.toggle-switch-danger.toggle-switch-checked .toggle-switch__track{background-color:var(--button-danger-background-color);border-color:var(--button-danger-border-color)}.toggle-switch.toggle-switch-danger.toggle-switch-checked .toggle-switch__label{color:var(--button-danger-color)}.toggle-switch.toggle-switch-plain .toggle-switch__track{background-color:var(--button-default-background-color);border-color:var(--button-default-border-color)}.toggle-switch.toggle-switch-plain .toggle-switch__label{color:var(--button-default-color)}.toggle-switch.toggle-switch-plain.toggle-switch-checked .toggle-switch__track{background-color:var(--button-default-hover-background-color);border-color:var(--button-default-hover-border-color)}.toggle-switch.toggle-switch-plain.toggle-switch-checked .toggle-switch__label{color:var(--button-default-hover-color)}.toggle-switch.toggle-switch-disabled{cursor:not-allowed;opacity:.6}.toggle-switch.toggle-switch-disabled:hover .toggle-switch__track{transform:none}.toggle-switch:not(.toggle-switch-disabled):hover .toggle-switch__track{transform:translateY(-1px)}.toggle-switch:not(.toggle-switch-disabled):active .toggle-switch__track{transform:translateY(0)}

package/dist/components/ToggleSwitch/ToggleSwitch2.js

@@ -0,0 +1,27 @@
+import './ToggleSwitch.css';
+/* empty css             */
+import "react";
+import { jsx as s, jsxs as w } from "react/jsx-runtime";
+var _ = ({ checked: t = !1, className: c, disabled: e = !1, offLabel: g = "Off", onChange: i, onLabel: a = "On", showLabels: r = !0, size: h = "medium", variant: n = "default" }) => {
+  const o = () => {
+    !e && i && i(!t);
+  }, m = (l) => {
+    (l.key === " " || l.key === "Enter") && (l.preventDefault(), o());
+  };
+  return /* @__PURE__ */ s("div", {
+    className: `toggle-switch toggle-switch-${h} toggle-switch-${n} ${t ? "toggle-switch-checked" : ""} ${e ? "toggle-switch-disabled" : ""} ${c || ""}`,
+    onClick: o,
+    onKeyDown: m,
+    tabIndex: e ? -1 : 0,
+    children: /* @__PURE__ */ w("div", {
+      className: "toggle-switch__track",
+      children: [r && /* @__PURE__ */ s("span", {
+        className: "toggle-switch__label",
+        children: t ? a : g
+      }), /* @__PURE__ */ s("div", { className: "toggle-switch__thumb" })]
+    })
+  });
+};
+export {
+  _ as ToggleSwitch
+};

package/dist/components/Toolbar/Toolbar.css

@@ -0,0 +1 @@
+.memobit-toolbar{background-color:var(--header-background-color);border-bottom:var(--spacing-1) solid var(--header-border-bottom-color);border-radius:var(--spacing-16);align-items:flex-end;gap:var(--spacing-16);padding:var(--spacing-16);display:flex}.memobit-toolbar__control-panel-toggle,.memobit-toolbar__actions,.memobit-toolbar__sort{flex:none}.memobit-toolbar__control-panel-toggle-count{min-width:var(--spacing-20);height:var(--spacing-20);padding:0 var(--spacing-6);background:var(--body-accent-color);color:var(--button-info-color);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border-radius:999px;justify-content:center;align-items:center;display:inline-flex}.memobit-toolbar__heading{align-items:center;gap:var(--spacing-8);flex:0 auto;align-self:center;min-width:0;display:flex}.memobit-toolbar__heading--clickable{cursor:pointer}.memobit-toolbar__heading-icon{flex:none;align-items:center;display:inline-flex}.memobit-toolbar__heading-copy{gap:var(--spacing-2);flex-direction:column;min-width:0;display:flex}.memobit-toolbar__heading-title{color:var(--body-title-color);font-family:var(--font-family-display);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);line-height:1.2}.memobit-toolbar__heading-description{color:var(--body-color-muted);font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.05em;line-height:1.3}.memobit-toolbar__content{align-items:flex-end;gap:var(--spacing-16);flex:auto;min-width:0;display:flex}.memobit-toolbar__search{flex:280px;min-width:180px}.memobit-toolbar__search-input,.memobit-toolbar__search-input .input-text{width:100%}.memobit-toolbar__sort{min-width:220px}.memobit-toolbar__custom{align-items:flex-end;gap:var(--spacing-16);flex:auto;min-width:0;display:flex}.memobit-toolbar__actions{align-items:center;gap:var(--spacing-8);margin-left:auto;display:flex}.memobit-toolbar--no-card{background-color:#0000;border-bottom:0;border-radius:0;padding:0}@media (width<=768px){.memobit-toolbar{align-items:center;gap:var(--spacing-8);padding:var(--spacing-8);flex-wrap:wrap}.memobit-toolbar__control-panel-toggle{order:1}.memobit-toolbar__heading{flex:auto;order:1}.memobit-toolbar__actions{order:2;margin-left:auto}.memobit-toolbar__content{align-items:stretch;gap:var(--spacing-8);flex-direction:column;flex:100%;order:3;width:100%}.memobit-toolbar__search,.memobit-toolbar__sort,.memobit-toolbar__custom{flex:auto;width:100%;min-width:0}.memobit-toolbar__custom{align-items:stretch;gap:var(--spacing-8);flex-direction:column}}

package/dist/components/Toolbar/Toolbar2.js

@@ -0,0 +1,129 @@
+import './Toolbar.css';
+import { Icon as S } from "../Icon/Icon2.js";
+import { Button as w } from "../Button/Button2.js";
+import { Tooltip as x } from "../Tooltip/Tooltip2.js";
+import { useControlPanelContext as I } from "../ControlPanel/ControlPanelContext.js";
+import { Dropdown as y } from "../Dropdown/Dropdown2.js";
+import { InputSearch as B } from "../InputSearch/InputSearch2.js";
+import { MenuHamburger as $ } from "../MenuHamburger/MenuHamburger2.js";
+import { NotificationPanel as R } from "../NotificationPanel/NotificationPanel2.js";
+/* empty css        */
+import "react";
+import { jsx as a, jsxs as t } from "react/jsx-runtime";
+var c = "::", k = (e) => typeof e == "object" ? e.label : void 0, M = (e) => "fields" in e ? e.fields.flatMap((i) => [{
+  value: `${i.value}${c}asc`,
+  label: i.label,
+  suffixIcon: "arrow-up"
+}, {
+  value: `${i.value}${c}desc`,
+  label: i.label,
+  suffixIcon: "arrow-down"
+}]) : e.options, O = (e) => "fields" in e ? e.value ? `${e.value.field}${c}${e.value.direction}` : null : e.value, J = ({ children: e, className: i = "", controlPanelToggle: n, heading: l, noCard: f = !1, menuItems: _, notifications: r, search: s, sort: o }) => {
+  const u = I(), v = !!(n && u?.isMobile), d = typeof n == "object" ? n.count ?? 0 : 0, h = [
+    "memobit-toolbar",
+    f ? "memobit-toolbar--no-card" : "",
+    i
+  ].filter(Boolean).join(" "), N = !!(s || o || e), g = (m) => {
+    if (o) {
+      if (!m || Array.isArray(m)) {
+        "fields" in o || o.onChange("", null);
+        return;
+      }
+      if ("fields" in o) {
+        const b = String(m.value), p = b.lastIndexOf(c), C = b.substring(0, p), j = b.substring(p + 2);
+        o.onChange({
+          field: C,
+          direction: j
+        });
+        return;
+      }
+      o.onChange(String(m.value), m);
+    }
+  };
+  return /* @__PURE__ */ t("div", {
+    className: h,
+    children: [
+      v && /* @__PURE__ */ a(x, {
+        title: "Filters",
+        children: /* @__PURE__ */ t(w, {
+          className: "memobit-toolbar__control-panel-toggle",
+          icon: "tune",
+          onClick: u?.toggle,
+          size: "medium",
+          variant: "default",
+          children: [n && k(n), d > 0 && /* @__PURE__ */ a("span", {
+            className: "memobit-toolbar__control-panel-toggle-count",
+            children: d
+          })]
+        })
+      }),
+      l && /* @__PURE__ */ t("div", {
+        className: ["memobit-toolbar__heading", l.onClick ? "memobit-toolbar__heading--clickable" : ""].filter(Boolean).join(" "),
+        onClick: l.onClick,
+        children: [(l.svg || l.icon || l.emoji) && /* @__PURE__ */ t("span", {
+          className: "memobit-toolbar__heading-icon",
+          children: [
+            l.svg,
+            l.icon && /* @__PURE__ */ a(S, { name: l.icon }),
+            l.emoji
+          ]
+        }), /* @__PURE__ */ t("div", {
+          className: "memobit-toolbar__heading-copy",
+          children: [/* @__PURE__ */ a("span", {
+            className: "memobit-toolbar__heading-title",
+            children: l.title
+          }), l.description && /* @__PURE__ */ a("span", {
+            className: "memobit-toolbar__heading-description",
+            children: l.description
+          })]
+        })]
+      }),
+      N && /* @__PURE__ */ t("div", {
+        className: "memobit-toolbar__content",
+        children: [
+          s && /* @__PURE__ */ a("div", {
+            className: "memobit-toolbar__search",
+            children: /* @__PURE__ */ a(B, {
+              ...s,
+              className: ["memobit-toolbar__search-input", s.className].filter(Boolean).join(" ")
+            })
+          }),
+          e && /* @__PURE__ */ a("div", {
+            className: "memobit-toolbar__custom",
+            children: e
+          }),
+          o && /* @__PURE__ */ a("div", {
+            className: ["memobit-toolbar__sort", o.className].filter(Boolean).join(" "),
+            children: /* @__PURE__ */ a(y, {
+              highlighted: o.highlighted,
+              label: o.label,
+              name: o.name ?? "toolbar-sort",
+              onChange: g,
+              options: M(o),
+              placeholder: o.placeholder,
+              searchable: o.searchable ?? !1,
+              usePortal: !1,
+              value: O(o)
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ t("div", {
+        className: "memobit-toolbar__actions",
+        children: [r && /* @__PURE__ */ a(R, {
+          items: r.items,
+          buttonLabel: r.buttonLabel,
+          panelTitle: r.panelTitle,
+          emptyMessage: r.emptyMessage
+        }), /* @__PURE__ */ a($, {
+          items: _,
+          disableResponsive: !0,
+          showLabel: !1
+        })]
+      })
+    ]
+  });
+};
+export {
+  J as Toolbar
+};

package/dist/components/Tooltip/Tooltip.css

@@ -0,0 +1 @@
+.tooltip-trigger{display:contents}.tooltip{z-index:9999;background:var(--tooltip-background-color);color:var(--tooltip-color);padding:var(--spacing-8) var(--spacing-12);border-radius:var(--radius);font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);word-wrap:break-word;border:1px solid var(--tooltip-border-color);pointer-events:none;max-width:300px;line-height:1.4;animation:.2s tooltipFadeIn;position:fixed;box-shadow:0 4px 12px #00000026}.tooltip--scrollable{pointer-events:auto;overscroll-behavior:contain;overflow-y:auto}.tooltip__arrow{background:var(--tooltip-background-color);border:1px solid var(--tooltip-border-color);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.tooltip__arrow--top{border-top:none;border-left:none;margin-left:-4px;bottom:-5px;left:50%}.tooltip__arrow--bottom{border-bottom:none;border-right:none;margin-left:-4px;top:-5px;left:50%}.tooltip__arrow--left{border-bottom:none;border-left:none;margin-top:-4px;top:50%;right:-5px}.tooltip__arrow--right{border-top:none;border-right:none;margin-top:-4px;top:50%;left:-5px}@keyframes tooltipFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media (width<=768px){.tooltip{font-size:var(--font-size-xs);padding:var(--spacing-4) var(--spacing-8);max-width:200px}}

package/dist/components/Tooltip/Tooltip2.js

@@ -0,0 +1,93 @@
+import './Tooltip.css';
+/* empty css        */
+import { useEffect as b, useRef as h, useState as B } from "react";
+import { Fragment as V, jsx as k, jsxs as D } from "react/jsx-runtime";
+import { createPortal as O } from "react-dom";
+var K = ({ title: L, position: T = "top", delay: N = 200, children: _, disabled: $ = !1, className: F = "", maxWidth: p, maxHeight: a }) => {
+  const [f, s] = B(!1), [M, I] = B({
+    top: 0,
+    left: 0
+  }), c = h(null), t = h(null), l = h(null), g = h(null), w = h(!1), m = a !== void 0, R = m ? 150 : 0, d = () => {
+    if (!l.current || !g.current) return;
+    const r = l.current.firstElementChild?.getBoundingClientRect();
+    let e = r && r.width > 0 ? r : l.current.getBoundingClientRect();
+    if (e.width === 0 && e.height === 0) {
+      const C = document.createRange();
+      C.selectNodeContents(l.current);
+      const E = C.getBoundingClientRect();
+      (E.width > 0 || E.height > 0) && (e = E);
+    }
+    const n = g.current.getBoundingClientRect(), v = 8;
+    let o = 0, i = 0;
+    switch (T) {
+      case "top":
+        o = e.top - n.height - v, i = e.left + e.width / 2 - n.width / 2;
+        break;
+      case "bottom":
+        o = e.bottom + v, i = e.left + e.width / 2 - n.width / 2;
+        break;
+      case "left":
+        o = e.top + e.height / 2 - n.height / 2, i = e.left - n.width - v;
+        break;
+      case "right":
+        o = e.top + e.height / 2 - n.height / 2, i = e.right + v;
+        break;
+    }
+    const u = 8;
+    i < u && (i = u), i + n.width > window.innerWidth - u && (i = window.innerWidth - n.width - u), o < u && (o = u), o + n.height > window.innerHeight - u && (o = window.innerHeight - n.height - u), I({
+      top: o,
+      left: i
+    });
+  }, P = () => {
+    $ || w.current || (t.current && (clearTimeout(t.current), t.current = null), c.current = setTimeout(() => {
+      s(!0);
+    }, N));
+  }, y = () => {
+    w.current || (c.current && clearTimeout(c.current), R > 0 ? t.current = setTimeout(() => s(!1), R) : s(!1));
+  }, j = (r) => {
+    r.pointerType !== "touch" && r.pointerType !== "pen" || $ || (w.current = !0, c.current && (clearTimeout(c.current), c.current = null), r.stopPropagation(), s((e) => !e));
+  };
+  b(() => (f && (d(), window.addEventListener("scroll", d, !0), window.addEventListener("resize", d)), () => {
+    window.removeEventListener("scroll", d, !0), window.removeEventListener("resize", d);
+  }), [f]), b(() => {
+    if (!f) return;
+    const r = (e) => {
+      l.current?.contains(e.target) || g.current?.contains(e.target) || s(!1);
+    };
+    return document.addEventListener("pointerdown", r), () => {
+      document.removeEventListener("pointerdown", r), w.current = !1;
+    };
+  }, [f]), b(() => () => {
+    c.current && clearTimeout(c.current), t.current && clearTimeout(t.current);
+  }, []);
+  const x = () => {
+    m && t.current && (clearTimeout(t.current), t.current = null);
+  }, z = () => {
+    m && (t.current = setTimeout(() => s(!1), R));
+  };
+  return /* @__PURE__ */ D(V, { children: [/* @__PURE__ */ k("span", {
+    ref: l,
+    className: "tooltip-trigger",
+    onMouseEnter: P,
+    onMouseLeave: y,
+    onFocus: P,
+    onBlur: y,
+    onPointerDown: j,
+    children: _
+  }), f && L && O(/* @__PURE__ */ D("div", {
+    ref: g,
+    className: `tooltip tooltip--${T} ${m ? "tooltip--scrollable" : ""} ${F}`,
+    style: {
+      top: `${M.top}px`,
+      left: `${M.left}px`,
+      ...p !== void 0 && { maxWidth: typeof p == "number" ? `${p}px` : p },
+      ...a !== void 0 && { maxHeight: typeof a == "number" ? `${a}px` : a }
+    },
+    onMouseEnter: x,
+    onMouseLeave: z,
+    children: [L, /* @__PURE__ */ k("div", { className: `tooltip__arrow tooltip__arrow--${T}` })]
+  }), document.body)] });
+};
+export {
+  K as Tooltip
+};

package/dist/components/TourHud/TourHud.css

@@ -0,0 +1 @@
+.tour-hud{--tour-hud-accent:var(--tour-hud-accent-color,var(--body-accent-color));--tour-hud-width:auto;left:50%;bottom:var(--spacing-64);z-index:20;align-items:center;gap:var(--spacing-16);box-sizing:border-box;max-width:640px;padding:var(--spacing-12) var(--spacing-16);color:var(--tooltip-color);background-color:var(--tooltip-background-color);border:1px solid var(--tour-hud-accent);border-radius:var(--radius);box-shadow:var(--card-box-shadow);display:flex;position:absolute;transform:translate(-50%)}.tour-hud--fixed-width{width:var(--tour-hud-width);max-width:calc(100% - var(--spacing-32))}.tour-hud__body{gap:var(--spacing-2);flex-direction:column;flex:1;min-width:0;display:flex}.tour-hud__context{font-family:var(--font-family-mono,monospace);font-size:var(--font-size-xxs);letter-spacing:.1em;text-transform:uppercase;color:var(--tour-hud-accent)}.tour-hud__title{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.tour-hud__note{font-size:var(--font-size-xs);text-overflow:ellipsis;white-space:nowrap;opacity:.8;font-style:italic;overflow:hidden}.tour-hud__controls{gap:var(--spacing-8);flex-shrink:0;display:flex}.tour-hud__btn{align-items:center;gap:var(--spacing-4);padding:var(--spacing-4) var(--spacing-8);font-family:var(--font-family-sans,sans-serif);font-size:var(--font-size-xxs);letter-spacing:.08em;text-transform:uppercase;color:var(--tour-hud-accent);border:1px solid var(--tour-hud-accent);border-radius:var(--radius-sm);cursor:pointer;background:0 0;display:inline-flex}.tour-hud__btn:hover:not(:disabled){color:var(--tooltip-background-color);background-color:var(--tour-hud-accent)}.tour-hud__btn:disabled{opacity:.4;cursor:default}

package/dist/components/TourHud/TourHud2.js

@@ -0,0 +1,70 @@
+import './TourHud.css';
+import { Icon as u } from "../Icon/Icon2.js";
+/* empty css        */
+import "react";
+import { jsx as t, jsxs as e } from "react/jsx-runtime";
+var y = ({ label: l, stepLabel: n, index: r, total: i, title: s, note: d, onPrev: a, onNext: c, onExit: m, width: o, className: h = "" }) => {
+  const _ = o === void 0 ? void 0 : { "--tour-hud-width": typeof o == "number" ? `${o}px` : o };
+  return /* @__PURE__ */ e("div", {
+    className: [
+      "tour-hud",
+      o !== void 0 && "tour-hud--fixed-width",
+      h
+    ].filter(Boolean).join(" "),
+    style: _,
+    children: [/* @__PURE__ */ e("div", {
+      className: "tour-hud__body",
+      children: [
+        /* @__PURE__ */ t("div", {
+          className: "tour-hud__context",
+          children: [
+            l,
+            `Stop ${r + 1} / ${i}`,
+            n
+          ].filter(Boolean).join(" · ")
+        }),
+        /* @__PURE__ */ t("div", {
+          className: "tour-hud__title",
+          children: s
+        }),
+        d && /* @__PURE__ */ t("div", {
+          className: "tour-hud__note",
+          children: d
+        })
+      ]
+    }), /* @__PURE__ */ e("div", {
+      className: "tour-hud__controls",
+      children: [
+        /* @__PURE__ */ e("button", {
+          type: "button",
+          className: "tour-hud__btn",
+          disabled: r === 0,
+          onClick: a,
+          children: [/* @__PURE__ */ t(u, {
+            name: "arrow-left",
+            size: "sm"
+          }), "Prev"]
+        }),
+        /* @__PURE__ */ e("button", {
+          type: "button",
+          className: "tour-hud__btn",
+          disabled: r >= i - 1,
+          onClick: c,
+          children: ["Next", /* @__PURE__ */ t(u, {
+            name: "arrow-right",
+            size: "sm"
+          })]
+        }),
+        /* @__PURE__ */ t("button", {
+          type: "button",
+          className: "tour-hud__btn",
+          onClick: m,
+          children: "Exit"
+        })
+      ]
+    })]
+  });
+};
+export {
+  y as TourHud
+};

package/dist/components/Transition/Transition.css

@@ -0,0 +1 @@
+.transition{transition-property:opacity,transform,height}.transition--hidden{display:none}.transition--fade.transition--entering,.transition--fade.transition--exiting{opacity:0}.transition--fade.transition--entered{opacity:1}.transition--slide-up,.transition--slide-down,.transition--slide-left,.transition--slide-right{--_transition-travel:var(--spacing-16)}.transition--slide-up.transition--entered,.transition--slide-down.transition--entered,.transition--slide-left.transition--entered,.transition--slide-right.transition--entered{opacity:1;transform:none}.transition--slide-up.transition--entering,.transition--slide-up.transition--exiting,.transition--slide-down.transition--entering,.transition--slide-down.transition--exiting,.transition--slide-left.transition--entering,.transition--slide-left.transition--exiting,.transition--slide-right.transition--entering,.transition--slide-right.transition--exiting{opacity:0}.transition--slide-up.transition--entering,.transition--slide-up.transition--exiting{transform:translateY(var(--_transition-travel))}.transition--slide-down.transition--entering,.transition--slide-down.transition--exiting{transform:translateY(calc(var(--_transition-travel) * -1))}.transition--slide-left.transition--entering,.transition--slide-left.transition--exiting{transform:translateX(var(--_transition-travel))}.transition--slide-right.transition--entering,.transition--slide-right.transition--exiting{transform:translateX(calc(var(--_transition-travel) * -1))}.transition--scale.transition--entering,.transition--scale.transition--exiting{opacity:0;transform:scale(.92)}.transition--scale.transition--entered{opacity:1;transform:scale(1)}.transition--collapse{overflow:hidden}.transition--collapse.transition--entering,.transition--collapse.transition--exiting{opacity:0}.transition--collapse.transition--entered{opacity:1}@media (prefers-reduced-motion:reduce){.transition{transition:none!important;transform:none!important}}

package/dist/components/Transition/Transition2.js

@@ -0,0 +1,68 @@
+import './Transition.css';
+/* empty css           */
+import { useCallback as f, useEffect as h, useRef as n, useState as A } from "react";
+import { jsx as P } from "react/jsx-runtime";
+var G = ({ appear: C = !1, as: j = "div", children: q, className: D = "", delay: m = 0, duration: o = 250, easing: b = "ease", keepMounted: F = !1, onEntered: g, onExited: d, show: p, type: a = "fade" }) => {
+  const H = p ? C ? "entering" : "entered" : "unmounted", [r, x] = A(H), [S, e] = A("auto"), u = n(null), R = n(H), $ = n(g), v = n(d), i = n(null), s = n(null);
+  h(() => {
+    $.current = g, v.current = d;
+  }, [g, d]);
+  const c = f((t) => {
+    R.current = t, x(t);
+  }, []), l = f(() => {
+    i.current !== null && (clearTimeout(i.current), i.current = null), s.current !== null && (cancelAnimationFrame(s.current), s.current = null);
+  }, []), T = f((t) => {
+    s.current = requestAnimationFrame(() => {
+      s.current = requestAnimationFrame(t);
+    });
+  }, []);
+  h(() => l, [l]), h(() => {
+    l();
+    const t = a === "collapse";
+    if (p) {
+      if (R.current === "entered") return;
+      c("entering"), t && e(0), T(() => {
+        c("entered"), t && u.current && e(u.current.scrollHeight);
+      }), i.current = setTimeout(() => {
+        t && e("auto"), $.current?.();
+      }, o + m);
+      return;
+    }
+    R.current !== "unmounted" && (t && u.current && (e(u.current.scrollHeight), T(() => e(0))), c("exiting"), i.current = setTimeout(() => {
+      c("unmounted"), e("auto"), v.current?.();
+    }, o));
+  }, [
+    T,
+    c,
+    l,
+    m,
+    o,
+    p,
+    a
+  ]);
+  const B = f((t) => {
+    u.current = t;
+  }, []);
+  if (r === "unmounted" && !F) return null;
+  const N = {
+    transitionDelay: r === "entering" || r === "entered" ? `${m}ms` : void 0,
+    transitionDuration: `${o}ms`,
+    transitionTimingFunction: b,
+    ...a === "collapse" && S !== "auto" ? { height: S } : {}
+  };
+  return /* @__PURE__ */ P(j, {
+    className: [
+      "transition",
+      `transition--${a}`,
+      `transition--${r}`,
+      F && r === "unmounted" ? "transition--hidden" : "",
+      D
+    ].filter(Boolean).join(" "),
+    ref: B,
+    style: N,
+    children: q
+  });
+};
+export {
+  G as Transition
+};

package/dist/components/Tree/Tree.css

@@ -0,0 +1 @@
+.tree{--depth:0;--guide-level:0;font-size:var(--font-size-sm);color:var(--body-color);-webkit-user-select:none;user-select:none;margin:0;padding:0;list-style:none}.tree__children{margin:0;padding:0;list-style:none;display:none}.tree__children--open{display:block}.tree__children--animated.tree__children--open{animation:tree-open var(--duration-slide) ease forwards}@keyframes tree-open{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.tree__row{height:34px;padding-left:calc(var(--depth) * 20px);padding-right:var(--spacing-8);align-items:center;gap:var(--spacing-8);border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast);outline:none;display:flex;position:relative}.tree__row:hover{background:var(--list-hover-background-color)}.tree__row:focus-visible{box-shadow:0 0 0 2px var(--form-control-focus-ring)}.tree__row--selected{background:#60a5fa1f}.tree__row--selected .tree__label{color:var(--body-accent-color);font-weight:var(--font-weight-medium)}.tree__row--selected .tree__chevron{color:var(--body-accent-color)}.tree__row--selected:before{content:"";left:calc(var(--depth) * 20px);border-radius:var(--radius-full);background:var(--body-accent-color);width:2px;height:60%;position:absolute;top:50%;transform:translateY(-50%)}.tree__row--disabled{opacity:.38;cursor:not-allowed;pointer-events:none}.tree__row--info .tree__label,.tree__row--info .tree__icon{color:var(--body-accent-color)}.tree__row--success .tree__label,.tree__row--success .tree__icon{color:var(--button-success-border-color)}.tree__row--warning .tree__label,.tree__row--warning .tree__icon{color:var(--button-warning-border-color)}.tree__row--danger .tree__label,.tree__row--danger .tree__icon{color:var(--body-danger-color)}.tree__guide{top:0;bottom:0;left:calc(var(--guide-level) * 20px + 20px * .5 - 1px * .5);background:var(--delimiter-color);border-radius:var(--radius-full);pointer-events:none;width:1px;position:absolute}.tree__toggle{width:16px;height:16px;color:var(--body-color-muted);flex-shrink:0;justify-content:center;align-items:center;display:flex}.tree__chevron{transition:transform var(--transition-fast), color var(--transition-fast);color:var(--body-color-muted)}.tree__chevron--open{color:var(--body-accent-color);transform:rotate(90deg)}.tree__leaf-dot{border-radius:var(--radius-full);background:var(--delimiter-color);width:4px;height:4px;margin:auto;display:block}.tree__icon{color:var(--body-color-muted);transition:color var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;font-size:1em;line-height:1;display:flex}.tree__label{text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);color:var(--body-color);line-height:var(--line-height-tight);transition:color var(--transition-fast), font-weight var(--transition-fast);flex:1;overflow:hidden}.tree__row:hover .tree__label{color:var(--body-color-accent)}.tree__badge{min-width:18px;height:18px;padding:0 var(--spacing-4);border-radius:var(--radius-full);font-size:var(--font-size-xxs);font-weight:var(--font-weight-semibold);letter-spacing:.03em;background:var(--card-background-accent-color);color:var(--body-color-muted);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.tree__badge--info{color:#93c5fd;background:#3b82f62e}.tree__badge--success{color:#34d399;background:#10b98126}.tree__badge--warning{color:#fbbf24;background:#f59e0b26}.tree__badge--danger{color:#f87171;background:#ef444426}

package/dist/components/Tree/Tree2.js

@@ -0,0 +1,95 @@
+import './Tree.css';
+/* empty css     */
+import { useCallback as f, useState as v } from "react";
+import { jsx as r, jsxs as u } from "react/jsx-runtime";
+var N = ({ open: e }) => /* @__PURE__ */ r("svg", {
+  className: `tree__chevron ${e ? "tree__chevron--open" : ""}`,
+  viewBox: "0 0 16 16",
+  width: "12",
+  height: "12",
+  fill: "none",
+  children: /* @__PURE__ */ r("path", {
+    d: "M5 3l6 5-6 5",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })
+}), g = ({ node: e, depth: i, selectable: t, showGuides: c, animated: d, selectedId: _, onSelect: s }) => {
+  const [o, p] = v(e.defaultExpanded ?? !1), n = Array.isArray(e.children) && e.children.length > 0, a = t && _ === e.id, m = f((l) => {
+    e.disabled || "key" in l && l.key !== "Enter" && l.key !== " " || (n && p((h) => !h), t && s(e));
+  }, [
+    n,
+    e,
+    t,
+    s
+  ]);
+  return /* @__PURE__ */ u("li", { children: [/* @__PURE__ */ u("div", {
+    className: [
+      "tree__row",
+      a ? "tree__row--selected" : "",
+      e.disabled ? "tree__row--disabled" : "",
+      e.variant && e.variant !== "default" ? `tree__row--${e.variant}` : ""
+    ].filter(Boolean).join(" "),
+    style: { "--depth": i },
+    tabIndex: e.disabled ? -1 : 0,
+    onClick: m,
+    onKeyDown: m,
+    children: [
+      c && i > 0 && Array.from({ length: i }).map((l, h) => /* @__PURE__ */ r("span", {
+        className: "tree__guide",
+        style: { "--guide-level": h }
+      }, h)),
+      /* @__PURE__ */ r("span", {
+        className: "tree__toggle",
+        children: n ? /* @__PURE__ */ r(N, { open: o }) : /* @__PURE__ */ r("span", { className: "tree__leaf-dot" })
+      }),
+      e.icon && /* @__PURE__ */ r("span", {
+        className: "tree__icon",
+        children: e.icon
+      }),
+      /* @__PURE__ */ r("span", {
+        className: "tree__label",
+        children: e.label
+      }),
+      e.badge !== void 0 && /* @__PURE__ */ r("span", {
+        className: `tree__badge tree__badge--${e.variant ?? "default"}`,
+        children: e.badge
+      })
+    ]
+  }), n && /* @__PURE__ */ r("ul", {
+    className: [
+      "tree__children",
+      o ? "tree__children--open" : "",
+      d ? "tree__children--animated" : ""
+    ].filter(Boolean).join(" "),
+    children: e.children.map((l) => /* @__PURE__ */ r(g, {
+      node: l,
+      depth: i + 1,
+      selectable: t,
+      showGuides: c,
+      animated: d,
+      selectedId: _,
+      onSelect: s
+    }, l.id))
+  })] });
+}, j = ({ nodes: e, selectable: i = !1, onSelect: t, showGuides: c = !0, animated: d = !0, defaultSelectedId: _ = null, className: s = "" }) => {
+  const [o, p] = v(_), n = f((a) => {
+    a.disabled || (p(a.id), t?.(a));
+  }, [t]);
+  return /* @__PURE__ */ r("ul", {
+    className: ["tree", s].filter(Boolean).join(" "),
+    children: e.map((a) => /* @__PURE__ */ r(g, {
+      node: a,
+      depth: 0,
+      selectable: i,
+      showGuides: c,
+      animated: d,
+      selectedId: o,
+      onSelect: n
+    }, a.id))
+  });
+};
+export {
+  j as Tree
+};

package/dist/components/VirtualList/VirtualList.css

@@ -0,0 +1 @@
+.virtual-list{max-height:var(--spacing-400);margin:0;padding:0;list-style:none;display:block;overflow-y:auto}.virtual-list__row:not(:last-child){margin-bottom:var(--spacing-12)}.virtual-list__spacer{background:0 0;border:0;flex:none;margin:0;padding:0}