impact-nova 1.1.1 → 1.1.2

package/dist/components/ui/filter-strip/filter-summary.js

@@ -1,72 +1,76 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import * as r from "react";
-import { ChevronDown as R, Search as B } from "lucide-react";
-import { cn as x } from "../../../lib/utils.js";
-import { Popover as D, PopoverTrigger as z, PopoverContent as V } from "../popover.js";
-import { Button as v } from "../button.js";
-import { Separator as g } from "../separator.js";
-import { Tabs as Y, TabsList as q, TabsTrigger as b } from "../tabs.js";
-import { Input as H } from "../input.js";
-import { Badge as J } from "../badge.js";
-import { Skeleton as K } from "../skeleton.js";
-const se = ({
-  selectedFilter: i = "Not selected",
-  onSelectedFilterChange: N,
-  savedFilters: y,
-  recentFilters: m,
-  onApplySavedFilter: w,
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import * as n from "react";
+import { ChevronDown as z, Search as V } from "lucide-react";
+import { cn as g } from "../../../lib/utils.js";
+import { Popover as Y, PopoverTrigger as q, PopoverContent as H } from "../popover.js";
+import { Tooltip as m, TooltipTrigger as p, TooltipContent as h } from "../tooltip.js";
+import { Button as y } from "../button.js";
+import { Separator as C } from "../separator.js";
+import { Tabs as J, TabsList as K, TabsTrigger as N } from "../tabs.js";
+import { Input as U } from "../input.js";
+import { Badge as W } from "../badge.js";
+import { Skeleton as X } from "../skeleton.js";
+const oe = ({
+  selectedFilter: o = "Not selected",
+  onSelectedFilterChange: w,
+  savedFilters: S,
+  recentFilters: u,
+  onApplySavedFilter: T,
   onSavedFilterSearch: d,
-  onSavedFiltersScroll: C,
-  onDropdownOpenChange: S,
-  isLoadingFilterPreferencesList: k = !1
+  onSavedFiltersScroll: k,
+  onDropdownOpenChange: A,
+  isLoadingFilterPreferencesList: P = !1
 }) => {
-  const [f, p] = r.useState(!1), A = (a) => {
-    p(a), S?.(a);
-  }, [h, T] = r.useState(""), [c, P] = r.useState(""), [t, j] = r.useState("All"), [n, u] = r.useState(null);
-  r.useEffect(() => {
+  const [f, x] = n.useState(!1), j = (a) => {
+    x(a), A?.(a);
+  }, [v, M] = n.useState(""), [c, I] = n.useState(""), [r, O] = n.useState("All"), [s, b] = n.useState(null);
+  n.useEffect(() => {
     const a = setTimeout(() => {
-      P(h);
+      I(v);
     }, 300);
     return () => clearTimeout(a);
-  }, [h]), r.useEffect(() => {
-    d && d(c, t === "All" ? void 0 : t);
-  }, [c, t, d]), r.useEffect(() => {
-    f && u({ label: i });
-  }, [f, i]);
-  const M = (a) => {
-    T(a.target.value);
-  }, I = () => {
-    n && (N?.(n.label), n.savedItem && w?.(n.savedItem), p(!1));
-  }, O = () => {
-    p(!1);
-  }, G = () => !m || m.length === 0 ? null : /* @__PURE__ */ s("div", { className: "flex flex-col", children: [
+  }, [v]), n.useEffect(() => {
+    d && d(c, r === "All" ? void 0 : r);
+  }, [c, r, d]), n.useEffect(() => {
+    f && b({ label: o });
+  }, [f, o]);
+  const G = (a) => {
+    M(a.target.value);
+  }, L = () => {
+    s && (w?.(s.label), s.savedItem && T?.(s.savedItem), x(!1));
+  }, Q = () => {
+    x(!1);
+  }, _ = () => !u || u.length === 0 ? null : /* @__PURE__ */ t("div", { className: "flex flex-col", children: [
     /* @__PURE__ */ e("div", { className: "px-1 py-[6px] text-xs font-medium text-[#60697d] font-['Manrope']", children: "Recent" }),
-    /* @__PURE__ */ e("div", { className: "mb-[6px] flex flex-col", children: m.map((a, l) => {
-      const o = a.map((E) => E.label).join(", "), _ = n?.label === o;
+    /* @__PURE__ */ e("div", { className: "mb-[6px] flex flex-col", children: u.map((a, l) => {
+      const i = a.map((D) => D.label).join(", "), B = s?.label === i;
       return /* @__PURE__ */ e(
         "div",
         {
-          className: x(
+          className: g(
             "flex cursor-pointer flex-row px-3 py-2 rounded-lg hover:bg-[#f5f6fa]",
-            _ && "bg-[#edf0ff]"
+            B && "bg-[#edf0ff]"
           ),
-          onClick: () => u({ label: o }),
-          children: /* @__PURE__ */ e("span", { className: "text-sm font-['Manrope'] truncate text-[#1f2b4d]", children: o })
+          onClick: () => b({ label: i }),
+          children: /* @__PURE__ */ t(m, { children: [
+            /* @__PURE__ */ e(p, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "text-sm font-['Manrope'] truncate text-[#1f2b4d]", children: i }) }),
+            /* @__PURE__ */ e(h, { variant: "tertiary", side: "right", children: i })
+          ] })
         },
         l
       );
     }) }),
-    /* @__PURE__ */ e(g, { className: "mb-2" })
-  ] }), L = () => {
-    if (k)
-      return /* @__PURE__ */ e("div", { className: "flex max-h-[160px] flex-col overflow-y-auto px-3 py-2 space-y-2", children: [1, 2, 3, 4, 5].map((l) => /* @__PURE__ */ e(K, { className: "h-9 w-full rounded-lg" }, l)) });
-    let a = y?.filter(
-      (l) => t === "All" || l.type === t
+    /* @__PURE__ */ e(C, { className: "mb-2" })
+  ] }), E = () => {
+    if (P)
+      return /* @__PURE__ */ e("div", { className: "flex max-h-[160px] flex-col overflow-y-auto px-3 py-2 space-y-2", children: [1, 2, 3, 4, 5].map((l) => /* @__PURE__ */ e(X, { className: "h-9 w-full rounded-lg" }, l)) });
+    let a = S?.filter(
+      (l) => r === "All" || l.type === r
     );
     if (!d && c && (a = a?.filter((l) => l.label.toLowerCase().includes(c.toLowerCase()))), !a || a.length === 0) {
       let l = "No saved filters found";
       if (!!c)
-        switch (t) {
+        switch (r) {
           case "Personal":
             l = "No personal filters match your search";
             break;
@@ -77,7 +81,7 @@ const se = ({
             l = "No saved filters match your search";
         }
       else
-        switch (t) {
+        switch (r) {
           case "Personal":
             l = "You haven't created any personal filters yet.";
             break;
@@ -93,103 +97,112 @@ const se = ({
       "div",
       {
         className: "flex max-h-[160px] flex-col overflow-y-auto",
-        onScroll: C,
+        onScroll: k,
         children: a.map((l) => {
-          const o = n?.label === l.label;
+          const i = s?.label === l.label;
           return /* @__PURE__ */ e(
             "div",
             {
-              className: x(
+              className: g(
                 "mb-1 flex justify-between cursor-pointer rounded-lg px-3 py-2 text-sm font-medium font-['Manrope'] hover:bg-[#f5f6fa]",
-                o ? "bg-[#edf0ff]" : "text-[#1f2b4d]"
+                i ? "bg-[#edf0ff]" : "text-[#1f2b4d]"
               ),
-              onClick: () => u({ label: l.label, savedItem: l }),
-              children: /* @__PURE__ */ e("span", { children: l.label })
+              onClick: () => b({ label: l.label, savedItem: l }),
+              children: /* @__PURE__ */ t(m, { children: [
+                /* @__PURE__ */ e(p, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "truncate", children: l.label }) }),
+                /* @__PURE__ */ e(h, { variant: "tertiary", side: "right", children: l.label })
+              ] })
             },
             l.id
           );
         })
       }
     );
-  }, Q = n?.label !== i;
-  return /* @__PURE__ */ s(D, { open: f, onOpenChange: A, children: [
-    /* @__PURE__ */ e(z, { asChild: !0, children: /* @__PURE__ */ s("div", { className: "flex cursor-pointer items-center gap-2", children: [
+  }, R = s?.label !== o;
+  return /* @__PURE__ */ t(Y, { open: f, onOpenChange: j, children: [
+    /* @__PURE__ */ e(q, { asChild: !0, children: /* @__PURE__ */ t("div", { className: "flex cursor-pointer items-center gap-2", children: [
       /* @__PURE__ */ e("span", { className: "text-sm font-medium text-[#60697d] font-['Manrope']", children: "Filters Applied" }),
-      /* @__PURE__ */ e(
-        J,
-        {
-          color: "primary",
-          variant: "outline",
-          className: "font-['Manrope']",
-          children: i || "Not selected"
-        }
-      ),
-      /* @__PURE__ */ e(
-        "div",
-        {
-          className: x(
-            "flex h-8 w-8 items-center justify-center rounded-lg bg-[#f5f6fa] transition-transform duration-200",
-            f && "rotate-180"
-          ),
-          children: /* @__PURE__ */ e(R, { className: "h-4 w-4 text-[#1f2b4d]" })
-        }
-      )
+      /* @__PURE__ */ t(m, { children: [
+        /* @__PURE__ */ e(p, { asChild: !0, children: /* @__PURE__ */ e(
+          W,
+          {
+            color: "primary",
+            variant: "outline",
+            className: "font-['Manrope'] max-w-[140px] truncate",
+            children: o || "Not selected"
+          }
+        ) }),
+        /* @__PURE__ */ e(h, { variant: "tertiary", side: "top", children: o || "Not selected" })
+      ] }),
+      /* @__PURE__ */ t(m, { children: [
+        /* @__PURE__ */ e(p, { asChild: !0, children: /* @__PURE__ */ e(
+          "div",
+          {
+            className: g(
+              "flex h-8 w-8 items-center justify-center rounded-lg bg-[#f5f6fa] transition-transform duration-200",
+              f && "rotate-180"
+            ),
+            children: /* @__PURE__ */ e(z, { className: "h-4 w-4 text-[#1f2b4d]" })
+          }
+        ) }),
+        /* @__PURE__ */ e(h, { variant: "tertiary", side: "top", children: "Select filter" })
+      ] })
     ] }) }),
     /* @__PURE__ */ e(
-      V,
+      H,
       {
         align: "start",
         className: "w-[280px] p-0 shadow-[0_0_4px_0_rgba(0,0,0,0.12)]",
         sideOffset: 8,
-        children: /* @__PURE__ */ s("div", { className: "flex w-full flex-col py-[8px] px-[6px]", children: [
-          G(),
-          /* @__PURE__ */ s("div", { className: "flex flex-col", children: [
+        children: /* @__PURE__ */ t("div", { className: "flex w-full flex-col py-[8px] px-[6px]", children: [
+          _(),
+          /* @__PURE__ */ t("div", { className: "flex flex-col", children: [
             /* @__PURE__ */ e("div", { className: "px-1 py-[6px] text-xs font-medium text-[#60697d] font-['Manrope']", children: "Saved Filters" }),
-            /* @__PURE__ */ s(
-              Y,
+            /* @__PURE__ */ t(
+              J,
               {
-                value: t,
-                onValueChange: (a) => j(a),
+                value: r,
+                onValueChange: (a) => O(a),
                 variant: "outline",
                 size: "sm",
                 className: "w-full px-1",
                 children: [
-                  /* @__PURE__ */ e("div", { className: "py-[8px]", children: /* @__PURE__ */ s(q, { children: [
-                    /* @__PURE__ */ e(b, { value: "All", children: "All" }),
-                    /* @__PURE__ */ e(b, { value: "Global", children: "Global" }),
-                    /* @__PURE__ */ e(b, { value: "Personal", children: "Personal" })
+                  /* @__PURE__ */ e("div", { className: "py-[8px]", children: /* @__PURE__ */ t(K, { children: [
+                    /* @__PURE__ */ e(N, { value: "All", children: "All" }),
+                    /* @__PURE__ */ e(N, { value: "Global", children: "Global" }),
+                    /* @__PURE__ */ e(N, { value: "Personal", children: "Personal" })
                   ] }) }),
                   /* @__PURE__ */ e("div", { className: "pb-[8px]", children: /* @__PURE__ */ e(
-                    H,
+                    U,
                     {
-                      prefix: /* @__PURE__ */ e(B, { className: "h-4 w-4 text-gray-500" }),
+                      prefix: /* @__PURE__ */ e(V, { className: "h-4 w-4 text-gray-500" }),
                       placeholder: "Search filters...",
-                      value: h,
-                      onChange: M,
+                      value: v,
+                      onChange: G,
                       className: "h-9 px-1 border-none shadow-none focus-visible:ring-0"
                     }
                   ) }),
-                  /* @__PURE__ */ e("div", { className: "mt-0", children: L() })
+                  /* @__PURE__ */ e("div", { className: "mt-0", children: E() })
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ e(g, { className: "my-2" }),
-          /* @__PURE__ */ s("div", { className: "flex justify-end gap-2 px-3 pb-1", children: [
+          /* @__PURE__ */ e(C, { className: "my-2" }),
+          /* @__PURE__ */ t("div", { className: "flex justify-end gap-2 px-3 pb-1", children: [
             /* @__PURE__ */ e(
-              v,
+              y,
               {
                 variant: "secondary",
-                onClick: O,
+                onClick: Q,
                 children: "Cancel"
               }
             ),
             /* @__PURE__ */ e(
-              v,
+              y,
               {
                 variant: "default",
-                onClick: I,
-                disabled: !Q,
+                onClick: L,
+                disabled: !R,
                 children: "Apply Filter"
               }
             )
@@ -200,5 +213,5 @@ const se = ({
   ] });
 };
 export {
-  se as FilterSummary
+  oe as FilterSummary
 };

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

@@ -1,78 +1,82 @@
-import { jsx as o, jsxs as r } from "react/jsx-runtime";
-import * as w from "react";
-import b from "../horizontal-scroller/horizontal-scroller.js";
-import { TagGroup as y } from "../tag-group.js";
-import { Tag as f } from "../tag.js";
-import { Popover as N, PopoverTrigger as k, PopoverContent as C } from "../popover.js";
-import { Button as z } from "../button.js";
-import { X as S } from "lucide-react";
-const j = ({
-  remainingValues: s,
-  viewAllTrigger: a = "expand",
+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 T } from "../tag-group.js";
+import { Tag as b } from "../tag.js";
+import { Tooltip as v, TooltipTrigger as u, TooltipContent as f } from "../tooltip.js";
+import { Popover as k, PopoverTrigger as S, PopoverContent as z } from "../popover.js";
+import { Button as j } from "../button.js";
+import { X as I } from "lucide-react";
+const O = ({
+  remainingValues: l,
+  viewAllTrigger: n = "expand",
   onViewAll: c,
   onItemRemove: d,
-  isRemovable: v
+  isRemovable: g
 }) => {
-  const [e, m] = w.useState(!1), n = e ? s : s.slice(0, 3), p = s.length > 3, t = () => {
-    a === "custom" ? c?.() : m(!0);
+  const [e, m] = N.useState(!1), s = e ? l : l.slice(0, 3), p = l.length > 3, t = () => {
+    n === "custom" ? c?.() : m(!0);
   };
-  return /* @__PURE__ */ o(
-    C,
+  return /* @__PURE__ */ r(
+    z,
     {
       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__ */ o("div", { className: `flex flex-col gap-1 mb-2 ${e ? "max-h-[200px] overflow-y-auto" : ""}`, children: n.map((l, h) => /* @__PURE__ */ r("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("span", { className: "truncate", children: String(l) }),
-          v && /* @__PURE__ */ o(
+      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: s.map((a, 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(v, { children: [
+            /* @__PURE__ */ r(u, { asChild: !0, children: /* @__PURE__ */ r("span", { className: "truncate", children: String(a) }) }),
+            /* @__PURE__ */ r(f, { variant: "tertiary", side: "right", children: String(a) })
+          ] }),
+          g && /* @__PURE__ */ r(
             "button",
             {
               onClick: (x) => {
-                x.stopPropagation(), d(l);
+                x.stopPropagation(), d(a);
               },
               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 transition-opacity",
-              children: /* @__PURE__ */ o(S, { size: 12 })
+              children: /* @__PURE__ */ r(I, { size: 12 })
             }
           )
         ] }, h)) }),
-        !e && p && /* @__PURE__ */ r("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ o("div", { className: "h-[1px] bg-[#e6e8f0] w-full" }),
-          /* @__PURE__ */ o(
-            z,
+        !e && p && /* @__PURE__ */ o("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ r("div", { className: "h-[1px] bg-[#e6e8f0] w-full" }),
+          /* @__PURE__ */ r(
+            j,
             {
               variant: "secondary",
               size: "sm",
               className: "w-full justify-center",
               onClick: t,
-              children: a === "custom" ? "View all" : `View all (${s.length})`
+              children: n === "custom" ? "View all" : `View all (${l.length})`
             }
           )
         ] })
       ] })
     }
   );
-}, V = ({
-  filters: s,
-  onFilterRemove: a,
+}, _ = ({
+  filters: l,
+  onFilterRemove: n,
   onOverflowClick: c,
   onViewAll: d
-}) => /* @__PURE__ */ o("div", { className: "flex flex-1 items-center min-w-0", children: /* @__PURE__ */ o(
-  b,
+}) => /* @__PURE__ */ r("div", { className: "flex flex-1 items-center min-w-0", children: /* @__PURE__ */ r(
+  C,
   {
-    items: s,
+    items: l,
     renderItem: (e, m) => {
-      const n = Array.isArray(e.value) ? e.value : [e.value], p = n.slice(0, 2), t = n.slice(2), l = !!e.overflow, h = e.overflow?.label ? e.overflow.label : e.overflow?.count ? `+${e.overflow.count}` : null, x = t.length > 0, g = l || x, u = `+${t.length}`;
-      return /* @__PURE__ */ r("div", { className: "flex items-center px-1", children: [
-        m > 0 && /* @__PURE__ */ o("div", { className: "mx-3 h-4 w-[1px] bg-[#e6e8f0] shrink-0" }),
-        /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ r("span", { className: "text-xs font-medium leading-[21px] text-[#60697d] whitespace-nowrap", children: [
+      const s = Array.isArray(e.value) ? e.value : [e.value], p = s.slice(0, 2), t = s.slice(2), a = !!e.overflow, h = e.overflow?.label ? e.overflow.label : e.overflow?.count ? `+${e.overflow.count}` : null, x = t.length > 0, y = a || x, w = `+${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__ */ o("span", { className: "text-red-500 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__ */ o(
-              y,
+          /* @__PURE__ */ o("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ r(
+              T,
               {
                 spacing: "sm",
                 tags: p.map((i) => ({
@@ -81,43 +85,55 @@ const j = ({
                   size: "md",
                   shape: "rounded",
                   removable: e.removable,
-                  onRemove: () => a(e.id, i)
+                  onRemove: () => n(e.id, i)
                 }))
               }
             ),
-            g && (l ? (
+            y && (a ? (
               // Server-side overflow: Simple tag, no popover
-              /* @__PURE__ */ o(
-                f,
-                {
-                  variant: "secondary",
-                  size: "md",
-                  shape: "rounded",
-                  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: () => c?.(e.id),
-                  children: h || u
-                }
-              )
-            ) : (
-              // Client-side overflow: Popover
-              /* @__PURE__ */ r(N, { children: [
-                /* @__PURE__ */ o(k, { asChild: !0, children: /* @__PURE__ */ o(
-                  f,
+              /* @__PURE__ */ o(v, { children: [
+                /* @__PURE__ */ r(u, { asChild: !0, children: /* @__PURE__ */ r(
+                  b,
                   {
                     variant: "secondary",
                     size: "md",
                     shape: "rounded",
                     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: u
+                    onClick: () => c?.(e.id),
+                    children: h || w
                   }
                 ) }),
-                /* @__PURE__ */ o(
-                  j,
+                /* @__PURE__ */ o(f, { variant: "tertiary", side: "top", children: [
+                  e.overflow?.count || t.length,
+                  " more filters"
+                ] })
+              ] })
+            ) : (
+              // Client-side overflow: Popover
+              /* @__PURE__ */ o(k, { children: [
+                /* @__PURE__ */ r(S, { asChild: !0, children: /* @__PURE__ */ o(v, { children: [
+                  /* @__PURE__ */ r(u, { asChild: !0, children: /* @__PURE__ */ r(
+                    b,
+                    {
+                      variant: "secondary",
+                      size: "md",
+                      shape: "rounded",
+                      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: w
+                    }
+                  ) }),
+                  /* @__PURE__ */ o(f, { variant: "tertiary", side: "top", children: [
+                    t.length,
+                    " more filters"
+                  ] })
+                ] }) }),
+                /* @__PURE__ */ r(
+                  O,
                   {
                     remainingValues: t,
                     viewAllTrigger: e.viewAllTrigger,
                     onViewAll: d,
-                    onItemRemove: (i) => a(e.id, i),
+                    onItemRemove: (i) => n(e.id, i),
                     isRemovable: e.removable
                   }
                 )
@@ -132,5 +148,5 @@ const j = ({
   }
 ) });
 export {
-  V as FilterTagList
+  _ as FilterTagList
 };