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

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';

package/dist/components/primitives/iris/iris.js

@@ -1,16 +1,16 @@
-import { jsx as t, jsxs as I } from "react/jsx-runtime";
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
 import * as x from "react";
-import { Alan as b } from "impact-nova-icons";
+import { Alan as N } from "impact-nova-icons";
 import { Button as w } from "../button/button.js";
-import { Popover as B, PopoverTrigger as z, PopoverContent as k } from "../../feedback/popover/popover.js";
-import { OverflowTooltip as A } from "../../feedback/tooltip/overflow-tooltip.js";
+import { Popover as B, PopoverTrigger as z, PopoverContent as T } from "../../feedback/popover/popover.js";
+import { IrisInsightTruncatedText as A } from "./iris-insight-truncated-text.js";
 import { createComponent as g } from "../../../lib/primitives/create-component.js";
 import { cn as l } from "../../../lib/utils.js";
 import { IrisAlanGradientIcon as v } from "./iris-alan-gradient-icon.js";
-import { irisButtonToButtonSize as T, irisButtonVariants as V, irisChromeWrapperVariants as O, irisIconChromeWrapperVariants as P, irisIconFilledButtonVariants as y, irisIconButtonToButtonSize as S, irisIconButtonVariants as j, irisMenuVariants as M } from "./iris.variants.js";
+import { irisButtonToButtonSize as V, irisButtonVariants as k, irisChromeWrapperVariants as P, irisIconChromeWrapperVariants as S, irisIconFilledButtonVariants as j, irisIconButtonToButtonSize as y, irisIconButtonVariants as M, irisMenuVariants as O } from "./iris.variants.js";
 import { IrisControlProvider as _, IrisControlRegion as $ } from "./iris-control-region.js";
 import { IrisAgentCursor as ii } from "./iris-agent-cursor.js";
