impact-nova 1.6.2 → 1.6.4

package/dist/components/ui/filter-strip/filter-tag-list.js

@@ -1,173 +1,146 @@
-import { jsx as t, jsxs as r } from "react/jsx-runtime";
-import * as k from "react";
-import T from "../horizontal-scroller/horizontal-scroller.js";
-import { TagGroup as z } from "../tag-group.js";
-import { Tag as y } from "../tag.js";
-import { Tooltip as x, TooltipTrigger as f, TooltipContent as g } from "../tooltip.js";
-import { Popover as j, PopoverTrigger as O, PopoverContent as I } from "../popover.js";
-import { Button as P } from "../button.js";
-import { X as V } from "lucide-react";
-import { cn as i } from "../../../lib/utils.js";
-const C = i(
-  "h-auto min-h-0 border-0 shadow-none",
-  "inline-flex items-center justify-start gap-2.5 rounded-lg bg-brand-subtle px-2 py-1.5",
-  "text-xs font-medium capitalize leading-4 font-['Manrope']",
-  "[&_[data-component=tag-remove]]:ml-0"
-), A = i(
-  C,
-  "text-content",
-  "hover:bg-canvas-muted"
-), N = i(
-  C,
-  "text-brand",
-  "hover:bg-brand-tint-hover"
-), F = ({
-  remainingValues: n,
-  viewAllTrigger: l = "expand",
-  onViewAll: d,
-  onItemRemove: m,
-  isRemovable: w
+import { jsx as r, jsxs as o } from "react/jsx-runtime";
+import * as N from "react";
+import C from "../horizontal-scroller/horizontal-scroller.js";
+import { TagGroup as k } from "../tag-group.js";
+import { Tag as w } from "../tag.js";
+import { Tooltip as u, TooltipTrigger as v, TooltipContent as f } from "../tooltip.js";
+import { Popover as S, PopoverTrigger as T, PopoverContent as z } from "../popover.js";
+import { Button as $ } from "../button.js";
+import { X as I } from "lucide-react";
+const j = ({
+  remainingValues: l,
+  viewAllTrigger: s = "expand",
+  onViewAll: i,
+  onItemRemove: d,
+  isRemovable: g
 }) => {
-  const [e, p] = k.useState(!1), s = e ? n : n.slice(0, 3), h = n.length > 3, o = () => {
-    l === "custom" ? d?.() : p(!0);
+  const [e, m] = N.useState(!1), c = e ? l : l.slice(0, 3), p = l.length > 3, t = () => {
+    s === "custom" ? i?.() : m(!0);
   };
-  return /* @__PURE__ */ t(
-    I,
+  return /* @__PURE__ */ r(
+    z,
     {
-      className: "w-[200px] p-0 rounded-[8px] bg-canvas-elevated shadow-elevation-floating border-none",
+      className: "w-[200px] p-0 rounded-[8px] bg-white shadow-[0_0_4px_0_rgba(0,0,0,0.12)] border-none",
       align: "start",
       sideOffset: 8,
-      children: /* @__PURE__ */ r("div", { className: "flex flex-col py-2 px-[6px]", children: [
-        /* @__PURE__ */ t(
-          "div",
-          {
-            className: `flex flex-col gap-1 mb-2 ${e ? "max-h-[200px] overflow-y-auto" : ""}`,
-            children: s.map((a, v) => /* @__PURE__ */ r(
-              "div",
-              {
-                className: "flex items-center justify-between text-[14px] font-medium leading-[20px] text-content px-3 py-2 overflow-hidden hover:bg-canvas-muted rounded group shrink-0",
-                children: [
-                  /* @__PURE__ */ r(x, { children: [
-                    /* @__PURE__ */ t(f, { asChild: !0, children: /* @__PURE__ */ t("span", { className: "truncate", children: String(a) }) }),
-                    /* @__PURE__ */ t(g, { variant: "tertiary", side: "right", children: String(a) })
-                  ] }),
-                  w && /* @__PURE__ */ t(
-                    "button",
-                    {
-                      onClick: (u) => {
-                        u.stopPropagation(), m(a);
-                      },
-                      className: "ml-2 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-content-icon hover:bg-muted/60 hover:text-content-secondary opacity-0 group-hover:opacity-100 transition-opacity",
-                      children: /* @__PURE__ */ t(V, { size: 12 })
-                    }
-                  )
-                ]
+      children: /* @__PURE__ */ o("div", { className: "flex flex-col py-2 px-[6px]", children: [
+        /* @__PURE__ */ r("div", { className: `flex flex-col gap-1 mb-2 ${e ? "max-h-[200px] overflow-y-auto" : ""}`, children: c.map((n, h) => /* @__PURE__ */ o("div", { className: "flex items-center justify-between text-[14px] font-medium leading-[20px] text-[#1f2b4d] px-3 py-2 overflow-hidden hover:bg-slate-50 rounded group shrink-0", children: [
+          /* @__PURE__ */ o(u, { children: [
+            /* @__PURE__ */ r(v, { asChild: !0, children: /* @__PURE__ */ r("span", { className: "truncate", children: String(n) }) }),
+            /* @__PURE__ */ r(f, { variant: "tertiary", side: "right", children: String(n) })
+          ] }),
+          g && /* @__PURE__ */ r(
+            "button",
+            {
+              onClick: (x) => {
+                x.stopPropagation(), d(n);
               },
-              v
-            ))
-          }
-        ),
-        !e && h && /* @__PURE__ */ r("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ t("div", { className: "h-[1px] bg-stroke-hairline w-full" }),
-          /* @__PURE__ */ t(
-            P,
+              "aria-label": `Remove ${String(n)}`,
+              className: "ml-2 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-gray-400 hover:bg-black/5 hover:text-gray-600 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity",
+              children: /* @__PURE__ */ r(I, { size: 12 })
+            }
+          )
+        ] }, h)) }),
+        !e && p && /* @__PURE__ */ o("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ r("div", { className: "h-[1px] bg-[#e6e8f0] w-full" }),
+          /* @__PURE__ */ r(
+            $,
             {
               variant: "secondary",
+              size: "sm",
               className: "w-full justify-center",
-              onClick: o,
-              children: l === "custom" ? "View all" : `View all (${n.length})`
+              onClick: t,
+              children: s === "custom" ? "View all" : `View all (${l.length})`
             }
           )
         ] })
       ] })
     }
   );
-}, X = ({
-  filters: n,
-  onFilterRemove: l,
-  onOverflowClick: d,
-  onViewAll: m
-}) => /* @__PURE__ */ t("div", { className: "flex flex-1 items-center min-w-0", children: /* @__PURE__ */ t(
-  T,
+}, M = ({
+  filters: l,
+  onFilterRemove: s,
+  onOverflowClick: i,
+  onViewAll: d
+}) => /* @__PURE__ */ r("div", { className: "flex flex-1 items-center min-w-0", children: /* @__PURE__ */ r(
+  C,
   {
-    items: n,
-    renderItem: (e, p) => {
-      const s = Array.isArray(e.value) ? e.value : [e.value], h = s.slice(0, 2), o = s.slice(2), a = !!e.overflow, v = e.overflow?.label ? e.overflow.label : e.overflow?.count ? `+${e.overflow.count}` : null, u = o.length > 0, S = a || u, b = `+${o.length}`;
-      return /* @__PURE__ */ r("div", { className: "flex items-center px-1", children: [
-        p > 0 && /* @__PURE__ */ t("div", { className: "mx-3 h-4 w-[1px] bg-stroke-hairline shrink-0" }),
-        /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ r("span", { className: "text-xs font-medium leading-[21px] text-content-tertiary whitespace-nowrap", children: [
+    items: l,
+    renderItem: (e, m) => {
+      const c = Array.isArray(e.value) ? e.value : [e.value], p = c.slice(0, 2), t = c.slice(2), n = !!e.overflow, h = e.overflow?.label ? e.overflow.label : e.overflow?.count ? `+${e.overflow.count}` : null, x = t.length > 0, y = n || x, b = `+${t.length}`;
+      return /* @__PURE__ */ o("div", { className: "flex items-center px-1", children: [
+        m > 0 && /* @__PURE__ */ r("div", { className: "mx-3 h-4 w-[1px] bg-[#e6e8f0] shrink-0" }),
+        /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ o("span", { className: "text-xs font-medium leading-[21px] text-[#60697d] whitespace-nowrap", children: [
             e.label,
-            e.required && /* @__PURE__ */ t("span", { className: "text-validation ml-0.5", children: "*" })
+            e.required && /* @__PURE__ */ r("span", { className: "text-red-500 ml-0.5", children: "*" })
           ] }),
-          /* @__PURE__ */ r("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ t(
-              z,
+          /* @__PURE__ */ o("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ r(
+              k,
               {
-                spacing: "none",
-                className: "gap-2.5",
-                tags: h.map((c) => ({
-                  label: String(c),
+                spacing: "sm",
+                tags: p.map((a) => ({
+                  label: String(a),
                   variant: "secondary",
-                  size: "sm",
+                  size: "md",
                   shape: "rounded",
                   removable: e.removable,
-                  onRemove: () => l(e.id, c),
-                  className: A
+                  onRemove: () => s(e.id, a)
                 }))
               }
             ),
-            S && (a ? (
+            y && (n ? (
               // Server-side overflow: Simple tag, no popover
-              /* @__PURE__ */ r(x, { children: [
-                /* @__PURE__ */ t(f, { asChild: !0, children: /* @__PURE__ */ t(
-                  y,
+              /* @__PURE__ */ o(u, { children: [
+                /* @__PURE__ */ r(v, { asChild: !0, children: /* @__PURE__ */ r(
+                  w,
                   {
                     variant: "secondary",
-                    size: "sm",
+                    size: "md",
                     shape: "rounded",
-                    className: i(
-                      N,
-                      "cursor-pointer whitespace-nowrap"
-                    ),
-                    onClick: () => d?.(e.id),
-                    children: v || b
+                    className: "whitespace-nowrap bg-[#eceefd] text-[#4259ee] hover:bg-[#dce1fc] border-0 h-6 px-2 text-xs font-medium font-['Manrope'] cursor-pointer",
+                    onClick: () => i?.(e.id),
+                    tabIndex: 0,
+                    role: "button",
+                    "aria-label": `${e.overflow?.count || t.length} more filters for ${e.label}`,
+                    onKeyDown: (a) => {
+                      (a.key === "Enter" || a.key === " ") && (a.preventDefault(), i?.(e.id));
+                    },
+                    children: h || b
                   }
                 ) }),
-                /* @__PURE__ */ r(g, { variant: "tertiary", side: "top", children: [
-                  e.overflow?.count || o.length,
+                /* @__PURE__ */ o(f, { variant: "tertiary", side: "top", children: [
+                  e.overflow?.count || t.length,
                   " more filters"
                 ] })
               ] })
             ) : (
               // Client-side overflow: Popover
-              /* @__PURE__ */ r(j, { children: [
-                /* @__PURE__ */ r(x, { children: [
-                  /* @__PURE__ */ t(f, { asChild: !0, children: /* @__PURE__ */ t(O, { asChild: !0, children: /* @__PURE__ */ t(
-                    y,
+              /* @__PURE__ */ o(S, { children: [
+                /* @__PURE__ */ o(u, { children: [
+                  /* @__PURE__ */ r(v, { asChild: !0, children: /* @__PURE__ */ r(T, { asChild: !0, children: /* @__PURE__ */ r(
+                    w,
                     {
                       variant: "secondary",
-                      size: "sm",
+                      size: "md",
                       shape: "rounded",
-                      className: i(
-                        N,
-                        "cursor-pointer whitespace-nowrap"
-                      ),
+                      className: "whitespace-nowrap bg-[#eceefd] text-[#4259ee] hover:bg-[#dce1fc] border-0 h-6 px-2 text-xs font-medium font-['Manrope'] cursor-pointer",
                       children: b
                     }
                   ) }) }),
-                  /* @__PURE__ */ r(g, { variant: "tertiary", side: "top", children: [
-                    o.length,
+                  /* @__PURE__ */ o(f, { variant: "tertiary", side: "top", children: [
+                    t.length,
                     " more filters"
                   ] })
                 ] }),
-                /* @__PURE__ */ t(
-                  F,
+                /* @__PURE__ */ r(
+                  j,
                   {
-                    remainingValues: o,
+                    remainingValues: t,
                     viewAllTrigger: e.viewAllTrigger,
-                    onViewAll: m,
-                    onItemRemove: (c) => l(e.id, c),
+                    onViewAll: d,
+                    onItemRemove: (a) => s(e.id, a),
                     isRemovable: e.removable
                   }
                 )
@@ -182,5 +155,5 @@ const C = i(
   }
 ) });
 export {
-  X as FilterTagList
+  M as FilterTagList
 };

package/dist/components/ui/horizontal-scroller/horizontal-scroller.js

@@ -1,4 +1,4 @@
-import { jsxs as i, jsx as t, Fragment as O } from "react/jsx-runtime";
+import { jsxs as c, jsx as t, Fragment as O } from "react/jsx-runtime";
 import * as a from "react";
 import { ChevronRight as T } from "lucide-react";
 import { useVirtualizer as $ } from "@tanstack/react-virtual";
@@ -10,10 +10,10 @@ const F = a.forwardRef(
     className: N,
     items: u,
     renderItem: R,
-    scrollStep: v = 200,
+    scrollStep: g = 200,
     hideScrollbar: p = !0,
     controlsPosition: s = "right",
-    renderPrevious: g,
+    renderPrevious: v,
     renderNext: b,
     maxWidth: L = "100%",
     estimateSize: m = 200,
@@ -22,41 +22,41 @@ const F = a.forwardRef(
   }, B) => {
     const { t: x } = D(), l = a.useRef(null), [n, E] = a.useState(!1), [o, H] = a.useState(!1);
     a.useImperativeHandle(B, () => l.current);
-    const c = $({
+    const i = $({
       count: u.length,
       getScrollElement: () => l.current,
       estimateSize: typeof m == "function" ? m : () => m,
       horizontal: !0,
       overscan: k
-    }), V = c.getTotalSize(), f = a.useCallback(() => {
+    }), V = i.getTotalSize(), d = a.useCallback(() => {
       const e = l.current;
       e && (E(e.scrollLeft > 0), H(Math.ceil(e.scrollLeft + e.clientWidth) < e.scrollWidth));
     }, []);
     a.useEffect(() => {
       const e = l.current;
       if (!e) return;
-      f();
-      const r = () => f();
+      d();
+      const r = () => d();
       e.addEventListener("scroll", r);
-      const d = new ResizeObserver(() => {
-        f();
+      const f = new ResizeObserver(() => {
+        d();
       });
-      return d.observe(e), () => {
-        e.removeEventListener("scroll", r), d.disconnect();
+      return f.observe(e), () => {
+        e.removeEventListener("scroll", r), f.disconnect();
       };
-    }, [f, u, V]);
+    }, [d, u, V]);
     const z = () => {
-      l.current?.scrollBy({ left: -v, behavior: "smooth" });
+      l.current?.scrollBy({ left: -g, behavior: "smooth" });
     }, y = () => {
-      l.current?.scrollBy({ left: v, behavior: "smooth" });
+      l.current?.scrollBy({ left: g, behavior: "smooth" });
     }, w = ({
       direction: e,
       onClick: r,
-      disabled: d
+      disabled: f
     }) => {
-      if (d) return null;
+      if (f) return null;
       const S = x(e === "left" ? "horizontalScroller.scrollLeft" : "horizontalScroller.scrollRight");
-      return /* @__PURE__ */ i(
+      return /* @__PURE__ */ c(
         A,
         {
           variant: "ghost",
@@ -65,7 +65,7 @@ const F = a.forwardRef(
             "h-8 w-8 rounded-md bg-canvas-muted text-content-tertiary hover:bg-brand-tint hover:text-brand"
           ),
           onClick: r,
-          disabled: d,
+          disabled: f,
           "aria-label": S,
           "data-component": e === "left" ? "horizontal-scroller-prev" : "horizontal-scroller-next",
           children: [
@@ -80,7 +80,7 @@ const F = a.forwardRef(
         }
       );
     }, W = () => {
-      const e = g ? g({ onClick: z, disabled: !n }) : /* @__PURE__ */ t(
+      const e = v ? v({ onClick: z, disabled: !n }) : /* @__PURE__ */ t(
         w,
         {
           direction: "left",
@@ -95,22 +95,22 @@ const F = a.forwardRef(
           disabled: !o
         }
       );
-      return s === "split" ? /* @__PURE__ */ i(O, { children: [
+      return s === "split" ? /* @__PURE__ */ c(O, { children: [
         /* @__PURE__ */ t("div", { className: "absolute left-0 top-1/2 z-20 -translate-y-1/2", children: e }),
         /* @__PURE__ */ t("div", { className: "absolute right-0 top-1/2 z-20 -translate-y-1/2", children: r })
-      ] }) : s === "left" ? /* @__PURE__ */ i("div", { className: "absolute left-0 top-1/2 z-20 flex -translate-y-1/2 items-center gap-1", children: [
+      ] }) : s === "left" ? /* @__PURE__ */ c("div", { className: "absolute left-0 top-1/2 z-20 flex -translate-y-1/2 items-center gap-1", children: [
         e,
         r
-      ] }) : /* @__PURE__ */ i("div", { className: "absolute right-0 top-1/2 z-20 flex -translate-y-1/2 items-center gap-1", children: [
+      ] }) : /* @__PURE__ */ c("div", { className: "absolute right-0 top-1/2 z-20 flex -translate-y-1/2 items-center gap-1", children: [
         e,
         r
       ] });
     }, j = () => s === "left" ? n && o ? "pl-20" : n || o ? "pl-12" : "" : s === "split" && n ? "pl-12" : "", I = () => s === "right" ? n && o ? "pr-20" : n || o ? "pr-12" : "" : s === "split" && o ? "pr-12" : "";
-    return /* @__PURE__ */ i(
+    return /* @__PURE__ */ c(
       "div",
       {
         className: h(
-          "relative group min-w-0 w-full overflow-hidden bg-transparent",
+          "relative group min-w-0 w-full bg-transparent",
           j(),
           I(),
           N
@@ -134,20 +134,20 @@ const F = a.forwardRef(
                 msOverflowStyle: p ? "none" : "auto"
               },
               "data-component": "horizontal-scroller-viewport",
-              children: /* @__PURE__ */ i(
+              children: /* @__PURE__ */ c(
                 "div",
                 {
                   style: {
-                    width: `${c.getTotalSize()}px`,
+                    width: `${i.getTotalSize()}px`,
                     display: "flex",
                     position: "relative"
                   },
                   children: [
-                    /* @__PURE__ */ t("div", { style: { width: `${c.getVirtualItems()[0]?.start ?? 0}px`, flexShrink: 0 } }),
-                    c.getVirtualItems().map((e) => /* @__PURE__ */ t(
+                    /* @__PURE__ */ t("div", { style: { width: `${i.getVirtualItems()[0]?.start ?? 0}px`, flexShrink: 0 } }),
+                    i.getVirtualItems().map((e) => /* @__PURE__ */ t(
                       "div",
                       {
-                        ref: c.measureElement,
+                        ref: i.measureElement,
                         "data-index": e.index,
                         className: "flex-shrink-0",
                         children: R(u[e.index], e.index)