@memobit/libs 3.0.0 → 3.1.1

package/dist/components/DataView/DataView2.js

@@ -0,0 +1,433 @@
+import './DataView.css';
+import { Icon as X } from "../Icon/Icon2.js";
+import { Button as mt } from "../Button/Button2.js";
+import { Tooltip as Te } from "../Tooltip/Tooltip2.js";
+import { Checkbox as re } from "../Checkbox/Checkbox2.js";
+import { useBreakpoint as pt } from "../../hooks/useBreakpoint.js";
+import { Dropdown as vt } from "../Dropdown/Dropdown2.js";
+import { getResultsCount as _t } from "../../helpers/Pagination.js";
+import { EmptyState as oe } from "../EmptyState/EmptyState2.js";
+import { Pagination as Ae } from "../Pagination/Pagination2.js";
+import { TimelineMarkerDot as wt, calculateTimelineMarkers as gt } from "../TimelineMarkers/TimelineMarkers2.js";
+import { CardView as bt, DEFAULT_PAGE_SIZES as Ee, getColumnLabel as yt, renderCellContent as kt, renderColumnLabel as Ct } from "./DataView.CardView.js";
+import { DataViewColumnSelector as Nt } from "./DataView.ColumnSelector.js";
+import { DataViewMiniSort as St } from "./DataView.MiniSort.js";
+/* empty css         */
+import Ge, { useMemo as L, useState as P } from "react";
+import { Fragment as Mt, jsx as t, jsxs as c } from "react/jsx-runtime";
+function Pt({ state: h }) {
+  return /* @__PURE__ */ t("span", {
+    className: `data-view__sort-icon data-view__sort-icon--${h}`,
+    children: /* @__PURE__ */ t(X, { name: h === "asc" ? "arrow-up" : h === "desc" ? "arrow-down" : "arrow-bidirectional-vertical" })
+  });
+}
+function Wt({ columns: h, data: I, rowKey: Le, pinnedIds: y, selectable: w = !1, onSelectionChange: Ve, selectedIds: le, pageSizeOptions: ce = Ee, initialPageSize: xe = Ee[1], showPageSize: $ = !0, card: Be, actions: k, actionsWidth: K, timeline: C, onRowClick: R, rowHref: de, rowClassName: he, rowDetail: Fe, empty: N, initialSortKey: Ie = null, initialSortDirection: Ke = "asc", sortKey: Z, sortDirection: ue, onSortChange: Re, miniSort: z, showCardSortControls: ze = !0, desktopView: fe = "table", cardMaxWidth: Ue, className: D, onPageChange: We, onPageSizeChange: me, currentPage: pe, totalItems: ve, group: o, showResultsCount: je = !0, totalCount: Oe, itemNoun: Xe, columnSelector: q }) {
+  const { isMobile: Ze } = pt(), [qe, Je] = P(Ie), [Qe, Ye] = P(Ke), [He, et] = P([]), m = le ?? He, [tt, at] = P(1), nt = pe ?? tt, [T, _e] = P(xe), [S, st] = P(() => h.reduce((e, n) => (n.width && (e[n.key] = n.width), e), {})), [we, it] = P(/* @__PURE__ */ new Set()), ge = (e) => {
+    it((n) => {
+      const i = new Set(n);
+      return i.has(e) ? i.delete(e) : i.add(e), i;
+    });
+  }, M = (e, n) => Le?.(e, n) ?? n, V = (e) => {
+    pe === void 0 && at(e), We?.(e);
+  }, p = Z !== void 0 ? Z : qe, v = ue ?? Qe, A = (e, n) => {
+    Z === void 0 && Je(e), ue === void 0 && Ye(n), Re?.({
+      key: e,
+      direction: n
+    }), V(1);
+  }, U = L(() => new Set(y ?? []), [y]), W = L(() => {
+    let e = I;
+    if (p) {
+      const a = h.find((s) => s.key === p);
+      if (a) {
+        const s = a.sortAccessor || a.accessor || ((f) => {
+          const u = f[a.key];
+          return typeof u == "string" || typeof u == "number" ? u : "";
+        }), r = [...I].sort((f, u) => {
+          const _ = s(f), d = s(u);
+          return typeof _ == "number" && typeof d == "number" ? _ - d : String(_).localeCompare(String(d));
+        });
+        e = v === "asc" ? r : r.reverse();
+      }
+    }
+    if (U.size === 0) return e;
+    const n = [], i = [];
+    if (e.forEach((a, s) => {
+      U.has(M(a, s)) ? n.push(a) : i.push(a);
+    }), y && y.length > 1 && n.length > 1) {
+      const a = new Map(y.map((s, r) => [s, r]));
+      n.sort((s, r) => (a.get(M(s, 0)) ?? 0) - (a.get(M(r, 0)) ?? 0));
+    }
+    return [...n, ...i];
+  }, [
+    h,
+    I,
+    v,
+    p,
+    U,
+    y
+  ]), j = ve !== void 0, x = L(() => {
+    if (!o || j) return W;
+    const e = /* @__PURE__ */ new Map(), n = [];
+    W.forEach((a) => {
+      const s = o.groupBy(a), r = e.get(s);
+      r ? r.push(a) : (e.set(s, [a]), n.push(s));
+    });
+    const i = n.map((a) => {
+      const s = e.get(a);
+      return {
+        key: a,
+        label: o.groupLabel(a),
+        items: s,
+        totalCount: s.length
+      };
+    });
+    return o.sortGroups ? i.sort(o.sortGroups) : i.sort((a, s) => a.key === null ? 1 : s.key === null ? -1 : 0), i.flatMap((a) => a.items);
+  }, [
+    o,
+    j,
+    W
+  ]), O = j ? ve : x.length, J = Math.max(1, Math.ceil(O / T)), B = Math.min(nt, J), g = j ? x : x.slice((B - 1) * T, B * T), Q = je ? _t(T, O, Oe ?? O, B, Xe) : null, Y = L(() => {
+    if (!o) return null;
+    const e = /* @__PURE__ */ new Map();
+    return x.forEach((n) => {
+      const i = o.groupBy(n);
+      e.set(i, (e.get(i) ?? 0) + 1);
+    }), e;
+  }, [o, x]), H = L(() => {
+    if (!o || !Y) return null;
+    const e = /* @__PURE__ */ new Map(), n = [];
+    g.forEach((a) => {
+      const s = o.groupBy(a), r = e.get(s);
+      r ? r.push(a) : (e.set(s, [a]), n.push(s));
+    });
+    const i = n.map((a) => ({
+      key: a,
+      label: o.groupLabel(a),
+      items: e.get(a),
+      totalCount: Y.get(a) ?? 0
+    }));
+    return o.sortGroups ? i.sort(o.sortGroups) : i.sort((a, s) => a.key === null ? 1 : s.key === null ? -1 : 0), i;
+  }, [
+    o,
+    Y,
+    g
+  ]), be = L(() => C ? gt(g.map((e) => ({
+    id: C.idAccessor(e),
+    date: C.dateAccessor(e)
+  })), C.granularity) : /* @__PURE__ */ new Map(), [g, C]), E = (e) => {
+    le === void 0 && et(e), Ve?.(I.filter((n, i) => e.includes(M(n, i))));
+  }, rt = (e) => {
+    e.sortable && (p === e.key ? A(e.key, v === "asc" ? "desc" : "asc") : A(e.key, "asc"));
+  }, ot = (e, n) => {
+    e.preventDefault();
+    const i = e.clientX, a = S[n] ?? 150, s = (f) => {
+      const u = f.clientX - i, _ = h.find((d) => d.key === n)?.minWidth ?? 120;
+      st((d) => ({
+        ...d,
+        [n]: Math.max(_, a + u)
+      }));
+    }, r = () => {
+      window.removeEventListener("mousemove", s), window.removeEventListener("mouseup", r);
+    };
+    window.addEventListener("mousemove", s), window.addEventListener("mouseup", r);
+  }, ye = h.some((e) => e.filter), ee = h.filter((e) => e.sortable), lt = ee.map((e) => ({
+    label: yt(e),
+    value: e.key
+  })), ct = ee.length > 0, te = p ? ee.find((e) => e.key === p) : void 0, dt = z?.align ?? "left", ke = (z?.columns ?? z?.column ?? []).length > 0 ? /* @__PURE__ */ t(St, {
+    columns: h,
+    config: z,
+    sortKey: p,
+    sortDirection: v,
+    onSort: A
+  }) : null, Ce = q && q.options.length > 0 ? /* @__PURE__ */ t(Nt, { config: q }) : null, b = g.map(M), ae = b.filter((e) => m.includes(e)).length, ne = !!w && b.length > 0 && ae === b.length, Ne = !!w && ae > 0 && ae < b.length, Se = (e) => {
+    E(e ? [...m, ...b.filter((n) => !m.includes(n))] : m.filter((n) => !b.includes(n)));
+  }, ht = w && b.length > 0 ? /* @__PURE__ */ c("label", {
+    className: "data-view__select-all",
+    children: [/* @__PURE__ */ t(re, {
+      checked: ne,
+      indeterminate: Ne,
+      onChange: Se
+    }), /* @__PURE__ */ t("span", { children: ne ? "Clear selection" : `Select these ${b.length}` })]
+  }) : null, Me = (e) => Q || ke || Ce || e ? /* @__PURE__ */ c("div", {
+    className: `data-view__top-row data-view__top-row--mini-${dt}`,
+    children: [
+      Q && /* @__PURE__ */ t("div", {
+        className: "data-view__results-count",
+        children: Q
+      }),
+      e,
+      ke,
+      Ce
+    ]
+  }) : null, Pe = Me();
+  if (fe !== "cards" && h.length === 0) return /* @__PURE__ */ c("div", {
+    className: `data-view${D ? ` ${D}` : ""}`,
+    children: [Pe, /* @__PURE__ */ t("div", {
+      className: "data-view__wrapper data-view__wrapper--empty",
+      children: /* @__PURE__ */ t(oe, {
+        title: "No columns selected",
+        description: "Use the Columns button above to pick which columns to display."
+      })
+    })]
+  });
+  if (fe === "cards") return /* @__PURE__ */ c("div", {
+    className: `data-view data-view--cards${D ? ` ${D}` : ""}`,
+    children: [
+      Me(ht),
+      ze && ct && /* @__PURE__ */ c("div", {
+        className: "data-view__card-sort-bar",
+        children: [/* @__PURE__ */ t("div", {
+          className: "data-view__card-sort-field",
+          children: /* @__PURE__ */ t(vt, {
+            name: "data-view-card-sort",
+            label: "Sort by",
+            options: lt,
+            value: p,
+            placeholder: "Sort by...",
+            searchable: !1,
+            usePortal: !1,
+            onChange: (e) => {
+              if (!e || Array.isArray(e)) {
+                A(null, v);
+                return;
+              }
+              const n = String(e.value);
+              A(n, p === n ? v : "asc");
+            }
+          })
+        }), /* @__PURE__ */ t(Te, {
+          title: v === "asc" ? "Sort descending" : "Sort ascending",
+          children: /* @__PURE__ */ t(mt, {
+            className: "data-view__card-sort-direction",
+            disabled: !te,
+            onClick: () => {
+              te && A(te.key, v === "asc" ? "desc" : "asc");
+            },
+            variant: "ghost",
+            children: /* @__PURE__ */ t(X, { name: v === "asc" ? "arrow-up" : "arrow-down" })
+          })
+        })]
+      }),
+      ye && /* @__PURE__ */ t("div", {
+        className: "data-view__filter-bar",
+        children: h.filter((e) => e.filter).map((e) => /* @__PURE__ */ t("div", {
+          className: "data-view__filter-bar-item",
+          children: e.filter
+        }, e.key))
+      }),
+      /* @__PURE__ */ t(bt, {
+        data: g,
+        columns: h,
+        rowKey: M,
+        card: Be,
+        actions: k,
+        timeline: C,
+        onRowClick: R,
+        rowHref: de,
+        rowClassName: he,
+        empty: N,
+        selectable: w,
+        selectedIds: m,
+        pinnedIds: y,
+        cardMaxWidth: Ue,
+        isMobile: Ze,
+        groups: H ?? void 0,
+        showGroupCount: o?.showCount !== !1,
+        collapsible: o?.collapsible,
+        collapsedGroups: we,
+        onToggleGroup: ge,
+        onToggleSelect: (e, n) => {
+          E(n ? [...m, e] : m.filter((i) => i !== e));
+        }
+      }),
+      /* @__PURE__ */ t(Ae, {
+        currentPage: B,
+        totalPages: J,
+        totalItems: O,
+        onPageChange: V,
+        pageSizeOptions: $ ? ce : void 0,
+        pageSize: $ ? T : void 0,
+        onPageSizeChange: $ ? (e) => {
+          _e(e), V(1), me?.(e);
+        } : void 0
+      })
+    ]
+  });
+  const F = h.filter((e) => !e.hideInTable), G = C && be.size > 0, $e = /* @__PURE__ */ c(Mt, { children: [
+    Pe,
+    /* @__PURE__ */ t("div", {
+      className: "data-view__wrapper",
+      children: /* @__PURE__ */ c("table", { children: [/* @__PURE__ */ c("thead", { children: [/* @__PURE__ */ c("tr", { children: [
+        G && /* @__PURE__ */ t("th", { className: "data-view__timeline-cell" }),
+        w && /* @__PURE__ */ t("th", {
+          className: "data-view__checkbox",
+          children: /* @__PURE__ */ t(re, {
+            checked: ne,
+            indeterminate: Ne,
+            onChange: Se
+          })
+        }),
+        F.map((e) => {
+          const n = {};
+          return S[e.key] && (n.width = S[e.key]), e.minWidth && (n.minWidth = e.minWidth), /* @__PURE__ */ c("th", {
+            style: Object.keys(n).length > 0 ? n : void 0,
+            className: e.sortable ? "is-sortable" : "",
+            onClick: () => rt(e),
+            children: [/* @__PURE__ */ c("span", {
+              className: "data-view__th-content",
+              children: [Ct(e), e.sortable && /* @__PURE__ */ t(Pt, { state: p === e.key ? v : "unsorted" })]
+            }), /* @__PURE__ */ t("span", {
+              className: "data-view__resizer",
+              onMouseDown: (i) => ot(i, e.key),
+              onClick: (i) => i.stopPropagation()
+            })]
+          }, e.key);
+        }),
+        k && /* @__PURE__ */ t("th", {
+          className: "data-view__actions-header",
+          style: K ? { width: K } : void 0,
+          children: "Actions"
+        })
+      ] }), ye && /* @__PURE__ */ c("tr", {
+        className: "data-view__filter-row",
+        children: [
+          G && /* @__PURE__ */ t("td", { className: "data-view__filter-cell data-view__filter-cell--spacer" }),
+          w && /* @__PURE__ */ t("td", { className: "data-view__filter-cell data-view__filter-cell--spacer" }),
+          F.map((e) => /* @__PURE__ */ t("td", {
+            className: "data-view__filter-cell",
+            style: S[e.key] ? { width: S[e.key] } : void 0,
+            children: e.filter ?? null
+          }, e.key)),
+          k && /* @__PURE__ */ t("td", { className: "data-view__filter-cell data-view__filter-cell--spacer" })
+        ]
+      })] }), /* @__PURE__ */ t("tbody", { children: (() => {
+        if (g.length === 0) return /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t("td", {
+          colSpan: F.length + (G ? 1 : 0) + (w ? 1 : 0) + (k ? 1 : 0),
+          className: "data-view__empty",
+          children: N ? /* @__PURE__ */ t(oe, {
+            title: N.title,
+            description: N.description,
+            icon: N.icon,
+            primary: N.primary,
+            secondary: N.secondary
+          }) : /* @__PURE__ */ t(oe, { title: "No data available" })
+        }) });
+        const e = F.length + (G ? 1 : 0) + (w ? 1 : 0) + (k ? 1 : 0), n = o?.showCount !== !1, i = (a, s) => {
+          const r = M(a, s), f = m.includes(r), u = U.has(r), _ = be.get(s), d = de?.(a), De = !!R || !!d, ut = (l) => {
+            if (d && (l.metaKey || l.ctrlKey || l.shiftKey)) {
+              window.open(d, "_blank", "noopener,noreferrer");
+              return;
+            }
+            if (R) {
+              R(a, l);
+              return;
+            }
+            d && window.location.assign(d);
+          }, ft = (l) => {
+            l.button !== 1 || !d || (l.preventDefault(), window.open(d, "_blank", "noopener,noreferrer"));
+          }, se = Fe?.(a);
+          return /* @__PURE__ */ c(Ge.Fragment, { children: [/* @__PURE__ */ c("tr", {
+            className: `${f ? "is-selected" : ""} ${De ? "data-view__row--clickable" : ""} ${u ? "data-view__row--pinned" : ""} ${he?.(a) || ""}`,
+            onClick: De ? ut : void 0,
+            onAuxClick: d ? ft : void 0,
+            children: [
+              G && /* @__PURE__ */ t("td", {
+                className: "data-view__timeline-cell",
+                children: _ && /* @__PURE__ */ t(wt, { marker: _ })
+              }),
+              w && /* @__PURE__ */ t("td", {
+                className: "data-view__checkbox",
+                children: /* @__PURE__ */ t(re, {
+                  checked: f,
+                  onChange: (l) => {
+                    E(l ? [...m, r] : m.filter((ie) => ie !== r));
+                  }
+                })
+              }),
+              F.map((l, ie) => /* @__PURE__ */ c("td", {
+                style: S[l.key] ? { width: S[l.key] } : void 0,
+                children: [ie === 0 && u && /* @__PURE__ */ t(Te, {
+                  title: "Pinned",
+                  children: /* @__PURE__ */ t(X, {
+                    className: "data-view__pin-indicator",
+                    name: "pin",
+                    size: "sm"
+                  })
+                }), kt(l, a)]
+              }, l.key)),
+              k && /* @__PURE__ */ t("td", {
+                className: "data-view__actions-cell",
+                style: K ? { width: K } : void 0,
+                children: /* @__PURE__ */ t("div", {
+                  className: "data-view__table-actions",
+                  onClick: (l) => l.stopPropagation(),
+                  children: k(a)
+                })
+              })
+            ]
+          }), se != null && se !== !1 && /* @__PURE__ */ t("tr", {
+            className: "data-view__row-detail",
+            children: /* @__PURE__ */ t("td", {
+              colSpan: e,
+              onClick: (l) => l.stopPropagation(),
+              children: se
+            })
+          })] }, r);
+        };
+        if (H) {
+          let a = 0;
+          return H.map((s) => {
+            const r = a;
+            a += s.items.length;
+            const f = o?.collapsible && we.has(s.key);
+            return /* @__PURE__ */ c(Ge.Fragment, { children: [/* @__PURE__ */ t("tr", {
+              className: `data-view__group-row${o?.collapsible ? " data-view__group-row--collapsible" : ""}`,
+              onClick: o?.collapsible ? () => ge(s.key) : void 0,
+              children: /* @__PURE__ */ c("td", {
+                colSpan: e,
+                className: "data-view__group-cell",
+                children: [
+                  /* @__PURE__ */ t("span", {
+                    className: "data-view__group-label",
+                    children: s.label
+                  }),
+                  n && /* @__PURE__ */ t("span", {
+                    className: "data-view__group-count",
+                    children: s.items.length === s.totalCount ? s.totalCount : `${s.items.length} of ${s.totalCount}`
+                  }),
+                  o?.collapsible && /* @__PURE__ */ t(X, {
+                    className: "data-view__group-chevron",
+                    name: f ? "caret-down" : "caret-up",
+                    size: "sm"
+                  })
+                ]
+              })
+            }), !f && s.items.map((u, _) => i(u, r + _))] }, s.key ?? "__null__");
+          });
+        }
+        return g.map((a, s) => i(a, s));
+      })() })] })
+    }),
+    /* @__PURE__ */ t(Ae, {
+      currentPage: B,
+      totalPages: J,
+      totalItems: W.length,
+      onPageChange: V,
+      pageSizeOptions: $ ? ce : void 0,
+      pageSize: $ ? T : void 0,
+      onPageSizeChange: $ ? (e) => {
+        _e(e), V(1), me?.(e);
+      } : void 0
+    })
+  ] });
+  return /* @__PURE__ */ t("div", {
+    className: `data-view${D ? ` ${D}` : ""}`,
+    children: G ? /* @__PURE__ */ c("div", {
+      className: "timeline-markers",
+      children: [/* @__PURE__ */ t("div", { className: "timeline-markers__track" }), $e]
+    }) : $e
+  });
+}
+export {
+  Wt as DataView
+};

