impact-nova 2.6.2 → 3.0.0-alpha.0

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

@@ -0,0 +1,103 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import * as p from "react";
+import { Checkmark as y } from "impact-nova-icons";
+import { cn as i } from "../../../../lib/utils.js";
+import { summaryIconVariants as N, summaryStepVariants as w, stepperVariants as S } from "../stepper.variants.js";
+import { ClickMeArrow as k } from "../../../ui/local-raster-icons/rasterIcons.js";
+import { resolveStepItem as z, stepStatus as j } from "./step-model.js";
+import { StepHitTarget as I, StepBrandRail as R } from "./step-hit-target.js";
+const V = p.forwardRef(
+  ({
+    className: d,
+    currentStep: u,
+    steps: o,
+    onStepClick: m,
+    stepAriaLabel: f,
+    ...h
+  }, b) => {
+    const x = o.length, c = !!m;
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        ref: b,
+        className: i(S({ variant: "summary" }), d),
+        "data-orientation": "horizontal",
+        "data-variant": "summary",
+        "data-component": "stepper",
+        role: "list",
+        ...h,
+        children: o.map((g, l) => {
+          const t = z(g), s = l + 1, a = j(s, u), r = a === "active", v = l < o.length - 1;
+          return /* @__PURE__ */ n(p.Fragment, { children: [
+            /* @__PURE__ */ n(
+              I,
+              {
+                stepNumber: s,
+                status: a,
+                disabled: t.disabled,
+                interactive: c,
+                ariaLabel: f(s, x),
+                isActive: r,
+                onStepClick: m,
+                className: i(
+                  w({ status: a }),
+                  c && !t.disabled && "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus-ring/25"
+                ),
+                children: [
+                  r ? /* @__PURE__ */ e(R, {}) : null,
+                  /* @__PURE__ */ n("span", { className: "flex items-center gap-2.5", children: [
+                    /* @__PURE__ */ e("span", { className: N({ status: a }), children: a === "completed" ? /* @__PURE__ */ e(y, { className: "size-3.5 stroke-[3px]" }) : /* @__PURE__ */ e("span", { children: t.icon || s }) }),
+                    /* @__PURE__ */ e(
+                      "span",
+                      {
+                        className: i(
+                          "whitespace-nowrap capitalize",
+                          r ? "text-sm font-semibold leading-[21px] text-brand" : a === "completed" ? "text-sm font-semibold leading-[21px] text-[var(--color-stepper-complete-ink)]" : "text-sm font-normal leading-4 text-content-icon"
+                        ),
+                        children: t.label
+                      }
+                    )
+                  ] }),
+                  t.description ? /* @__PURE__ */ e(
+                    "span",
+                    {
+                      className: i(
+                        "whitespace-nowrap text-xs font-medium capitalize leading-4",
+                        r ? "text-secondary-foreground" : "text-content-placeholder"
+                      ),
+                      children: t.description
+                    }
+                  ) : null
+                ]
+              }
+            ),
+            v ? /* @__PURE__ */ n("span", { className: "relative flex w-7 shrink-0 items-center justify-center", children: [
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  "aria-hidden": !0,
+                  "data-summary-dots": "",
+                  className: "absolute inset-x-0 top-1/2 h-0 w-full -translate-y-1/2 border-t border-dashed border-stroke-hairline"
+                }
+              ),
+              r ? /* @__PURE__ */ e(
+                k,
+                {
+                  size: 12,
+                  alt: "",
+                  "aria-hidden": !0,
+                  "data-summary-connector": "",
+                  className: "relative z-[1] -rotate-90 bg-canvas"
+                }
+              ) : null
+            ] }) : null
+          ] }, l);
+        })
+      }
+    );
+  }
+);
+V.displayName = "SummaryStepper";
+export {
+  V as SummaryStepper
+};

package/dist/components/primitives/stepper/internals/stepper-track.d.ts

