impact-nova 1.7.50 → 1.8.0

package/dist/components/ui/types/select.types.d.ts

@@ -223,6 +223,19 @@ export interface SelectProps<OptionType extends Option = Option, IsMulti extends
      * Callback fired when the menu is scrolled to the bottom.
      */
     onMenuScrollToBottom?: () => void;
+    /**
+     * Total number of options in the complete dataset, including options that
+     * have not been fetched yet (async pagination). When provided AND the
+     * component is in multi-select with `enableInvertedSelection`, the trigger
+     * label "Selected (N)" uses this value instead of the count of loaded
+     * options. Leave undefined for non-paginated usage; behaviour is unchanged.
+     *
+     * The parent should pass the same total it intends "Select All" to
+     * represent on the server. During search you may either keep the
+     * unfiltered total (recommended) or pass the filtered total – the
+     * component renders whatever is given.
+     */
+    totalCount?: number;
     /**
      * If `true`, shows the "Select All" option in multi-select mode.
      * @default true

package/dist/components/ui/wizard/index.d.ts

@@ -0,0 +1 @@
+export { WizardRoot, WizardLayout, WizardSidebar, WizardTitle, WizardDescription, WizardMedia, WizardBody, WizardProgress, WizardHeader, WizardStepDescription, WizardContent, WizardStep, WizardFooter, useWizard, type WizardRootProps, type WizardMediaProps, type WizardStepDefinition, type WizardProgressProps, type WizardStepProps, } from './wizard';

package/dist/components/ui/wizard/index.js

@@ -0,0 +1,17 @@
+import { WizardBody as a, WizardContent as d, WizardDescription as e, WizardFooter as z, WizardHeader as W, WizardLayout as o, WizardMedia as t, WizardProgress as p, WizardRoot as s, WizardSidebar as n, WizardStep as S, WizardStepDescription as c, WizardTitle as u, useWizard as y } from "./wizard.js";
+export {
+  a as WizardBody,
+  d as WizardContent,
+  e as WizardDescription,
+  z as WizardFooter,
+  W as WizardHeader,
+  o as WizardLayout,
+  t as WizardMedia,
+  p as WizardProgress,
+  s as WizardRoot,
+  n as WizardSidebar,
+  S as WizardStep,
+  c as WizardStepDescription,
+  u as WizardTitle,
+  y as useWizard
+};

package/dist/components/ui/wizard/wizard.d.ts

@@ -0,0 +1,53 @@
+import * as React from "react";
+export interface WizardStepDefinition {
+    /** Accessible name for progress segment (aria-label) */
+    label: string;
+    description?: string;
+}
+export declare function useWizard(): {
+    value: number;
+    totalSteps: number;
+    setValue: (step: number) => void;
+    goNext: () => void;
+    goBack: () => void;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+};
+export interface WizardRootProps {
+    /** Controlled active step (1-indexed) */
+    value?: number;
+    /** Uncontrolled initial step (default 1) */
+    defaultValue?: number;
+    /** Fired when active step changes */
+    onValueChange?: (step: number) => void;
+    /** Total steps. Auto-counted from WizardStep children when omitted */
+    totalSteps?: number;
+    /** Optional metadata — improves WizardProgress aria-labels */
+    steps?: WizardStepDefinition[];
+    children?: React.ReactNode;
+}
+declare const WizardRoot: React.FC<WizardRootProps>;
+declare const WizardLayout: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WizardSidebar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WizardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const WizardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+export interface WizardMediaProps extends React.HTMLAttributes<HTMLDivElement> {
+    src?: string;
+    alt?: string;
+}
+declare const WizardMedia: React.ForwardRefExoticComponent<WizardMediaProps & React.RefAttributes<HTMLDivElement>>;
+declare const WizardBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export interface WizardProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    interactive?: boolean;
+    linear?: boolean;
+}
+declare const WizardProgress: React.ForwardRefExoticComponent<WizardProgressProps & React.RefAttributes<HTMLDivElement>>;
+declare const WizardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const WizardStepDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const WizardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export interface WizardStepProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: number;
+}
+declare const WizardStep: React.ForwardRefExoticComponent<WizardStepProps & React.RefAttributes<HTMLDivElement>>;
+declare const WizardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { WizardRoot, WizardLayout, WizardSidebar, WizardTitle, WizardDescription, WizardMedia, WizardBody, WizardProgress, WizardHeader, WizardStepDescription, WizardContent, WizardStep, WizardFooter, };

