impact-nova 3.0.0-alpha.3 → 3.0.0-alpha.5

package/dist/components/flows/iris-chat/iris-chat-menu.js

@@ -1,37 +1,37 @@
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { useRef as S, useState as y } from "react";
+import { useRef as S, useState as g } from "react";
 import { FunnelShow as I, ThreeDots as L, Pin as M, Pencil as A, Bin as D, ChevronRight as T } from "impact-nova-icons";
-import { DropdownMenu as g, DropdownMenuTrigger as v, DropdownMenuContent as b, DropdownMenuItem as f } from "../../feedback/dropdown-menu/dropdown-menu.js";
+import { DropdownMenu as C, DropdownMenuTrigger as v, DropdownMenuContent as b, DropdownMenuItem as p } from "../../feedback/dropdown-menu/dropdown-menu.js";
 import { ButtonIconTooltip as N } from "../../feedback/tooltip/button-icon-tooltip.js";
 import { Button as x } from "../../primitives/button/button.js";
 import { Accordion as j, AccordionItem as k, AccordionTrigger as R, AccordionContent as E } from "../../primitives/accordion/accordion.js";
 import { useImpactNovaI18n as w } from "../../../i18n/use-impact-nova-i18n.js";
 import { useVirtualizedList as B } from "../../../lib/virtualized/useVirtualizedList.js";
 import { createComponent as O } from "../../../lib/primitives/create-component.js";
