impact-nova 1.8.2 → 1.8.3

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

@@ -1,92 +1,106 @@
 import { jsx as r, jsxs as o } from "react/jsx-runtime";
-import * as N from "react";
-import k from "../horizontal-scroller/horizontal-scroller.js";
-import { TagGroup as S } from "../tag-group.js";
-import { Tag as C } from "../tag.js";
-import { Tooltip as v, TooltipTrigger as b, TooltipContent as y } from "../tooltip.js";
-import { Popover as T, PopoverTrigger as z, PopoverContent as $ } from "../popover.js";
-import { Button as j } from "../button.js";
-import { Check as I, Copy as P, X as A } from "lucide-react";
-const F = ({
+import * as C from "react";
+import S from "../horizontal-scroller/horizontal-scroller.js";
+import { TagGroup as T } from "../tag-group.js";
+import { Tag as k } from "../tag.js";
+import { Tooltip as b, TooltipTrigger as w, TooltipContent as y } from "../tooltip.js";
+import { Popover as z, PopoverTrigger as $, PopoverContent as j } from "../popover.js";
+import { Button as P } from "../button.js";
+import { Check as A, Copy as I, X as O } from "lucide-react";
+const R = ({
   remainingValues: l,
-  viewAllTrigger: s = "expand",
-  onViewAll: d,
-  onItemRemove: h,
-  isRemovable: w,
-  isCopyable: e = !1
+  viewAllTrigger: c = "expand",
+  onViewAll: p,
+  onItemRemove: u,
+  isRemovable: N,
+  isCopyable: e = !1,
+  externalCopyFunction: m
 }) => {
-  const [c, p] = N.useState(!1), [u, n] = N.useState(null), m = (a, t, i) => {
-    navigator.clipboard.writeText(String(t)), n(i), a.currentTarget.blur(), setTimeout(() => n(null), 1500);
-  }, x = c ? l : l.slice(0, 3), g = l.length > 3, f = () => {
-    s === "custom" ? d?.() : p(!0);
+  const [i, x] = C.useState(!1), [a, d] = C.useState(null), f = (t, s, n) => {
+    navigator.clipboard.writeText(String(s)), d(n), t.currentTarget.blur(), setTimeout(() => d(null), 1500);
+  }, g = i ? l : l.slice(0, 3), v = l.length > 3, h = () => {
+    c === "custom" ? p?.() : x(!0);
   };
   return /* @__PURE__ */ r(
-    $,
+    j,
     {
       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,
-      onOpenAutoFocus: (a) => a.preventDefault(),
+      onOpenAutoFocus: (t) => t.preventDefault(),
       children: /* @__PURE__ */ o("div", { className: "flex flex-col py-2 px-[6px]", children: [
-        /* @__PURE__ */ r("div", { className: `flex flex-col gap-1 mb-2 ${c ? "max-h-[180px] overflow-y-auto" : ""}`, children: x.map((a, t) => /* @__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(b, { asChild: !0, children: /* @__PURE__ */ r("span", { className: "truncate", children: String(a) }) }),
-            /* @__PURE__ */ r(y, { variant: "tertiary", side: "right", children: String(a) })
-          ] }),
-          /* @__PURE__ */ o("div", { className: "flex items-center shrink-0", children: [
-            e && /* @__PURE__ */ r(
-              "button",
-              {
-                onClick: (i) => {
-                  i.stopPropagation(), m(i, a, t);
-                },
-                "aria-label": `Copy ${String(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 focus:opacity-100 transition-opacity",
-                children: u === t ? /* @__PURE__ */ r(I, { size: 12, className: "text-green-500" }) : /* @__PURE__ */ r(P, { size: 12 })
-              }
-            ),
-            w && /* @__PURE__ */ r(
-              "button",
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: `flex flex-col gap-1 mb-2 ${i ? "max-h-[180px] overflow-y-auto" : ""}`,
+            children: g.map((t, s) => /* @__PURE__ */ o(
+              "div",
               {
-                onClick: (i) => {
-                  i.stopPropagation(), h(a);
-                },
-                "aria-label": `Remove ${String(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 focus:opacity-100 transition-opacity",
-                children: /* @__PURE__ */ r(A, { size: 12 })
-              }
-            )
-          ] })
-        ] }, t)) }),
-        !c && g && /* @__PURE__ */ o("div", { className: "flex flex-col gap-2", children: [
+                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(b, { children: [
+                    /* @__PURE__ */ r(w, { asChild: !0, children: /* @__PURE__ */ r("span", { className: "truncate", children: String(t) }) }),
+                    /* @__PURE__ */ r(y, { variant: "tertiary", side: "right", children: String(t) })
+                  ] }),
+                  /* @__PURE__ */ o("div", { className: "flex items-center shrink-0", children: [
+                    e && /* @__PURE__ */ r(
+                      "button",
+                      {
+                        onClick: (n) => {
+                          n.stopPropagation(), m ? m({ e: n, val: t, index: s }) : f(n, t, s);
+                        },
+                        "aria-label": `Copy ${String(t)}`,
+                        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: a === s ? /* @__PURE__ */ r(A, { size: 12, className: "text-green-500" }) : /* @__PURE__ */ r(I, { size: 12 })
+                      }
+                    ),
+                    N && /* @__PURE__ */ r(
+                      "button",
+                      {
+                        onClick: (n) => {
+                          n.stopPropagation(), u(t);
+                        },
+                        "aria-label": `Remove ${String(t)}`,
+                        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(O, { size: 12 })
+                      }
+                    )
+                  ] })
+                ]
+              },
+              s
+            ))
+          }
+        ),
+        !i && v && /* @__PURE__ */ o("div", { className: "flex flex-col gap-2", children: [
           /* @__PURE__ */ r("div", { className: "h-[1px] bg-[#e6e8f0] w-full" }),
           /* @__PURE__ */ r(
-            j,
+            P,
             {
               variant: "secondary",
               size: "sm",
               className: "w-full justify-center",
-              onClick: f,
-              children: s === "custom" ? "View all" : `View all (${l.length})`
+              onClick: h,
+              children: c === "custom" ? "View all" : `View all (${l.length})`
             }
           )
         ] })
       ] })
     }
   );