package/dist/components/DatePicker/DatePicker.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}.datepicker{width:100%;max-width:300px;display:inline-block;position:relative}.datepicker__input{background-color:var(--form-control-background-color);border:var(--spacing-1) solid var(--form-control-border-color);border-radius:var(--radius-sm);color:var(--form-control-color);cursor:pointer;justify-content:space-between;align-items:center;gap:var(--spacing-8);padding:var(--spacing-12);font-size:var(--font-size-sm);line-height:var(--line-height-normal);box-sizing:border-box;transition:border-color .2s,background-color .2s;display:flex}.datepicker__input:hover:not(.datepicker__input--disabled){border-color:var(--form-control-focus-border-color)}.datepicker__input--open{border-color:var(--form-control-focus-border-color);background-color:var(--form-control-focus-background-color)}.datepicker__input--disabled{opacity:.5;cursor:not-allowed}.datepicker__value{font-size:inherit;white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.datepicker__value--placeholder{color:var(--form-control-placeholder-color)}.datepicker__actions{align-items:center;gap:var(--spacing-4);display:flex}.datepicker__clear{color:var(--form-control-placeholder-color);cursor:pointer;font-size:var(--font-size-md);background:0 0;border:none;padding:0;line-height:1;transition:color .2s}.datepicker__clear:hover{color:var(--form-control-color)}.datepicker__icon{font-size:var(--font-size-md);line-height:1}.datepicker__dropdown{background-color:var(--calendar-background-color);border:1px solid var(--calendar-border-color);border-radius:var(--radius);padding:var(--spacing-16);box-sizing:border-box;min-width:280px;max-height:calc(100vh - var(--spacing-32));z-index:1100;position:fixed;top:0;left:0;overflow-y:auto;box-shadow:0 4px 12px #00000026}.datepicker__dropdown--inline{margin-top:var(--spacing-12);box-shadow:none;z-index:auto;max-height:none;position:static;overflow:visible}.datepicker__dropdown-close{width:var(--spacing-32);height:var(--spacing-32);margin:calc(var(--spacing-16) * -1) calc(var(--spacing-16) * -1) 0 auto;border-radius:var(--radius-full);color:var(--body-sub-title-color);cursor:pointer;z-index:1;background:0 0;border:none;justify-content:center;align-items:center;transition:color .2s,background-color .2s;display:flex;position:sticky;top:0}.datepicker__dropdown-close:hover{color:var(--body-color);background-color:var(--card-background-accent-color)}.datepicker__time{border-top:1px solid var(--calendar-border-color);margin-top:var(--spacing-16);padding-top:var(--spacing-16)}

package/dist/components/DatePicker/DatePicker2.js

@@ -0,0 +1,151 @@
+import './DatePicker.css';
+import { Icon as H } from "../Icon/Icon2.js";
+import { Tooltip as Y } from "../Tooltip/Tooltip2.js";
+import { APP_DATE_FORMAT as Z, formatDate as l } from "../../helpers/Datetime.js";
+import { Calendar as O } from "../Calendar/Calendar2.js";
+import { TimePicker as ee } from "../TimePicker/TimePicker2.js";
+/* empty css           */
+import { useCallback as te, useEffect as x, useRef as E, useState as D } from "react";
+import { Fragment as ne, jsx as i, jsxs as h } from "react/jsx-runtime";
+import { createPortal as re } from "react-dom";
+var me = ({ value: t, onChange: g, mode: s = "single", withTime: f = !1, timeFormat: L = "24h", withSeconds: w = !1, withClock: M = !1, clockSize: P = 208, minuteStep: I = 1, dateFormat: _ = Z, placeholder: z = "Select date...", disabled: b = !1, clearable: F = !0, autoClose: N = !0, alwaysOpen: r = !1, ...C }) => {
+  const [j, u] = D(!1), [k, S] = D({
+    hours: 0,
+    minutes: 0,
+    seconds: 0
+  }), [B, p] = D(null), [q, $] = D({
+    position: "fixed",
+    visibility: "hidden"
+  }), m = E(null), c = E(null);
+  x(() => {
+    f && t instanceof Date && S({
+      hours: t.getHours(),
+      minutes: t.getMinutes(),
+      seconds: t.getSeconds()
+    });
+  }, [t, f]);
+  const o = r ? !b : j;
+  x(() => {
+    if (r) return;
+    const e = (n) => {
+      o && m.current && c.current && !m.current.contains(n.target) && !c.current.contains(n.target) && (p(null), u(!1));
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, [r, o]);
+  const a = te(() => {
+    if (r || !o || !m.current || !c.current) return;
+    const e = m.current.getBoundingClientRect(), n = c.current.getBoundingClientRect(), d = 16, A = 8, Q = window.innerHeight - e.bottom - d, T = e.top - d, U = Q < n.height && T > n.height ? e.top - n.height - A : e.bottom + A, V = Math.max(d, Math.min(U, window.innerHeight - n.height - d)), X = Math.max(d, Math.min(e.left, window.innerWidth - n.width - d));
+    $({
+      position: "fixed",
+      top: `${V}px`,
+      left: `${X}px`,
+      zIndex: 1100
+    });
+  }, [r, o]);
+  x(() => {
+    if (r || !o) {
+      $({
+        position: "fixed",
+        visibility: "hidden"
+      });
+      return;
+    }
+    const e = requestAnimationFrame(() => requestAnimationFrame(a));
+    window.addEventListener("resize", a), window.addEventListener("scroll", a, !0);
+    const n = new ResizeObserver(() => a());
+    return c.current && n.observe(c.current), () => {
+      cancelAnimationFrame(e), n.disconnect(), window.removeEventListener("resize", a), window.removeEventListener("scroll", a, !0);
+    };
+  }, [
+    r,
+    o,
+    a
+  ]);
+  const y = () => {
+    if (!t) return "";
+    if (s === "single" && t instanceof Date) {
+      const e = l(t, _);
+      return f ? `${e} ${w ? l(t, "HH:mm:ss") : l(t, "HH:mm")}` : e;
+    }
+    return s === "range" && t && "start" in t ? `${l(t.start, _)} - ${l(t.end, _)}` : s === "multiple" && Array.isArray(t) ? t.map((e) => l(e, _)).join(", ") : "";
+  }, W = (e) => {
+    if (!f || !(e instanceof Date)) {
+      g?.(e), N && s !== "multiple" && !r && u(!1);
+      return;
+    }
+    const n = new Date(e);
+    n.setHours(k.hours, k.minutes, k.seconds), g?.(n), N && !r && u(!1);
+  }, G = (e) => {
+    if (S(e), !(t instanceof Date)) return;
+    const n = new Date(t);
+    n.setHours(e.hours, e.minutes, e.seconds), g?.(n);
+  }, J = (e) => {
+    e.stopPropagation(), p(null), g?.(void 0);
+  }, K = () => {
+    p(null), u(!1);
+  }, R = y(), v = () => /* @__PURE__ */ h(ne, { children: [/* @__PURE__ */ i(O, {
+    ...C,
+    mode: s,
+    value: t,
+    onChange: W,
+    rangeStart: s === "range" ? B : C.rangeStart,
+    onRangeStartChange: s === "range" ? p : C.onRangeStartChange
+  }), f && s === "single" && t instanceof Date && /* @__PURE__ */ i("div", {
+    className: "datepicker__time",
+    children: /* @__PURE__ */ i(ee, {
+      clockSize: P,
+      format: L,
+      minuteStep: I,
+      onChange: G,
+      value: k,
+      withClock: M,
+      withSeconds: w
+    })
+  })] });
+  return /* @__PURE__ */ h("div", {
+    className: "datepicker",
+    children: [/* @__PURE__ */ h("div", {
+      ref: m,
+      className: `datepicker__input ${b ? "datepicker__input--disabled" : ""} ${o ? "datepicker__input--open" : ""}`,
+      onClick: () => {
+        b || r || (o && p(null), u(!o));
+      },
+      children: [/* @__PURE__ */ i("span", {
+        className: `datepicker__value ${R ? "" : "datepicker__value--placeholder"}`,
+        children: R || z
+      }), /* @__PURE__ */ h("div", {
+        className: "datepicker__actions",
+        children: [F && R && /* @__PURE__ */ i(Y, {
+          title: "Clear",
+          children: /* @__PURE__ */ i("button", {
+            type: "button",
+            className: "datepicker__clear",
+            onClick: J,
+            children: "×"
+          })
+        }), /* @__PURE__ */ i("span", {
+          className: "datepicker__icon",
+          children: /* @__PURE__ */ i(H, { name: "calendar" })
+        })]
+      })]
+    }), o && (r ? /* @__PURE__ */ i("div", {
+      ref: c,
+      className: "datepicker__dropdown datepicker__dropdown--inline",
+      children: v()
+    }) : re(/* @__PURE__ */ h("div", {
+      ref: c,
+      className: "datepicker__dropdown",
+      style: q,
+      children: [/* @__PURE__ */ i("button", {
+        type: "button",
+        className: "datepicker__dropdown-close",
+        onClick: K,
+        title: "Close",
+        children: /* @__PURE__ */ i(H, { name: "clear" })
+      }), v()]
+    }), document.body))]
+  });
+};
+export {
+  me as DatePicker
+};

package/dist/components/DateRangePicker/DateRangePicker.css

@@ -0,0 +1 @@
+.date-range-picker{gap:var(--spacing-12);background:var(--card-background-color);border:1px solid var(--delimiter-color);border-radius:var(--radius);-webkit-backdrop-filter:var(--card-backdrop-filter,none);padding:var(--spacing-16);flex-direction:column;display:flex}.date-range-picker__label-row{justify-content:space-between;align-items:center;gap:var(--spacing-8);display:flex}.date-range-picker__label{color:var(--form-control-label-color,var(--body-color));font-size:var(--form-control-label-font-size,inherit);font-weight:var(--form-control-label-font-weight,var(--font-weight-semibold));letter-spacing:var(--form-control-label-letter-spacing,normal);text-transform:var(--form-control-label-text-transform,none)}.date-range-picker__presets{gap:var(--spacing-4);flex-wrap:wrap;display:flex}.date-range-picker__inputs{align-items:center;gap:var(--spacing-8);flex-wrap:wrap;display:flex}.date-range-picker__inputs .input-text-wrapper{flex:1 1 var(--spacing-100)}.date-range-picker__inputs .input-text{width:100%}.date-range-picker__separator{color:var(--body-color-muted)}.date-range-picker__toggle{margin-left:auto}.date-range-picker__calendar{gap:var(--spacing-12);flex-direction:column;display:flex}.date-range-picker__overlay{background:var(--card-background-color);border:var(--spacing-1) solid var(--delimiter-color);border-radius:var(--radius);-webkit-backdrop-filter:var(--card-backdrop-filter,none);box-shadow:var(--card-surface-box-shadow,var(--card-box-shadow));max-height:calc(100vh - var(--spacing-32));max-width:calc(100vw - var(--spacing-32));padding:var(--spacing-16);position:fixed;top:0;left:0;overflow:auto}.date-range-picker__nav{justify-content:space-between;align-items:center;gap:var(--spacing-12);display:flex}.date-range-picker__nav .button{padding:var(--spacing-8) var(--spacing-12)}.date-range-picker__months{gap:var(--spacing-16);flex-wrap:wrap;display:flex}.date-range-picker__months .calendar{flex:1 1 var(--spacing-200)}