impact-nova 1.5.14 → 1.6.0

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

@@ -1,139 +1,173 @@
-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: g
+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
 }) => {
-  const [e, m] = N.useState(!1), s = e ? l : l.slice(0, 3), p = l.length > 3, t = () => {
-    n === "custom" ? c?.() : m(!0);
+  const [e, p] = k.useState(!1), s = e ? n : n.slice(0, 3), h = n.length > 3, o = () => {
+    l === "custom" ? d?.() : p(!0);
   };
-  return /* @__PURE__ */ r(
-    z,
+  return /* @__PURE__ */ t(
+    I,
     {
-      className: "w-[200px] p-0 rounded-[8px] bg-white shadow-[0_0_4px_0_rgba(0,0,0,0.12)] border-none",
+      className: "w-[200px] p-0 rounded-[8px] bg-canvas-elevated shadow-elevation-floating border-none",
       align: "start",
       sideOffset: 8,
-      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(a);
+      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 })
+                    }
+                  )
+                ]
               },
-              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__ */ 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(
-            j,
+              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,
             {
               variant: "secondary",
-              size: "sm",
               className: "w-full justify-center",
-              onClick: t,
-              children: n === "custom" ? "View all" : `View all (${l.length})`
+              onClick: o,
+              children: l === "custom" ? "View all" : `View all (${n.length})`
             }
           )
         ] })
       ] })
     }
   );
