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

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

@@ -1,167 +1,223 @@
-import { jsxs as i, jsx as l } from "react/jsx-runtime";
-import * as n from "react";
-import { ChevronRight as W } from "impact-nova-icons";
-import { useVirtualizer as j } from "@tanstack/react-virtual";
-import { cn as h } from "../../../lib/utils.js";
-import { Button as O } from "../../primitives/button/button.js";
-import { useImpactNovaI18n as T } from "../../../i18n/use-impact-nova-i18n.js";
-function $({
-  className: N,
-  items: d,
-  renderItem: R,
-  scrollStep: p = 200,
-  hideScrollbar: u = !0,
-  controlsPosition: v = "right",
-  renderPrevious: x,
-  renderNext: g,
-  maxWidth: L = "100%",
-  estimateSize: m = 200,
-  overscan: C = 5,
-  ...B
-}, E) {
-  const { t: w } = T(), r = n.useRef(null), [o, H] = n.useState(!1), [s, I] = n.useState(!1);
-  n.useImperativeHandle(E, () => r.current);
-  const c = j({
-    count: d.length,
-    getScrollElement: () => r.current,
-    estimateSize: typeof m == "function" ? m : () => m,
+import { jsx as t, jsxs as h, Fragment as $ } from "react/jsx-runtime";
+import * as i from "react";
+import { ChevronRight as L } from "impact-nova-icons";
+import { useVirtualizer as D } from "@tanstack/react-virtual";
+import { cn as r } from "../../../lib/utils.js";
+import { Button as I } from "../../primitives/button/button.js";
+import { useImpactNovaI18n as _ } from "../../../i18n/use-impact-nova-i18n.js";
+import { horizontalScrollerEdgeFadeClassName as E, buildHorizontalScrollerMaskImage as q } from "./horizontal-scroller-mask.js";
+function G({
+  className: B,
+  items: u,
+  renderItem: H,
+  scrollStep: x = 200,
+  hideScrollbar: v = !0,
+  edgeAffordance: c = !1,
+  controlsPosition: z = "right",
+  renderPrevious: b,
+  renderNext: w,
+  maxWidth: W = "100%",
+  estimateSize: p = 200,
+  overscan: M = 5,
+  ...V
+}, j) {
+  const { t: S } = _(), o = i.useRef(null), [n, F] = i.useState(!1), [a, O] = i.useState(!1);
+  i.useImperativeHandle(j, () => o.current);
+  const f = D({
+    count: u.length,
+    getScrollElement: () => o.current,
+    estimateSize: typeof p == "function" ? p : () => p,
     horizontal: !0,
-    overscan: C
-  }), V = c.getTotalSize(), f = n.useCallback(() => {
-    const e = r.current;
-    e && (H(e.scrollLeft > 0), I(
+    overscan: M
+  }), T = f.getTotalSize(), m = i.useCallback(() => {
+    const e = o.current;
+    e && (F(e.scrollLeft > 0), O(
       Math.ceil(e.scrollLeft + e.clientWidth) < e.scrollWidth
     ));
   }, []);
-  n.useEffect(() => {
-    const e = r.current;
+  i.useEffect(() => {
+    const e = o.current;
     if (!e) return;
-    f();
-    const t = () => f();
-    e.addEventListener("scroll", t);
-    const a = new ResizeObserver(() => {
-      f();
+    m();
+    const l = () => m();
+    e.addEventListener("scroll", l);
+    const s = new ResizeObserver(() => {
+      m();
     });
-    return a.observe(e), () => {
-      e.removeEventListener("scroll", t), a.disconnect();
+    return s.observe(e), () => {
+      e.removeEventListener("scroll", l), s.disconnect();
     };
-  }, [f, d, V]);
-  const z = () => {
-    r.current?.scrollBy({ left: -p, behavior: "smooth" });
-  }, b = () => {
-    r.current?.scrollBy({ left: p, behavior: "smooth" });
-  }, S = (e, t, a) => {
-    if (a) return null;
-    const k = w(e === "left" ? "horizontalScroller.scrollLeft" : "horizontalScroller.scrollRight");
-    return /* @__PURE__ */ i(
-      O,
+  }, [m, u, T]);
+  const N = () => {
+    o.current?.scrollBy({ left: -x, behavior: "smooth" });
+  }, y = () => {
+    o.current?.scrollBy({ left: x, behavior: "smooth" });
+  }, k = (e, l, s) => {
+    if (s) return null;
+    const g = S(e === "left" ? "horizontalScroller.scrollLeft" : "horizontalScroller.scrollRight");
+    return c ? /* @__PURE__ */ t(
+      I,
+      {
+        variant: "ghost",
+        size: "iconSm",
+        className: r(
+          "absolute top-1/2 z-20 !size-5 !min-h-5 !min-w-5 -translate-y-1/2 rounded-full border border-stroke-hairline p-0",
+          "bg-canvas-elevated/95 text-content-secondary shadow-sm",
+          "hover:bg-canvas-muted hover:text-content",
+          "[&_svg]:!size-3",
+          e === "left" ? "left-0.5" : "right-0.5"
+        ),
+        onClick: l,
+        disabled: s,
+        "aria-label": g,
+        "data-component": e === "left" ? "horizontal-scroller-prev" : "horizontal-scroller-next",
+        tabIndex: -1,
+        children: /* @__PURE__ */ t(
+          L,
+          {
+            className: r(e === "left" && "rotate-180")
+          }
+        )
+      }
+    ) : /* @__PURE__ */ h(
+      I,
       {
         variant: "ghost",
         size: "icon",
-        className: h(
+        className: r(
           "h-8 w-8 rounded-md bg-canvas-muted text-content-tertiary hover:bg-brand-tint hover:text-brand"
         ),
-        onClick: t,
-        disabled: a,
-        "aria-label": k,
+        onClick: l,
+        disabled: s,
+        "aria-label": g,
         "data-component": e === "left" ? "horizontal-scroller-prev" : "horizontal-scroller-next",
         children: [
-          /* @__PURE__ */ l(
-            W,
+          /* @__PURE__ */ t(
+            L,
             {
-              className: h("h-4 w-4", e === "left" && "rotate-180")
+              className: r("h-4 w-4", e === "left" && "rotate-180")
             }
           ),
-          /* @__PURE__ */ l("span", { className: "sr-only", children: k })
+          /* @__PURE__ */ t("span", { className: "sr-only", children: g })
         ]
       }
     );
-  }, y = (() => {
-    const e = x ? x({ onClick: z, disabled: !o }) : S("left", z, !o), t = g ? g({ onClick: b, disabled: !s }) : S("right", b, !s);
-    return v === "split" ? {
-      left: o ? /* @__PURE__ */ l("div", { className: "flex-shrink-0", children: e }) : null,
-      right: s ? /* @__PURE__ */ l("div", { className: "flex-shrink-0", children: t }) : null
-    } : v === "left" ? {
-      left: o || s ? /* @__PURE__ */ i("div", { className: "flex-shrink-0 flex items-center gap-1", children: [
+  }, d = (() => {
+    const e = b ? b({ onClick: N, disabled: !n }) : k("left", N, !n), l = w ? w({ onClick: y, disabled: !a }) : k("right", y, !a);
+    return c || z === "split" ? {
+      left: n ? /* @__PURE__ */ t("div", { className: "flex-shrink-0", children: e }) : null,
+      right: a ? /* @__PURE__ */ t("div", { className: "flex-shrink-0", children: l }) : null
+    } : z === "left" ? {
+      left: n || a ? /* @__PURE__ */ h("div", { className: "flex-shrink-0 flex items-center gap-1", children: [
         e,
-        t
+        l
       ] }) : null,
       right: null
     } : {
       left: null,
-      right: o || s ? /* @__PURE__ */ i("div", { className: "flex-shrink-0 flex items-center gap-1", children: [
+      right: n || a ? /* @__PURE__ */ h("div", { className: "flex-shrink-0 flex items-center gap-1", children: [
         e,
-        t
+        l
       ] }) : null
     };
-  })();
-  return /* @__PURE__ */ i(
+  })(), C = c ? q(n, a) : void 0, R = /* @__PURE__ */ t(
     "div",
     {
-      className: h(
-        "flex items-center gap-2 min-w-0 w-full bg-transparent",
-        N
+      ref: o,
+      tabIndex: 0,
+      className: r(
+        "flex flex-1 min-w-0 overflow-x-auto overflow-y-hidden whitespace-nowrap",
+        v && "scrollbar-hide",
+        "scroll-smooth",
+        c && "h-full overscroll-x-contain outline-none"
       ),
-      style: { maxWidth: L },
-      "data-component": "horizontal-scroller",
-      ...B,
-      children: [
-        y.left,
-        /* @__PURE__ */ l(
-          "div",
-          {
-            ref: r,
-            tabIndex: 0,
-            className: h(
-              "flex flex-1 min-w-0 overflow-x-auto overflow-y-hidden whitespace-nowrap",
-              u && "scrollbar-hide",
-              "scroll-smooth"
-            ),
-            style: {
-              scrollbarWidth: u ? "none" : "auto",
-              msOverflowStyle: u ? "none" : "auto"
-            },
-            "data-component": "horizontal-scroller-viewport",
-            children: /* @__PURE__ */ i(
+      style: {
+        scrollbarWidth: v ? "none" : "auto",
+        msOverflowStyle: v ? "none" : "auto",
+        WebkitMaskImage: C,
+        maskImage: C
+      },
+      "data-component": "horizontal-scroller-viewport",
+      children: /* @__PURE__ */ h(
+        "div",
+        {
+          style: {
+            width: `${f.getTotalSize()}px`,
+            display: "flex",
+            position: "relative"
+          },
+          children: [
+            /* @__PURE__ */ t(
               "div",
               {
                 style: {
-                  width: `${c.getTotalSize()}px`,
-                  display: "flex",
-                  position: "relative"
-                },
-                children: [
-                  /* @__PURE__ */ l(
-                    "div",
-                    {
-                      style: {
-                        width: `${c.getVirtualItems()[0]?.start ?? 0}px`,
-                        flexShrink: 0
-                      }
-                    }
-                  ),
-                  c.getVirtualItems().map((e) => /* @__PURE__ */ l(
-                    "div",
-                    {
-                      ref: c.measureElement,
-                      "data-index": e.index,
-                      className: "flex-shrink-0",
-                      children: R(d[e.index], e.index)
-                    },
-                    e.key
-                  ))
-                ]
+                  width: `${f.getVirtualItems()[0]?.start ?? 0}px`,
+                  flexShrink: 0
+                }
               }
+            ),
+            f.getVirtualItems().map((e) => /* @__PURE__ */ t(
+              "div",
+              {
+                ref: f.measureElement,
+                "data-index": e.index,
+                className: "flex-shrink-0",
+                children: H(u[e.index], e.index)
+              },
+              e.key
+            ))
+          ]
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: r(
+        "flex items-center gap-2 min-w-0 w-full bg-transparent",
+        c && "gap-0",
+        B
+      ),
+      style: { maxWidth: W },
+      "data-component": "horizontal-scroller",
+      ...V,
+      children: c ? /* @__PURE__ */ h("div", { className: "relative flex min-h-0 min-w-0 flex-1 self-stretch", children: [
+        n ? /* @__PURE__ */ t(
+          "div",
+          {
+            "aria-hidden": !0,
+            "data-component": "horizontal-scroller-fade-left",
+            className: r(
+              E,
+              "left-0 bg-gradient-to-r from-canvas-elevated from-10% via-canvas-elevated/90 via-50% to-transparent"
             )
           }
-        ),
-        y.right
-      ]
+        ) : null,
+        a ? /* @__PURE__ */ t(
+          "div",
+          {
+            "aria-hidden": !0,
+            "data-component": "horizontal-scroller-fade-right",
+            className: r(
+              E,
+              "right-0 bg-gradient-to-l from-canvas-elevated from-10% via-canvas-elevated/90 via-50% to-transparent"
+            )
+          }
+        ) : null,
+        d.left,
+        d.right,
+        R
+      ] }) : /* @__PURE__ */ h($, { children: [
+        d.left,
+        R,
+        d.right
+      ] })
     }
   );
 }
-const A = n.forwardRef($);
-A.displayName = "HorizontalScroller";
+const J = i.forwardRef(G);
+J.displayName = "HorizontalScroller";
 export {
-  A as HorizontalScroller
+  J as HorizontalScroller
 };

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

@@ -4,6 +4,8 @@ export interface HorizontalScrollerProps<T> extends Omit<React.HTMLAttributes<HT
     renderItem: (item: T, index: number) => React.ReactNode;
     scrollStep?: number;
     hideScrollbar?: boolean;
+    /** Overlay edge fades + split chevrons on the viewport (dashboard carousel pattern). */
+    edgeAffordance?: boolean;
     controlsPosition?: "left" | "right" | "split";
     renderPrevious?: (props: {
         onClick: () => void;

package/dist/components/layout/horizontal-scroller/scroll-overflow-affordance.d.ts

@@ -6,5 +6,7 @@ export interface ScrollOverflowAffordanceProps extends Omit<React.HTMLAttributes
     hideScrollbar?: boolean;
     viewportClassName?: string;
     viewportDataComponent?: string;
+    /** `compact` = small circular chevrons; `default` = 32px rounded-md dashboard controls. */
+    controlSize?: "compact" | "default";
 }
-export declare function ScrollOverflowAffordance({ children, scrollStep, contentDependency, hideScrollbar, viewportClassName, viewportDataComponent, className, ...props }: ScrollOverflowAffordanceProps): import("react/jsx-runtime").JSX.Element;
+export declare function ScrollOverflowAffordance({ children, scrollStep, contentDependency, hideScrollbar, viewportClassName, viewportDataComponent, controlSize, className, ...props }: ScrollOverflowAffordanceProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/horizontal-scroller/scroll-overflow-affordance.js

@@ -1,118 +1,128 @@
-import { jsxs as N, jsx as t } from "react/jsx-runtime";
+import { jsxs as I, jsx as r } from "react/jsx-runtime";
 import "react";
-import { ChevronRight as D } from "impact-nova-icons";
-import { Button as A } from "../../primitives/button/button.js";
+import { ChevronRight as R } from "impact-nova-icons";
+import { Button as D } from "../../primitives/button/button.js";
 import { useImpactNovaI18n as L } from "../../../i18n/use-impact-nova-i18n.js";
-import { cn as r } from "../../../lib/utils.js";
-import { useHorizontalScrollOverflow as R } from "./use-horizontal-scroll-overflow.js";
-const s = 48;
-function $(a, o) {
-  if (!(!a && !o))
-    return a && o ? `linear-gradient(to right, transparent, black ${s}px, black calc(100% - ${s}px), transparent)` : o ? `linear-gradient(to right, black, black calc(100% - ${s}px), transparent 100%)` : `linear-gradient(to right, transparent, black ${s}px, black)`;
-}
-const u = "pointer-events-none absolute top-0 z-10 h-full w-14";
+import { cn as o } from "../../../lib/utils.js";
+import { horizontalScrollerEdgeFadeClassName as v, buildHorizontalScrollerMaskImage as C } from "./horizontal-scroller-mask.js";
+import { useHorizontalScrollOverflow as A } from "./use-horizontal-scroll-overflow.js";
 function F({
-  children: a,
-  scrollStep: o,
-  contentDependency: p,
-  hideScrollbar: i = !0,
+  children: m,
+  scrollStep: h,
+  contentDependency: u,
+  hideScrollbar: l = !0,
   viewportClassName: g,
-  viewportDataComponent: h = "scroll-overflow-affordance-viewport",
-  className: b,
-  ...w
+  viewportDataComponent: b = "scroll-overflow-affordance-viewport",
+  controlSize: p = "compact",
+  className: w,
+  ...x
 }) {
-  const { t: c } = L(), {
-    scrollRef: k,
-    canScrollLeft: n,
-    canScrollRight: l,
-    scrollLeft: f,
-    scrollRight: d
-  } = R({ scrollStep: o, contentDependency: p }), v = $(n, l), x = (e) => {
-    if (e.key === "ArrowLeft" && n) {
-      e.preventDefault(), f();
+  const { t: s } = L(), {
+    scrollRef: y,
+    canScrollLeft: t,
+    canScrollRight: a,
+    scrollLeft: i,
+    scrollRight: c
+  } = A({ scrollStep: h, contentDependency: u }), f = C(
+    t,
+    a
+  ), k = (e) => {
+    if (e.key === "ArrowLeft" && t) {
+      e.preventDefault(), i();
       return;
     }
-    e.key === "ArrowRight" && l && (e.preventDefault(), d());
-  }, m = (e, y, z) => {
-    if (z) return null;
-    const I = c(e === "left" ? "horizontalScroller.scrollLeft" : "horizontalScroller.scrollRight");
-    return /* @__PURE__ */ t(
-      A,
+    e.key === "ArrowRight" && a && (e.preventDefault(), c());
+  }, d = (e, z, N) => {
+    if (N) return null;
+    const S = s(e === "left" ? "horizontalScroller.scrollLeft" : "horizontalScroller.scrollRight"), n = p === "default";
+    return /* @__PURE__ */ r(
+      D,
       {
         variant: "ghost",
-        size: "iconSm",
-        className: r(
-          "absolute top-1/2 z-20 !size-5 !min-h-5 !min-w-5 -translate-y-1/2 rounded-full border border-stroke-hairline p-0",
-          "bg-canvas-elevated/95 text-content-secondary shadow-sm",
-          "hover:bg-canvas-muted hover:text-content",
-          "[&_svg]:!size-3",
-          e === "left" ? "left-0.5" : "right-0.5"
+        size: n ? "icon" : "iconSm",
+        className: o(
+          "absolute top-1/2 z-20 -translate-y-1/2",
+          n ? o(
+            "h-8 w-8 shrink-0 rounded-md border border-solid border-border-subtle",
+            "bg-canvas-elevated text-content-tertiary shadow-sm",
+            "hover:bg-canvas-elevated hover:text-brand",
+            e === "left" ? "left-1" : "right-1"
+          ) : o(
+            "!size-5 !min-h-5 !min-w-5 rounded-full border border-stroke-hairline p-0",
+            "bg-canvas-elevated/95 text-content-secondary shadow-sm",
+            "hover:bg-canvas-muted hover:text-content",
+            "[&_svg]:!size-3",
+            e === "left" ? "left-0.5" : "right-0.5"
+          )
         ),
-        onClick: y,
-        "aria-label": I,
+        onClick: z,
+        "aria-label": S,
         "data-component": e === "left" ? "scroll-overflow-affordance-prev" : "scroll-overflow-affordance-next",
         tabIndex: -1,
-        children: /* @__PURE__ */ t(
-          D,
+        children: /* @__PURE__ */ r(
+          R,
           {
-            className: r(e === "left" && "rotate-180")
+            className: o(
+              n ? "h-4 w-4" : void 0,
+              e === "left" && "rotate-180"
+            )
           }
         )
       }
     );
   };
-  return /* @__PURE__ */ N(
+  return /* @__PURE__ */ I(
     "div",
     {
-      className: r("relative min-w-0", b),
+      className: o("relative min-w-0", w),
       "data-component": "scroll-overflow-affordance",
-      ...w,
+      ...x,
       children: [
-        n ? /* @__PURE__ */ t(
+        t ? /* @__PURE__ */ r(
           "div",
           {
             "aria-hidden": !0,
             "data-component": "scroll-overflow-affordance-fade-left",
-            className: r(
-              u,
+            className: o(
+              v,
               "left-0 bg-gradient-to-r from-canvas-elevated from-10% via-canvas-elevated/90 via-50% to-transparent"
             )
           }
         ) : null,
-        l ? /* @__PURE__ */ t(
+        a ? /* @__PURE__ */ r(
           "div",
           {
             "aria-hidden": !0,
             "data-component": "scroll-overflow-affordance-fade-right",
-            className: r(
-              u,
+            className: o(
+              v,
               "right-0 bg-gradient-to-l from-canvas-elevated from-10% via-canvas-elevated/90 via-50% to-transparent"
             )
           }
         ) : null,
-        m("left", f, !n),
-        m("right", d, !l),
-        /* @__PURE__ */ t(
+        d("left", i, !t),
+        d("right", c, !a),
+        /* @__PURE__ */ r(
           "div",
           {
-            ref: k,
+            ref: y,
             tabIndex: 0,
-            onKeyDown: x,
-            className: r(
+            onKeyDown: k,
+            className: o(
               "overflow-x-auto overflow-y-hidden overscroll-x-contain scroll-smooth outline-none",
               "[-webkit-overflow-scrolling:touch]",
               "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
-              i && "scrollbar-hide",
+              l && "scrollbar-hide",
               g
             ),
             style: {
-              scrollbarWidth: i ? "none" : "auto",
-              msOverflowStyle: i ? "none" : "auto",
-              WebkitMaskImage: v,
-              maskImage: v
+              scrollbarWidth: l ? "none" : "auto",
+              msOverflowStyle: l ? "none" : "auto",
+              WebkitMaskImage: f,
+              maskImage: f
             },
-            "data-component": h,
-            children: a
+            "data-component": b,
+            children: m
           }
         )
       ]

package/dist/components/primitives/iris/iris-insight-truncated-text.d.ts

@@ -0,0 +1,3 @@
+import { IrisInsightTruncatedTextProps } from './iris.types';
+/** Default truncated Iris insight label + overflow tooltip (white fill, iris ring). */
+export declare function IrisInsightTruncatedText({ children, overflowTooltipContent, className, triggerClassName, as, }: IrisInsightTruncatedTextProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/primitives/iris/iris-insight-truncated-text.js

@@ -0,0 +1,33 @@
+import { jsx as i } from "react/jsx-runtime";
+import { OverflowTooltip as a } from "../../feedback/tooltip/overflow-tooltip.js";
+import { cn as p } from "../../../lib/utils.js";
+function c({
+  children: t,
+  overflowTooltipContent: o,
+  className: n,
+  triggerClassName: e,
+  as: r = "span"
+}) {
+  const s = o ?? (typeof t == "string" ? t : void 0);
+  return /* @__PURE__ */ i(
+    a,
+    {
+      as: r,
+      triggerClassName: p(
+        "block w-full min-w-0 truncate whitespace-nowrap normal-case",
+        e
+      ),
+      contentClassName: "iris-menu-overflow-tooltip",
+      variant: "secondary",
+      side: "top",
+      align: "end",
+      sideOffset: 8,
+      content: s,
+      className: n,
+      children: t
+    }
+  );
+}
+export {
+  c as IrisInsightTruncatedText
+};

package/dist/components/primitives/iris/iris.d.ts

@@ -20,6 +20,7 @@ declare const IrisInsight: React.ForwardRefExoticComponent<IrisInsightProps & Re
 export { IrisControlProvider, IrisControlRegion, } from './iris-control-region';
 export { IrisAgentCursor } from './iris-agent-cursor';
 export { useIrisControl } from './iris-control-context';
+export { IrisInsightTruncatedText } from './iris-insight-truncated-text';
 export { IrisButton, IrisIconButton, IrisMenu, IrisInsight };
-export type { IrisButtonProps, IrisIconButtonProps, IrisMenuProps, IrisInsightProps, } from './iris.types';
+export type { IrisButtonProps, IrisIconButtonProps, IrisMenuProps, IrisInsightProps, IrisInsightTruncatedTextProps, } from './iris.types';
 export type { IrisControlProviderProps, IrisControlRegionProps, IrisControlGlowPhase, IrisControlRegionVariant, } from './iris-control.types';