@memobit/libs 3.0.0 → 3.1.1

package/dist/components/ContextMenu/ContextMenu2.js

@@ -0,0 +1,53 @@
+import './ContextMenu.css';
+/* empty css            */
+import { useEffect as y, useRef as v, useState as u } from "react";
+import { Fragment as C, jsx as d, jsxs as R } from "react/jsx-runtime";
+import { createPortal as $ } from "react-dom";
+var E = ({ target: e, onClose: l, children: f, autoClose: a = !1 }) => {
+  const c = v(null), [p, h] = u(!1), [x, b] = u(() => {
+    if (!e) return { opacity: 0 };
+    const n = e.getBoundingClientRect();
+    return {
+      top: `${n.bottom}px`,
+      left: `${n.left}px`,
+      opacity: 0
+    };
+  });
+  y(() => {
+    if (!e || !c.current) return;
+    const n = requestAnimationFrame(() => {
+      if (!c.current) return;
+      const m = e.getBoundingClientRect(), r = c.current.getBoundingClientRect(), s = document.documentElement.clientWidth || window.innerWidth, w = document.documentElement.clientHeight || window.innerHeight, t = 8;
+      let i = m.bottom, o = m.left;
+      o + r.width > s - t && (o = Math.max(t, s - r.width - t)), o < t && (o = t), i + r.height > w - t && (i = Math.max(t, m.top - r.height)), i < t && (i = t), b({
+        top: `${i}px`,
+        left: `${o}px`,
+        opacity: 1
+      }), h(!0);
+    });
+    return () => {
+      cancelAnimationFrame(n);
+    };
+  }, [e]);
+  const g = (n) => {
+    a && l?.();
+  };
+  return e ? $(/* @__PURE__ */ R(C, { children: [/* @__PURE__ */ d("div", {
+    style: {
+      position: "fixed",
+      inset: 0,
+      zIndex: 1190
+    },
+    className: "memobit-context-menu-back-drop",
+    onClick: l
+  }), /* @__PURE__ */ d("div", {
+    ref: c,
+    className: `memobit-context-menu ${p ? "memobit-context-menu--visible" : ""}`,
+    style: x,
+    onClick: g,
+    children: f
+  })] }), document.body) : null;
+};
+export {
+  E as ContextMenu
+};

package/dist/components/ContextToast/ContextToast.css