-}, _ = ({
-  filters: l,
-  onFilterRemove: n,
-  onOverflowClick: c,
-  onViewAll: d
-}) => /* @__PURE__ */ r("div", { className: "flex flex-1 items-center min-w-0", children: /* @__PURE__ */ r(
-  C,
+}, 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,
   {
-    items: l,
-    renderItem: (e, m) => {
-      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: [
+    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: [
             e.label,
-            e.required && /* @__PURE__ */ r("span", { className: "text-red-500 ml-0.5", children: "*" })
+            e.required && /* @__PURE__ */ t("span", { className: "text-validation ml-0.5", children: "*" })
           ] }),
-          /* @__PURE__ */ o("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ r(
-              T,
+          /* @__PURE__ */ r("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ t(
+              z,
               {
-                spacing: "sm",
-                tags: p.map((i) => ({
-                  label: String(i),
+                spacing: "none",
+                className: "gap-2.5",
+                tags: h.map((c) => ({
+                  label: String(c),
                   variant: "secondary",
-                  size: "md",
+                  size: "sm",
                   shape: "rounded",
                   removable: e.removable,
-                  onRemove: () => n(e.id, i)
+                  onRemove: () => l(e.id, c),
+                  className: A
                 }))
               }
             ),
-            y && (a ? (
+            S && (a ? (
               // Server-side overflow: Simple tag, no popover
-              /* @__PURE__ */ o(v, { children: [
-                /* @__PURE__ */ r(u, { asChild: !0, children: /* @__PURE__ */ r(
-                  b,
+              /* @__PURE__ */ r(x, { children: [
+                /* @__PURE__ */ t(f, { asChild: !0, children: /* @__PURE__ */ t(
+                  y,
                   {
                     variant: "secondary",
-                    size: "md",
+                    size: "sm",
                     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 || w
+                    className: i(
+                      N,
+                      "cursor-pointer whitespace-nowrap"
+                    ),
+                    onClick: () => d?.(e.id),
+                    children: v || b
                   }
                 ) }),
-                /* @__PURE__ */ o(f, { variant: "tertiary", side: "top", children: [
-                  e.overflow?.count || t.length,
+                /* @__PURE__ */ r(g, { variant: "tertiary", side: "top", children: [
+                  e.overflow?.count || o.length,
                   " more filters"
                 ] })
               ] })
             ) : (
               // Client-side overflow: Popover
-              /* @__PURE__ */ o(k, { children: [
-                /* @__PURE__ */ o(v, { children: [
-                  /* @__PURE__ */ r(u, { asChild: !0, children: /* @__PURE__ */ r(S, { asChild: !0, children: /* @__PURE__ */ r(
-                    b,
+              /* @__PURE__ */ r(j, { children: [
+                /* @__PURE__ */ r(x, { children: [
+                  /* @__PURE__ */ t(f, { asChild: !0, children: /* @__PURE__ */ t(O, { asChild: !0, children: /* @__PURE__ */ t(
+                    y,
                     {
                       variant: "secondary",
-                      size: "md",
+                      size: "sm",
                       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
+                      className: i(
+                        N,
+                        "cursor-pointer whitespace-nowrap"
+                      ),
+                      children: b
                     }
                   ) }) }),
-                  /* @__PURE__ */ o(f, { variant: "tertiary", side: "top", children: [
-                    t.length,
+                  /* @__PURE__ */ r(g, { variant: "tertiary", side: "top", children: [
+                    o.length,
                     " more filters"
                   ] })
                 ] }),
-                /* @__PURE__ */ r(
-                  O,
+                /* @__PURE__ */ t(
+                  F,
                   {
-                    remainingValues: t,
+                    remainingValues: o,
                     viewAllTrigger: e.viewAllTrigger,
-                    onViewAll: d,
-                    onItemRemove: (i) => n(e.id, i),
+                    onViewAll: m,
+                    onItemRemove: (c) => l(e.id, c),
                     isRemovable: e.removable
                   }
                 )
@@ -148,5 +182,5 @@ const O = ({
   }
 ) });
 export {
-  _ as FilterTagList
+  X as FilterTagList
 };

package/dist/components/ui/header.d.ts

@@ -1,3 +1,4 @@
+import { KeyBinding } from './command-palette/utils';
 import * as React from "react";
 declare const Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
 declare const HeaderLeft: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
@@ -5,11 +6,14 @@ declare const HeaderRight: React.ForwardRefExoticComponent<React.HTMLAttributes<
 declare const HeaderLogo: React.ForwardRefExoticComponent<React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>;
 declare const HeaderSeparator: React.ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-separator').SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const HeaderTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
-interface HeaderBotButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-}
+type HeaderBotButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
 declare const HeaderBotButton: React.ForwardRefExoticComponent<HeaderBotButtonProps & React.RefAttributes<HTMLButtonElement>>;
-interface NotificationIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface NotificationIconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
     showIndicator?: boolean;
+    /** Passed through to the underlying icon `Button` tooltip. */
+    tooltipSide?: "top" | "bottom" | "left" | "right";
+    /** Keyboard shortcut shown in the tooltip next to the label (requires `aria-label`). */
+    tooltipKeybinding?: KeyBinding;
 }
 declare const NotificationIconButton: React.ForwardRefExoticComponent<NotificationIconButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { Header, HeaderLeft, HeaderRight, HeaderLogo, HeaderSeparator, HeaderTitle, HeaderBotButton, NotificationIconButton, };

package/dist/components/ui/header.js

@@ -1,130 +1,138 @@
-import { jsx as i, jsxs as c, Fragment as l } from "react/jsx-runtime";
-import * as o from "react";
-import { cn as s } from "../../lib/utils.js";
-import { Button as f } from "./button.js";
-import { Separator as m } from "./separator.js";
-import { Alan as p, IA as x, Bell as h } from "../../icons/index.js";
+import { jsx as o, jsxs as d, Fragment as f } from "react/jsx-runtime";
+import * as i from "react";
+import { cn as n } from "../../lib/utils.js";
+import { Button as m } from "./button.js";
+import { Separator as p } from "./separator.js";
+import { Alan as x, IA as h, Bell as N } from "../../icons/index.js";
 /* empty css            */
-import { useImpactNovaI18n as N } from "../../i18n/ImpactNovaI18nContext.js";
-const u = o.forwardRef(({ className: t, children: e, ...a }, r) => /* @__PURE__ */ i(
-  "header",
-  {
-    ref: r,
-    className: s(
-      "sticky top-0 z-40 flex h-14 w-full items-center justify-between bg-white px-6 shadow-[0px_0px_16px_2px_rgba(0,0,0,0.0588)]",
-      t
-    ),
-    ...a,
-    children: e
-  }
-));
-u.displayName = "Header";
-const w = o.forwardRef(({ className: t, children: e, ...a }, r) => /* @__PURE__ */ i(
+import { useImpactNovaI18n as u } from "../../i18n/ImpactNovaI18nContext.js";
+const g = i.forwardRef(
+  ({ className: t, children: e, ...a }, r) => /* @__PURE__ */ o(
+    "header",
+    {
+      ref: r,
+      className: n(
+        "sticky top-0 z-40 flex h-14 w-full items-center justify-between bg-canvas-elevated px-6 shadow-elevation-header",
+        t
+      ),
+      ...a,
+      children: e
+    }
+  )
+);
+g.displayName = "Header";
+const v = i.forwardRef(({ className: t, children: e, ...a }, r) => /* @__PURE__ */ o(
   "div",
   {
     ref: r,
-    className: s("flex flex-row items-center justify-start", t),
+    className: n("flex flex-row items-center justify-start", t),
     ...a,
     children: e
   }
 ));
-w.displayName = "HeaderLeft";
-const g = o.forwardRef(({ className: t, children: e, ...a }, r) => /* @__PURE__ */ i(
+v.displayName = "HeaderLeft";
+const w = i.forwardRef(({ className: t, children: e, ...a }, r) => /* @__PURE__ */ o(
   "div",
   {
     ref: r,
-    className: s("flex flex-row items-center justify-start gap-5", t),
+    className: n("flex flex-row items-center justify-start gap-5", t),
     ...a,
     children: e
   }
 ));
-g.displayName = "HeaderRight";
-const y = o.forwardRef(({ className: t, children: e, href: a = "/", ...r }, n) => /* @__PURE__ */ i(
+w.displayName = "HeaderRight";
+const y = i.forwardRef(({ className: t, children: e, href: a = "/", ...r }, s) => /* @__PURE__ */ o(
   "a",
   {
     href: a,
-    ref: n,
-    className: s("h-9 flex items-center justify-center cursor-pointer", t),
+    ref: s,
+    className: n(
+      "h-9 flex items-center justify-center cursor-pointer",
+      t
+    ),
     ...r,
-    children: e || /* @__PURE__ */ i(x, { width: 91, height: 36 })
+    children: e || /* @__PURE__ */ o(h, { width: 91, height: 36 })
   }
 ));
 y.displayName = "HeaderLogo";
-const v = o.forwardRef(({ className: t, ...e }, a) => /* @__PURE__ */ i(
-  m,
+const H = i.forwardRef(({ className: t, ...e }, a) => /* @__PURE__ */ o(
+  p,
   {
     ref: a,
     orientation: "vertical",
-    className: s("h-6 mx-3", t),
+    className: n("h-6 mx-3", t),
     ...e
   }
 ));
-v.displayName = "HeaderSeparator";
-const H = o.forwardRef(({ className: t, children: e, ...a }, r) => /* @__PURE__ */ i(
+H.displayName = "HeaderSeparator";
+const b = i.forwardRef(({ className: t, children: e, ...a }, r) => /* @__PURE__ */ o(
   "h1",
   {
     ref: r,
-    className: s(
-      "text-base font-extrabold leading-6 text-foreground",
-      t
-    ),
+    className: n("text-base font-extrabold leading-6 text-content", t),
     ...a,
     children: e
   }
 ));
-H.displayName = "HeaderTitle";
-const L = o.forwardRef(
-  ({ className: t, children: e, ...a }, r) => /* @__PURE__ */ i(
-    "button",
-    {
-      ref: r,
-      type: "button",
-      className: s(
-        "impact-header-bot-container relative flex items-center justify-center w-[106px] h-[34px] gap-[7px] px-[11px] py-0 rounded-lg cursor-pointer border-0 outline-none",
-        t
-      ),
-      ...a,
-      children: e || /* @__PURE__ */ c(l, { children: [
-        /* @__PURE__ */ i(p, { size: 20, className: "text-white" }),
-        /* @__PURE__ */ i("span", { className: "text-sm font-semibold leading-[20px] text-white whitespace-nowrap", children: "Ask Alan" })
-      ] })
-    }
-  )
-), b = o.forwardRef(
-  ({ className: t, showIndicator: e, children: a, ...r }, n) => {
-    const { t: d } = N();
-    return /* @__PURE__ */ c(
-      f,
+b.displayName = "HeaderTitle";
+const k = i.forwardRef(({ className: t, children: e, ...a }, r) => /* @__PURE__ */ o(
+  "button",
+  {
+    ref: r,
+    type: "button",
+    className: n(
+      "impact-header-bot-container relative flex items-center justify-center w-[106px] h-[34px] gap-[7px] px-[11px] py-0 rounded-lg cursor-pointer border-0 outline-none",
+      t
+    ),
+    ...a,
+    children: e || /* @__PURE__ */ d(f, { children: [
+      /* @__PURE__ */ o(x, { size: 20, className: "text-brand-foreground" }),
+      /* @__PURE__ */ o("span", { className: "text-sm font-semibold leading-[20px] text-brand-foreground whitespace-nowrap", children: "Ask Alan" })
+    ] })
+  }
+)), R = i.forwardRef(
+  ({
+    className: t,
+    showIndicator: e,
+    tooltipSide: a = "top",
+    tooltipKeybinding: r,
+    ...s
+  }, c) => {
+    const { t: l } = u();
+    return /* @__PURE__ */ d(
+      m,
       {
         variant: "ghost",
         size: "icon",
-        ref: n,
-        "aria-label": d("notificationPanel.title"),
+        ref: c,
+        "aria-label": l("notificationPanel.title"),
+        tooltipSide: a,
+        tooltipKeybinding: r,
         "data-indicator": e ? "" : void 0,
-        className: s(
-          "text-gray-500 relative [&_svg]:size-6 hover:text-gray-900",
+        className: n(
+          "relative text-content-header-notification [&_svg]:size-6 hover:text-content",
           t
         ),
-        ...r,
+        ...s,
         children: [
-          /* @__PURE__ */ i(h, { size: 24 }),
-          e && /* @__PURE__ */ c("div", { className: "notification-indicator", children: [
-            /* @__PURE__ */ i("div", { className: "notification-pulse" }),
-            /* @__PURE__ */ i("div", { className: "notification-dot" })
+          /* @__PURE__ */ o(N, { size: 24 }),
+          e && /* @__PURE__ */ d("div", { className: "notification-indicator", children: [
+            /* @__PURE__ */ o("div", { className: "notification-pulse" }),
+            /* @__PURE__ */ o("div", { className: "notification-dot" })
           ] })
         ]
       }
     );
   }
 );
-b.displayName = "NotificationIconButton";
+R.displayName = "NotificationIconButton";
 export {
-  u as Header,
-  L as HeaderBotButton,
-  w as HeaderLeft,
+  g as Header,
+  k as HeaderBotButton,
+  v as HeaderLeft,
   y as HeaderLogo,
-  g as HeaderRight,
-  v as HeaderSeparator,
-  H as HeaderTitle,
-  b as NotificationIconButton
+  w as HeaderRight,
+  H as HeaderSeparator,
+  b as HeaderTitle,
+  R as NotificationIconButton
 };