-import { cn as C } from "../../../lib/utils.js";
+import { cn as y } from "../../../lib/utils.js";
 import { IrisChatAttachIcon as $ } from "./iris-chat-icons.js";
 const z = ["type", "status", "lastActivity"], ee = O(
   "IrisChatMenu",
-  ({ className: t, children: m, ...l }, c) => /* @__PURE__ */ e(
+  ({ className: t, children: d, ...l }, o) => /* @__PURE__ */ e(
     "div",
     {
-      ref: c,
+      ref: o,
       "data-component": "iris-chat-menu",
-      className: C("flex flex-col gap-4 py-4", t),
+      className: y("flex flex-col gap-4 py-4", t),
       ...l,
-      children: /* @__PURE__ */ e(j, { type: "multiple", defaultValue: ["recent", "artifacts"], className: "flex flex-col gap-4", children: m })
+      children: /* @__PURE__ */ e(j, { type: "multiple", defaultValue: ["recent", "artifacts"], className: "flex flex-col gap-4", children: d })
     }
   )
 ), P = ({
   value: t,
-  title: m,
+  title: d,
   onFilterSelect: l,
-  onViewMore: c,
+  onViewMore: o,
   viewMoreLabel: a,
   className: h,
-  children: p
+  children: f
 }) => {
-  const { t: i } = w(), d = {
+  const { t: i } = w(), m = {
     type: i("irisChat.filterType"),
     status: i("irisChat.filterStatus"),
     lastActivity: i("irisChat.filterLastActivity")
@@ -41,7 +41,7 @@ const z = ["type", "status", "lastActivity"], ee = O(
     {
       value: t,
       "data-component": "iris-chat-menu-section",
-      className: C("rounded-none border-0 bg-transparent shadow-none", h),
+      className: y("rounded-none border-0 bg-transparent shadow-none", h),
       children: [
         /* @__PURE__ */ s("div", { className: "flex h-10 items-center justify-between gap-2", children: [
           /* @__PURE__ */ s(R, { variant: "plain", headingLevel: 3, className: "flex min-w-0 flex-1 items-center gap-2 py-0", children: [
@@ -52,33 +52,42 @@ const z = ["type", "status", "lastActivity"], ee = O(
                 className: "rotate-90 transition-transform group-data-[state=open]:-rotate-90"
               }
             ) }),
-            /* @__PURE__ */ e("span", { className: "text-sm font-medium text-content", children: m })
+            /* @__PURE__ */ e("span", { className: "text-sm font-medium text-content", children: d })
           ] }),
-          /* @__PURE__ */ s(g, { children: [
-            /* @__PURE__ */ e(N, { label: i("irisChat.filter"), children: /* @__PURE__ */ e(v, { asChild: !0, children: /* @__PURE__ */ e(
-              x,
+          /* @__PURE__ */ s(C, { children: [
+            /* @__PURE__ */ e(
+              N,
               {
-                type: "button",
-                variant: "ghost",
-                size: "iconSm",
-                "aria-label": i("irisChat.filter"),
-                "data-testid": `iris-chat-filter-${t}`,
-                children: /* @__PURE__ */ e(I, { size: 16 })
+                label: i("irisChat.filter"),
+                variant: "secondary",
+                align: "end",
+                side: "top",
+                children: /* @__PURE__ */ e(v, { asChild: !0, children: /* @__PURE__ */ e(
+                  x,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "iconSm",
+                    "aria-label": i("irisChat.filter"),
+                    "data-testid": `iris-chat-filter-${t}`,
+                    children: /* @__PURE__ */ e(I, { size: 16 })
+                  }
+                ) })
               }
-            ) }) }),
-            /* @__PURE__ */ e(b, { align: "end", children: z.map((o) => /* @__PURE__ */ e(f, { onSelect: () => l?.(o), children: d[o] }, o)) })
+            ),
+            /* @__PURE__ */ e(b, { align: "end", children: z.map((c) => /* @__PURE__ */ e(p, { onSelect: () => l?.(c), children: m[c] }, c)) })
           ] })
         ] }),
         /* @__PURE__ */ s(E, { className: "px-0 pb-1 pt-1", children: [
-          /* @__PURE__ */ e("div", { className: "flex flex-col", children: p }),
-          c ? /* @__PURE__ */ e(
+          /* @__PURE__ */ e("div", { className: "flex flex-col", children: f }),
+          o ? /* @__PURE__ */ e(
             x,
             {
               type: "button",
               variant: "link",
               "data-testid": `iris-chat-view-more-${t}`,
               className: "mt-1 h-auto justify-start px-2 text-sm",
-              onClick: c,
+              onClick: o,
               children: a ?? i("irisChat.viewMore")
             }
           ) : null
@@ -88,10 +97,10 @@ const z = ["type", "status", "lastActivity"], ee = O(
   );
 };
 P.displayName = "IrisChatMenuSection";
-const V = ({ title: t, onSelect: m, onAction: l, className: c }) => {
-  const { t: a } = w(), [h, p] = y(!1), [i, d] = y(!1), [o, u] = y(t), n = () => {
-    const r = o.trim();
-    if (d(!1), !r || r === t) {
+const V = ({ title: t, onSelect: d, onAction: l, className: o }) => {
+  const { t: a } = w(), [h, f] = g(!1), [i, m] = g(!1), [c, u] = g(t), n = () => {
+    const r = c.trim();
+    if (m(!1), !r || r === t) {
       u(t);
       return;
     }
@@ -102,17 +111,17 @@ const V = ({ title: t, onSelect: m, onAction: l, className: c }) => {
     {
       "data-component": "iris-chat-list-item",
       "data-menu-open": h ? "" : void 0,
-      className: C(
+      className: y(
         "flex min-h-10 items-center justify-between gap-2 rounded-full px-3",
         (h || i) && "bg-secondary",
         "hover:bg-secondary",
-        c
+        o
       ),
       children: [
         i ? /* @__PURE__ */ e(
           "input",
           {
-            value: o,
+            value: c,
             autoFocus: !0,
             "aria-label": a("irisChat.rename"),
             "data-testid": "iris-chat-item-rename",
@@ -120,7 +129,7 @@ const V = ({ title: t, onSelect: m, onAction: l, className: c }) => {
             onChange: (r) => u(r.target.value),
             onBlur: n,
             onKeyDown: (r) => {
-              r.key === "Enter" && (r.preventDefault(), n()), r.key === "Escape" && (u(t), d(!1));
+              r.key === "Enter" && (r.preventDefault(), n()), r.key === "Escape" && (u(t), m(!1));
             }
           }
         ) : /* @__PURE__ */ e(
@@ -128,25 +137,34 @@ const V = ({ title: t, onSelect: m, onAction: l, className: c }) => {
           {
             type: "button",
             className: "min-w-0 flex-1 truncate text-start text-sm text-content",
-            onClick: m,
+            onClick: d,
             children: t
           }
         ),
-        /* @__PURE__ */ s(g, { open: h, onOpenChange: p, children: [
-          /* @__PURE__ */ e(N, { label: a("irisChat.moreActions"), children: /* @__PURE__ */ e(v, { asChild: !0, children: /* @__PURE__ */ e(
-            x,
+        /* @__PURE__ */ s(C, { open: h, onOpenChange: f, children: [
+          /* @__PURE__ */ e(
+            N,
             {
-              type: "button",
-              variant: "ghost",
-              size: "iconSm",
-              "aria-label": a("irisChat.moreActions"),
-              "data-testid": "iris-chat-item-more",
-              children: /* @__PURE__ */ e(L, { size: 16 })
+              label: a("irisChat.moreActions"),
+              variant: "secondary",
+              align: "end",
+              side: "top",
+              children: /* @__PURE__ */ e(v, { asChild: !0, children: /* @__PURE__ */ e(
+                x,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "iconSm",
+                  "aria-label": a("irisChat.moreActions"),
+                  "data-testid": "iris-chat-item-more",
+                  children: /* @__PURE__ */ e(L, { size: 16 })
+                }
+              ) })
             }
-          ) }) }),
+          ),
           /* @__PURE__ */ s(b, { align: "end", className: "w-[182px]", children: [
             /* @__PURE__ */ e(
-              f,
+              p,
               {
                 icon: /* @__PURE__ */ e(M, { size: 16 }),
                 onSelect: () => l?.("pin"),
@@ -154,17 +172,17 @@ const V = ({ title: t, onSelect: m, onAction: l, className: c }) => {
               }
             ),
             /* @__PURE__ */ e(
-              f,
+              p,
               {
                 icon: /* @__PURE__ */ e(A, { size: 16 }),
                 onSelect: () => {
-                  u(t), window.setTimeout(() => d(!0), 0);
+                  u(t), window.setTimeout(() => m(!0), 0);
                 },
                 children: a("irisChat.rename")
               }
             ),
             /* @__PURE__ */ e(
-              f,
+              p,
               {
                 icon: /* @__PURE__ */ e($, {}),
                 onSelect: () => l?.("archive"),
@@ -172,7 +190,7 @@ const V = ({ title: t, onSelect: m, onAction: l, className: c }) => {
               }
             ),
             /* @__PURE__ */ e(
-              f,
+              p,
               {
                 icon: /* @__PURE__ */ e(D, { size: 16 }),
                 className: "text-destructive focus:bg-destructive/10 focus:text-destructive",
@@ -189,19 +207,19 @@ const V = ({ title: t, onSelect: m, onAction: l, className: c }) => {
 V.displayName = "IrisChatListItem";
 function F({
   items: t,
-  getItemId: m,
+  getItemId: d,
   renderItem: l,
-  title: c,
+  title: o,
   onFilterSelect: a,
   estimateSize: h = 32,
-  className: p
+  className: f
 }) {
-  const { t: i } = w(), d = S(null), o = B({
+  const { t: i } = w(), m = S(null), c = B({
     rowCount: t.length,
     getRowData: (n) => t[n],
-    getRowId: (n) => m(t[n]),
+    getRowId: (n) => d(t[n]),
     estimateSize: () => h,
-    scrollElementRef: d,
+    scrollElementRef: m,
     hasMore: !1
   }), u = {
     type: i("irisChat.filterType"),
@@ -212,26 +230,35 @@ function F({
     "div",
     {
       "data-component": "iris-chat-list",
-      className: C("flex min-h-0 flex-1 flex-col", p),
+      className: y("flex min-h-0 flex-1 flex-col", f),
       children: [
-        c || a ? /* @__PURE__ */ s("div", { className: "flex items-center justify-between gap-2 py-3", children: [
-          c ? /* @__PURE__ */ e("p", { className: "text-sm font-medium text-content", children: c }) : /* @__PURE__ */ e("span", {}),
-          a ? /* @__PURE__ */ s(g, { children: [
-            /* @__PURE__ */ e(N, { label: i("irisChat.filter"), children: /* @__PURE__ */ e(v, { asChild: !0, children: /* @__PURE__ */ e(
-              x,
+        o || a ? /* @__PURE__ */ s("div", { className: "flex items-center justify-between gap-2 py-3", children: [
+          o ? /* @__PURE__ */ e("p", { className: "text-sm font-medium text-content", children: o }) : /* @__PURE__ */ e("span", {}),
+          a ? /* @__PURE__ */ s(C, { children: [
+            /* @__PURE__ */ e(
+              N,
               {
-                type: "button",
-                variant: "ghost",
-                size: "iconSm",
-                "aria-label": i("irisChat.filter"),
-                "data-testid": "iris-chat-filter-list",
-                children: /* @__PURE__ */ e(I, { size: 16 })
+                label: i("irisChat.filter"),
+                variant: "secondary",
+                align: "end",
+                side: "top",
+                children: /* @__PURE__ */ e(v, { asChild: !0, children: /* @__PURE__ */ e(
+                  x,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "iconSm",
+                    "aria-label": i("irisChat.filter"),
+                    "data-testid": "iris-chat-filter-list",
+                    children: /* @__PURE__ */ e(I, { size: 16 })
+                  }
+                ) })
               }
-            ) }) }),
-            /* @__PURE__ */ e(b, { align: "end", children: z.map((n) => /* @__PURE__ */ e(f, { onSelect: () => a(n), children: u[n] }, n)) })
+            ),
+            /* @__PURE__ */ e(b, { align: "end", children: z.map((n) => /* @__PURE__ */ e(p, { onSelect: () => a(n), children: u[n] }, n)) })
           ] }) : null
         ] }) : null,
-        /* @__PURE__ */ e("div", { ref: d, className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ e("div", { style: { height: o.virtualizer.getTotalSize(), position: "relative" }, children: o.virtualizer.getVirtualItems().map((n) => {
+        /* @__PURE__ */ e("div", { ref: m, className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ e("div", { style: { height: c.virtualizer.getTotalSize(), position: "relative" }, children: c.virtualizer.getVirtualItems().map((n) => {
           const r = t[n.index];
           return /* @__PURE__ */ e(
             "div",
@@ -243,7 +270,7 @@ function F({
               },
               children: l(r)
             },
-            m(r)
+            d(r)
           );
         }) }) })
       ]

package/dist/components/forms/choice-card/choice-card.variants.js

@@ -1,5 +1,5 @@
 import { cva as e } from "class-variance-authority";
-const r = "border-stroke-subtle p-3 hover:border-brand", a = "border-brand border-l-[3px] border-l-brand bg-brand-tint py-3 pr-3 pl-2.5 shadow-elevation-header", s = e(
+const r = "border-stroke-subtle p-3 hover:border-stroke-field hover:bg-accent", a = "border-brand border-l-[3px] border-l-brand bg-brand-tint py-3 pr-3 pl-2.5 shadow-elevation-header hover:bg-brand-tint", o = e(
   [
     "group relative cursor-pointer select-none transition-[border-color,background-color,box-shadow] duration-150",
     "has-[[data-slot=choice-card-control]:focus-visible]:outline-none has-[[data-slot=choice-card-control]:focus-visible]:ring-1 has-[[data-slot=choice-card-control]:focus-visible]:ring-focus-ring"
@@ -7,7 +7,7 @@ const r = "border-stroke-subtle p-3 hover:border-brand", a = "border-brand borde
   {
     variants: {
       variant: {
-        default: "flex flex-row items-start justify-between gap-2 overflow-hidden rounded-xl border border-solid bg-canvas-elevated",
+        default: "flex flex-row items-center justify-between gap-2 overflow-hidden rounded-xl border border-solid bg-canvas-elevated",
         featured: "flex h-[116px] w-[215px] shrink-0 flex-col overflow-hidden rounded-2xl border border-solid bg-canvas-elevated p-0",
         compare: "flex flex-col items-stretch gap-4 overflow-visible rounded-xl border border-solid p-3"
       },
@@ -96,5 +96,5 @@ const r = "border-stroke-subtle p-3 hover:border-brand", a = "border-brand borde
   }
 );
 export {
-  s as choiceCardVariants
+  o as choiceCardVariants
 };

package/dist/components/forms/select/components/SelectMenuPanel.js

@@ -2,19 +2,19 @@ import { jsx as o } from "react/jsx-runtime";
 import * as n from "@radix-ui/react-popover";
 import { cn as a } from "../../../../lib/utils.js";
 import { preventDismissOnTooltipOutside as t } from "../../../../lib/overlay/prevent-dismiss-on-tooltip-outside.js";
-import { useOverlayPortalContainer as v } from "../../../../lib/overlay/overlay-portal-context.js";
-import { OVERLAY_NESTED_FLOATING_INSTANT_HIDE_CLASS as f } from "../../../../lib/overlay/overlay-host.constants.js";
-function P({
+import { useOverlayPortalContainer as u } from "../../../../lib/overlay/overlay-portal-context.js";
+import { OVERLAY_NESTED_FLOATING_INSTANT_HIDE_CLASS as v } from "../../../../lib/overlay/overlay-host.constants.js";
+function O({
   menuRef: l,
-  menuMinHeight: i,
+  menuMinHeight: r,
   menuWidth: s,
-  isReadOnly: r,
+  isReadOnly: i,
   id: d,
   menuLabel: p,
-  children: m
+  children: c
 }) {
-  const c = v();
-  return /* @__PURE__ */ o(n.Portal, { container: c, children: /* @__PURE__ */ o(
+  const m = u();
+  return /* @__PURE__ */ o(n.Portal, { container: m, children: /* @__PURE__ */ o(
     n.Content,
     {
       ref: l,
@@ -25,7 +25,7 @@ function P({
       collisionPadding: 8,
       "aria-label": p,
       onOpenAutoFocus: (e) => e.preventDefault(),
-      onPointerDown: (e) => e.stopPropagation(),
+      onCloseAutoFocus: (e) => e.preventDefault(),
       onPointerDownOutside: t,
       onInteractOutside: t,
       onFocusOutside: t,
@@ -37,8 +37,8 @@ function P({
       },
       className: a(
         "z-50 flex flex-col overflow-hidden rounded-[12px] p-0 text-base shadow-elevation-select focus:outline-none sm:text-sm border-none pointer-events-auto",
-        r ? "bg-disabled-surface" : "bg-canvas-elevated",
-        f
+        i ? "bg-disabled-surface" : "bg-canvas-elevated",
+        v
       ),
       "data-testid": `select-menu-${d || "default"}`,
       "data-component": "select-menu",
@@ -47,17 +47,17 @@ function P({
         {
           className: a(
             "flex min-h-0 flex-1 flex-col overflow-hidden rounded-[12px]",
-            r ? "bg-disabled-surface" : "bg-canvas-elevated"
+            i ? "bg-disabled-surface" : "bg-canvas-elevated"
           ),
           style: {
-            minHeight: i ? `${i}px` : void 0
+            minHeight: r ? `${r}px` : void 0
           },
-          children: m
+          children: c
         }
       )
     }
   ) });
 }
 export {
-  P as SelectMenuPanel
+  O as SelectMenuPanel
 };

package/dist/components/forms/select/components/SelectTriggerValue.js

@@ -1,9 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
 import { cn as x } from "../../../../lib/utils.js";
-import "react";
 import { OverflowTooltip as m } from "../../../feedback/tooltip/overflow-tooltip.js";
 import { isInvertedSelection as h, isOptionArray as d } from "../utils/select.js";
-function C({
+function w({
   isMulti: u,
   isDisabled: p,
   internalValue: o,
@@ -53,5 +52,5 @@ function C({
   );
 }
 export {
-  C as SelectTriggerValue
+  w as SelectTriggerValue
 };

package/dist/components/forms/select/components/Submenu.js

@@ -1,14 +1,13 @@
 import { jsxs as s, jsx as t } from "react/jsx-runtime";
 import * as i from "@radix-ui/react-popover";
 import { Checkbox as P } from "../../checkbox/checkbox.js";
-import "react";
 import { OverflowTooltip as y } from "../../../feedback/tooltip/overflow-tooltip.js";
 import { ChevronRight as A, Checkmark as O } from "impact-nova-icons";
 import { cn as v } from "../../../../lib/utils.js";
 import { useOverlayPortalContainer as T } from "../../../../lib/overlay/overlay-portal-context.js";
 import { OVERLAY_NESTED_FLOATING_INSTANT_HIDE_CLASS as _ } from "../../../../lib/overlay/overlay-host.constants.js";
 import { useSuppressOptionClickForTextSelection as E } from "../hooks/useSuppressOptionClickForTextSelection.js";
-const R = ({
+const G = ({
   parentOption: n,
   isMulti: u,
   isReadOnly: l,
@@ -106,5 +105,5 @@ const R = ({
   ] });
 };
 export {
-  R as Submenu
+  G as Submenu
 };

package/dist/components/layout/horizontal-scroller/horizontal-scroller-mask.d.ts

@@ -0,0 +1,3 @@
+export declare const HORIZONTAL_SCROLLER_FADE_WIDTH_PX = 48;
+export declare function buildHorizontalScrollerMaskImage(canScrollLeft: boolean, canScrollRight: boolean): string | undefined;
+export declare const horizontalScrollerEdgeFadeClassName = "pointer-events-none absolute top-0 z-10 h-full w-14";

package/dist/components/layout/horizontal-scroller/horizontal-scroller-mask.js

@@ -0,0 +1,12 @@
+const e = 48;
+function n(a, t) {
+  if (!a && !t) return;
+  const r = 48;
+  return a && t ? `linear-gradient(to right, transparent, black ${r}px, black calc(100% - ${r}px), transparent)` : t ? `linear-gradient(to right, black, black calc(100% - ${r}px), transparent 100%)` : `linear-gradient(to right, transparent, black ${r}px, black)`;
+}
+const i = "pointer-events-none absolute top-0 z-10 h-full w-14";
+export {
+  e as HORIZONTAL_SCROLLER_FADE_WIDTH_PX,
+  n as buildHorizontalScrollerMaskImage,
+  i as horizontalScrollerEdgeFadeClassName
+};