package/dist/components/ui/wizard/wizard.js

@@ -0,0 +1,312 @@
+import { jsx as n } from "react/jsx-runtime";
+import * as a from "react";
+import { useControllableState as C } from "@radix-ui/react-use-controllable-state";
+import { cn as c } from "../../../lib/utils.js";
+import R from "../../../icons/assets/createFlowImage.svg.js";
+const N = a.createContext(null), S = a.createContext(null), W = () => {
+  const t = a.useContext(N);
+  if (!t)
+    throw new Error("Wizard.* components must be used within WizardRoot");
+  return t;
+}, y = () => {
+  const t = a.useContext(S);
+  if (!t)
+    throw new Error("Wizard content and footer must be used within WizardBody");
+  return t;
+};
+function O() {
+  const { value: t, totalSteps: e, setValue: o } = W();
+  return a.useMemo(
+    () => ({
+      value: t,
+      totalSteps: e,
+      setValue: o,
+      goNext: () => o(Math.min(t + 1, e)),
+      goBack: () => o(Math.max(t - 1, 1)),
+      isFirstStep: t <= 1,
+      isLastStep: t >= e
+    }),
+    [t, e, o]
+  );
+}
+const E = ({
+  value: t,
+  defaultValue: e = 1,
+  onValueChange: o,
+  totalSteps: r,
+  steps: s = [],
+  children: i
+}) => {
+  const [p, m] = C({
+    prop: t,
+    defaultProp: e,
+    onChange: o
+  }), [u, l] = a.useState([]), x = a.useCallback((b) => {
+    l((v) => v.includes(b) ? v : [...v, b].sort((g, w) => g - w));
+  }, []), d = a.useCallback((b) => {
+    l((v) => v.filter((g) => g !== b));
+  }, []), f = r ?? (u.length > 0 ? Math.max(...u) : s.length), h = a.useMemo(
+    () => ({
+      value: p ?? e,
+      totalSteps: f,
+      steps: s,
+      setValue: m,
+      registerStep: x,
+      unregisterStep: d
+    }),
+    [p, e, f, s, m, x, d]
+  );
+  return /* @__PURE__ */ n(N.Provider, { value: h, children: i });
+};
+E.displayName = "WizardRoot";
+const k = a.forwardRef(
+  ({ className: t, children: e, ...o }, r) => /* @__PURE__ */ n(
+    "div",
+    {
+      ref: r,
+      className: c(
+        "flex flex-row bg-canvas-elevated rounded-lg shadow-elevation-card overflow-hidden w-[83%] mx-auto min-h-0 min-w-0 flex-1",
+        t
+      ),
+      ...o,
+      children: e
+    }
+  )
+);
+k.displayName = "WizardLayout";
+const _ = a.forwardRef(
+  ({ className: t, children: e, ...o }, r) => /* @__PURE__ */ n(
+    "div",
+    {
+      ref: r,
+      className: c(
+        "hidden lg:flex flex-col w-[300px] xl:w-[427px] shrink-0 bg-canvas-elevated border-r border-stroke-hairline pt-[100px]",
+        t
+      ),
+      "data-slot": "sidebar",
+      ...o,
+      children: e
+    }
+  )
+);
+_.displayName = "WizardSidebar";
+const M = a.forwardRef(
+  ({ className: t, children: e, ...o }, r) => /* @__PURE__ */ n(
+    "h1",
+    {
+      ref: r,
+      className: c("font-manrope text-[24px] font-[800] leading-[36px] text-[#0D152C] mb-3 px-6 lg:px-10 xl:px-[64px]", t),
+      ...o,
+      children: e
+    }
+  )
+);
+M.displayName = "WizardTitle";
+const D = a.forwardRef(
+  ({ className: t, children: e, ...o }, r) => /* @__PURE__ */ n(
+    "p",
+    {
+      ref: r,
+      className: c("font-manrope text-[12px] font-[500] leading-[16px] text-[#7A8294] px-6 lg:px-10 xl:px-[64px]", t),
+      ...o,
+      children: e
+    }
+  )
+);
+D.displayName = "WizardDescription";
+const L = a.forwardRef(
+  ({ className: t, src: e, alt: o = "Wizard illustration", children: r, ...s }, i) => /* @__PURE__ */ n(
+    "div",
+    {
+      ref: i,
+      className: c(
+        "mt-auto shrink-0 w-[200px] xl:w-[280px] h-[120px] xl:h-[166px] mx-auto xl:ml-[73px] xl:mr-[73px] mb-[100px]",
+        t
+      ),
+      "data-slot": "media",
+      ...s,
+      children: r || (e ? /* @__PURE__ */ n("img", { src: e, alt: o, className: "w-full h-full object-contain" }) : /* @__PURE__ */ n(R, { className: "w-full h-full", role: "img", "aria-label": o }))
+    }
+  )
+);
+L.displayName = "WizardMedia";
+const F = a.forwardRef(
+  ({ className: t, children: e, ...o }, r) => {
+    const [s, i] = a.useState({ top: !1, bottom: !1 });
+    return /* @__PURE__ */ n(S.Provider, { value: { edges: s, setEdges: i }, children: /* @__PURE__ */ n(
+      "div",
+      {
+        ref: r,
+        className: c(
+          "flex flex-col flex-1 min-h-0 min-w-0 overflow-hidden pt-[50px] px-6 sm:px-10 md:px-16 lg:px-20 xl:px-[60px] 2xl:px-[190px] pb-[73px]",
+          t
+        ),
+        "data-slot": "body",
+        ...o,
+        children: e
+      }
+    ) });
+  }
+);
+F.displayName = "WizardBody";
+const P = a.forwardRef(
+  ({ className: t, interactive: e = !0, linear: o = !1, ...r }, s) => {
+    const { value: i, totalSteps: p, steps: m, setValue: u } = W();
+    if (p <= 0) return null;
+    const l = (x) => {
+      e && (o && x > i || u(x));
+    };
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        ref: s,
+        className: c("flex gap-2 mb-[42px] shrink-0", t),
+        "data-slot": "progress",
+        role: "list",
+        ...r,
+        children: Array.from({ length: p }, (x, d) => {
+          const f = d + 1, h = d === i - 1, b = d < i - 1, g = m[d]?.label ?? `Step ${f} of ${p}`, w = e && (!o || f <= i);
+          return /* @__PURE__ */ n(
+            "div",
+            {
+              role: "listitem",
+              "aria-label": g,
+              "aria-current": h ? "step" : void 0,
+              tabIndex: w ? 0 : void 0,
+              onClick: () => l(f),
+              onKeyDown: w ? (z) => {
+                (z.key === "Enter" || z.key === " ") && (z.preventDefault(), l(f));
+              } : void 0,
+              className: c(
+                "h-2 flex-1 max-w-[132px] rounded-[4px] transition-colors duration-300",
+                h || b ? "bg-[#4259ee]" : "bg-[#e8eaf6]",
+                w ? "cursor-pointer" : "cursor-default"
+              )
+            },
+            d
+          );
+        })
+      }
+    );
+  }
+);
+P.displayName = "WizardProgress";
+const A = a.forwardRef(
+  ({ className: t, children: e, ...o }, r) => /* @__PURE__ */ n(
+    "h2",
+    {
+      ref: r,
+      className: c("font-manrope text-[14px] font-[800] leading-[21px] text-[#0D152C]", t),
+      ...o,
+      children: e
+    }
+  )
+);
+A.displayName = "WizardHeader";
+const B = a.forwardRef(
+  ({ className: t, children: e, ...o }, r) => /* @__PURE__ */ n(
+    "p",
+    {
+      ref: r,
+      className: c("text-[14px] font-normal leading-relaxed text-content-muted", t),
+      ...o,
+      children: e
+    }
+  )
+);
+B.displayName = "WizardStepDescription";
+const H = a.forwardRef(
+  ({ className: t, children: e, ...o }, r) => {
+    const { edges: s, setEdges: i } = y(), p = a.useRef(null), m = a.useCallback(
+      (l) => {
+        p.current = l, typeof r == "function" ? r(l) : r && (r.current = l);
+      },
+      [r]
+    ), u = a.useCallback(() => {
+      const l = p.current;
+      if (!l) return;
+      const { scrollTop: x, scrollHeight: d, clientHeight: f } = l, h = 1, b = x > h, v = x + f < d - h;
+      i((g) => g.top === b && g.bottom === v ? g : { top: b, bottom: v });
+    }, [i]);
+    return a.useEffect(() => {
+      const l = p.current;
+      if (!l) return;
+      const x = () => {
+        requestAnimationFrame(u);
+      };
+      x(), l.addEventListener("scroll", u, { passive: !0 });
+      const d = new ResizeObserver(x);
+      d.observe(l);
+      const f = l.firstElementChild;
+      return f && d.observe(f), () => {
+        l.removeEventListener("scroll", u), d.disconnect();
+      };
+    }, [u, e]), /* @__PURE__ */ n(
+      "div",
+      {
+        className: c(
+          "flex flex-col flex-1 min-h-0 transition-[box-shadow] duration-200",
+          s.top && "shadow-[inset_0_1px_0_0_var(--color-border-hairline)]"
+        ),
+        "data-slot": "content-wrapper",
+        "data-scroll-top": s.top || void 0,
+        "data-scroll-bottom": s.bottom || void 0,
+        children: /* @__PURE__ */ n(
+          "div",
+          {
+            ref: m,
+            className: c("flex-1 min-h-0 overflow-y-auto overflow-x-hidden p-0.5", t),
+            "data-slot": "content",
+            ...o,
+            children: e
+          }
+        )
+      }
+    );
+  }
+);
+H.displayName = "WizardContent";
+const T = a.forwardRef(
+  ({ className: t, value: e, children: o, ...r }, s) => {
+    const { value: i, registerStep: p, unregisterStep: m } = W();
+    return a.useEffect(() => (p(e), () => m(e)), [e, p, m]), i !== e ? null : /* @__PURE__ */ n("div", { ref: s, className: c(t), "data-step": e, ...r, children: o });
+  }
+);
+T.displayName = "WizardStep";
+const j = a.forwardRef(
+  ({ className: t, children: e, ...o }, r) => {
+    const { edges: s } = y();
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        ref: r,
+        className: c(
+          "relative z-10 mt-auto flex shrink-0 items-center justify-between bg-canvas-elevated pt-6 pb-[27px] transition-[box-shadow,border-color] duration-200",
+          s.bottom && "border-t border-stroke-hairline shadow-[0_-4px_8px_-6px_rgba(13,21,44,0.08)]",
+          t
+        ),
+        "data-slot": "footer",
+        "data-scroll-bottom": s.bottom || void 0,
+        ...o,
+        children: e
+      }
+    );
+  }
+);
+j.displayName = "WizardFooter";
+export {
+  F as WizardBody,
+  H as WizardContent,
+  D as WizardDescription,
+  j as WizardFooter,
+  A as WizardHeader,
+  k as WizardLayout,
+  L as WizardMedia,
+  P as WizardProgress,
+  E as WizardRoot,
+  _ as WizardSidebar,
+  T as WizardStep,
+  B as WizardStepDescription,
+  M as WizardTitle,
+  O as useWizard
+};