@rafal.lemieszewski/tide-ui 0.83.0 → 0.84.3

package/dist/es/components/product/view-mode-menu.js

@@ -0,0 +1,353 @@
+import { jsxs as s, jsx as n, Fragment as v } from "react/jsx-runtime";
+import { forwardRef as ne, useState as V, useImperativeHandle as le, useEffect as T } from "react";
+import { Button as se } from "../fundamental/button.js";
+import { DropdownMenu as re, DropdownMenuTrigger as ie, DropdownMenuContent as te, DropdownMenuSeparator as F } from "../fundamental/dropdown-menu.js";
+import { Select as d, SelectTrigger as h, SelectValue as u, SelectContent as m, SelectItem as a } from "../fundamental/select.js";
+import { Toggle as ae } from "../fundamental/toggle.js";
+import { Tabs as oe, TabsList as ce, TabsTrigger as y } from "../fundamental/tabs.js";
+import { Switch as de } from "../fundamental/switch.js";
+import { Label as he } from "../fundamental/label.js";
+import { Icon as w } from "../fundamental/icon.js";
+import { Input as ue } from "../fundamental/input.js";
+function me(i) {
+  if (!i) return null;
+  try {
+    const c = localStorage.getItem(i);
+    return c ? JSON.parse(c) : null;
+  } catch {
+    return null;
+  }
+}
+function ge(i, c) {
+  if (i)
+    try {
+      localStorage.setItem(i, JSON.stringify(c));
+    } catch (g) {
+      console.warn("Failed to save settings to localStorage:", g);
+    }
+}
+function L(i = "table", c = []) {
+  return {
+    viewMode: i,
+    table: {
+      sortDirection: "asc",
+      visibleColumns: c.map((g) => g.id)
+      // Initialize with all columns visible
+    },
+    columns: {
+      sortDirection: "asc"
+    },
+    folders: {
+      sortDirection: "asc",
+      showFoldersFirst: !1
+    }
+  };
+}
+function M(i) {
+  if (i?.directionOptions)
+    return i.directionOptions;
+  if (i?.dataType)
+    switch (i.dataType) {
+      case "text":
+        return { asc: "A to Z", desc: "Z to A" };
+      case "number":
+        return { asc: "Ascending", desc: "Descending" };
+      case "date":
+        return { asc: "Oldest first", desc: "Newest first" };
+      case "boolean":
+        return { asc: "False first", desc: "True first" };
+    }
+  return { asc: "Ascending", desc: "Descending" };
+}
+const pe = ne(
+  function({
+    persistenceKey: c,
+    defaultViewMode: g = "table",
+    sortableColumns: C = [],
+    groupableColumns: D = [],
+    columns: p = [],
+    columnsSortableColumns: x,
+    columnsGroupableColumns: f,
+    foldersSortableColumns: b,
+    align: O = "end",
+    triggerClassName: R
+  }, j) {
+    const [r, t] = V(() => {
+      const e = me(c);
+      return e || L(g, p);
+    }), [N, A] = V("");
+    le(j, () => ({
+      getSettings: () => r,
+      reset: () => {
+        t(L(g, p));
+      }
+    })), T(() => {
+      ge(c, r);
+    }, [r, c]), T(() => {
+      r.viewMode === "columns" && !r.columns.groupColumn && f && f.length > 0 && t((e) => ({
+        ...e,
+        columns: {
+          ...e.columns,
+          groupColumn: f[0].id
+        }
+      }));
+    }, [r.viewMode, r.columns.groupColumn, f]);
+    const W = C.length > 0, I = D.length > 0, P = p.length > 0, J = (x?.length ?? 0) > 0, S = (f?.length ?? 0) > 0, z = (b?.length ?? 0) > 0, Z = 1 + (z ? 1 : 0) + (S ? 1 : 0) > 1, B = N ? p.filter(
+      (e) => e.label.toLowerCase().includes(N.toLowerCase())
+    ) : p, E = p.length >= 20, G = (e) => {
+      t((l) => ({ ...l, viewMode: e }));
+    }, H = (e) => {
+      t((l) => ({
+        ...l,
+        table: { ...l.table, sortColumn: e }
+      }));
+    }, k = (e) => {
+      t((l) => ({
+        ...l,
+        table: { ...l.table, sortDirection: e }
+      }));
+    }, q = (e) => {
+      t((l) => ({
+        ...l,
+        table: { ...l.table, groupColumn: e === "none" ? void 0 : e }
+      }));
+    }, Q = (e, l) => {
+      t((o) => ({
+        ...o,
+        table: {
+          ...o.table,
+          visibleColumns: l ? [...o.table.visibleColumns, e] : o.table.visibleColumns.filter((ee) => ee !== e)
+        }
+      }));
+    }, U = (e) => {
+      t((l) => ({
+        ...l,
+        columns: { ...l.columns, sortColumn: e }
+      }));
+    }, X = (e) => {
+      t((l) => ({
+        ...l,
+        columns: { ...l.columns, sortDirection: e }
+      }));
+    }, Y = (e) => {
+      t((l) => ({
+        ...l,
+        columns: { ...l.columns, groupColumn: e === "none" ? void 0 : e }
+      }));
+    }, _ = (e) => {
+      t((l) => ({
+        ...l,
+        folders: { ...l.folders, sortColumn: e }
+      }));
+    }, $ = (e) => {
+      t((l) => ({
+        ...l,
+        folders: { ...l.folders, sortDirection: e }
+      }));
+    }, K = (e) => {
+      t((l) => ({
+        ...l,
+        folders: { ...l.folders, showFoldersFirst: e }
+      }));
+    };
+    return /* @__PURE__ */ s(re, { children: [
+      /* @__PURE__ */ n(ie, { asChild: !0, children: /* @__PURE__ */ n(
+        se,
+        {
+          size: "m",
+          icon: "settings",
+          className: R
+        }
+      ) }),
+      /* @__PURE__ */ s(te, { align: O, className: "w-72 max-w-[90vw]", children: [
+        Z && /* @__PURE__ */ s(v, { children: [
+          /* @__PURE__ */ s("div", { className: "px-3 pt-3 pb-2", children: [
+            /* @__PURE__ */ n("h3", { className: "text-label-sm text-[var(--color-text-tertiary)] mb-2", children: "View mode" }),
+            /* @__PURE__ */ n(oe, { value: r.viewMode, onValueChange: G, children: /* @__PURE__ */ s(ce, { variant: "pilled", size: "s", fullWidth: !0, children: [
+              /* @__PURE__ */ n(y, { variant: "pilled", size: "s", fullWidth: !0, value: "table", children: "Table" }),
+              z && /* @__PURE__ */ n(y, { variant: "pilled", size: "s", fullWidth: !0, value: "folders", children: "Folders" }),
+              S && /* @__PURE__ */ n(y, { variant: "pilled", size: "s", fullWidth: !0, value: "columns", children: "Columns" })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ n(F, {})
+        ] }),
+        /* @__PURE__ */ s("div", { className: "p-3", children: [
+          r.viewMode === "table" && /* @__PURE__ */ s("div", { className: "space-y-4", children: [
+            W && /* @__PURE__ */ s("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ n("h4", { className: "text-label-sm text-[var(--color-text-tertiary)]", children: "Sorting" }),
+              /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: [
+                /* @__PURE__ */ s(d, { value: r.table.sortColumn, onValueChange: H, children: [
+                  /* @__PURE__ */ n(h, { size: "s", children: /* @__PURE__ */ n(u, { placeholder: "Select column to sort" }) }),
+                  /* @__PURE__ */ n(m, { children: C.map((e) => /* @__PURE__ */ n(a, { value: e.id, children: e.label }, e.id)) })
+                ] }),
+                r.table.sortColumn && /* @__PURE__ */ s(
+                  d,
+                  {
+                    value: r.table.sortDirection,
+                    onValueChange: (e) => k(e),
+                    children: [
+                      /* @__PURE__ */ n(h, { size: "s", children: /* @__PURE__ */ n(u, {}) }),
+                      /* @__PURE__ */ n(m, { children: (() => {
+                        const e = C.find((o) => o.id === r.table.sortColumn), l = M(e);
+                        return /* @__PURE__ */ s(v, { children: [
+                          /* @__PURE__ */ n(a, { value: "asc", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+                            /* @__PURE__ */ n(w, { name: "arrow-down-narrow-wide", size: "s" }),
+                            /* @__PURE__ */ n("span", { children: l.asc })
+                          ] }) }),
+                          /* @__PURE__ */ n(a, { value: "desc", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+                            /* @__PURE__ */ n(w, { name: "arrow-down-wide-narrow", size: "s" }),
+                            /* @__PURE__ */ n("span", { children: l.desc })
+                          ] }) })
+                        ] });
+                      })() })
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            I && /* @__PURE__ */ s("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ n("h4", { className: "text-label-sm text-[var(--color-text-tertiary)]", children: "Grouping" }),
+              /* @__PURE__ */ s(d, { value: r.table.groupColumn || "none", onValueChange: q, children: [
+                /* @__PURE__ */ n(h, { size: "s", children: /* @__PURE__ */ n(u, { placeholder: "Select column to group by" }) }),
+                /* @__PURE__ */ s(m, { children: [
+                  /* @__PURE__ */ n(a, { value: "none", children: "None" }),
+                  D.map((e) => /* @__PURE__ */ n(a, { value: e.id, children: e.label }, e.id))
+                ] })
+              ] })
+            ] }),
+            P && /* @__PURE__ */ s("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ n("h4", { className: "text-label-sm text-[var(--color-text-tertiary)]", children: "Display columns" }),
+              E && /* @__PURE__ */ n(
+                ue,
+                {
+                  type: "search",
+                  size: "s",
+                  placeholder: "Search columns...",
+                  value: N,
+                  onChange: (e) => A(e.target.value)
+                }
+              ),
+              /* @__PURE__ */ n("div", { className: "flex flex-wrap items-start justify-start gap-1 max-h-[190px] overflow-y-auto", children: B.map((e) => {
+                const l = r.table.visibleColumns.includes(e.id);
+                return /* @__PURE__ */ n(
+                  ae,
+                  {
+                    variant: "outline",
+                    size: "s",
+                    pressed: l,
+                    onPressedChange: (o) => {
+                      Q(e.id, o);
+                    },
+                    children: e.label
+                  },
+                  e.id
+                );
+              }) })
+            ] })
+          ] }),
+          r.viewMode === "folders" && b && b.length > 0 && /* @__PURE__ */ n(v, { children: /* @__PURE__ */ s("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ n("h4", { className: "text-label-sm text-[var(--color-text-tertiary)]", children: "Sorting" }),
+            /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ s(
+                d,
+                {
+                  value: r.folders.sortColumn,
+                  onValueChange: _,
+                  children: [
+                    /* @__PURE__ */ n(h, { size: "s", children: /* @__PURE__ */ n(u, { placeholder: "Select column" }) }),
+                    /* @__PURE__ */ n(m, { children: b.map((e) => /* @__PURE__ */ n(a, { value: e.id, children: e.label }, e.id)) })
+                  ]
+                }
+              ),
+              r.folders.sortColumn && /* @__PURE__ */ s(
+                d,
+                {
+                  value: r.folders.sortDirection,
+                  onValueChange: (e) => $(e),
+                  children: [
+                    /* @__PURE__ */ n(h, { size: "s", children: /* @__PURE__ */ n(u, {}) }),
+                    /* @__PURE__ */ n(m, { children: (() => {
+                      const e = b.find((o) => o.id === r.folders.sortColumn), l = M(e);
+                      return /* @__PURE__ */ s(v, { children: [
+                        /* @__PURE__ */ n(a, { value: "asc", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ n(w, { name: "arrow-down-narrow-wide", size: "s" }),
+                          /* @__PURE__ */ n("span", { children: l.asc })
+                        ] }) }),
+                        /* @__PURE__ */ n(a, { value: "desc", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ n(w, { name: "arrow-down-wide-narrow", size: "s" }),
+                          /* @__PURE__ */ n("span", { children: l.desc })
+                        ] }) })
+                      ] });
+                    })() })
+                  ]
+                }
+              )
+            ] })
+          ] }) }),
+          r.viewMode === "columns" && /* @__PURE__ */ s("div", { className: "space-y-4", children: [
+            S && /* @__PURE__ */ s("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ n("h4", { className: "text-label-sm text-[var(--color-text-tertiary)]", children: "Grouping" }),
+              /* @__PURE__ */ s(d, { value: r.columns.groupColumn || "none", onValueChange: Y, children: [
+                /* @__PURE__ */ n(h, { size: "s", children: /* @__PURE__ */ n(u, { placeholder: "Select column to group by" }) }),
+                /* @__PURE__ */ s(m, { children: [
+                  /* @__PURE__ */ n(a, { value: "none", children: "None" }),
+                  f?.map((e) => /* @__PURE__ */ n(a, { value: e.id, children: e.label }, e.id))
+                ] })
+              ] })
+            ] }),
+            J && /* @__PURE__ */ s("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ n("h4", { className: "text-label-sm text-[var(--color-text-tertiary)]", children: "Sorting" }),
+              /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: [
+                /* @__PURE__ */ s(d, { value: r.columns.sortColumn, onValueChange: U, children: [
+                  /* @__PURE__ */ n(h, { size: "s", children: /* @__PURE__ */ n(u, { placeholder: "Select column to sort" }) }),
+                  /* @__PURE__ */ n(m, { children: x?.map((e) => /* @__PURE__ */ n(a, { value: e.id, children: e.label }, e.id)) })
+                ] }),
+                r.columns.sortColumn && /* @__PURE__ */ s(
+                  d,
+                  {
+                    value: r.columns.sortDirection,
+                    onValueChange: (e) => X(e),
+                    children: [
+                      /* @__PURE__ */ n(h, { size: "s", children: /* @__PURE__ */ n(u, {}) }),
+                      /* @__PURE__ */ n(m, { children: (() => {
+                        const e = x?.find((o) => o.id === r.columns.sortColumn), l = M(e);
+                        return /* @__PURE__ */ s(v, { children: [
+                          /* @__PURE__ */ n(a, { value: "asc", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+                            /* @__PURE__ */ n(w, { name: "arrow-down-narrow-wide", size: "s" }),
+                            /* @__PURE__ */ n("span", { children: l.asc })
+                          ] }) }),
+                          /* @__PURE__ */ n(a, { value: "desc", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+                            /* @__PURE__ */ n(w, { name: "arrow-down-wide-narrow", size: "s" }),
+                            /* @__PURE__ */ n("span", { children: l.desc })
+                          ] }) })
+                        ] });
+                      })() })
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }),
+        r.viewMode === "folders" && /* @__PURE__ */ s(v, { children: [
+          /* @__PURE__ */ n(F, {}),
+          /* @__PURE__ */ n("div", { className: "p-3", children: /* @__PURE__ */ s("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ n(he, { htmlFor: "folders-first", children: "Show folders first" }),
+            /* @__PURE__ */ n(
+              de,
+              {
+                id: "folders-first",
+                checked: r.folders.showFoldersFirst,
+                onCheckedChange: K
+              }
+            )
+          ] }) })
+        ] })
+      ] })
+    ] });
+  }
+);
+pe.displayName = "ViewModeMenu";
+export {
+  pe as ViewModeMenu
+};