-import { useIrisControl as oi } from "./iris-control-context.js";
+import { useIrisControl as ni } from "./iris-control-context.js";
 const G = {
   sm: 14,
   md: 16,
@@ -18,53 +18,53 @@ const G = {
 }, U = g(
   "IrisButton",
   ({
-    className: o,
+    className: n,
     size: i = "md",
-    shape: n = "default",
-    children: e,
-    type: s = "button",
+    shape: o = "default",
+    children: s,
+    type: e = "button",
     ...r
-  }, a) => /* @__PURE__ */ t("span", { className: O({ shape: n }), children: /* @__PURE__ */ I(
+  }, a) => /* @__PURE__ */ t("span", { className: P({ shape: o }), children: /* @__PURE__ */ p(
     w,
     {
       ref: a,
-      type: s,
+      type: e,
       variant: "ghost",
-      size: T[i],
+      size: V[i],
       "data-component": "iris-button",
       "data-size": i,
-      "data-shape": n,
-      className: l(V({ size: i }), o),
+      "data-shape": o,
+      className: l(k({ size: i }), n),
       ...r,
       children: [
         /* @__PURE__ */ t(v, { size: G[i] }),
-        e ?? "Ask Iris"
+        s ?? "Ask Iris"
       ]
     }
   ) })
 ), R = g(
   "IrisIconButton",
   ({
-    className: o,
+    className: n,
     appearance: i = "outline",
-    size: n = "md",
-    shape: e = "default",
-    type: s = "button",
+    size: o = "md",
+    shape: s = "default",
+    type: e = "button",
     "aria-label": r = "Ask Iris",
     ...a
   }, d) => {
-    const m = P({ appearance: i, shape: e }), c = i === "filled" ? /* @__PURE__ */ t(b, { size: 16, className: "text-brand-foreground" }) : /* @__PURE__ */ t(v, { size: 16 });
+    const m = S({ appearance: i, shape: s }), c = i === "filled" ? /* @__PURE__ */ t(N, { size: 16, className: "text-brand-foreground" }) : /* @__PURE__ */ t(v, { size: 16 });
     return i === "filled" ? /* @__PURE__ */ t("span", { className: m, children: /* @__PURE__ */ t(
       "button",
       {
         ref: d,
-        type: s,
+        type: e,
         "data-component": "iris-icon-button",
         "data-appearance": i,
-        "data-size": n,
-        "data-shape": e,
+        "data-size": o,
+        "data-shape": s,
         "aria-label": r,
-        className: l(y({ size: n }), o),
+        className: l(j({ size: o }), n),
         ...a,
         children: c
       }
@@ -72,15 +72,15 @@ const G = {
       w,
       {
         ref: d,
-        type: s,
+        type: e,
         variant: "ghost",
-        size: S[n],
+        size: y[o],
         "data-component": "iris-icon-button",
         "data-appearance": i,
-        "data-size": n,
-        "data-shape": e,
+        "data-size": o,
+        "data-shape": s,
         "aria-label": r,
-        className: l(j({ size: n }), o),
+        className: l(M({ size: o }), n),
         ...a,
         children: c
       }
@@ -89,21 +89,21 @@ const G = {
 ), C = g(
   "IrisMenu",
   ({
-    className: o,
+    className: n,
     appearance: i = "loading",
-    children: n,
-    onAskInChat: e,
-    askInChatLabel: s = "Ask in chat",
+    children: o,
+    onAskInChat: s,
+    askInChatLabel: e = "Ask in chat",
     overflowTooltipContent: r,
     ...a
   }, d) => {
-    const m = i === "loading" || i === "status", c = i === "card", f = r ?? (typeof n == "string" ? n : void 0), u = /* @__PURE__ */ I(
+    const m = i === "loading" || i === "status", c = i === "card", f = r ?? (typeof o == "string" ? o : void 0), u = /* @__PURE__ */ p(
       "div",
       {
         ref: d,
         "data-component": "iris-menu",
         "data-appearance": i,
-        className: l(M({ appearance: i }), o),
+        className: l(O({ appearance: i }), n),
         ...a,
         children: [
           m && /* @__PURE__ */ t(
@@ -126,21 +126,10 @@ const G = {
                 i === "status" && "min-w-0 flex-1 overflow-hidden",
                 i === "loading" && "whitespace-nowrap"
               ),
-              children: i === "status" ? /* @__PURE__ */ t(
-                A,
-                {
-                  triggerClassName: "block w-full min-w-0 truncate whitespace-nowrap normal-case",
-                  contentClassName: "iris-menu-overflow-tooltip",
-                  variant: "secondary",
-                  side: "top",
-                  sideOffset: 10,
-                  content: f,
-                  children: n
-                }
-              ) : n
+              children: i === "status" ? /* @__PURE__ */ t(A, { overflowTooltipContent: f, children: o }) : o
             }
           ),
-          c && e && /* @__PURE__ */ t(w, { variant: "outline", size: "sm", className: "max-h-7 capitalize", onClick: e, children: s })
+          c && s && /* @__PURE__ */ t(w, { variant: "outline", size: "sm", className: "max-h-7 capitalize", onClick: s, children: e })
         ]
       }
     );
@@ -149,7 +138,7 @@ const G = {
       {
         className: l(
           "iris-edge-wash-shell iris-edge-wash-shell--menu rounded-xl motion-reduce:animate-none",
-          i === "status" && "iris-edge-wash-shell--fluid iris-edge-wash-shell--menu-plain"
+          i === "status" && "iris-edge-wash-shell--fluid iris-edge-wash-shell--menu-plain w-full min-w-0"
         ),
         children: u
       }
@@ -158,53 +147,53 @@ const G = {
 ), X = g(
   "IrisInsight",
   ({
-    status: o = "idle",
+    status: n = "idle",
     iconSize: i = "md",
-    iconAppearance: n = "outline",
-    loadingLabel: e = "Gathering insights...",
-    onTriggerClick: s,
+    iconAppearance: o = "outline",
+    loadingLabel: s = "Gathering insights...",
+    onTriggerClick: e,
     onAskInChat: r,
     askInChatLabel: a,
     className: d,
     children: m
   }, c) => {
-    const [f, u] = x.useState(!1), h = o === "loading" || o === "ready", N = o === "loading";
+    const [f, u] = x.useState(!1), h = n === "loading" || n === "ready", b = n === "loading";
     return x.useEffect(() => {
-      o === "loading" && u(!0);
-    }, [o]), /* @__PURE__ */ t(
+      n === "loading" && u(!0);
+    }, [n]), /* @__PURE__ */ t(
       "div",
       {
         ref: c,
         "data-component": "iris",
-        "data-status": o,
+        "data-status": n,
         className: l("relative inline-flex items-start", d),
-        children: /* @__PURE__ */ I(
+        children: /* @__PURE__ */ p(
           B,
           {
             open: h ? f : !1,
-            onOpenChange: (p) => {
-              h && u(p);
+            onOpenChange: (I) => {
+              h && u(I);
             },
             children: [
               /* @__PURE__ */ t(z, { asChild: !0, children: /* @__PURE__ */ t(
                 R,
                 {
                   size: i,
-                  appearance: N ? "filled" : n,
+                  appearance: b ? "filled" : o,
                   "aria-expanded": f && h,
-                  onClick: (p) => {
-                    o === "idle" && (s?.(), p.preventDefault());
+                  onClick: (I) => {
+                    n === "idle" && (e?.(), I.preventDefault());
                   }
                 }
               ) }),
               h && /* @__PURE__ */ t(
-                k,
+                T,
                 {
                   align: "end",
                   side: "bottom",
                   sideOffset: 7,
                   className: "w-auto border-0 bg-transparent p-0 shadow-none motion-reduce:animate-none",
-                  children: o === "loading" ? /* @__PURE__ */ t(C, { appearance: "loading", children: e }) : /* @__PURE__ */ t(
+                  children: n === "loading" ? /* @__PURE__ */ t(C, { appearance: "loading", children: s }) : /* @__PURE__ */ t(
                     C,
                     {
                       appearance: "card",
@@ -229,6 +218,7 @@ export {
   $ as IrisControlRegion,
   R as IrisIconButton,
   X as IrisInsight,
+  A as IrisInsightTruncatedText,
   C as IrisMenu,
-  oi as useIrisControl
+  ni as useIrisControl
 };

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

@@ -22,6 +22,13 @@ export type IrisMenuProps = React.HTMLAttributes<HTMLDivElement> & {
     /** Tooltip body when `children` is not a plain string (e.g. formatted insight copy). */
     overflowTooltipContent?: React.ReactNode;
 };
+export type IrisInsightTruncatedTextProps = {
+    children: React.ReactNode;
+    overflowTooltipContent?: React.ReactNode;
+    className?: string;
+    triggerClassName?: string;
+    as?: "span" | "p" | "div";
+};
 export type IrisInsightStatus = "idle" | "loading" | "ready";
 export type IrisInsightProps = {
     status?: IrisInsightStatus;

package/dist/components/primitives/stepper/internals/stepper-summary.js

@@ -14,12 +14,12 @@ const V = p.forwardRef(
     onStepClick: m,
     stepAriaLabel: f,
     ...h
-  }, b) => {
-    const x = o.length, c = !!m;
+  }, x) => {
+    const b = o.length, c = !!m;
     return /* @__PURE__ */ e(
       "div",
       {
-        ref: b,
+        ref: x,
         className: i(S({ variant: "summary" }), d),
         "data-orientation": "horizontal",
         "data-variant": "summary",
@@ -36,7 +36,7 @@ const V = p.forwardRef(
                 status: a,
                 disabled: t.disabled,
                 interactive: c,
-                ariaLabel: f(s, x),
+                ariaLabel: f(s, b),
                 isActive: r,
                 onStepClick: m,
                 className: i(
@@ -87,7 +87,7 @@ const V = p.forwardRef(
                   alt: "",
                   "aria-hidden": !0,
                   "data-summary-connector": "",
-                  className: "relative z-[1] -rotate-90 bg-canvas"
+                  className: "relative z-[1] -rotate-90"
                 }
               ) : null
             ] }) : null