impact-nova 2.0.9 → 2.1.0-alpha.10

package/dist/components/forms/choice-card/choice-card.js

@@ -0,0 +1,268 @@
+import { jsx as a } from "react/jsx-runtime";
+import * as i from "react";
+import * as x from "@radix-ui/react-radio-group";
+import { useControllableState as y } from "@radix-ui/react-use-controllable-state";
+import { Check as M } from "impact-nova-icons";
+import { createComponent as p } from "../../../lib/primitives/create-component.js";
+import { cn as h } from "../../../lib/utils.js";
+const v = i.createContext(null), g = i.createContext({
+  selected: !1,
+  type: "single"
+}), k = () => {
+  const e = i.useContext(v);
+  if (!e)
+    throw new Error("ChoiceCard components must be used within ChoiceCardGroup");
+  return e;
+};
+function T() {
+  const { value: e, type: o, setValue: t, isSelected: r } = k();
+  return i.useMemo(
+    () => ({
+      value: e,
+      type: o,
+      setValue: t,
+      isSelected: r
+    }),
+    [e, o, t, r]
+  );
+}
+const w = (e, o, t) => h(
+  "relative flex flex-col items-start gap-3 p-3 rounded-xl",
+  "border-t border-r border-b-2 border-l-4",
+  "cursor-pointer select-none transition-[border-color,background-color] duration-150",
+  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus-ring",
+  e ? "border-brand bg-brand-tint hover:bg-brand-tint-hover" : "border-stroke-subtle bg-canvas-elevated hover:border-brand hover:bg-canvas-muted",
+  o && "cursor-not-allowed opacity-60",
+  t
+), S = ({
+  value: e,
+  defaultValue: o = "",
+  onValueChange: t,
+  disabled: r,
+  orientation: m = "horizontal",
+  wrap: u = !1,
+  className: s,
+  children: l
+}) => {
+  const [c, n] = y({
+    prop: e,
+    defaultProp: o,
+    onChange: t
+  }), d = i.useCallback(
+    (C) => c === C,
+    [c]
+  ), f = i.useMemo(
+    () => ({
+      type: "single",
+      disabled: r,
+      value: c,
+      setValue: (C) => n(C),
+      isSelected: d,
+      toggle: (C) => n(C)
+    }),
+    [r, c, n, d]
+  );
+  return /* @__PURE__ */ a(v.Provider, { value: f, children: /* @__PURE__ */ a(
+    x.Root,
+    {
+      value: c,
+      onValueChange: n,
+      disabled: r,
+      className: s,
+      "data-component": "choice-card-group",
+      "data-type": "single",
+      "data-layout": u ? "wrap" : m === "vertical" ? "column" : "row",
+      children: l
+    }
+  ) });
+}, P = ({
+  value: e,
+  defaultValue: o = [],
+  onValueChange: t,
+  disabled: r,
+  orientation: m = "horizontal",
+  wrap: u = !1,
+  className: s,
+  children: l
+}) => {
+  const [c, n] = y({
+    prop: e,
+    defaultProp: o,
+    onChange: t
+  }), d = i.useMemo(() => c ?? [], [c]), f = i.useCallback(
+    (b) => d.includes(b),
+    [d]
+  ), C = i.useCallback(
+    (b) => {
+      if (d.includes(b)) {
+        n(d.filter((N) => N !== b));
+        return;
+      }
+      n([...d, b]);
+    },
+    [d, n]
+  ), G = i.useMemo(
+    () => ({
+      type: "multiple",
+      disabled: r,
+      value: d,
+      setValue: (b) => n(b),
+      isSelected: f,
+      toggle: C
+    }),
+    [r, d, n, f, C]
+  );
+  return /* @__PURE__ */ a(v.Provider, { value: G, children: /* @__PURE__ */ a(
+    "div",
+    {
+      role: "group",
+      className: s,
+      "data-component": "choice-card-group",
+      "data-type": "multiple",
+      "data-layout": u ? "wrap" : m === "vertical" ? "column" : "row",
+      children: l
+    }
+  ) });
+}, V = (e) => e.type === "multiple" ? /* @__PURE__ */ a(P, { ...e }) : /* @__PURE__ */ a(S, { ...e });
+V.displayName = "ChoiceCardGroup";
+const j = p("ChoiceCardSurface", ({ className: e, selected: o, disabled: t, children: r, ...m }, u) => /* @__PURE__ */ a(
+  "div",
+  {
+    ref: u,
+    className: w(o, t, e),
+    "data-component": "choice-card",
+    "data-selected": o || void 0,
+    ...m,
+    children: r
+  }
+)), E = p(
+  "ChoiceCard",
+  ({ value: e, className: o, children: t, disabled: r, ...m }, u) => {
+    const s = k(), l = r || s.disabled, c = s.isSelected(e), n = i.useMemo(
+      () => ({
+        selected: c,
+        disabled: l,
+        type: s.type
+      }),
+      [c, l, s.type]
+    );
+    return s.type === "single" ? /* @__PURE__ */ a(g.Provider, { value: n, children: /* @__PURE__ */ a(x.Item, { value: e, asChild: !0, disabled: l, children: /* @__PURE__ */ a(
+      j,
+      {
+        ref: u,
+        selected: c,
+        disabled: l,
+        className: o,
+        ...m,
+        children: t
+      }
+    ) }) }) : /* @__PURE__ */ a(g.Provider, { value: n, children: /* @__PURE__ */ a(
+      "button",
+      {
+        ref: u,
+        type: "button",
+        role: "checkbox",
+        "aria-checked": c,
+        disabled: l,
+        className: w(c, l, o),
+        "data-component": "choice-card",
+        "data-selected": c || void 0,
+        onClick: () => s.toggle(e),
+        children: t
+      }
+    ) });
+  }
+), q = p(
+  "ChoiceCardIndicator",
+  ({ className: e }, o) => {
+    const { selected: t, type: r } = i.useContext(g);
+    return r === "multiple" ? /* @__PURE__ */ a(
+      "div",
+      {
+        ref: o,
+        className: h(
+          "w-5 h-5 rounded border-2 flex items-center justify-center shrink-0 transition-colors",
+          t ? "border-brand bg-brand text-brand-foreground" : "border-stroke-field bg-transparent",
+          e
+        ),
+        "aria-hidden": "true",
+        children: t && /* @__PURE__ */ a(M, { size: 12 })
+      }
+    ) : /* @__PURE__ */ a(
+      "div",
+      {
+        ref: o,
+        className: h(
+          "w-5 h-5 rounded-full border-2 flex items-center justify-center shrink-0 transition-colors",
+          t ? "border-brand" : "border-stroke-field",
+          e
+        ),
+        "aria-hidden": "true",
+        children: t && /* @__PURE__ */ a("div", { className: "w-2.5 h-2.5 rounded-full bg-brand" })
+      }
+    );
+  }
+), A = p(
+  "ChoiceCardContent",
+  ({ className: e, children: o, ...t }, r) => /* @__PURE__ */ a(
+    "div",
+    {
+      ref: r,
+      className: h("flex flex-col items-start gap-2 w-full", e),
+      "data-slot": "choice-card-content",
+      ...t,
+      children: o
+    }
+  )
+), B = p("ChoiceCardMedia", ({ className: e, children: o, ...t }, r) => /* @__PURE__ */ a(
+  "div",
+  {
+    ref: r,
+    className: h("flex items-center justify-center shrink-0", e),
+    "data-slot": "choice-card-media",
+    ...t,
+    children: o
+  }
+)), F = p("ChoiceCardTitle", ({ className: e, children: o, ...t }, r) => /* @__PURE__ */ a(
+  "h3",
+  {
+    ref: r,
+    className: h(
+      "text-base font-medium leading-tight text-content capitalize",
+      e
+    ),
+    ...t,
+    children: o
+  }
+)), J = p(
+  "ChoiceCardHeader",
+  ({ className: e, children: o, ...t }, r) => /* @__PURE__ */ a(
+    "div",
+    {
+      ref: r,
+      className: h("flex items-center gap-1 w-full", e),
+      "data-slot": "choice-card-header",
+      ...t,
+      children: o
+    }
+  )
+), K = p("ChoiceCardDescription", ({ className: e, children: o, ...t }, r) => /* @__PURE__ */ a(
+  "p",
+  {
+    ref: r,
+    className: h("text-xs font-medium leading-4 text-content-secondary", e),
+    ...t,
+    children: o
+  }
+));
+export {
+  E as ChoiceCard,
+  A as ChoiceCardContent,
+  K as ChoiceCardDescription,
+  V as ChoiceCardGroup,
+  J as ChoiceCardHeader,
+  q as ChoiceCardIndicator,
+  B as ChoiceCardMedia,
+  F as ChoiceCardTitle,
+  T as useChoiceCardGroup
+};

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 };

