@rafal.lemieszewski/tide-ui 0.83.0 → 0.84.3

package/dist/es/components/product/fixture-status.js

@@ -0,0 +1,178 @@
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import C from "react";
+import { Icon as s } from "../fundamental/icon.js";
+import { Badge as k } from "../fundamental/badge.js";
+import { cn as t } from "../../lib/utils.js";
+import { TooltipProvider as q, Tooltip as F, TooltipTrigger as T, TooltipContent as R } from "../fundamental/tooltip.js";
+const f = {
+  // Order statuses
+  "order-draft": { icon: "hexagon-dashed", color: "tertiary", objectLabel: "Order", statusLabel: "Draft" },
+  "order-distributed": { icon: "hexagon-asterisk", color: "information", objectLabel: "Order", statusLabel: "Distributed" },
+  "order-withdrawn": { icon: "hexagon-minus", color: "error", objectLabel: "Order", statusLabel: "Withdrawn" },
+  // Negotiation statuses
+  "negotiation-indicative-offer": { icon: "circle-dashed-arrow-down", color: "information", objectLabel: "Negotiation", statusLabel: "Indicative offer" },
+  "negotiation-indicative-bid": { icon: "circle-dashed-arrow-up", color: "information", objectLabel: "Negotiation", statusLabel: "Indicative bid" },
+  "negotiation-firm-offer": { icon: "circle-arrow-down", color: "information", objectLabel: "Negotiation", statusLabel: "Firm offer" },
+  "negotiation-firm-bid": { icon: "circle-arrow-up", color: "information", objectLabel: "Negotiation", statusLabel: "Firm bid" },
+  "negotiation-firm": { icon: "circle-dot-2", color: "violet", objectLabel: "Negotiation", statusLabel: "Firm" },
+  "negotiation-on-subs": { icon: "circle-diamond", color: "warning", objectLabel: "Negotiation", statusLabel: "On subs" },
+  "negotiation-fixed": { icon: "circle-check-2", color: "success", objectLabel: "Negotiation", statusLabel: "Fixed" },
+  "negotiation-firm-offer-expired": { icon: "clock-alert", color: "error", objectLabel: "Negotiation", statusLabel: "(Firm offer) Expired" },
+  "negotiation-withdrawn": { icon: "circle-minus", color: "error", objectLabel: "Negotiation", statusLabel: "Withdrawn" },
+  "negotiation-firm-amendment": { icon: "circle-plus", color: "violet", objectLabel: "Negotiation", statusLabel: "Firm (Amendment)" },
+  "negotiation-subs-expired": { icon: "clock-alert", color: "error", objectLabel: "Negotiation", statusLabel: "Subs expired" },
+  "negotiation-subs-failed": { icon: "circle-slash", color: "error", objectLabel: "Negotiation", statusLabel: "Subs failed" },
+  "negotiation-on-subs-amendment": { icon: "circle-plus", color: "warning", objectLabel: "Negotiation", statusLabel: "On subs (amendment)" },
+  // Contract statuses
+  "contract-draft": { icon: "square-dashed-chart-gantt", color: "tertiary", objectLabel: "Contract", statusLabel: "Draft" },
+  "contract-working-copy": { icon: "square-chart-gantt", color: "information", objectLabel: "Contract", statusLabel: "Working copy" },
+  "contract-final": { icon: "square-check", color: "success", objectLabel: "Contract", statusLabel: "Final" },
+  "contract-rejected": { icon: "square-x", color: "error", objectLabel: "Contract", statusLabel: "Rejected" },
+  // Addenda statuses
+  "addenda-draft": { icon: "square-dashed-corner-plus", color: "tertiary", objectLabel: "Addenda", statusLabel: "Draft" },
+  "addenda-working-copy": { icon: "square-corner-plus", color: "information", objectLabel: "Addenda", statusLabel: "Working copy" },
+  "addenda-final": { icon: "square-corner-check", color: "success", objectLabel: "Addenda", statusLabel: "Final" },
+  // Recap Manager statuses
+  "recap-manager-draft": { icon: "square-dashed-chart-gantt", color: "tertiary", objectLabel: "Recap manager", statusLabel: "Draft" },
+  "recap-manager-on-subs": { icon: "square-diamond", color: "warning", objectLabel: "Recap manager", statusLabel: "On subs" },
+  "recap-manager-fully-fixed": { icon: "square-check", color: "success", objectLabel: "Recap manager", statusLabel: "Fully fixed" },
+  "recap-manager-canceled": { icon: "square-minus", color: "error", objectLabel: "Recap manager", statusLabel: "Canceled" },
+  "recap-manager-failed": { icon: "square-slash", color: "error", objectLabel: "Recap manager", statusLabel: "Failed" }
+}, L = {
+  xs: "text-body-medium-xsm",
+  s: "text-body-medium-sm",
+  m: "text-body-medium-md",
+  l: "text-body-medium-lg"
+}, l = {
+  xs: "s",
+  s: "s",
+  m: "m",
+  l: "l"
+}, x = {
+  xs: "translate-y-[0.5px]",
+  s: "translate-y-[0px]",
+  m: "translate-y-[0.5px]",
+  l: "translate-y-[0.5px]"
+}, p = {
+  xs: "gap-[var(--space-xs)]",
+  s: "gap-[var(--space-xs)]",
+  m: "gap-[var(--space-s)]",
+  l: "gap-[var(--space-s)]"
+}, h = {
+  primary: "text-[var(--color-text-primary)]",
+  secondary: "text-[var(--color-text-secondary)]",
+  tertiary: "text-[var(--color-text-tertiary)]",
+  brand: "text-[var(--color-text-brand-bold)]",
+  information: "text-[var(--color-text-info-bold)]",
+  success: "text-[var(--color-text-success-bold)]",
+  warning: "text-[var(--color-text-warning-bold)]",
+  error: "text-[var(--color-text-error-bold)]",
+  violet: "text-[var(--violet-500)]"
+}, O = {
+  primary: "neutral",
+  secondary: "neutral",
+  tertiary: "neutral",
+  brand: "brand",
+  information: "information",
+  success: "success",
+  warning: "warning",
+  error: "destructive",
+  violet: "violet"
+}, S = {
+  xs: "xs",
+  s: "s",
+  m: "m",
+  l: "l"
+}, D = /* @__PURE__ */ C.forwardRef(
+  ({
+    value: b,
+    size: a = "s",
+    showObject: j = !1,
+    iconOnly: y = !1,
+    lowercase: u = !1,
+    asBadge: v = !1,
+    className: r,
+    ...n
+  }, c) => {
+    const e = f[b];
+    if (!e)
+      return console.warn(
+        `Unknown status "${b}". Available statuses:`,
+        Object.keys(f)
+      ), /* @__PURE__ */ d(
+        "div",
+        {
+          ref: c,
+          className: t(
+            "inline-flex items-center p-0.5",
+            p[a],
+            L[a],
+            r
+          ),
+          ...n,
+          children: [
+            /* @__PURE__ */ o("span", { className: t("flex-shrink-0", x[a]), children: /* @__PURE__ */ o(s, { name: "circle-help", size: l[a], color: "secondary" }) }),
+            /* @__PURE__ */ o("span", { className: h.secondary, children: "Unknown status" })
+          ]
+        }
+      );
+    const w = u ? e.objectLabel.toLowerCase() : e.objectLabel, m = u ? e.statusLabel.toLowerCase() : e.statusLabel, i = j ? `${w} • ${m}` : m;
+    if (v) {
+      const g = e.color === "tertiary", N = g ? "secondary" : e.color;
+      return /* @__PURE__ */ o(
+        k,
+        {
+          ref: c,
+          appearance: "subtle",
+          intent: O[e.color] ?? "neutral",
+          size: S[a],
+          icon: /* @__PURE__ */ o(s, { name: e.icon, size: l[a], color: N }),
+          className: t(g && "text-[var(--color-text-secondary)]", r),
+          ...n,
+          children: i
+        }
+      );
+    }
+    return y ? /* @__PURE__ */ o(q, { delayDuration: 200, children: /* @__PURE__ */ d(F, { children: [
+      /* @__PURE__ */ o(T, { asChild: !0, children: /* @__PURE__ */ o(
+        "div",
+        {
+          ref: c,
+          className: t("inline-flex p-0.5", r),
+          ...n,
+          children: /* @__PURE__ */ o(
+            s,
+            {
+              name: e.icon,
+              size: l[a],
+              color: e.color,
+              "aria-label": i
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ o(R, { children: i })
+    ] }) }) : /* @__PURE__ */ d(
+      "div",
+      {
+        ref: c,
+        className: t(
+          "inline-flex items-center p-0.5",
+          p[a],
+          L[a],
+          r
+        ),
+        ...n,
+        children: [
+          /* @__PURE__ */ o("span", { className: t("flex-shrink-0", x[a]), children: /* @__PURE__ */ o(s, { name: e.icon, size: l[a], color: e.color }) }),
+          /* @__PURE__ */ o("span", { className: h[e.color], children: i })
+        ]
+      }
+    );
+  }
+);
+D.displayName = "FixtureStatus";
+export {
+  D as FixtureStatus,
+  f as statusConfig
+};

package/dist/es/components/product/linked-chart.js

@@ -0,0 +1,179 @@
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { useState as v, useMemo as O, useCallback as m } from "react";
+import { Chart as ee } from "../fundamental/chart.js";
+import { Table as re, TableHeader as se, TableRow as P, TableHead as te, TableBody as le, TableCell as ne } from "../fundamental/table.js";
+import { Card as k, CardContent as z, CardHeader as ae, CardTitle as ie } from "../fundamental/card.js";
+import { Button as U } from "../fundamental/button.js";
+import { Icon as w } from "../fundamental/icon.js";
+import { Badge as H } from "../fundamental/badge.js";
+import { cn as T } from "../../lib/utils.js";
+function be({
+  title: f,
+  description: p,
+  data: n,
+  config: C,
+  columns: b,
+  type: E,
+  enableFiltering: g = !0,
+  enableRowSelection: u = !0,
+  onRowSelectionChange: x,
+  onDataFilter: y,
+  showTable: F = !0,
+  tableClassName: R,
+  chartClassName: V,
+  enableRowFiltering: S = !1,
+  className: q,
+  ...G
+}) {
+  const [a, j] = v(/* @__PURE__ */ new Set()), [A, L] = v(null), [_, N] = v(null), [d, B] = v(/* @__PURE__ */ new Set()), [o, D] = v(!1), i = O(() => d.size > 0 ? n.filter((e, s) => d.has(s)) : o && a.size > 0 ? n.filter((e, s) => a.has(s)) : n, [n, d, a, o]), J = m((e, s) => {
+    if (s !== void 0 && e) {
+      const t = n.findIndex((c) => c === i[s]);
+      N(t !== -1 ? t : null);
+    } else
+      N(null);
+  }, [n, i]), K = m((e, s) => {
+    if (!g) return;
+    const t = n.findIndex((h) => h === i[s]);
+    if (t === -1) return;
+    const c = new Set(d);
+    c.has(t) ? c.delete(t) : c.add(t), B(c);
+    const $ = n.filter((h, Z) => c.has(Z));
+    y?.($);
+  }, [g, d, n, y, i]), Q = m((e) => {
+    if (!u) return;
+    const s = new Set(a);
+    s.has(e) ? s.delete(e) : s.add(e), j(s), x?.(Array.from(s));
+  }, [u, a, x]), M = m((e) => {
+    L(e);
+  }, []), W = m(() => {
+    j(/* @__PURE__ */ new Set()), B(/* @__PURE__ */ new Set()), L(null), N(null), D(!1), x?.([]), y?.([]);
+  }, [x, y]), X = m((e, s, t) => {
+    if (s.format)
+      return s.format(e, t);
+    switch (s.type) {
+      case "currency":
+        return typeof e == "number" ? `$${e.toLocaleString()}` : e;
+      case "percentage":
+        return typeof e == "number" ? `${e}%` : e;
+      case "number":
+        return typeof e == "number" ? e.toLocaleString() : e;
+      default:
+        return e;
+    }
+  }, []), I = A ?? _, Y = O(() => {
+    if (I !== null) {
+      const e = i.findIndex((s) => n[I] === s);
+      return e !== -1 ? e : void 0;
+    }
+  }, [I, i, n]);
+  return /* @__PURE__ */ l("div", { className: T("space-y-[var(--space-l)]", q), children: [
+    (f || p) && /* @__PURE__ */ l("div", { className: "space-y-[var(--space-s)]", children: [
+      f && /* @__PURE__ */ r("h3", { className: "text-heading-md", children: f }),
+      p && /* @__PURE__ */ r("p", { className: "text-body-md text-[var(--color-text-secondary)]", children: p })
+    ] }),
+    /* @__PURE__ */ l("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ l("div", { className: "flex items-center gap-[var(--space-s)]", children: [
+        a.size > 0 && /* @__PURE__ */ l(H, { intent: "neutral", appearance: "subtle", size: "s", children: [
+          a.size,
+          " selected",
+          o ? " (filtered)" : ""
+        ] }),
+        d.size > 0 && /* @__PURE__ */ l(H, { intent: "brand", appearance: "subtle", size: "s", children: [
+          d.size,
+          " chart filtered"
+        ] })
+      ] }),
+      /* @__PURE__ */ l("div", { className: "flex items-center gap-[var(--space-s)]", children: [
+        S && a.size > 0 && /* @__PURE__ */ l(
+          U,
+          {
+            size: "s",
+            variant: o ? "default" : "ghost",
+            onClick: () => D(!o),
+            children: [
+              /* @__PURE__ */ r(w, { name: "filter", size: "s", className: "mr-[var(--space-xs)]" }),
+              "Filter selected"
+            ]
+          }
+        ),
+        (a.size > 0 || d.size > 0 || o) && /* @__PURE__ */ l(U, { variant: "ghost", size: "s", onClick: W, children: [
+          /* @__PURE__ */ r(w, { name: "x", size: "s", className: "mr-[var(--space-s)]" }),
+          "Clear all"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ r(k, { children: /* @__PURE__ */ r(z, { className: "p-[var(--space-l)]", children: /* @__PURE__ */ r(
+      ee,
+      {
+        ...G,
+        type: E,
+        data: i,
+        config: C,
+        onDataPointClick: K,
+        onDataPointHover: J,
+        highlightedIndex: Y,
+        className: V
+      }
+    ) }) }),
+    F && /* @__PURE__ */ l(k, { children: [
+      /* @__PURE__ */ r(ae, { children: /* @__PURE__ */ l(ie, { className: "text-heading-sm flex items-center justify-between", children: [
+        "Data Table",
+        /* @__PURE__ */ l(H, { intent: "neutral", appearance: "subtle", size: "s", children: [
+          i.length,
+          " rows"
+        ] })
+      ] }) }),
+      /* @__PURE__ */ r(z, { children: /* @__PURE__ */ r("div", { className: T("rounded-m border border-[var(--color-border-primary-subtle)]", R), children: /* @__PURE__ */ l(re, { children: [
+        /* @__PURE__ */ r(se, { children: /* @__PURE__ */ r(P, { children: b.map((e) => /* @__PURE__ */ r(te, { children: e.label }, e.key)) }) }),
+        /* @__PURE__ */ r(le, { children: i.map((e, s) => {
+          const t = n.indexOf(e), c = a.has(t);
+          return /* @__PURE__ */ r(
+            P,
+            {
+              onClick: () => Q(t),
+              onMouseEnter: () => M(t),
+              onMouseLeave: () => M(null),
+              variant: c ? "selected" : "default",
+              className: T(
+                "cursor-pointer transition-colors",
+                (A === t || _ === t) && "bg-[var(--color-background-neutral-subtlest-hovered)]",
+                u && "hover:bg-[var(--color-background-neutral-subtlest-hovered)]"
+              ),
+              children: b.map((h) => /* @__PURE__ */ r(ne, { children: X(e[h.key], h, e) }, h.key))
+            },
+            t
+          );
+        }) })
+      ] }) }) })
+    ] }),
+    g && /* @__PURE__ */ r(k, { className: "border-[var(--color-border-info-bold)]", children: /* @__PURE__ */ r(z, { className: "p-[var(--space-m)]", children: /* @__PURE__ */ l("div", { className: "flex items-start gap-[var(--space-s)]", children: [
+      /* @__PURE__ */ r(w, { name: "info", size: "s", color: "information", className: "mt-1" }),
+      /* @__PURE__ */ l("div", { className: "space-y-[var(--space-xs)] text-body-sm text-[var(--color-text-secondary)]", children: [
+        /* @__PURE__ */ r("p", { children: /* @__PURE__ */ r("strong", { children: "Interactive Features:" }) }),
+        /* @__PURE__ */ l("ul", { className: "list-disc list-inside space-y-[var(--space-xs)]", children: [
+          /* @__PURE__ */ r("li", { children: "Click chart data points to filter the table" }),
+          u && /* @__PURE__ */ r("li", { children: "Click table rows to select/deselect them" }),
+          S && u && /* @__PURE__ */ r("li", { children: 'Use "Filter Selected" button to show only selected rows in the chart' }),
+          /* @__PURE__ */ r("li", { children: "Hover over chart or table to see corresponding data" }),
+          /* @__PURE__ */ r("li", { children: 'Use "Clear All" to reset all filters and selections' })
+        ] })
+      ] })
+    ] }) }) })
+  ] });
+}
+const xe = (f, p = []) => {
+  const n = Object.entries(f).map(([C, b]) => ({
+    key: C,
+    label: b.label,
+    type: "number"
+  }));
+  return [
+    { key: "name", label: "Name", type: "text" },
+    ...n,
+    ...p
+  ];
+};
+export {
+  be as LinkedChart,
+  xe as createLinkedChartColumns
+};