impact-nova 2.0.9 → 2.1.0-alpha.2

package/dist/components/flows/wizard/wizard.js

@@ -0,0 +1,291 @@
+import { jsx as n } from "react/jsx-runtime";
+import * as a from "react";
+import { useControllableState as y } from "@radix-ui/react-use-controllable-state";
+import { cn as p } from "../../../lib/utils.js";
+import { CreateFlowImage as S } from "impact-nova-icons";
+import { WizardScrollContext as R, useWizardScrollContext as N, useWizardContext as W, WizardContext as C } from "./wizard-context.js";
+const k = ({
+  value: r,
+  defaultValue: e = 1,
+  onValueChange: o,
+  totalSteps: t,
+  steps: s = [],
+  children: i
+}) => {
+  const [d, x] = y({
+    prop: r,
+    defaultProp: e,
+    onChange: o
+  }), [u, l] = a.useState([]), m = a.useCallback((b) => {
+    l((v) => v.includes(b) ? v : [...v, b].sort((g, w) => g - w));
+  }, []), c = a.useCallback((b) => {
+    l((v) => v.filter((g) => g !== b));
+  }, []), f = t ?? (u.length > 0 ? Math.max(...u) : s.length), h = a.useMemo(
+    () => ({
+      value: d ?? e,
+      totalSteps: f,
+      steps: s,
+      setValue: x,
+      registerStep: m,
+      unregisterStep: c
+    }),
+    [d, e, f, s, x, m, c]
+  );
+  return /* @__PURE__ */ n(C.Provider, { value: h, children: i });
+};
+k.displayName = "WizardRoot";
+const E = a.forwardRef(
+  ({ className: r, children: e, ...o }, t) => /* @__PURE__ */ n(
+    "div",
+    {
+      ref: t,
+      "data-component": "wizard",
+      "data-slot": "layout",
+      className: p(
+        "bg-canvas-elevated rounded-lg shadow-elevation-card overflow-hidden w-[83%] mx-auto min-h-0 min-w-0 flex-1",
+        r
+      ),
+      ...o,
+      children: e
+    }
+  )
+);
+E.displayName = "WizardLayout";
+const _ = a.forwardRef(
+  ({ className: r, children: e, ...o }, t) => /* @__PURE__ */ n(
+    "div",
+    {
+      ref: t,
+      className: p(
+        "w-[300px] xl:w-[427px] shrink-0 bg-canvas-elevated border-r border-stroke-hairline pt-[100px]",
+        r
+      ),
+      "data-slot": "sidebar",
+      ...o,
+      children: e
+    }
+  )
+);
+_.displayName = "WizardSidebar";
+const M = a.forwardRef(
+  ({ className: r, children: e, ...o }, t) => /* @__PURE__ */ n(
+    "h1",
+    {
+      ref: t,
+      className: p("font-manrope text-[24px] font-[800] leading-[36px] text-foreground mb-3 px-6 lg:px-10 xl:px-[64px]", r),
+      ...o,
+      children: e
+    }
+  )
+);
+M.displayName = "WizardTitle";
+const D = a.forwardRef(
+  ({ className: r, children: e, ...o }, t) => /* @__PURE__ */ n(
+    "p",
+    {
+      ref: t,
+      className: p("font-manrope text-[12px] font-[500] leading-[16px] text-content-muted px-6 lg:px-10 xl:px-[64px]", r),
+      ...o,
+      children: e
+    }
+  )
+);
+D.displayName = "WizardDescription";
+const L = a.forwardRef(
+  ({ className: r, src: e, alt: o = "Wizard illustration", children: t, ...s }, i) => /* @__PURE__ */ n(
+    "div",
+    {
+      ref: i,
+      className: p(
+        "mt-auto shrink-0 w-[200px] xl:w-[280px] h-[120px] xl:h-[166px] mx-auto xl:ml-[73px] xl:mr-[73px] mb-[100px]",
+        r
+      ),
+      "data-slot": "media",
+      ...s,
+      children: t || (e ? /* @__PURE__ */ n("img", { src: e, alt: o, className: "w-full h-full object-contain" }) : /* @__PURE__ */ n(S, { className: "w-full h-full", role: "img", "aria-label": o }))
+    }
+  )
+);
+L.displayName = "WizardMedia";
+const P = a.forwardRef(
+  ({ className: r, children: e, ...o }, t) => {
+    const [s, i] = a.useState({ top: !1, bottom: !1 }), d = a.useMemo(
+      () => ({ edges: s, setEdges: i }),
+      [s]
+    );
+    return /* @__PURE__ */ n(R.Provider, { value: d, children: /* @__PURE__ */ n(
+      "div",
+      {
+        ref: t,
+        className: p(
+          "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]",
+          r
+        ),
+        "data-slot": "body",
+        ...o,
+        children: e
+      }
+    ) });
+  }
+);
+P.displayName = "WizardBody";
+const F = a.forwardRef(
+  ({ className: r, interactive: e = !0, linear: o = !1, ...t }, s) => {
+    const { value: i, totalSteps: d, steps: x, setValue: u } = W();
+    if (d <= 0) return null;
+    const l = (m) => {
+      e && (o && m > i || u(m));
+    };
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        ref: s,
+        className: p("flex gap-2 mb-[42px] shrink-0", r),
+        "data-slot": "progress",
+        role: "list",
+        ...t,
+        children: Array.from({ length: d }, (m, c) => {
+          const f = c + 1, h = c === i - 1, b = c < i - 1, g = x[c]?.label ?? `Step ${f} of ${d}`, 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: p(
+                "h-2 flex-1 max-w-[132px] rounded-[4px] transition-colors duration-300 motion-reduce:transition-none",
+                h || b ? "bg-brand" : "bg-accent",
+                w ? "cursor-pointer" : "cursor-default"
+              )
+            },
+            c
+          );
+        })
+      }
+    );
+  }
+);
+F.displayName = "WizardProgress";
+const H = a.forwardRef(
+  ({ className: r, children: e, ...o }, t) => /* @__PURE__ */ n(
+    "h2",
+    {
+      ref: t,
+      className: p("font-manrope text-[14px] font-[800] leading-[21px] text-foreground", r),
+      ...o,
+      children: e
+    }
+  )
+);
+H.displayName = "WizardHeader";
+const T = a.forwardRef(
+  ({ className: r, children: e, ...o }, t) => /* @__PURE__ */ n(
+    "p",
+    {
+      ref: t,
+      className: p("text-[14px] font-normal leading-relaxed text-content-muted", r),
+      ...o,
+      children: e
+    }
+  )
+);
+T.displayName = "WizardStepDescription";
+const j = a.forwardRef(
+  ({ className: r, children: e, ...o }, t) => {
+    const { edges: s, setEdges: i } = N(), d = a.useRef(null), x = a.useCallback(
+      (l) => {
+        d.current = l, typeof t == "function" ? t(l) : t && (t.current = l);
+      },
+      [t]
+    ), u = a.useCallback(() => {
+      const l = d.current;
+      if (!l) return;
+      const { scrollTop: m, scrollHeight: c, clientHeight: f } = l, h = 1, b = m > h, v = m + f < c - h;
+      i((g) => g.top === b && g.bottom === v ? g : { top: b, bottom: v });
+    }, [i]);
+    return a.useEffect(() => {
+      const l = d.current;
+      if (!l) return;
+      const m = () => {
+        requestAnimationFrame(u);
+      };
+      m(), l.addEventListener("scroll", u, { passive: !0 });
+      const c = new ResizeObserver(m);
+      c.observe(l);
+      const f = l.firstElementChild;
+      return f && c.observe(f), () => {
+        l.removeEventListener("scroll", u), c.disconnect();
+      };
+    }, [u, e]), /* @__PURE__ */ n(
+      "div",
+      {
+        className: p(
+          "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: x,
+            className: p("flex-1 min-h-0 overflow-y-auto overflow-x-hidden p-0.5", r),
+            "data-slot": "content",
+            ...o,
+            children: e
+          }
+        )
+      }
+    );
+  }
+);
+j.displayName = "WizardContent";
+const A = a.forwardRef(
+  ({ className: r, value: e, children: o, ...t }, s) => {
+    const { value: i, registerStep: d, unregisterStep: x } = W();
+    return a.useEffect(() => (d(e), () => x(e)), [e, d, x]), i !== e ? null : /* @__PURE__ */ n("div", { ref: s, className: p(r), "data-step": e, ...t, children: o });
+  }
+);
+A.displayName = "WizardStep";
+const B = a.forwardRef(
+  ({ className: r, children: e, ...o }, t) => {
+    const { edges: s } = N();
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        ref: t,
+        className: p(
+          "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)]",
+          r
+        ),
+        "data-slot": "footer",
+        "data-scroll-bottom": s.bottom || void 0,
+        ...o,
+        children: e
+      }
+    );
+  }
+);
+B.displayName = "WizardFooter";
+export {
+  P as WizardBody,
+  j as WizardContent,
+  D as WizardDescription,
+  B as WizardFooter,
+  H as WizardHeader,
+  E as WizardLayout,
+  L as WizardMedia,
+  F as WizardProgress,
+  k as WizardRoot,
+  _ as WizardSidebar,
+  A as WizardStep,
+  T as WizardStepDescription,
+  M as WizardTitle
+};