package/dist/components/forms/combobox/combobox.js

@@ -0,0 +1,283 @@
+import { jsx as a, jsxs as xe } from "react/jsx-runtime";
+import { useId as X, useMemo as T, useState as C, useRef as E, useCallback as u, useEffect as ve } from "react";
+import * as H from "@radix-ui/react-popover";
+import { createComponent as we } from "../../../lib/primitives/create-component.js";
+import { cn as $ } from "../../../lib/utils.js";
+import { useFieldChrome as ye } from "../../../lib/primitives/use-field-chrome.js";
+import { comboboxSizeVariants as Ce } from "./combobox.variants.js";
+function Ie(c) {
+  if (c.options) return c.options;
+  const { min: l, max: d, step: f } = c;
+  if (l == null || d == null || f == null || f <= 0 || l > d) return [];
+  const I = [];
+  for (let b = l; b <= d; b += f) {
+    const k = Math.round(b * 1e10) / 1e10;
+    I.push(String(k));
+  }
+  return I;
+}
+function ke(c, l) {
+  if (!l) return c;
+  const d = l.toLowerCase();
+  return c.filter((f) => f.toLowerCase().includes(d));
+}
+const He = we(
+  "Combobox",
+  ({
+    options: c,
+    min: l,
+    max: d,
+    step: f,
+    defaultValue: I = "",
+    value: b,
+    onChange: k,
+    onBlur: F,
+    placeholder: z,
+    label: D,
+    helperText: Y,
+    helperTextPosition: Z = "absolute",
+    error: _,
+    isError: ee,
+    disabled: m,
+    isNumeric: N,
+    size: te = "default",
+    className: oe,
+    emptyMessage: ne = "No options found",
+    allowFreeText: L = !1,
+    required: B,
+    labelOrientation: re
+  }, x) => {
+    const se = X(), A = X(), R = typeof D == "string" ? D : z ?? "Options", V = ye({
+      label: D,
+      helperText: Y,
+      helperTextPosition: Z,
+      labelOrientation: re,
+      error: _ ?? ee,
+      required: B,
+      disabled: m,
+      id: se,
+      className: oe
+    }), K = T(
+      () => Ie({ options: c, min: l, max: d, step: f }),
+      [c, l, d, f]
+    ), M = b !== void 0, [ie, ae] = C(I), S = M ? b : ie, [ce, U] = C(""), [o, v] = C(!1), n = o ? ce : S, [O, p] = C(-1), W = E(-1), [le, w] = C("keyboard"), q = E(null), P = E(null), ue = u(
+      (e) => {
+        q.current = e, typeof x == "function" ? x(e) : x && (x.current = e);
+      },
+      [x]
+    ), r = T(
+      () => ke(K, n),
+      [K, n]
+    ), G = E(r), de = T(() => {
+      if (!o || !n) return -1;
+      const e = r.findIndex(
+        (t) => t.toLowerCase() === n.toLowerCase()
+      );
+      return e >= 0 ? e : -1;
+    }, [o, n, r]), h = O >= 0 ? O : de, J = O >= 0 ? le : "mouse", fe = o && h >= 0 ? `${A}-option-${h}` : void 0;
+    ve(() => {
+      W.current = h, G.current = r, o && h >= 0 && P.current && P.current.querySelectorAll("[data-combobox-item]")[h]?.scrollIntoView({ block: "nearest" });
+    }, [h, o, r]);
+    const i = u(
+      (e) => {
+        M || ae(e), k?.(e), v(!1), p(-1);
+      },
+      [M, k]
+    ), y = u(() => {
+      v(!1), p(-1);
+    }, []), me = u(
+      (e) => {
+        const t = e.target.value;
+        U(t), p(-1), w("mouse"), o || v(!0);
+      },
+      [o]
+    ), pe = u(() => {
+      m || (U(S), v(!0));
+    }, [m, S]), he = u(
+      (e) => {
+        const t = e.relatedTarget;
+        if (!P.current?.contains(t)) {
+          if (o) {
+            const s = r.find(
+              (g) => g.toLowerCase() === n.toLowerCase()
+            );
+            s ? i(s) : r.length === 1 ? i(r[0]) : L && n ? i(n) : y();
+          }
+          F?.(e);
+        }
+      },
+      [o, r, n, i, y, L, F]
+    ), ge = u(
+      (e) => {
+        if (!o) {
+          (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), v(!0));
+          return;
+        }
+        if (e.key === "Escape") {
+          e.preventDefault(), e.stopPropagation(), y();
+          return;
+        }
+        if (e.key === "ArrowDown") {
+          e.preventDefault(), w("keyboard"), p(
+            (t) => t < r.length - 1 ? t + 1 : 0
+          );
+          return;
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault(), w("keyboard"), p(
+            (t) => t > 0 ? t - 1 : r.length - 1
+          );
+          return;
+        }
+        if (e.key === "Enter" || e.key === "Tab") {
+          e.preventDefault();
+          const t = W.current, s = G.current;
+          if (t >= 0 && t < s.length)
+            i(s[t]);
+          else {
+            const g = s.find(
+              (j) => j.toLowerCase() === n.toLowerCase()
+            );
+            g ? i(g) : s.length === 1 ? i(s[0]) : L && n ? i(n) : y();
+          }
+          return;
+        }
+      },
+      [o, r, n, i, y, L]
+    ), Q = u(
+      (e) => {
+        i(e), setTimeout(() => q.current?.focus(), 0);
+      },
+      [i]
+    ), be = u(
+      (e) => {
+        const t = e.target.closest(
+          "[data-combobox-item]"
+        );
+        if (t) {
+          if (e.button !== 0) return;
+          e.preventDefault();
+          const s = t.getAttribute("data-combobox-value");
+          s != null && Q(s);
+          return;
+        }
+        e.preventDefault();
+      },
+      [Q]
+    );
+    return /* @__PURE__ */ a("div", { "data-component": "combobox", "data-numeric": N || void 0, children: V.wrapControl(
+      /* @__PURE__ */ xe(H.Root, { open: o && !m, modal: !1, children: [
+        /* @__PURE__ */ a(H.Anchor, { asChild: !0, children: /* @__PURE__ */ a(
+          "div",
+          {
+            "data-component": "combobox-input-border",
+            tabIndex: -1,
+            className: $(
+              "flex w-full items-center gap-1 rounded-md border bg-transparent px-3 text-sm transition-colors outline-none ring-0 focus:outline-none focus:ring-0",
+              "focus-within:outline-none focus-within:ring-0 focus-within:border-brand hover:border-brand",
+              V.hasError ? "border-destructive hover:border-destructive" : "border-field",
+              m && "pointer-events-none opacity-100 bg-disabled-surface border-stroke text-disabled-foreground hover:border-stroke",
+              Ce({ size: te }),
+              "bg-canvas"
+            ),
+            children: /* @__PURE__ */ a(
+              "input",
+              {
+                ref: ue,
+                type: "text",
+                value: n,
+                onChange: me,
+                onFocus: pe,
+                onBlur: he,
+                onKeyDown: ge,
+                placeholder: z,
+                disabled: !!m,
+                className: $(
+                  "flex h-full w-full bg-transparent p-0 text-sm font-medium",
+                  "outline-none ring-0 shadow-none border-none",
+                  "focus:outline-none focus:ring-0 focus:shadow-none focus:border-none",
+                  "focus-visible:outline-none focus-visible:ring-0 focus-visible:shadow-none focus-visible:border-none",
+                  "placeholder:font-medium placeholder:text-content-empty",
+                  m && "opacity-100 text-disabled-foreground placeholder:text-disabled-foreground cursor-not-allowed",
+                  N && "text-right"
+                ),
+                style: { boxShadow: "none", outline: "none" },
+                autoComplete: "off",
+                role: "combobox",
+                "aria-expanded": o,
+                "aria-autocomplete": "list",
+                "aria-haspopup": "listbox",
+                "aria-controls": o ? A : void 0,
+                "aria-activedescendant": fe,
+                "aria-required": B || void 0,
+                "aria-label": D ? void 0 : R,
+                ...V.controlAria
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ a(H.Portal, { children: /* @__PURE__ */ a(
+          H.Content,
+          {
+            align: "start",
+            side: "bottom",
+            sideOffset: 4,
+            avoidCollisions: !0,
+            collisionPadding: 8,
+            "aria-label": R,
+            onOpenAutoFocus: (e) => e.preventDefault(),
+            onCloseAutoFocus: (e) => e.preventDefault(),
+            onInteractOutside: () => {
+            },
+            onWheel: (e) => e.stopPropagation(),
+            className: "z-[9999] overflow-hidden rounded-[12px] bg-canvas text-base shadow-elevation-select focus:outline-none sm:text-sm flex flex-col border-none w-[var(--radix-popover-trigger-width)]",
+            style: {
+              maxHeight: "var(--radix-popover-content-available-height)"
+            },
+            children: /* @__PURE__ */ a(
+              "div",
+              {
+                ref: P,
+                id: A,
+                className: "flex-1 overflow-auto py-1 px-[6px]",
+                style: { maxHeight: 240, overscrollBehavior: "contain" },
+                role: "listbox",
+                "aria-label": R,
+                onPointerDown: be,
+                onWheel: (e) => e.stopPropagation(),
+                onMouseLeave: () => {
+                  w("mouse"), p(-1);
+                },
+                children: r.length === 0 ? /* @__PURE__ */ a("div", { className: "flex items-center justify-center py-6 text-sm text-secondary-foreground", children: ne }) : r.map((e, t) => {
+                  const s = t === h, g = e.toLowerCase() === S.toLowerCase(), j = `${A}-option-${t}`;
+                  return /* @__PURE__ */ a("div", { className: "w-full pb-[2px]", children: /* @__PURE__ */ a(
+                    "div",
+                    {
+                      "data-combobox-item": !0,
+                      "data-combobox-value": e,
+                      id: j,
+                      role: "option",
+                      "aria-selected": g,
+                      className: $(
+                        "cursor-default select-none py-[6px] px-3 flex items-center transition-colors rounded-md",
+                        N ? "justify-end text-right" : "justify-between",
+                        s && J === "keyboard" ? "ring-2 ring-inset ring-primary bg-accent text-content" : s && J === "mouse" ? "bg-canvas-muted text-content" : g ? "bg-accent text-content" : "text-content hover:bg-canvas-muted cursor-pointer"
+                      ),
+                      onMouseEnter: () => {
+                        w("mouse"), p(t);
+                      },
+                      children: /* @__PURE__ */ a("span", { className: "text-sm", children: e })
+                    }
+                  ) }, e);
+                })
+              }
+            )
+          }
+        ) })
+      ] })
+    ) });
+  }
+);
+export {
+  He as Combobox
+};

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

@@ -0,0 +1,39 @@
+import { FieldControlProps } from '../../../lib/primitives/field.types';
+import type * as React from "react";
+/**
+ * Combobox supports two option sources:
+ *  - **Static list**: provide `options` (string array).
+ *  - **Numeric range**: provide `min`, `max`, and `step` to auto-generate values.
+ *
+ * At least one source must be provided; if both are given, `options` takes priority.
+ */
+export interface ComboboxProps extends FieldControlProps {
+    /** Static list of allowed string values */
+    options?: string[];
+    /** Numeric range start (used with max + step to generate options) */
+    min?: number;
+    /** Numeric range end */
+    max?: number;
+    /** Numeric range increment */
+    step?: number;
+    /** Initial value (uncontrolled mode) */
+    defaultValue?: string;
+    /** Current value (controlled mode — overrides internal state when provided) */
+    value?: string;
+    /** Fires when a value is committed (selection or free-text) */
+    onChange?: (value: string) => void;
+    /** Fires on input blur */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** Input placeholder */
+    placeholder?: string;
+    /** @deprecated Use `error` */
+    isError?: boolean;
+    /** Right-align input and dropdown values (for numeric data) */
+    isNumeric?: boolean;
+    /** Additional class on the root wrapper */
+    className?: string;
+    /** Message shown when no options match the filter (default: "No options found") */
+    emptyMessage?: string;
+    /** If true, typed text is committed even when it doesn't match any option */
+    allowFreeText?: boolean;
+}

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

@@ -0,0 +1,4 @@
+/** Mirrors Input height variants — keep in sync with `input.variants.ts`. */
+export declare const comboboxSizeVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/forms/combobox/combobox.variants.js

@@ -0,0 +1,17 @@
+import { cva as a } from "class-variance-authority";
+const e = a("", {
+  variants: {
+    size: {
+      default: "h-8",
+      sm: "h-6",
+      md: "h-[28px]",
+      lg: "h-10"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+export {
+  e as comboboxSizeVariants
+};

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

@@ -0,0 +1,3 @@
+export { Combobox } from './combobox';
+export type { ComboboxProps } from './combobox.types';
+export { comboboxSizeVariants } from './combobox.variants';

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

@@ -0,0 +1,6 @@
+import { Combobox as b } from "./combobox.js";
+import { comboboxSizeVariants as x } from "./combobox.variants.js";
+export {
+  b as Combobox,
+  x as comboboxSizeVariants
+};