package/dist/es/lib/date-utils.js

@@ -0,0 +1,151 @@
+function r() {
+  const t = /* @__PURE__ */ new Date(), e = t.getDay(), n = (e === 0 ? -6 : 1) - e, a = new Date(t);
+  return a.setDate(t.getDate() + n), a.setHours(0, 0, 0, 0), a;
+}
+function w() {
+  const t = r(), e = new Date(t);
+  return e.setDate(t.getDate() + 6), e.setHours(23, 59, 59, 999), e;
+}
+function h() {
+  const t = /* @__PURE__ */ new Date();
+  return new Date(t.getFullYear(), t.getMonth(), 1);
+}
+function i() {
+  const t = /* @__PURE__ */ new Date();
+  return new Date(t.getFullYear(), t.getMonth() + 1, 0, 23, 59, 59, 999);
+}
+function D() {
+  const t = /* @__PURE__ */ new Date();
+  return new Date(t.getFullYear(), 0, 1);
+}
+function f() {
+  const t = /* @__PURE__ */ new Date();
+  return new Date(t.getFullYear(), 11, 31, 23, 59, 59, 999);
+}
+function d() {
+  const t = r(), e = new Date(t);
+  return e.setDate(t.getDate() - 7), e;
+}
+function y() {
+  const t = r(), e = new Date(t);
+  return e.setDate(t.getDate() - 1), e.setHours(23, 59, 59, 999), e;
+}
+function L() {
+  const t = /* @__PURE__ */ new Date();
+  return new Date(t.getFullYear(), t.getMonth() - 1, 1);
+}
+function Y() {
+  const t = /* @__PURE__ */ new Date();
+  return new Date(t.getFullYear(), t.getMonth(), 0, 23, 59, 59, 999);
+}
+function M() {
+  const t = /* @__PURE__ */ new Date();
+  return new Date(t.getFullYear() - 1, 0, 1);
+}
+function m() {
+  const t = /* @__PURE__ */ new Date();
+  return new Date(t.getFullYear() - 1, 11, 31, 23, 59, 59, 999);
+}
+function s(t) {
+  const e = /* @__PURE__ */ new Date(), n = new Date(e);
+  return n.setDate(e.getDate() - t), n.setHours(0, 0, 0, 0), n;
+}
+function o() {
+  const t = /* @__PURE__ */ new Date();
+  return t.setHours(23, 59, 59, 999), t;
+}
+function c() {
+  const t = /* @__PURE__ */ new Date(), e = Math.floor(t.getMonth() / 3);
+  return new Date(t.getFullYear(), e * 3, 1);
+}
+function S() {
+  const t = /* @__PURE__ */ new Date(), e = Math.floor(t.getMonth() / 3);
+  return new Date(t.getFullYear(), e * 3 + 3, 0, 23, 59, 59, 999);
+}
+function l() {
+  const t = /* @__PURE__ */ new Date(), e = Math.floor(t.getMonth() / 3), n = e === 0 ? 3 : e - 1, a = e === 0 ? t.getFullYear() - 1 : t.getFullYear();
+  return new Date(a, n * 3, 1);
+}
+function F() {
+  const t = /* @__PURE__ */ new Date(), e = Math.floor(t.getMonth() / 3), n = e === 0 ? 3 : e - 1, a = e === 0 ? t.getFullYear() - 1 : t.getFullYear();
+  return new Date(a, n * 3 + 3, 0, 23, 59, 59, 999);
+}
+function u(t) {
+  return `Q${Math.floor(t.getMonth() / 3) + 1} ${t.getFullYear()}`;
+}
+function k(t) {
+  switch (t) {
+    case "this-week":
+      return [r(), w()];
+    case "this-month":
+      return [h(), i()];
+    case "this-year":
+      return [D(), f()];
+    case "last-week":
+      return [d(), y()];
+    case "last-month":
+      return [L(), Y()];
+    case "last-year":
+      return [M(), m()];
+    case "last-30-days":
+      return [s(30), o()];
+    case "last-90-days":
+      return [s(90), o()];
+    case "last-6-months":
+      return [s(180), o()];
+    case "this-quarter":
+      return [c(), S()];
+    case "last-quarter":
+      return [l(), F()];
+    default:
+      return;
+  }
+}
+function T(t, e) {
+  const n = {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  }, a = t.toLocaleDateString("en-US", n), g = e.toLocaleDateString("en-US", n);
+  return `${a} - ${g}`;
+}
+function q(t) {
+  return {
+    custom: "Custom",
+    "this-week": "This week",
+    "this-month": "This month",
+    "this-year": "This year",
+    "last-week": "Last week",
+    "last-month": "Last month",
+    "last-year": "Last year",
+    "last-30-days": "Last 30 days",
+    "last-90-days": "Last 90 days",
+    "last-6-months": "Last 6 months",
+    "this-quarter": `This quarter (${u(c())})`,
+    "last-quarter": `Last quarter (${u(l())})`
+  }[t] || t;
+}
+export {
+  k as calculatePresetRange,
+  T as formatDateRange,
+  s as getDaysAgo,
+  Y as getLastMonthEnd,
+  L as getLastMonthStart,
+  F as getLastQuarterEnd,
+  l as getLastQuarterStart,
+  y as getLastWeekEnd,
+  d as getLastWeekStart,
+  m as getLastYearEnd,
+  M as getLastYearStart,
+  q as getPresetLabel,
+  u as getQuarterLabel,
+  i as getThisMonthEnd,
+  h as getThisMonthStart,
+  S as getThisQuarterEnd,
+  c as getThisQuarterStart,
+  w as getThisWeekEnd,
+  r as getThisWeekStart,
+  f as getThisYearEnd,
+  D as getThisYearStart,
+  o as getToday
+};

package/dist/es/lib/hooks.js

@@ -0,0 +1,29 @@
+import { useState as a, useEffect as o } from "react";
+function u(n) {
+  const [s, i] = a(!1);
+  return o(() => {
+    if (typeof window > "u") return;
+    const t = window.matchMedia(n);
+    i(t.matches);
+    const e = (r) => {
+      i(r.matches);
+    };
+    return t.addEventListener("change", e), () => t.removeEventListener("change", e);
+  }, [n]), s;
+}
+function f() {
+  const [n, s] = a(!0), [i, t] = a(!1);
+  return o(() => {
+    if (typeof window > "u") return;
+    const e = window.matchMedia("(min-width: 768px)");
+    s(e.matches), t(!0);
+    const r = (c) => {
+      s(c.matches);
+    };
+    return e.addEventListener("change", r), () => e.removeEventListener("change", r);
+  }, []), i ? n : !0;
+}
+export {
+  f as useIsDesktop,
+  u as useMediaQuery
+};