impact-nova 2.6.3 → 3.0.0-alpha.0

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

@@ -0,0 +1,120 @@
+import { cva as e } from "class-variance-authority";
+const n = {
+  sm: "sm",
+  md: "default",
+  lg: "lg"
+}, t = e(
+  "iris-edge-wash-button motion-reduce:animate-none",
+  {
+    variants: {
+      shape: {
+        default: "rounded-md",
+        pill: "rounded-full"
+      }
+    },
+    defaultVariants: {
+      shape: "default"
+    }
+  }
+), r = e(
+  [
+    "rounded-[inherit] border-0 bg-transparent text-foreground-title shadow-none",
+    "transition-transform duration-150 ease-out",
+    "hover:bg-transparent hover:text-foreground-title",
+    "active:scale-[0.98] active:brightness-[0.98]",
+    "focus-visible:ring-1 focus-visible:ring-focus-ring"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "",
+        md: "",
+        lg: ""
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+), a = {
+  sm: "iconSm",
+  md: "icon"
+}, s = e("inline-flex align-middle", {
+  variants: {
+    appearance: {
+      outline: "iris-edge-wash-button motion-reduce:animate-none",
+      filled: "overflow-hidden motion-reduce:animate-none"
+    },
+    shape: {
+      default: "rounded-md",
+      pill: "rounded-full"
+    }
+  },
+  defaultVariants: {
+    appearance: "outline",
+    shape: "default"
+  }
+}), o = e(
+  [
+    "rounded-[inherit] border-0 bg-transparent shadow-none text-foreground-title",
+    "transition-transform duration-150 ease-out",
+    "hover:bg-transparent hover:text-foreground-title",
+    "active:scale-[0.98] active:brightness-[0.98]",
+    "focus-visible:ring-1 focus-visible:ring-focus-ring"
+  ],
+  {
+    variants: {
+      size: {
+        md: "",
+        sm: ""
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+), d = e(
+  [
+    "relative inline-flex items-center justify-center shrink-0 gap-0 p-0",
+    "cursor-pointer rounded-[inherit] border-0 outline-none",
+    "header-bot-button-gradient",
+    "animate-header-bot-gradient-iris hover:animate-header-bot-gradient-fast motion-reduce:animate-none",
+    "text-brand-foreground focus-visible:ring-1 focus-visible:ring-focus-ring"
+  ],
+  {
+    variants: {
+      size: {
+        md: "h-8 w-8 min-h-8 min-w-8 [&_svg]:size-4",
+        sm: "h-6 w-6 min-h-6 min-w-6 [&_svg]:size-3.5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+), u = e(
+  ["flex text-sm font-medium capitalize leading-[25px] text-foreground"],
+  {
+    variants: {
+      appearance: {
+        loading: "iris-menu-surface w-[189px] items-center gap-2 rounded-[inherit] px-3 py-2",
+        wrap: "iris-menu-surface iris-menu-surface-wrap w-[274px] items-start gap-0.5 rounded-[inherit] px-3 py-2",
+        card: "iris-menu-surface-card w-[378px] flex-col items-start gap-2 rounded-xl px-3 py-2 backdrop-blur-[3px]",
+        status: "iris-menu-surface w-full min-w-0 max-w-full items-center gap-2 overflow-hidden rounded-[inherit] px-3 py-2"
+      }
+    },
+    defaultVariants: {
+      appearance: "loading"
+    }
+  }
+);
+export {
+  n as irisButtonToButtonSize,
+  r as irisButtonVariants,
+  t as irisChromeWrapperVariants,
+  a as irisIconButtonToButtonSize,
+  o as irisIconButtonVariants,
+  s as irisIconChromeWrapperVariants,
+  d as irisIconFilledButtonVariants,
+  u as irisMenuVariants
+};

package/dist/components/primitives/stepper/internals/pipeline-current-mark.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+/** Figma CurrentStep (2461:63705): 24px disc + white stroke + gaussian-blurred halo. */
+export declare function PipelineCurrentMark({ className, children, }: {
+    className?: string;
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/primitives/stepper/internals/pipeline-current-mark.js

@@ -0,0 +1,35 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { DrawBrush as t } from "impact-nova-icons";
+import { cn as i } from "../../../../lib/utils.js";
+function p({
+  className: r,
+  children: a
+}) {
+  return /* @__PURE__ */ s(
+    "span",
+    {
+      className: i("relative flex size-11 items-center justify-center", r),
+      "data-pipeline-mark": "sparkle",
+      children: [
+        /* @__PURE__ */ e(
+          "span",
+          {
+            "aria-hidden": !0,
+            className: "absolute inset-[10px] rounded-full bg-[var(--color-stepper-pipeline-dot-soft)] blur-[5px]"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "span",
+          {
+            "aria-hidden": !0,
+            className: "absolute inset-[10px] rounded-full border border-solid border-canvas-elevated bg-[var(--color-stepper-pipeline-dot)]"
+          }
+        ),
+        /* @__PURE__ */ e("span", { className: "relative z-[1] text-brand-foreground", children: a ?? /* @__PURE__ */ e(t, { size: 12 }) })
+      ]
+    }
+  );
+}
+export {
+  p as PipelineCurrentMark
+};

package/dist/components/primitives/stepper/internals/rail-status-dot.d.ts

@@ -0,0 +1,13 @@
+import { StepStatus } from '../stepper.types';
+type RailStatusDotProps = {
+    status: StepStatus;
+    className?: string;
+};
+/**
+ * Figma 2015:49847 / PoppingCircle (2018:50230) rail markers:
+ * - completed: mint ring (#89d1ab) with white core
+ * - active: deep purple core (#931ce3) + soft halo (#dfbbf7) that pulses
+ * - default: gray ring (#d9dde7) with white core (same geometry as completed)
+ */
+export declare function RailStatusDot({ status, className }: RailStatusDotProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/primitives/stepper/internals/rail-status-dot.js

@@ -0,0 +1,70 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { cn as r } from "../../../../lib/utils.js";
+function s({ status: a, className: t }) {
+  return a === "completed" ? /* @__PURE__ */ e(
+    "span",
+    {
+      "aria-hidden": !0,
+      "data-rail-dot": "",
+      "data-status": a,
+      className: r(
+        "relative z-[1] flex size-4 shrink-0 items-center justify-center rounded-full",
+        "bg-[var(--color-stepper-rail-complete)]",
+        t
+      ),
+      children: /* @__PURE__ */ e("span", { className: "size-1.5 rounded-full bg-background" })
+    }
+  ) : a === "active" ? /* @__PURE__ */ i(
+    "span",
+    {
+      "aria-hidden": !0,
+      "data-rail-dot": "",
+      "data-status": a,
+      className: r(
+        "relative z-[1] flex size-4 shrink-0 items-center justify-center overflow-visible",
+        t
+      ),
+      children: [
+        /* @__PURE__ */ e(
+          "span",
+          {
+            "data-rail-pulse": "",
+            className: r(
+              "pointer-events-none absolute size-4 rounded-full",
+              "bg-[var(--color-stepper-pipeline-dot-soft)]",
+              "animate-ping opacity-70 motion-reduce:animate-none motion-reduce:opacity-80"
+            )
+          }
+        ),
+        /* @__PURE__ */ e(
+          "span",
+          {
+            className: "absolute size-4 rounded-full bg-[var(--color-stepper-pipeline-dot-soft)] opacity-80"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "span",
+          {
+            "data-rail-core": "",
+            className: "relative size-2.5 rounded-full bg-[var(--color-stepper-rail-active)]"
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ e(
+    "span",
+    {
+      "aria-hidden": !0,
+      "data-rail-dot": "",
+      "data-status": a,
+      className: r(
+        "relative z-[1] flex size-4 shrink-0 items-center justify-center rounded-full bg-muted",
+        t
+      ),
+      children: /* @__PURE__ */ e("span", { className: "size-1.5 rounded-full bg-background" })
+    }
+  );
+}
+export {
+  s as RailStatusDot
+};

package/dist/components/primitives/stepper/internals/step-hit-target.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+type StepHitTargetProps = {
+    stepNumber: number;
+    status: string;
+    disabled?: boolean;
+    interactive: boolean;
+    ariaLabel: string;
+    isActive: boolean;
+    className?: string;
+    children: ReactNode;
+    onStepClick?: (index: number) => void;
+};
+export declare function StepHitTarget({ stepNumber, status, disabled, interactive, ariaLabel, isActive, className, children, onStepClick, }: StepHitTargetProps): import("react/jsx-runtime").JSX.Element;
+export declare function StepBrandRail(): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/primitives/stepper/internals/step-hit-target.js

@@ -0,0 +1,51 @@
+import { jsx as s } from "react/jsx-runtime";
+import { cn as p } from "../../../../lib/utils.js";
+function m({
+  stepNumber: r,
+  status: l,
+  disabled: t,
+  interactive: n,
+  ariaLabel: d,
+  isActive: u,
+  className: c,
+  children: f,
+  onStepClick: e
+}) {
+  const o = n && !t, i = r - 1;
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      role: "listitem",
+      "aria-label": d,
+      "aria-current": u ? "step" : void 0,
+      tabIndex: o ? 0 : void 0,
+      "data-step": r,
+      "data-status": l,
+      "data-disabled": t || void 0,
+      onClick: o ? () => e?.(i) : void 0,
+      onKeyDown: o ? (a) => {
+        (a.key === "Enter" || a.key === " ") && (a.preventDefault(), e?.(i));
+      } : void 0,
+      className: p(
+        c,
+        t ? "cursor-not-allowed opacity-80" : n ? "cursor-pointer" : "cursor-not-allowed",
+        o && "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus-ring/25"
+      ),
+      children: f
+    }
+  );
+}
+function g() {
+  return /* @__PURE__ */ s(
+    "span",
+    {
+      "aria-hidden": !0,
+      "data-brand-rail": "",
+      className: "pointer-events-none absolute left-[-8px] top-1/2 h-8 w-1 -translate-y-1/2 rounded-full bg-brand"
+    }
+  );
+}
+export {
+  g as StepBrandRail,
+  m as StepHitTarget
+};

package/dist/components/primitives/stepper/internals/step-model.d.ts

@@ -0,0 +1,3 @@
+import { StepItem, StepStatus } from '../stepper.types';
+export declare function resolveStepItem(step: string | StepItem): StepItem;
+export declare function stepStatus(stepNumber: number, currentStep: number): StepStatus;

package/dist/components/primitives/stepper/internals/step-model.js

@@ -0,0 +1,10 @@
+function n(t) {
+  return typeof t == "string" ? { label: t } : t;
+}
+function r(t, e) {
+  return t < e ? "completed" : t === e ? "active" : "default";
+}
+export {
+  n as resolveStepItem,
+  r as stepStatus
+};

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

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

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

@@ -0,0 +1,68 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import * as p from "react";
+import { Checkmark as k } from "impact-nova-icons";
+import { cn as l } from "../../../../lib/utils.js";
+import { compactIconVariants as g, compactLabelVariants as x, compactStepVariants as V, stepperVariants as w } from "../stepper.variants.js";
+import { resolveStepItem as I, stepStatus as j } from "./step-model.js";
+import { StepHitTarget as C } from "./step-hit-target.js";
+const L = p.forwardRef(
+  ({
+    className: n,
+    currentStep: d,
+    steps: s,
+    orientation: a = "vertical",
+    onStepClick: m,
+    stepAriaLabel: h,
+    ...b
+  }, v) => {
+    const f = s.length, N = !!m;
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        ref: v,
+        className: l(w({ orientation: a, variant: "compact" }), n),
+        "data-orientation": a,
+        "data-variant": "compact",
+        "data-component": "stepper",
+        role: "list",
+        ...b,
+        children: s.map((u, o) => {
+          const c = I(u), r = o + 1, t = j(r, d), S = t === "active";
+          return /* @__PURE__ */ i(p.Fragment, { children: [
+            /* @__PURE__ */ i(
+              C,
+              {
+                stepNumber: r,
+                status: t,
+                disabled: c.disabled,
+                interactive: N,
+                ariaLabel: h(r, f),
+                isActive: S,
+                onStepClick: m,
+                className: V({ orientation: a, status: t }),
+                children: [
+                  /* @__PURE__ */ e("div", { className: g({ status: t }), children: t === "completed" ? /* @__PURE__ */ e(k, { className: "size-3.5 stroke-[3px]" }) : /* @__PURE__ */ e("span", { children: c.icon || r }) }),
+                  /* @__PURE__ */ e("span", { className: x({ status: t }), children: c.label })
+                ]
+              }
+            ),
+            o < s.length - 1 ? /* @__PURE__ */ e(
+              "div",
+              {
+                "aria-hidden": !0,
+                className: l(
+                  "border-stroke-hairline",
+                  a === "vertical" ? "ms-[18px] h-6 w-0 shrink-0 border-s border-dotted" : "mx-1 h-0 w-6 shrink-0 self-center border-t border-dotted"
+                )
+              }
+            ) : null
+          ] }, o);
+        })
+      }
+    );
+  }
+);
+L.displayName = "CompactStepper";
+export {
+  L as CompactStepper
+};

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

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

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

@@ -0,0 +1,87 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import * as j from "react";
+import { cn as f } from "../../../../lib/utils.js";
+import { pipelineDotVariants as M, stepperVariants as S } from "../stepper.variants.js";
+import { PipelineCurrentMark as z } from "./pipeline-current-mark.js";
+import { resolveStepItem as I, stepStatus as P } from "./step-model.js";
+import { StepHitTarget as R } from "./step-hit-target.js";
+const V = j.forwardRef(
+  ({
+    className: u,
+    currentStep: n,
+    steps: o,
+    onStepClick: l,
+    heading: c,
+    stepAriaLabel: b,
+    pipelinePrefix: v,
+    stepsCountLabel: h,
+    ...x
+  }, N) => {
+    const i = o.length, p = !!l, g = Math.max(0, Math.min(n, i) - 1), w = i <= 1 ? 1 : g / Math.max(i - 1, 1);
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        ref: N,
+        className: f(S({ variant: "pipeline" }), u),
+        "data-orientation": "horizontal",
+        "data-variant": "pipeline",
+        "data-component": "stepper",
+        ...x,
+        children: [
+          /* @__PURE__ */ t("div", { className: "flex w-full items-center justify-between gap-4 whitespace-nowrap text-sm capitalize", children: [
+            c ? /* @__PURE__ */ t("p", { className: "min-w-0 truncate font-medium leading-[21px] text-content", children: [
+              /* @__PURE__ */ e("span", { className: "text-secondary-foreground", children: v }),
+              /* @__PURE__ */ e("span", { className: "font-semibold", children: ` ${c}` })
+            ] }) : /* @__PURE__ */ e("span", {}),
+            /* @__PURE__ */ e("p", { className: "shrink-0 text-xs font-medium leading-4 text-secondary-foreground", children: h })
+          ] }),
+          /* @__PURE__ */ t("div", { className: "relative flex w-full items-center justify-between overflow-visible", role: "list", children: [
+            /* @__PURE__ */ t(
+              "div",
+              {
+                "aria-hidden": !0,
+                className: "pointer-events-none absolute inset-x-1 top-1/2 h-px -translate-y-1/2",
+                children: [
+                  /* @__PURE__ */ e("div", { className: "absolute inset-0 border-t border-dotted border-muted" }),
+                  /* @__PURE__ */ e(
+                    "div",
+                    {
+                      className: "absolute inset-y-0 start-0 border-t border-solid border-[var(--color-stepper-pipeline-dot)]",
+                      style: { width: `${w * 100}%` }
+                    }
+                  )
+                ]
+              }
+            ),
+            o.map((y, d) => {
+              const r = I(y), s = d + 1, a = P(s, n), m = a === "active";
+              return /* @__PURE__ */ e(
+                R,
+                {
+                  stepNumber: s,
+                  status: a,
+                  disabled: r.disabled,
+                  interactive: p,
+                  ariaLabel: b(s, i),
+                  isActive: m,
+                  onStepClick: l,
+                  className: f(
+                    "relative z-[1] flex items-center justify-center p-0",
+                    M({ status: a }),
+                    p && !r.disabled && "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus-ring/25"
+                  ),
+                  children: m ? /* @__PURE__ */ e(z, { children: r.icon }) : null
+                },
+                d
+              );
+            })
+          ] })
+        ]
+      }
+    );
+  }
+);
+V.displayName = "PipelineStepper";
+export {
+  V as PipelineStepper
+};

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

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

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

@@ -0,0 +1,105 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import * as y from "react";
+import { cn as n } from "../../../../lib/utils.js";
+import { stepperVariants as k } from "../stepper.variants.js";
+import { RailStatusDot as f } from "./rail-status-dot.js";
+import { resolveStepItem as R, stepStatus as j } from "./step-model.js";
+const S = y.forwardRef(
+  ({
+    className: v,
+    currentStep: h,
+    steps: c,
+    onStepClick: d,
+    renderStep: m,
+    stepAriaLabel: p,
+    ...N
+  }, g) => {
+    const s = c.length, x = !!d;
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        ref: g,
+        className: n(k({ variant: "rail" }), v),
+        "data-orientation": "vertical",
+        "data-variant": "rail",
+        "data-component": "stepper",
+        role: "list",
+        ...N,
+        children: [
+          s > 1 ? /* @__PURE__ */ e(
+            "div",
+            {
+              "aria-hidden": !0,
+              "data-rail-line": "",
+              className: "pointer-events-none absolute start-2 top-6 bottom-6 w-0 border-s border-dashed border-stroke-hairline"
+            }
+          ) : null,
+          c.map((w, r) => {
+            const i = R(w), a = r + 1, t = j(a, h), u = t === "active", b = !!i.disabled || t === "default", l = x && !b;
+            return /* @__PURE__ */ o(
+              "div",
+              {
+                role: "listitem",
+                "data-step": a,
+                "data-status": t,
+                "data-disabled": b || void 0,
+                "aria-current": !l && u ? "step" : void 0,
+                "aria-label": l ? void 0 : p(a, s),
+                className: "relative flex w-full items-start gap-3 overflow-visible",
+                children: [
+                  /* @__PURE__ */ e(
+                    "div",
+                    {
+                      "data-rail-slot": "",
+                      className: "mt-4 flex w-4 shrink-0 items-center justify-center",
+                      children: l ? /* @__PURE__ */ o(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": p(a, s),
+                          "aria-current": u ? "step" : void 0,
+                          onClick: () => {
+                            d?.(r);
+                          },
+                          className: n(
+                            "flex size-4 items-center justify-center border-0 bg-transparent p-0",
+                            "cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus-ring/25"
+                          ),
+                          children: [
+                            /* @__PURE__ */ e(f, { status: t }),
+                            /* @__PURE__ */ e("span", { className: "sr-only", children: i.label })
+                          ]
+                        }
+                      ) : /* @__PURE__ */ e(f, { status: t })
+                    }
+                  ),
+                  /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: m ? m({
+                    step: i,
+                    index: r,
+                    stepNumber: a,
+                    status: t
+                  }) : /* @__PURE__ */ e(
+                    "div",
+                    {
+                      "data-rail-fallback": "",
+                      className: n(
+                        "flex h-12 items-center rounded-lg border border-stroke-hairline bg-canvas-elevated px-4 py-2",
+                        t === "default" && "text-disabled-foreground"
+                      ),
+                      children: /* @__PURE__ */ e("span", { className: "truncate text-sm font-semibold capitalize leading-[21px]", children: i.label })
+                    }
+                  ) })
+                ]
+              },
+              r
+            );
+          })
+        ]
+      }
+    );
+  }
+);
+S.displayName = "RailStepper";
+export {
+  S as RailStepper
+};

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

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