-}, q = ({
+}, B = ({
   filters: l,
-  onFilterRemove: s,
-  onOverflowClick: d,
-  onViewAll: h
+  onFilterRemove: c,
+  onOverflowClick: p,
+  onViewAll: u
 }) => /* @__PURE__ */ r("div", { className: "flex flex-1 items-center min-w-0", children: /* @__PURE__ */ r(
-  k,
+  S,
   {
     items: l,
-    renderItem: (e, c) => {
-      const p = Array.isArray(e.value) ? e.value : [e.value], u = p.slice(0, 2), n = p.slice(2), m = !!e.overflow, x = e.overflow?.label ? e.overflow.label : e.overflow?.count ? `+${e.overflow.count}` : null, g = n.length > 0, f = m || g, a = `+${n.length}`;
+    renderItem: (e, m) => {
+      const i = Array.isArray(e.value) ? e.value : [e.value], x = i.slice(0, 2), a = i.slice(2), d = !!e.overflow, f = e.overflow?.label ? e.overflow.label : e.overflow?.count ? `+${e.overflow.count}` : null, g = a.length > 0, v = d || g, h = `+${a.length}`;
       return /* @__PURE__ */ o("div", { className: "flex items-center px-1", children: [
-        c > 0 && /* @__PURE__ */ r("div", { className: "mx-3 h-4 w-[1px] bg-[#e6e8f0] shrink-0" }),
+        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,
@@ -94,70 +108,70 @@ const F = ({
           ] }),
           /* @__PURE__ */ o("div", { className: "flex items-center gap-1", children: [
             /* @__PURE__ */ r(
-              S,
+              T,
               {
                 spacing: "sm",
-                tags: u.map((t) => ({
+                tags: x.map((t) => ({
                   label: String(t),
                   variant: "secondary",
                   size: "md",
                   shape: "rounded",
                   removable: e.removable,
-                  onRemove: () => s(e.id, t)
+                  onRemove: () => c(e.id, t)
                 }))
               }
             ),
-            f && (m ? (
+            v && (d ? (
               // Server-side overflow: Simple tag, no popover
-              /* @__PURE__ */ o(v, { children: [
-                /* @__PURE__ */ r(b, { asChild: !0, children: /* @__PURE__ */ r(
-                  C,
+              /* @__PURE__ */ o(b, { children: [
+                /* @__PURE__ */ r(w, { asChild: !0, children: /* @__PURE__ */ r(
+                  k,
                   {
                     variant: "secondary",
                     size: "md",
                     shape: "rounded",
                     className: "whitespace-nowrap bg-[#eceefd] text-[#4259ee] hover:bg-[#dce1fc] border-0 h-5 px-2 text-xs font-medium font-['Manrope'] cursor-pointer",
-                    onClick: () => d?.(e.id),
+                    onClick: () => p?.(e.id),
                     tabIndex: 0,
                     role: "button",
-                    "aria-label": `${e.overflow?.count || n.length} more filters for ${e.label}`,
+                    "aria-label": `${e.overflow?.count || a.length} more filters for ${e.label}`,
                     onKeyDown: (t) => {
-                      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), d?.(e.id));
+                      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), p?.(e.id));
                     },
-                    children: x || a
+                    children: f || h
                   }
                 ) }),
                 /* @__PURE__ */ o(y, { variant: "tertiary", side: "top", children: [
-                  e.overflow?.count || n.length,
+                  e.overflow?.count || a.length,
                   " more filters"
                 ] })
               ] })
             ) : (
               // Client-side overflow: Popover
-              /* @__PURE__ */ o(T, { children: [
-                /* @__PURE__ */ o(v, { children: [
-                  /* @__PURE__ */ r(b, { asChild: !0, children: /* @__PURE__ */ r(z, { asChild: !0, children: /* @__PURE__ */ r(
-                    C,
+              /* @__PURE__ */ o(z, { children: [
+                /* @__PURE__ */ o(b, { children: [
+                  /* @__PURE__ */ r(w, { asChild: !0, children: /* @__PURE__ */ r($, { asChild: !0, children: /* @__PURE__ */ r(
+                    k,
                     {
                       variant: "secondary",
                       size: "md",
                       shape: "rounded",
                       className: "whitespace-nowrap bg-[#eceefd] text-[#4259ee] hover:bg-[#dce1fc] border-0 h-5 px-2 text-xs font-medium font-['Manrope'] cursor-pointer",
-                      children: a
+                      children: h
                     }
                   ) }) }),
                   /* @__PURE__ */ o(y, { variant: "tertiary", side: "top", children: [
-                    n.length,
+                    a.length,
                     " more filters"
                   ] })
                 ] }),
                 /* @__PURE__ */ r(
-                  F,
+                  R,
                   {
-                    remainingValues: n,
+                    remainingValues: a,
                     viewAllTrigger: e.viewAllTrigger,
-                    onViewAll: h,
-                    onItemRemove: (t) => s(e.id, t),
+                    onViewAll: u,
+                    onItemRemove: (t) => c(e.id, t),
                     isRemovable: e.removable,
                     isCopyable: e.copyable
                   }
@@ -173,6 +187,6 @@ const F = ({
   }
 ) });
 export {
-  F as FilterPopoverContent,
-  q as FilterTagList
+  R as FilterPopoverContent,
+  B as FilterTagList
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "impact-nova",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "description": "Enterprise-grade React design system built with React 19, Vite, Tailwind CSS, and Radix UI. Built-in internationalization (i18n) and comprehensive UI component library for scalable, accessible, and performant applications.",
   "type": "module",
   "main": "./dist/index.js",