@@ -0,0 +1,8 @@
+import { StepperProps } from '../stepper.types';
+import * as React from "react";
+export declare const TrackStepper: React.ForwardRefExoticComponent<Omit<StepperProps, "variant"> & {
+    stepAriaLabel: (stepNumber: number, total: number) => string;
+    currentlyStepLabel: string;
+    previousLabel: string;
+    nextLabel: string;
+} & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,170 @@
+import { jsxs as p, jsx as r, Fragment as B } from "react/jsx-runtime";
+import * as l from "react";
+import { Checkmark as E, ChevronRight as y } from "impact-nova-icons";
+import { Button as z } from "../../button/button.js";
+import { cn as m } from "../../../../lib/utils.js";
+import { trackIconVariants as _, trackStepVariants as T, stepperVariants as q } from "../stepper.variants.js";
+import { resolveStepItem as D, stepStatus as F } from "./step-model.js";
+import { StepHitTarget as H } from "./step-hit-target.js";
+const M = l.forwardRef(
+  ({
+    className: S,
+    currentStep: u,
+    steps: c,
+    onStepClick: f,
+    stepAriaLabel: x,
+    currentlyStepLabel: w,
+    previousLabel: C,
+    nextLabel: R,
+    ...I
+  }, L) => {
+    const k = c.length, i = !!f, d = l.useRef(null), [b, V] = l.useState(!1), [h, W] = l.useState(!1), v = b || h, o = l.useCallback(() => {
+      const e = d.current;
+      if (!e) return;
+      const t = 16, a = e.scrollWidth > e.clientWidth + t;
+      V(a && e.scrollLeft > t), W(
+        a && Math.ceil(e.scrollLeft + e.clientWidth) < e.scrollWidth - t
+      );
+    }, []), O = l.useCallback((e) => {
+      const t = d.current;
+      if (!t) return;
+      t.querySelector(`[data-step="${e + 1}"]`)?.scrollIntoView({ inline: "center", block: "nearest", behavior: "smooth" });
+    }, []);
+    l.useLayoutEffect(() => {
+      const e = d.current;
+      if (!e) return;
+      o(), e.scrollWidth > e.clientWidth + 16 && (e.querySelector("[data-status='active']")?.scrollIntoView({ inline: "center", block: "nearest", behavior: "auto" }), o());
+      const a = new ResizeObserver(o);
+      return a.observe(e), e.addEventListener("scroll", o, { passive: !0 }), () => {
+        a.disconnect(), e.removeEventListener("scroll", o);
+      };
+    }, [u, c.length, o]);
+    const N = (e) => {
+      d.current?.scrollBy({ left: e * 220, behavior: "smooth" });
+    };
+    return /* @__PURE__ */ p(
+      "div",
+      {
+        ref: L,
+        className: m(q({ variant: "track" }), S),
+        "data-orientation": "horizontal",
+        "data-variant": "track",
+        "data-component": "stepper",
+        ...I,
+        children: [
+          /* @__PURE__ */ p("div", { className: "relative flex items-center ", children: [
+            /* @__PURE__ */ r(
+              "div",
+              {
+                ref: d,
+                role: "list",
+                className: m(
+                  "scrollbar-hide flex w-full items-center gap-2 overflow-x-auto",
+                  v ? "px-8 [mask-image:linear-gradient(to_right,transparent,black_28px,black_calc(100%-28px),transparent)]" : "justify-center"
+                ),
+                children: c.map((e, t) => {
+                  const a = D(e), s = t + 1, n = F(s, u), g = n === "active", j = v && (t === 0 && b || t === c.length - 1 && h);
+                  return /* @__PURE__ */ p(
+                    H,
+                    {
+                      stepNumber: s,
+                      status: n,
+                      disabled: a.disabled,
+                      interactive: i,
+                      ariaLabel: x(s, k),
+                      isActive: g,
+                      onStepClick: f,
+                      className: m(
+                        T({ status: n }),
+                        j && "blur-[1.5px]",
+                        i && !a.disabled && "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus-ring/25"
+                      ),
+                      children: [
+                        g ? /* @__PURE__ */ r("span", { className: "w-full text-sm font-semibold capitalize leading-[21px] text-secondary-foreground", children: w }) : null,
+                        /* @__PURE__ */ p("span", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ r("span", { className: _({ status: n }), children: n === "completed" ? /* @__PURE__ */ r(E, { className: "size-3.5 stroke-[3px]" }) : /* @__PURE__ */ r("span", { children: a.icon || s }) }),
+                          /* @__PURE__ */ r(
+                            "span",
+                            {
+                              className: m(
+                                "whitespace-nowrap capitalize",
+                                g ? "text-base font-semibold leading-6 text-content" : n === "completed" ? "text-sm font-medium leading-[21px] text-[var(--color-stepper-complete-ink)]" : "text-sm font-medium leading-[21px] text-content"
+                              ),
+                              children: a.label
+                            }
+                          )
+                        ] })
+                      ]
+                    },
+                    t
+                  );
+                })
+              }
+            ),
+            v ? /* @__PURE__ */ p(B, { children: [
+              /* @__PURE__ */ r(
+                z,
+                {
+                  type: "button",
+                  variant: "outline",
+                  size: "icon",
+                  "aria-label": C,
+                  disabled: !b,
+                  onClick: () => N(-1),
+                  className: "absolute start-0 top-1/2 z-[2] h-8 w-8 -translate-y-1/2 border-[1.5px] bg-canvas-elevated disabled:opacity-100",
+                  children: /* @__PURE__ */ r(y, { className: "size-4 rotate-180" })
+                }
+              ),
+              /* @__PURE__ */ r(
+                z,
+                {
+                  type: "button",
+                  variant: "outline",
+                  size: "icon",
+                  "aria-label": R,
+                  disabled: !h,
+                  onClick: () => N(1),
+                  className: "absolute end-0 top-1/2 z-[2] h-8 w-8 -translate-y-1/2 border-[1.5px] bg-canvas-elevated disabled:opacity-100",
+                  children: /* @__PURE__ */ r(y, { className: "size-4" })
+                }
+              )
+            ] }) : null
+          ] }),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: "flex items-center justify-center gap-2 pt-1",
+              role: "group",
+              "aria-label": w,
+              children: c.map((e, t) => {
+                const a = t + 1, s = a === u;
+                return /* @__PURE__ */ r(
+                  "button",
+                  {
+                    type: "button",
+                    "data-pagination-step": a,
+                    "aria-label": x(a, k),
+                    "aria-current": s ? "step" : void 0,
+                    disabled: !i,
+                    onClick: i ? () => {
+                      f?.(t), O(t);
+                    } : void 0,
+                    className: m(
+                      s ? "h-1.5 w-5 rounded-full bg-content" : "size-1.5 rounded-full bg-muted",
+                      !i && "cursor-not-allowed"
+                    )
+                  },
+                  t
+                );
+              })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+M.displayName = "TrackStepper";
+export {
+  M as TrackStepper
+};

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

@@ -2,3 +2,4 @@ import { StepperProps } from './stepper.types';
 import * as React from "react";
 declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
 export { Stepper };
+export type { StepperProps, StepItem, StepperVariant, StepperRenderStepContext, StepStatus, } from './stepper.types';

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

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

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

@@ -7,8 +7,25 @@ export interface StepItem {
     icon?: React.ReactNode;
     disabled?: boolean;
 }
+export type StepperVariant = NonNullable<VariantProps<typeof stepperVariants>["variant"]>;
+export type StepperOrientation = NonNullable<VariantProps<typeof stepperVariants>["orientation"]>;
+export type StepStatus = "completed" | "active" | "default";
+/** Context passed to `renderStep` on `variant="rail"`. */
+export interface StepperRenderStepContext {
+    step: StepItem;
+    index: number;
+    stepNumber: number;
+    status: StepStatus;
+}
 export interface StepperProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof stepperVariants> {
     currentStep: number;
     steps: (string | StepItem)[];
     onStepClick?: (index: number) => void;
+    /** Pipeline heading after the "Pipeline:" prefix. Ignored on other variants. */
+    heading?: string;
+    /**
+     * Rail variant only: custom step body (e.g. `AccordionItem`).
+     * Falls back to a label-only card when omitted.
+     */
+    renderStep?: (ctx: StepperRenderStepContext) => React.ReactNode;
 }

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

@@ -1,5 +1,6 @@
 export declare const stepperVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
+    variant?: "default" | "summary" | "track" | "compact" | "rail" | "pipeline" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const stepVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
@@ -8,3 +9,28 @@ export declare const stepVariants: (props?: ({
 export declare const iconVariants: (props?: ({
     status?: "default" | "active" | "completed" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const compactStepVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    status?: "default" | "active" | "completed" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const compactIconVariants: (props?: ({
+    status?: "default" | "active" | "completed" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const compactLabelVariants: (props?: ({
+    status?: "default" | "active" | "completed" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const pipelineDotVariants: (props?: ({
+    status?: "default" | "active" | "completed" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const trackStepVariants: (props?: ({
+    status?: "default" | "active" | "completed" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const trackIconVariants: (props?: ({
+    status?: "default" | "active" | "completed" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const summaryStepVariants: (props?: ({
+    status?: "default" | "active" | "completed" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const summaryIconVariants: (props?: ({
+    status?: "default" | "active" | "completed" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;