package/dist/components/flows/wizard/wizard.types.d.ts

@@ -0,0 +1,30 @@
+import type * as React from "react";
+export interface WizardStepDefinition {
+    /** Accessible name for progress segment (aria-label) */
+    label: string;
+    description?: string;
+}
+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;
+}
+export interface WizardMediaProps extends React.HTMLAttributes<HTMLDivElement> {
+    src?: string;
+    alt?: string;
+}
+export interface WizardProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    interactive?: boolean;
+    linear?: boolean;
+}
+export interface WizardStepProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: number;
+}

package/dist/components/forms/checkbox/checkbox.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & import('../../..').FieldControlProps & {
+    isError?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { Checkbox };

package/dist/components/forms/checkbox/checkbox.js

@@ -0,0 +1,144 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import * as I from "react";
+import * as f from "@radix-ui/react-checkbox";
+import { useControllableState as j } from "@radix-ui/react-use-controllable-state";
+import { Checkmark as S } from "impact-nova-icons";
+import { createComponent as D } from "../../../lib/primitives/create-component.js";
+import { cn as d } from "../../../lib/utils.js";
+import { useImpactNovaI18n as E } from "../../../i18n/use-impact-nova-i18n.js";
+const M = D(
+  "Checkbox",
+  ({
+    className: h,
+    label: a,
+    helperText: e,
+    helperTextPosition: o = "absolute",
+    isError: g,
+    error: k,
+    disabled: i,
+    checked: v,
+    defaultChecked: x,
+    onCheckedChange: p,
+    onKeyDown: w,
+    ...c
+  }, C) => {
+    const { t: N } = E(), y = I.useId(), l = c.id || y, m = `${l}-label`, r = k ?? g, [n, b] = j({
+      prop: v,
+      defaultProp: x ?? !1,
+      onChange: p
+    });
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        className: "flex items-center",
+        "data-component": "checkbox",
+        "data-state": n === "indeterminate" ? "indeterminate" : n ? "checked" : "unchecked",
+        "data-disabled": i || void 0,
+        "data-invalid": r || void 0,
+        children: [
+          /* @__PURE__ */ t(
+            f.Root,
+            {
+              ref: C,
+              id: l,
+              "aria-labelledby": a ? m : void 0,
+              "aria-label": a ? void 0 : c["aria-label"] ?? N("aria.toggleSelection"),
+              className: d(
+                "peer h-4 w-4 shrink-0 rounded-[4px] border border-stroke-field bg-canvas-elevated ring-offset-canvas focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-brand data-[state=checked]:bg-accent data-[state=checked]:text-brand data-[state=indeterminate]:border-brand data-[state=indeterminate]:bg-accent data-[state=indeterminate]:text-brand mr-[7px]",
+                r && "border-destructive focus-visible:ring-destructive",
+                i && "border-stroke text-disabled-foreground data-[state=checked]:bg-disabled-surface data-[state=checked]:text-disabled-foreground",
+                h
+              ),
+              checked: n,
+              onCheckedChange: b,
+              disabled: i,
+              onKeyDown: (u) => {
+                u.key === "Enter" && (u.preventDefault(), b(n === "indeterminate" ? !0 : !n)), w?.(u);
+              },
+              ...c,
+              children: /* @__PURE__ */ s(
+                f.Indicator,
+                {
+                  "data-checkbox": "indicator",
+                  className: d("flex items-center justify-center text-current group"),
+                  children: [
+                    /* @__PURE__ */ t(S, { className: "h-3.5 w-3.5 hidden group-data-[state=checked]:block" }),
+                    /* @__PURE__ */ t(
+                      "svg",
+                      {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        width: "24",
+                        height: "24",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "3",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        className: "h-3 w-3 hidden group-data-[state=indeterminate]:block",
+                        "aria-hidden": "true",
+                        children: /* @__PURE__ */ t("path", { d: "M5 12h14" })
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          ),
+          a || e ? /* @__PURE__ */ s(
+            "div",
+            {
+              className: d(
+                "grid gap-[6px] leading-none",
+                e && o === "absolute" && "relative",
+                !a && e && o === "absolute" && "min-h-5"
+              ),
+              children: [
+                a ? /* @__PURE__ */ s(
+                  "label",
+                  {
+                    id: m,
+                    htmlFor: l,
+                    className: d(
+                      "text-sm font-medium leading-[20px] text-secondary-foreground peer-data-[state=checked]:text-content peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+                      r && "text-destructive",
+                      i && "text-disabled-foreground"
+                    ),
+                    children: [
+                      a,
+                      " ",
+                      c.required ? /* @__PURE__ */ t("span", { className: "text-destructive", children: "*" }) : null
+                    ]
+                  }
+                ) : null,
+                e && o === "absolute" ? /* @__PURE__ */ t(
+                  "p",
+                  {
+                    className: d(
+                      "absolute left-0 top-full z-10 mt-1 min-w-0 max-w-full text-[12px] font-medium leading-[18px] text-navigation-muted",
+                      r && "text-destructive"
+                    ),
+                    children: e
+                  }
+                ) : null,
+                e && o === "flow" ? /* @__PURE__ */ t(
+                  "p",
+                  {
+                    className: d(
+                      "text-[12px] font-medium leading-[18px] text-navigation-muted",
+                      r && "text-destructive"
+                    ),
+                    children: e
+                  }
+                ) : null
+              ]
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+export {
+  M as Checkbox
+};

package/dist/components/forms/checkbox/checkbox.types.d.ts

@@ -0,0 +1,7 @@
+import { FieldControlProps } from '../../../lib/primitives/field.types';
+import type * as React from "react";
+import type * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+export type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & FieldControlProps & {
+    /** @deprecated Use `error` */
+    isError?: boolean;
+};

package/dist/components/forms/checkbox/index.d.ts

@@ -0,0 +1 @@
+export { Checkbox } from './checkbox';

package/dist/components/forms/checkbox/index.js

@@ -0,0 +1,4 @@
+import { Checkbox as r } from "./checkbox.js";
+export {
+  r as Checkbox
+};

package/dist/components/forms/choice-card/choice-card.d.ts

@@ -0,0 +1,20 @@
+import { ChoiceCardGroupProps, ChoiceCardProps, ChoiceCardContentProps, ChoiceCardHeaderProps } from './choice-card.types';
+import * as React from "react";
+export type { ChoiceCardGroupProps, ChoiceCardGroupMultipleProps, ChoiceCardGroupSingleProps, ChoiceCardProps, ChoiceCardContentProps, ChoiceCardHeaderProps, } from './choice-card.types';
+export declare function useChoiceCardGroup(): {
+    value: string | string[] | undefined;
+    type: "single" | "multiple";
+    setValue: (value: string | string[]) => void;
+    isSelected: (itemValue: string) => boolean;
+};
+declare const ChoiceCardGroup: React.FC<ChoiceCardGroupProps>;
+declare const ChoiceCard: React.ForwardRefExoticComponent<ChoiceCardProps & React.RefAttributes<HTMLDivElement>>;
+declare const ChoiceCardIndicator: React.FC<{
+    className?: string;
+}>;
+declare const ChoiceCardContent: React.ForwardRefExoticComponent<ChoiceCardContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const ChoiceCardMedia: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const ChoiceCardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const ChoiceCardHeader: React.ForwardRefExoticComponent<ChoiceCardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+declare const ChoiceCardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+export { ChoiceCardGroup, ChoiceCard, ChoiceCardIndicator, ChoiceCardContent, ChoiceCardMedia, ChoiceCardTitle, ChoiceCardHeader, ChoiceCardDescription, };

package/dist/components/forms/choice-card/choice-card.types.d.ts

@@ -0,0 +1,31 @@
+import type * as React from "react";
+type ChoiceCardGroupBaseProps = {
+    disabled?: boolean;
+    orientation?: "horizontal" | "vertical";
+    /** Wrap cards to the next row (grid-like layout). Uses scoped CSS — safe in consumer apps. */
+    wrap?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+};
+export type ChoiceCardGroupSingleProps = ChoiceCardGroupBaseProps & {
+    type?: "single";
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+};
+export type ChoiceCardGroupMultipleProps = ChoiceCardGroupBaseProps & {
+    type: "multiple";
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+};
+export type ChoiceCardGroupProps = ChoiceCardGroupSingleProps | ChoiceCardGroupMultipleProps;
+export interface ChoiceCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: string;
+    disabled?: boolean;
+}
+export type ChoiceCardContentProps = React.HTMLAttributes<HTMLDivElement>;
+export interface ChoiceCardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+export {};

package/dist/components/forms/combobox/combobox.d.ts

@@ -0,0 +1,18 @@
+import { ComboboxProps } from './combobox.types';
+import * as React from "react";
+/**
+ * Combobox — a standalone autocomplete input with a filtered dropdown of options.
+ *
+ * Works in **uncontrolled** mode by default (`defaultValue`), but also supports
+ * **controlled** mode when `value` is provided.
+ *
+ * Keyboard: ArrowUp/Down to navigate, Enter to commit, Escape to close, Tab to commit/close.
+ * Mouse: Click to select, hover to highlight.
+ *
+ * CSS selectors:
+ * - `[data-component="combobox"]`
+ * - `[data-numeric="true"]`
+ * - `[data-combobox-item]` / `[data-combobox-value]`
+ */
+declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLInputElement>>;
+export { Combobox };