@@ -0,0 +1 @@
+.toast-container{z-index:9999;flex-direction:column-reverse;display:flex;position:fixed}.toast-container--bottom-left{left:var(--spacing-16);bottom:var(--spacing-16);align-items:flex-start}.toast-container--bottom,.toast-container--bottom-center{left:50%;bottom:var(--spacing-16);align-items:center;transform:translate(-50%)}.toast-container--bottom-right{right:var(--spacing-16);bottom:var(--spacing-16);align-items:flex-end}.toast-container--top-left{top:var(--spacing-16);left:var(--spacing-16);flex-direction:column;align-items:flex-start}.toast-container--top-right{top:var(--spacing-16);right:var(--spacing-16);flex-direction:column;align-items:flex-end}.toast-container--top{top:var(--spacing-16);flex-direction:column;align-items:center;left:50%;transform:translate(-50%)}.toast-container--left{top:50%;left:var(--spacing-16);flex-direction:column;align-items:flex-start;transform:translateY(-50%)}.toast-container--right{top:50%;right:var(--spacing-16);flex-direction:column;align-items:flex-end;transform:translateY(-50%)}.toast{width:var(--spacing-300);margin-top:var(--spacing-8);padding:var(--spacing-12) var(--spacing-16);border-radius:var(--radius-sm);box-shadow:0 var(--spacing-2) var(--spacing-8) #00000026;justify-content:space-between;align-items:center;animation:.3s ease-out forwards toast-in;display:flex}.toast--info{background-color:var(--toast-info-background-color);color:var(--toast-info-color);border-left:var(--spacing-4) solid var(--toast-info-border-color)}.toast--success{background-color:var(--toast-success-background-color);color:var(--toast-success-color);border-left:var(--spacing-4) solid var(--toast-success-border-color)}.toast--warning{background-color:var(--toast-warning-background-color);color:var(--toast-warning-color);border-left:var(--spacing-4) solid var(--toast-warning-border-color)}.toast--danger{background-color:var(--toast-danger-background-color);color:var(--toast-danger-color);border-left:var(--spacing-4) solid var(--toast-danger-border-color)}.toast--exiting{animation:.3s ease-in forwards toast-out}.toast__message{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);margin-right:var(--spacing-12);flex-grow:1}.toast__action-button{border-radius:var(--radius-sm);cursor:pointer;color:inherit;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);padding:var(--spacing-2) var(--spacing-8);white-space:nowrap;opacity:.8;background:0 0;border:1px solid;transition:opacity .2s}.toast__action-button:hover{opacity:1}.toast__close-button{cursor:pointer;color:inherit;opacity:.6;padding:var(--spacing-4);background:0 0;border:none;justify-content:center;align-items:center;transition:opacity .2s;display:flex}.toast__close-button:hover{opacity:1}@keyframes toast-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}

package/dist/components/ContextToast/ContextToast2.js

@@ -0,0 +1,96 @@
+import './ContextToast.css';
+import { Icon as f } from "../Icon/Icon2.js";
+import { Tooltip as x } from "../Tooltip/Tooltip2.js";
+/* empty css             */
+import { createContext as p, useCallback as T, useContext as C, useEffect as g, useMemo as b, useState as v } from "react";
+import { jsx as s, jsxs as _ } from "react/jsx-runtime";
+var h = p(null), N = () => {
+  const e = C(h);
+  if (!e) throw new Error("useToast must be used within a ToastProvider");
+  return e;
+}, $ = ({ id: e, message: r, type: n = "info", action: o, onClose: t, showDismissButton: u = !0, timeout: a = 2e3 }) => {
+  g(() => {
+    const d = setTimeout(() => {
+      t(e);
+    }, a);
+    return () => clearTimeout(d);
+  }, [
+    e,
+    t,
+    a
+  ]);
+  const [i, c] = v(!1), l = () => {
+    c(!0), setTimeout(() => t(e), 300);
+  }, m = () => {
+    o?.onClick(), l();
+  };
+  return /* @__PURE__ */ _("div", {
+    className: `toast toast--${n} ${i ? "toast--exiting" : ""}`,
+    children: [
+      /* @__PURE__ */ s("div", {
+        className: "toast__message",
+        children: r
+      }),
+      o && /* @__PURE__ */ s("button", {
+        onClick: m,
+        className: "toast__action-button",
+        children: o.label
+      }),
+      u && /* @__PURE__ */ s(x, {
+        title: "Close",
+        children: /* @__PURE__ */ s("button", {
+          onClick: l,
+          className: "toast__close-button",
+          children: /* @__PURE__ */ s(f, {
+            name: "clear",
+            size: "sm"
+          })
+        })
+      })
+    ]
+  });
+}, y = ({ position: e = "bottom-right", showDismissButton: r = !0 }) => {
+  const { toasts: n, removeToast: o } = N();
+  return /* @__PURE__ */ s("div", {
+    className: `toast-container toast-container--${e}`,
+    children: n.map((t) => /* @__PURE__ */ s($, {
+      id: t.id,
+      message: t.message,
+      type: t.type,
+      action: t.action,
+      showDismissButton: r,
+      timeout: t.timeout,
+      onClose: o
+    }, t.id))
+  });
+}, I = ({ children: e }) => {
+  const [r, n] = v([]), o = T((a) => {
+    n((i) => i.filter((c) => c.id !== a));
+  }, []), t = T((a, i = "info", c = 1500, l) => {
+    const m = `${Date.now().toString()}-${Math.random().toString(36).slice(2, 8)}`;
+    return n((d) => [...d, {
+      id: m,
+      message: a,
+      type: i,
+      timeout: c,
+      action: l
+    }]), m;
+  }, []), u = b(() => ({
+    toasts: r,
+    addToast: t,
+    removeToast: o
+  }), [
+    r,
+    t,
+    o
+  ]);
+  return /* @__PURE__ */ s(h.Provider, {
+    value: u,
+    children: e
+  });
+};
+export {
+  y as ToastContainer,
+  I as ToastProvider,
+  N as useToast
+};

package/dist/components/ControlPanel/ControlPanel.css

@@ -0,0 +1 @@
+.control-panel{--control-panel-width:280px;--control-panel-shadow:none;--control-panel-nav-depth:0;width:var(--control-panel-width);margin:var(--spacing-16);min-height:calc(100vh - var(--spacing-32));min-height:calc(100dvh - var(--spacing-32));background:var(--card-background-color);border:var(--spacing-1) solid var(--delimiter-color);border-radius:var(--radius);box-shadow:var(--control-panel-shadow);flex-shrink:0;transition:width .3s,transform .3s,border-color .3s;overflow-x:hidden}.control-panel__nav{gap:var(--spacing-4);padding:var(--spacing-8);border-top:var(--spacing-1) solid var(--delimiter-color);flex-direction:column;display:flex}.control-panel__nav-node{gap:var(--spacing-4);flex-direction:column;display:flex}.control-panel__nav-row{align-items:center;gap:var(--spacing-4);padding-left:calc(var(--control-panel-nav-depth) * var(--spacing-16));display:flex}.control-panel__nav-toggle,.control-panel__nav-toggle-placeholder{width:var(--spacing-24);height:var(--spacing-24);flex-shrink:0}.control-panel__nav-toggle{border-radius:var(--radius-sm);color:var(--body-color-muted);cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.control-panel__nav-toggle:hover{background:var(--card-background-accent-color);color:var(--body-color-accent)}.control-panel__nav-toggle--open{color:var(--body-accent-color);transform:rotate(90deg)}.control-panel__nav-toggle-placeholder{display:inline-block}.control-panel__nav-children{gap:var(--spacing-4);flex-direction:column;display:none}.control-panel__nav-children--open{display:flex}.control-panel__nav-item{align-items:center;gap:var(--spacing-8);width:100%;min-height:var(--spacing-40);padding:var(--spacing-8) var(--spacing-12);border:var(--spacing-1) solid transparent;border-radius:var(--radius);color:var(--body-color);font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);text-align:left;cursor:pointer;transition:background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);background:0 0;display:flex}.control-panel__nav-item:hover{background:var(--card-background-accent-color);color:var(--body-color-accent)}.control-panel__nav-item--active{border-color:var(--body-accent-color);background:var(--card-background-accent-color);color:var(--body-accent-color);font-weight:var(--font-weight-medium)}.control-panel__nav-item--dimmed{opacity:.45}.control-panel__nav-item--dimmed:hover{opacity:1}.control-panel__nav-label{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.control-panel__nav-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.control-panel__nav-icon{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.control-panel__nav-badges{align-items:center;gap:var(--spacing-4);padding-left:var(--spacing-8);margin-left:auto;display:flex}.control-panel__nav-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);justify-content:center;align-items:center;line-height:1;display:inline-flex}.control-panel__nav-badge--danger{background-color:var(--button-danger-background-color);color:var(--button-danger-color)}.control-panel__nav-badge--warning{background-color:var(--button-warning-background-color);color:var(--button-warning-color)}.control-panel__nav-count{padding-left:var(--spacing-8);color:var(--body-color-muted);font-size:var(--font-size-xs);margin-left:auto}.control-panel__actions{gap:var(--spacing-8);padding:var(--spacing-16);flex-direction:column;display:flex}.control-panel__action{justify-content:flex-start}.control-panel--closed:not(.control-panel--mobile){border-right-width:0;width:0}.control-panel--closed:not(.control-panel--mobile)>*{visibility:hidden;pointer-events:none}.control-panel--mobile{border:0;border-right:var(--spacing-1) solid var(--delimiter-color);z-index:1000;min-height:0;box-shadow:var(--spacing-2) 0 var(--spacing-8) var(--box-shadow);border-radius:0;margin:0;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}.control-panel--mobile.control-panel--open{transform:translate(0)}.control-panel--contained{position:absolute}.control-panel--flush:not(.control-panel--mobile){border-radius:0;min-height:100dvh;margin:0}.control-panel__overlay{z-index:999;background:#00000080;position:fixed;inset:0}.control-panel__overlay--contained{position:absolute}.control-panel__filters{align-items:flex-start;gap:var(--spacing-16);padding:var(--spacing-16);border-top:var(--spacing-1) solid var(--delimiter-color);flex-wrap:wrap;display:flex}.control-panel__filters-header{justify-content:space-between;align-items:center;gap:var(--spacing-12);color:var(--body-color);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);flex:100%;display:flex}.control-panel__filters-heading{align-items:center;gap:var(--spacing-8);display:flex}.control-panel__filters-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}.control-panel__filters-clear{color:var(--body-accent-color);cursor:pointer;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);background:0 0;border:0;padding:0}.control-panel__filters--collapsible{gap:var(--spacing-4)}.control-panel__filter{gap:var(--spacing-8);flex-direction:column;flex:100%;min-width:0;display:flex}.control-panel__filter--checkbox{flex:none}.control-panel__filter--collapsible{gap:var(--spacing-4);padding-bottom:var(--spacing-4);border-bottom:var(--spacing-1) solid var(--delimiter-color)}.control-panel__filter--collapsible:last-child{border-bottom:0;padding-bottom:0}.control-panel__filter-toggle{align-items:center;gap:var(--spacing-8);width:100%;padding:var(--spacing-6) 0;color:inherit;cursor:pointer;text-align:left;background:0 0;border:0;font-family:inherit;display:flex}.control-panel__filter-toggle:hover .control-panel__filter-title,.control-panel__filter-toggle:hover .control-panel__filter-caret{color:var(--body-color-accent)}.control-panel__filter-toggle .control-panel__filter-title{flex:0 auto;min-width:0}.control-panel__filter-summary{min-width:0;color:var(--body-accent-color);font-size:var(--font-size-xs);text-align:right;text-overflow:ellipsis;white-space:nowrap;flex:auto;overflow:hidden}.control-panel__filter-caret{color:var(--body-color-muted);flex-shrink:0;margin-left:auto;transition:color .2s;display:inline-flex}.control-panel__filter-title{align-items:center;gap:var(--spacing-6);color:var(--body-color-muted);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:0;text-transform:uppercase;display:flex}.control-panel__filter-title--active{color:var(--body-accent-color)}.control-panel__filter-active-dot{width:var(--spacing-6);height:var(--spacing-6);background:var(--body-accent-color);border-radius:999px;flex-shrink:0}.control-panel__filter-list,.control-panel__filter-chips{gap:var(--spacing-8);flex-direction:column;display:flex}.control-panel__filter-list--inline{flex-flow:wrap}.control-panel__filter-list--inline .control-panel__filter-radio{flex:none}.control-panel__filter-list--inline .control-panel__filter-radio-label{width:auto}.control-panel__filter-chips{flex-flow:wrap}.control-panel__filter-chips-wrap{gap:var(--spacing-8);flex-direction:column;display:flex}.control-panel__filter-chip-search{width:100%}.control-panel__filter-chip-avatar{width:var(--spacing-20);height:var(--spacing-20);border-radius:var(--radius-full);object-fit:cover;margin-left:calc(var(--spacing-4) * -1);margin-right:var(--spacing-6);vertical-align:middle;flex-shrink:0}.control-panel__filter-radio{min-height:var(--spacing-40);border:var(--spacing-1) solid transparent;border-radius:var(--radius);color:var(--body-color);font-size:var(--font-size-sm);background:0 0;align-items:center;transition:background .2s,border-color .2s,color .2s;display:flex}.control-panel__filter-radio:hover{background:var(--card-background-accent-color);color:var(--body-color-accent)}.control-panel__filter-radio--selected{border-color:var(--body-accent-color);background:var(--card-background-accent-color);color:var(--body-accent-color)}.control-panel__filter-radio--disabled{opacity:.45;cursor:not-allowed}.control-panel__filter-radio--disabled:hover{color:var(--body-color);background:0 0}.control-panel__filter-radio--disabled .control-panel__filter-radio-label{cursor:not-allowed}.control-panel__filter-radio-label{align-items:center;gap:var(--spacing-8);width:100%;min-width:0;padding:10px var(--spacing-12);cursor:pointer;display:flex}.control-panel__filter-radio-input{opacity:0;pointer-events:none;width:0;height:0;margin:0;position:absolute}.control-panel__filter-swatch{border-radius:999px;flex-shrink:0;width:10px;height:10px}.control-panel__filter-icon{color:var(--body-color);flex-shrink:0;align-items:center;display:inline-flex}.control-panel__filter-label{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.control-panel__filter-count{color:var(--body-color-muted);font-size:var(--font-size-xs);text-align:right;margin-left:auto}.control-panel__filter-search,.control-panel__filter-text .input-text-wrapper,.control-panel__filter-number .input-number-wrapper{width:100%}.control-panel__filter-range{align-items:center;gap:var(--spacing-8);display:flex}.control-panel__filter-range .input-number-wrapper{flex:1;min-width:0}.control-panel__filter-date-range{gap:var(--spacing-8);flex-direction:column;display:flex}.control-panel__filter-date-range .datepicker{width:100%;max-width:none}.control-panel__filter-date-presets{gap:var(--spacing-8);flex-wrap:wrap;display:flex}.control-panel__filter-range-sep{color:var(--body-color-muted);flex-shrink:0}.control-panel__filter-dropdown{width:100%}.control-panel__options{gap:var(--spacing-16);padding:var(--spacing-16);flex-direction:column;display:flex}.control-panel__options-header{align-items:center;gap:var(--spacing-12);color:var(--body-color);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);display:flex}.control-panel__options-heading{align-items:center;gap:var(--spacing-8);display:flex}.control-panel__option-group{gap:var(--spacing-12);flex-direction:column;display:flex}.control-panel__option-group-label{color:var(--body-accent-color);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:.05em;text-transform:uppercase}.control-panel__option{gap:var(--spacing-8);flex-direction:column;display:flex}.control-panel__option--checkbox{align-items:flex-start}.control-panel__option--slider .slider-input{margin-bottom:0}.control-panel__option-slider-value{color:var(--body-accent-color);font-variant-numeric:tabular-nums;text-transform:none;margin-left:auto}.control-panel__option-view-toggle{gap:var(--spacing-8);flex-wrap:wrap;display:flex}.control-panel::-webkit-scrollbar{width:var(--scrollbar-size)}.control-panel::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control-panel::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color);border-radius:var(--scrollbar-radius)}.control-panel::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover-color)}@media (width>=769px){.control-panel{overflow-y:auto}}

package/dist/components/ControlPanel/ControlPanel.types.js

@@ -0,0 +1,21 @@
+var a = [
+  {
+    label: "7d",
+    days: 7
+  },
+  {
+    label: "14d",
+    days: 14
+  },
+  {
+    label: "30d",
+    days: 30
+  },
+  {
+    label: "90d",
+    days: 90
+  }
+];
+export {
+  a as DEFAULT_DATE_RANGE_PRESETS
+};

package/dist/components/ControlPanel/ControlPanel2.js

@@ -0,0 +1,137 @@
+import './ControlPanel.css';
+import { Button as G } from "../Button/Button2.js";
+import { Tooltip as W } from "../Tooltip/Tooltip2.js";
+import { Separator as H } from "../Separator/Separator2.js";
+import { AppHeader as L } from "../AppHeader/AppHeader2.js";
+import { ConfirmPopover as U } from "../ConfirmPopover/ConfirmPopover2.js";
+import { useControlPanelContext as $ } from "./ControlPanelContext.js";
+import { DEFAULT_DATE_RANGE_PRESETS as io } from "./ControlPanel.types.js";
+import { ControlPanelFilterItem as q } from "./ControlPanelFilter.js";
+import { ControlPanelNav as J } from "./ControlPanelNav.js";
+import { ControlPanelOptions as K } from "./ControlPanelOptions.js";
+/* empty css             */
+import { useState as T } from "react";
+import { Fragment as B, jsx as l, jsxs as r } from "react/jsx-runtime";
+var fo = ({ width: o = "280px", className: a = "", isOpen: d, onClose: h, isMobile: C, showOverlay: c = !0, contained: s = !1, flush: v = !1, shadow: m = "none", header: n, navigation: N = [], actions: b = [], filters: u = [], filtersCount: p, collapsibleFilters: _ = !1, onFilterChange: F, onClearFilters: x, options: f = [], onOptionChange: I, viewToggle: k, groupBy: P, visibleColumns: y }) => {
+  const g = $(), e = C ?? g?.isMobile ?? !1, j = d ?? (e ? g?.isOpen ?? !1 : !0), t = h ?? g?.close ?? (() => {
+  }), z = [
+    "control-panel",
+    j ? "control-panel--open" : "control-panel--closed",
+    e ? "control-panel--mobile" : "",
+    s ? "control-panel--contained" : "",
+    v ? "control-panel--flush" : "",
+    a
+  ].filter(Boolean).join(" "), M = ["control-panel__overlay", s ? "control-panel__overlay--contained" : ""].filter(Boolean).join(" "), R = {
+    "--control-panel-width": o,
+    "--control-panel-shadow": m
+  }, E = f.length === 0 ? [] : "type" in f[0] ? [{ options: f }] : f, A = !!(k || P || y || E.length > 0), O = u.length > 0 || p !== void 0 && p > 0, V = typeof _ == "number" ? _ : _ ? 1 : 1 / 0, S = u.length >= V, w = ["control-panel__filters", S ? "control-panel__filters--collapsible" : ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r(B, { children: [c && e && j && /* @__PURE__ */ l("div", {
+    className: M,
+    onClick: t
+  }), /* @__PURE__ */ r("aside", {
+    className: z,
+    style: R,
+    children: [
+      n && /* @__PURE__ */ l(L, {
+        icon: n.icon,
+        emoji: n.emoji,
+        svg: n.svg,
+        appName: n.appName ?? n.siteName,
+        heading: n.heading,
+        onClick: n.onClick ? () => {
+          n.onClick?.(), e && t();
+        } : void 0
+      }),
+      b.length > 0 && /* @__PURE__ */ l("div", {
+        className: "control-panel__actions",
+        children: b.map((i) => /* @__PURE__ */ l(Q, {
+          action: i,
+          onActionComplete: e ? t : void 0
+        }, i.id))
+      }),
+      N.length > 0 && /* @__PURE__ */ l(J, {
+        navigation: N,
+        onNavigate: e ? t : void 0
+      }),
+      O && /* @__PURE__ */ r("div", {
+        className: w,
+        children: [/* @__PURE__ */ r("div", {
+          className: "control-panel__filters-header",
+          children: [/* @__PURE__ */ r("span", {
+            className: "control-panel__filters-heading",
+            children: ["Filters", p !== void 0 && /* @__PURE__ */ l("span", {
+              className: "control-panel__filters-count",
+              children: p
+            })]
+          }), x && /* @__PURE__ */ l("button", {
+            className: "control-panel__filters-clear",
+            type: "button",
+            onClick: () => x({ source: "control-panel" }),
+            children: "Clear filters"
+          })]
+        }), u.map((i) => /* @__PURE__ */ l(q, {
+          filter: i,
+          collapsible: i.collapsible ?? S,
+          onChange: (D) => F?.(D)
+        }, i.id))]
+      }),
+      O && A && /* @__PURE__ */ l(H, { spacing: 0 }),
+      A && /* @__PURE__ */ l(K, {
+        normalizedOptionGroups: E,
+        onOptionChange: I,
+        viewToggle: k,
+        onViewToggleComplete: e ? t : void 0,
+        groupBy: P,
+        visibleColumns: y
+      })
+    ]
+  })] });
+}, Q = ({ action: o, onActionComplete: a }) => {
+  const [d, h] = T(null), [C, c] = T(!1), s = (n) => {
+    if (o.confirm) {
+      h(n.currentTarget), c(!0);
+      return;
+    }
+    o.onClick?.(n), a?.();
+  }, v = () => {
+    o.onClick?.({}), a?.();
+  }, m = /* @__PURE__ */ l(G, {
+    className: "control-panel__action",
+    disabled: o.disabled,
+    fullWidth: o.fullWidth ?? !0,
+    icon: o.icon,
+    onClick: s,
+    size: o.size ?? "medium",
+    sufixIcon: o.suffixIcon,
+    variant: o.variant ?? "default",
+    children: o.label
+  });
+  return /* @__PURE__ */ r(B, { children: [o.tooltip ? /* @__PURE__ */ l(W, {
+    title: o.tooltip,
+    position: "right",
+    children: m
+  }) : m, o.confirm && /* @__PURE__ */ l(U, {
+    visible: C,
+    onClose: () => c(!1),
+    anchorEl: d,
+    title: o.confirm.title ?? o.label,
+    message: o.confirm.message,
+    icon: o.confirm.icon,
+    placement: o.confirm.placement ?? "right",
+    confirm: {
+      text: o.confirm.confirm?.text ?? "Confirm",
+      icon: o.confirm.confirm?.icon,
+      variant: o.confirm.confirm?.variant ?? o.variant ?? "info",
+      onClick: v
+    },
+    cancel: {
+      text: o.confirm.cancel?.text ?? "Cancel",
+      icon: o.confirm.cancel?.icon,
+      variant: o.confirm.cancel?.variant ?? "default"
+    }
+  })] });
+};
+export {
+  fo as ControlPanel,
+  io as DEFAULT_DATE_RANGE_PRESETS
+};

package/dist/components/ControlPanel/ControlPanelContext.js

@@ -0,0 +1,31 @@
+import { useBreakpoint as C } from "../../hooks/useBreakpoint.js";
+import { createContext as P, useCallback as t, useContext as m, useMemo as p, useState as v } from "react";
+import { jsx as x } from "react/jsx-runtime";
+var u = P(null), f = () => m(u), h = () => {
+  const e = f();
+  if (!e) throw new Error("useControlPanel must be used within a ControlPanelProvider");
+  return e;
+}, k = ({ children: e }) => {
+  const { isMobile: r } = C(), [n, o] = v(!1), s = t(() => o((c) => !c), []), l = t(() => o(!0), []), a = t(() => o(!1), []), i = p(() => ({
+    isMobile: r,
+    isOpen: n,
+    toggle: s,
+    open: l,
+    close: a
+  }), [
+    r,
+    n,
+    s,
+    l,
+    a
+  ]);
+  return /* @__PURE__ */ x(u.Provider, {
+    value: i,
+    children: e
+  });
+};
+export {
+  k as ControlPanelProvider,
+  h as useControlPanel,
+  f as useControlPanelContext
+};