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

package/dist/components/primitives/stepper/stepper.js

@@ -2,176 +2,177 @@ import { jsx as t, jsxs as g } from "react/jsx-runtime";
 import * as z from "react";
 import { Checkmark as D } from "impact-nova-icons";
 import { createComponent as P } from "../../../lib/primitives/create-component.js";
-import { cn as f } from "../../../lib/utils.js";
-import { OverflowTooltip as N } from "../../feedback/tooltip/overflow-tooltip.js";
+import { cn as u } from "../../../lib/utils.js";
+import { OverflowTooltip as w } from "../../feedback/tooltip/overflow-tooltip.js";
 import { useImpactNovaI18n as T } from "../../../i18n/use-impact-nova-i18n.js";
 import { iconVariants as V, stepVariants as k, stepperVariants as A } from "./stepper.variants.js";
-import { CompactStepper as O } from "./internals/stepper-compact.js";
-import { PipelineStepper as R } from "./internals/stepper-pipeline.js";
-import { RailStepper as E } from "./internals/stepper-rail.js";
-import { SummaryStepper as F } from "./internals/stepper-summary.js";
-import { TrackStepper as K } from "./internals/stepper-track.js";
-const Z = P(
+import { stepStatus as O, resolveStepItem as R } from "./internals/step-model.js";
+import { CompactStepper as E } from "./internals/stepper-compact.js";
+import { PipelineStepper as F } from "./internals/stepper-pipeline.js";
+import { RailStepper as K } from "./internals/stepper-rail.js";
+import { SummaryStepper as q } from "./internals/stepper-summary.js";
+import { TrackStepper as B } from "./internals/stepper-track.js";
+const S = P(
   "Stepper",
   ({
-    className: s,
+    className: p,
     currentStep: r,
-    steps: a,
-    orientation: o = "horizontal",
-    variant: u = "default",
+    steps: o,
+    orientation: s = "horizontal",
+    variant: f = "default",
     heading: I,
-    renderStep: j,
+    renderStep: L,
     onStepClick: e,
-    ...n
-  }, p) => {
-    const { t: m } = T(), v = a.length, d = (x, i) => m("stepper.stepOfTotal", { current: x, total: i });
-    return u === "rail" ? /* @__PURE__ */ t(
-      E,
+    ...m
+  }, n) => {
+    const { t: c } = T(), b = o.length, d = (v, l) => c("stepper.stepOfTotal", { current: v, total: l });
+    return f === "rail" ? /* @__PURE__ */ t(
+      K,
       {
-        ref: p,
-        className: s,
+        ref: n,
+        className: p,
         currentStep: r,
-        steps: a,
+        steps: o,
         onStepClick: e,
-        renderStep: j,
+        renderStep: L,
         stepAriaLabel: d,
-        ...n
+        ...m
       }
-    ) : u === "compact" ? /* @__PURE__ */ t(
-      O,
+    ) : f === "compact" ? /* @__PURE__ */ t(
+      E,
       {
-        ref: p,
-        className: s,
+        ref: n,
+        className: p,
         currentStep: r,
-        steps: a,
-        orientation: o,
+        steps: o,
+        orientation: s,
         onStepClick: e,
         stepAriaLabel: d,
-        ...n
+        ...m
       }
-    ) : u === "pipeline" ? /* @__PURE__ */ t(
-      R,
+    ) : f === "pipeline" ? /* @__PURE__ */ t(
+      F,
       {
-        ref: p,
-        className: s,
+        ref: n,
+        className: p,
         currentStep: r,
-        steps: a,
+        steps: o,
         onStepClick: e,
         heading: I,
         stepAriaLabel: d,
-        pipelinePrefix: m("stepper.pipelinePrefix"),
-        stepsCountLabel: m("stepper.stepsCount", { current: r, total: v }),
-        ...n
+        pipelinePrefix: c("stepper.pipelinePrefix"),
+        stepsCountLabel: c("stepper.stepsCount", { current: r, total: b }),
+        ...m
       }
-    ) : u === "track" ? /* @__PURE__ */ t(
-      K,
+    ) : f === "track" ? /* @__PURE__ */ t(
+      B,
       {
-        ref: p,
-        className: s,
+        ref: n,
+        className: p,
         currentStep: r,
-        steps: a,
+        steps: o,
         onStepClick: e,
         stepAriaLabel: d,
-        currentlyStepLabel: m("stepper.currentlyStep", {
+        currentlyStepLabel: c("stepper.currentlyStep", {
           current: r,
-          total: v
+          total: b
         }),
-        previousLabel: m("stepper.previousSteps"),
-        nextLabel: m("stepper.nextSteps"),
-        ...n
+        previousLabel: c("stepper.previousSteps"),
+        nextLabel: c("stepper.nextSteps"),
+        ...m
       }
-    ) : u === "summary" ? /* @__PURE__ */ t(
-      F,
+    ) : f === "summary" ? /* @__PURE__ */ t(
+      q,
       {
-        ref: p,
-        className: s,
+        ref: n,
+        className: p,
         currentStep: r,
-        steps: a,
+        steps: o,
         onStepClick: e,
         stepAriaLabel: d,
-        ...n
+        ...m
       }
     ) : /* @__PURE__ */ t(
       "div",
       {
-        ref: p,
-        className: f(A({ orientation: o, variant: "default" }), s),
-        "data-orientation": o,
+        ref: n,
+        className: u(A({ orientation: s, variant: "default" }), p),
+        "data-orientation": s,
         "data-variant": "default",
         "data-component": "stepper",
         role: "list",
-        ...n,
-        children: a.map((x, i) => {
-          const l = typeof x == "string" ? { label: x } : x, b = i + 1, w = b === r, L = b < r, h = l.disabled, c = L ? "completed" : w ? "active" : "default";
+        ...m,
+        children: o.map((v, l) => {
+          const a = R(v), h = l + 1, x = a.disabled, i = O(h, r, a.status), N = i === "active", j = i === "completed";
           return /* @__PURE__ */ g(z.Fragment, { children: [
             /* @__PURE__ */ g(
               "div",
               {
                 role: "listitem",
-                onClick: () => !h && e?.(i),
-                "aria-label": d(b, v),
-                "aria-current": w ? "step" : void 0,
-                tabIndex: e && !h ? 0 : void 0,
-                onKeyDown: e && !h ? (y) => {
-                  (y.key === "Enter" || y.key === " ") && (y.preventDefault(), e(i));
+                onClick: () => !x && e?.(l),
+                "aria-label": d(h, b),
+                "aria-current": N ? "step" : void 0,
+                tabIndex: e && !x ? 0 : void 0,
+                onKeyDown: e && !x ? (y) => {
+                  (y.key === "Enter" || y.key === " ") && (y.preventDefault(), e(l));
                 } : void 0,
-                "data-step": b,
-                "data-status": c,
-                "data-disabled": h || void 0,
-                className: f(
-                  k({ orientation: o, status: c }),
-                  o === "horizontal" && "min-w-[140px]",
-                  h ? "opacity-80 cursor-not-allowed" : e ? "cursor-pointer" : "cursor-default"
+                "data-step": h,
+                "data-status": i,
+                "data-disabled": x || void 0,
+                className: u(
+                  k({ orientation: s, status: i }),
+                  s === "horizontal" && "min-w-[140px]",
+                  x ? "opacity-80 cursor-not-allowed" : e ? "cursor-pointer" : "cursor-default"
                 ),
                 children: [
-                  /* @__PURE__ */ t("div", { className: f(V({ status: c }), "mr-2"), children: L ? /* @__PURE__ */ t(D, { className: "h-5 w-5 stroke-[3px]" }) : /* @__PURE__ */ t("span", { children: l.icon || b }) }),
+                  /* @__PURE__ */ t("div", { className: u(V({ status: i }), "mr-2"), children: j ? /* @__PURE__ */ t(D, { className: "h-5 w-5 stroke-[3px]" }) : /* @__PURE__ */ t("span", { children: a.icon || h }) }),
                   /* @__PURE__ */ g("div", { className: "flex min-w-0 flex-col justify-center overflow-hidden", children: [
                     /* @__PURE__ */ t(
-                      N,
+                      w,
                       {
-                        triggerClassName: f(
+                        triggerClassName: u(
                           "text-[14px] leading-tight font-medium truncate max-w-[200px] block",
-                          c === "completed" ? "text-success" : "text-content",
-                          c === "active" && o === "vertical" ? "text-brand" : ""
+                          i === "completed" ? "text-success" : "text-content",
+                          i === "active" && s === "vertical" ? "text-brand" : ""
                         ),
-                        content: l.label,
+                        content: a.label,
                         side: "top",
                         variant: "tertiary",
-                        children: l.label
+                        children: a.label
                       }
                     ),
-                    l.description && /* @__PURE__ */ t(
-                      N,
+                    a.description && /* @__PURE__ */ t(
+                      w,
                       {
-                        triggerClassName: f(
+                        triggerClassName: u(
                           "text-[12px] leading-tight mt-0.5 truncate max-w-[200px] block",
-                          c === "completed" ? "text-success" : "text-secondary-foreground"
+                          i === "completed" ? "text-success" : "text-secondary-foreground"
                         ),
-                        content: l.description,
+                        content: a.description,
                         side: "top",
                         variant: "tertiary",
-                        children: l.description
+                        children: a.description
                       }
                     )
                   ] })
                 ]
               }
             ),
-            i < a.length - 1 && /* @__PURE__ */ t(
+            l < o.length - 1 && /* @__PURE__ */ t(
               "div",
               {
-                className: f(
+                className: u(
                   "border-t border-dashed border-stroke-hairline transition-colors",
-                  o === "horizontal" ? "mx-1 min-w-[24px] flex-1 self-center" : "my-[-4px] ml-[12px] h-6 w-0 border-l"
+                  s === "horizontal" ? "mx-1 min-w-[24px] flex-1 self-center" : "my-[-4px] ml-[12px] h-6 w-0 border-l"
                 )
               }
             )
-          ] }, i);
+          ] }, l);
         })
       }
     );
   }
 );
 export {
-  Z as Stepper
+  S as Stepper
 };

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

@@ -6,6 +6,8 @@ export interface StepItem {
     description?: string;
     icon?: React.ReactNode;
     disabled?: boolean;
+    /** Overrides progress inferred from `currentStep`. The selected step stays `active`. */
+    status?: StepStatus;
 }
 export type StepperVariant = NonNullable<VariantProps<typeof stepperVariants>["variant"]>;
 export type StepperOrientation = NonNullable<VariantProps<typeof stepperVariants>["orientation"]>;

package/dist/impact-nova-components.css

@@ -760,6 +760,32 @@
   background-color: transparent;
 }
 
+/* Assistant reply card — same revolving ring as the small Iris button. */
+.iris-reply-frame {
+  --iris-border-duration: 2.5s;
+  --iris-border-angle: 0deg;
+  display: inline-flex;
+  vertical-align: middle;
+  border: 1.2px solid transparent;
+  background-image: linear-gradient(var(--color-surface-elevated), var(--color-surface-elevated)), conic-gradient(from var(--iris-border-angle), var(--color-header-bot-gradient-teal-hover), var(--color-header-bot-gradient-indigo-hover), var(--color-header-bot-gradient-purple), var(--color-header-bot-gradient-orange-hover), var(--color-header-bot-gradient-teal-hover));
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+  animation: iris-border-spin var(--iris-border-duration, 2.5s) linear infinite;
+  transition: animation-duration 160ms ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .iris-reply-frame {
+    animation: none;
+  }
+}
+.iris-reply-frame {
+  display: grid;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  vertical-align: unset;
+}
+
 /* Menu / status / wrap — static fill; conic ring on ::before only (Figma Menu 2852-95992). */
 .iris-edge-wash-shell--menu {
   --iris-border-angle: 0deg;
@@ -1378,6 +1404,36 @@ html.iris-agent-session *:not(.iris-agent-cursor):not(.iris-agent-cursor *):not(
   padding-right: 0;
 }
 
+.ag-header-cell:has(.ag-header-cell-search-active) .ag-header-cell-comp-wrapper {
+  width: 100%;
+  min-width: 0;
+}
+
+.ag-header-cell-search-active {
+  width: 100%;
+  min-width: 0;
+  justify-content: space-between;
+}
+
+.ag-header-cell-search-active > :first-child {
+  flex: 1 1 auto;
+  min-width: 0;
+  width: 100%;
+  max-width: none;
+}
+
+.ag-header-cell-search-active [data-component="input"],
+.ag-header-cell-search-active [data-component="select"] {
+  width: 100%;
+  min-width: 0;
+}
+
+.ag-header-cell-search-active [data-component="input-border"],
+.ag-header-cell-search-active [data-component="select-trigger"] {
+  width: 100%;
+  max-width: none;
+}
+
 /* Row selection + custom checkbox renderers — zero padding, center in cell.
    Default ag-cell rules clip 16px checkboxes and leave wrapper left-aligned. */
 .ag-cell:not(.ag-cell-no-padding):not(.ag-cell-renderer-full-control):has(.ag-selection-checkbox),
@@ -1776,6 +1832,16 @@ html.iris-agent-session *:not(.iris-agent-cursor):not(.iris-agent-cursor *):not(
   overflow: hidden;
 }
 
+/* AG Grid 36 sticky left/right pin is trapped by overflow:hidden on the header
+   row, so pinned headers scroll with the center columns. Keep the clip for
+   unpinned lists; open overflow when a pin region has cells. */
+[data-component="ag-grid-react"][data-variant="list"]
+  .ag-header-row:has(.ag-grid-pinned-left-cells .ag-header-cell),
+[data-component="ag-grid-react"][data-variant="list"]
+  .ag-header-row:has(.ag-grid-pinned-right-cells .ag-header-cell) {
+  overflow: visible;
+}
+
 [data-component="ag-grid-react"][data-variant="list"] .ag-header-cell,
 [data-component="ag-grid-react"][data-variant="list"] .ag-header-group-cell {
   height: var(--in-ag-list-header-height);
@@ -1793,22 +1859,40 @@ html.iris-agent-session *:not(.iris-agent-cursor):not(.iris-agent-cursor *):not(
   border-radius: var(--in-ag-list-radius);
 }
 
-[data-component="ag-grid-react"][data-variant="list"] .ag-pinned-left-header:has(.ag-header-cell) {
+[data-component="ag-grid-react"][data-variant="list"] .ag-pinned-left-header:has(.ag-header-cell),
+[data-component="ag-grid-react"][data-variant="list"]
+  .ag-header-row
+  > .ag-grid-pinned-left-cells:has(.ag-header-cell) {
   border-radius: var(--in-ag-list-radius) 0 0 var(--in-ag-list-radius);
+  background-color: var(--color-surface-muted);
+  z-index: 2;
 }
 
 [data-component="ag-grid-react"][data-variant="list"]:has(.ag-pinned-left-header .ag-header-cell) .ag-header-viewport,
-[data-component="ag-grid-react"][data-variant="list"]:has(.ag-pinned-left-header .ag-header-cell) .ag-header-row {
+[data-component="ag-grid-react"][data-variant="list"]:has(.ag-pinned-left-header .ag-header-cell) .ag-header-row,
+[data-component="ag-grid-react"][data-variant="list"]:has(
+    .ag-header-row > .ag-grid-pinned-left-cells .ag-header-cell
+  )
+  .ag-header-row {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-[data-component="ag-grid-react"][data-variant="list"] .ag-pinned-right-header:has(.ag-header-cell) {
+[data-component="ag-grid-react"][data-variant="list"] .ag-pinned-right-header:has(.ag-header-cell),
+[data-component="ag-grid-react"][data-variant="list"]
+  .ag-header-row
+  > .ag-grid-pinned-right-cells:has(.ag-header-cell) {
   border-radius: 0 var(--in-ag-list-radius) var(--in-ag-list-radius) 0;
+  background-color: var(--color-surface-muted);
+  z-index: 2;
 }
 
 [data-component="ag-grid-react"][data-variant="list"]:has(.ag-pinned-right-header .ag-header-cell) .ag-header-viewport,
-[data-component="ag-grid-react"][data-variant="list"]:has(.ag-pinned-right-header .ag-header-cell) .ag-header-row {
+[data-component="ag-grid-react"][data-variant="list"]:has(.ag-pinned-right-header .ag-header-cell) .ag-header-row,
+[data-component="ag-grid-react"][data-variant="list"]:has(
+    .ag-header-row > .ag-grid-pinned-right-cells .ag-header-cell
+  )
+  .ag-header-row {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }