impact-nova 2.6.3 → 3.0.0-alpha.1

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

@@ -0,0 +1,4 @@
+/** Figma Group 2055248352 — bottom-right rings (7624:158838). */
+export declare function ChoiceCardFeaturedArcs({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,42 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+function i({ className: c }) {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      width: 171,
+      height: 164,
+      viewBox: "0 0 175 164",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: c,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ r("g", { className: "opacity-30 mix-blend-plus-lighter", children: [
+        /* @__PURE__ */ e(
+          "path",
+          {
+            opacity: 0.1,
+            d: "M136.5 93.5C136.5 124.98 110.98 150.5 79.5 150.5C48.0198 150.5 22.5 124.98 22.5 93.5C22.5 62.0198 48.0198 36.5 79.5 36.5C110.98 36.5 136.5 62.0198 136.5 93.5Z",
+            stroke: "white"
+          }
+        ),
+        /* @__PURE__ */ r("g", { opacity: 0.1, children: [
+          /* @__PURE__ */ e("circle", { cx: 98, cy: 88, r: 50, fill: "var(--color-border-accent-muted)" }),
+          /* @__PURE__ */ e("circle", { cx: 98, cy: 88, r: 49.5, stroke: "white" })
+        ] }),
+        /* @__PURE__ */ e(
+          "path",
+          {
+            opacity: 0.1,
+            d: "M99.5 114C99.5 141.338 77.3381 163.5 50 163.5C22.6619 163.5 0.5 141.338 0.5 114C0.5 86.6619 22.6619 64.5 50 64.5C77.3381 64.5 99.5 86.6619 99.5 114Z",
+            fill: "var(--color-border-accent-muted)",
+            stroke: "white"
+          }
+        ),
+        /* @__PURE__ */ e("circle", { cx: 117, cy: 54, r: 53.5, opacity: 0.1, stroke: "white" })
+      ] })
+    }
+  );
+}
+export {
+  i as ChoiceCardFeaturedArcs
+};

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

@@ -0,0 +1,4 @@
+/** Figma 7624-158832: baked ellipse glow, noise (50%), SVG arcs bottom-right. */
+export declare function ChoiceCardFeaturedBackdrop({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,45 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { cn as o } from "../../../lib/utils.js";
+import { ChoiceCardFeaturedArcs as t } from "./choice-card-featured-arcs.js";
+import s from "./assets/featured-backdrop-baked.webp.js";
+import l from "./assets/featured-noise.webp.js";
+function p({ className: a }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: o("pointer-events-none absolute inset-0 overflow-hidden bg-canvas-elevated", a),
+      "data-slot": "choice-card-featured-backdrop",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ e(
+          "img",
+          {
+            alt: "",
+            src: s,
+            draggable: !1,
+            className: "absolute inset-0 size-full max-w-none object-cover"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "img",
+          {
+            alt: "",
+            src: l,
+            draggable: !1,
+            className: "absolute inset-0 size-full max-w-none object-cover opacity-50"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: "absolute inset-0 bg-[radial-gradient(ellipse_95%_85%_at_100%_100%,color-mix(in_srgb,var(--color-border-accent-muted)_50%,transparent)_0%,transparent_62%)]"
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "absolute -bottom-[85px] -right-[79px] h-[164px] w-[171px]", children: /* @__PURE__ */ e(t, { className: "block size-full" }) })
+      ]
+    }
+  );
+}
+export {
+  p as ChoiceCardFeaturedBackdrop
+};

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

@@ -0,0 +1,8 @@
+/**
+ * Visual shells aligned with `RadioGroupItem` and `Checkbox` field controls.
+ * @see radio-group.tsx (RadioGroupItem)
+ * @see checkbox.tsx (CheckboxPrimitive.Root)
+ */
+/** Figma radio: 16px shell, 3px inset, 10px dot — ring inset so the dot is not squashed. */
+export declare const choiceCardRadioIndicatorClassName = "relative box-border size-4 shrink-0 flex-none rounded-full bg-canvas-elevated ring-1 ring-inset ring-stroke-field text-brand";
+export declare const choiceCardCheckboxIndicatorClassName = "pointer-events-none flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] border border-stroke-field bg-canvas-elevated text-brand";

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

@@ -0,0 +1,5 @@
+const e = "relative box-border size-4 shrink-0 flex-none rounded-full bg-canvas-elevated ring-1 ring-inset ring-stroke-field text-brand", r = "pointer-events-none flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] border border-stroke-field bg-canvas-elevated text-brand";
+export {
+  r as choiceCardCheckboxIndicatorClassName,
+  e as choiceCardRadioIndicatorClassName
+};

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

@@ -0,0 +1,11 @@
+export declare const ChoiceCardPercent: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
+    value: number;
+    onValueChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    suffix?: string;
+    increaseLabel?: string;
+    decreaseLabel?: string;
+    disabled?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,80 @@
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
+import { ArrowUp as k, ArrowDown as v } from "impact-nova-icons";
+import { createComponent as z } from "../../../lib/primitives/create-component.js";
+import { cn as I } from "../../../lib/utils.js";
+import { useImpactNovaI18n as N } from "../../../i18n/use-impact-nova-i18n.js";
+function g(a, r, i) {
+  return Math.min(i, Math.max(r, a));
+}
+const U = z(
+  "ChoiceCardPercent",
+  ({
+    className: a,
+    value: r,
+    onValueChange: i,
+    min: s = 0,
+    max: l = 100,
+    step: o = 1,
+    suffix: p = "%",
+    increaseLabel: f,
+    decreaseLabel: y,
+    disabled: t,
+    onKeyDown: u,
+    ...h
+  }, b) => {
+    const { t: d } = N(), x = f ?? d("aria.increase"), w = y ?? d("aria.decrease"), C = !t && r > s, D = !t && r < l;
+    function c(e) {
+      t || i?.(g(r + e, s, l));
+    }
+    function j(e) {
+      e.key === "ArrowUp" ? (e.preventDefault(), c(o)) : e.key === "ArrowDown" && (e.preventDefault(), c(-o)), u?.(e);
+    }
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        ref: b,
+        ...h,
+        "data-slot": "choice-card-percent",
+        role: "group",
+        "aria-disabled": t || void 0,
+        tabIndex: t ? void 0 : 0,
+        onKeyDown: j,
+        className: I(
+          "relative z-[1] flex h-8 w-[111px] items-center justify-between rounded-lg border border-stroke bg-canvas-elevated py-1 pl-3 pr-1 text-sm text-content",
+          t && "opacity-50",
+          a
+        ),
+        children: [
+          /* @__PURE__ */ n("span", { children: `${r}${p}` }),
+          /* @__PURE__ */ m("div", { className: "flex flex-col text-content-icon", children: [
+            /* @__PURE__ */ n(
+              "button",
+              {
+                type: "button",
+                "aria-label": x,
+                disabled: !D,
+                className: "inline-flex size-6 items-center justify-center -my-1 disabled:opacity-40",
+                onClick: () => c(o),
+                children: /* @__PURE__ */ n(k, { size: 12 })
+              }
+            ),
+            /* @__PURE__ */ n(
+              "button",
+              {
+                type: "button",
+                "aria-label": w,
+                disabled: !C,
+                className: "inline-flex size-6 items-center justify-center -my-1 disabled:opacity-40",
+                onClick: () => c(-o),
+                children: /* @__PURE__ */ n(v, { size: 12 })
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+export {
+  U as ChoiceCardPercent
+};

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

@@ -1,20 +1,57 @@
-import { ChoiceCardGroupProps, ChoiceCardProps, ChoiceCardContentProps, ChoiceCardHeaderProps } from './choice-card.types';
+import { ChoiceCardGroupProps, ChoiceCardProps, ChoiceCardContentProps, ChoiceCardHeaderProps, ChoiceCardFooterProps, ChoiceCardBackgroundProps, ChoiceCardIndexProps, ChoiceCardStatsProps, ChoiceCardCompareLabelsProps, ChoiceCardCompareLabelProps, ChoiceCardCompareLeadProps, ChoiceCardCompareRowProps, ChoiceCardVariant } from './choice-card.types';
 import * as React from "react";
-export type { ChoiceCardGroupProps, ChoiceCardGroupMultipleProps, ChoiceCardGroupSingleProps, ChoiceCardProps, ChoiceCardContentProps, ChoiceCardHeaderProps, } from './choice-card.types';
+export type { ChoiceCardGroupProps, ChoiceCardGroupMultipleProps, ChoiceCardGroupSingleProps, ChoiceCardProps, ChoiceCardContentProps, ChoiceCardHeaderProps, ChoiceCardRibbonProps, ChoiceCardFooterProps, ChoiceCardBackgroundProps, ChoiceCardStatusProps, ChoiceCardIndexProps, ChoiceCardStatsProps, ChoiceCardStatProps, ChoiceCardCompareProps, ChoiceCardCompareFit, ChoiceCardCompareLabelsProps, ChoiceCardCompareLabelProps, ChoiceCardCompareLeadProps, ChoiceCardCompareRowProps, ChoiceCardPercentProps, ChoiceCardVariant, } from './choice-card.types';
+export { ChoiceCardPercent } from './choice-card-percent';
+interface ChoiceCardItemContextValue {
+    value: string;
+    selected: boolean;
+    disabled?: boolean;
+    type: "single" | "multiple";
+    size: "sm" | "md";
+    variant: ChoiceCardVariant;
+    /** The card already has an aria-label, so the title must not schedule another render. */
+    labelIsExplicit: boolean;
+    setAccessibleName: (name: string) => void;
+}
 export declare function useChoiceCardGroup(): {
     value: string | string[] | undefined;
     type: "single" | "multiple";
     setValue: (value: string | string[]) => void;
     isSelected: (itemValue: string) => boolean;
 };
+export declare function useChoiceCardItem(): ChoiceCardItemContextValue;
 declare const ChoiceCardGroup: React.FC<ChoiceCardGroupProps>;
 declare const ChoiceCard: React.ForwardRefExoticComponent<ChoiceCardProps & React.RefAttributes<HTMLDivElement>>;
 declare const ChoiceCardIndicator: React.ForwardRefExoticComponent<{
     className?: string;
+} & React.RefAttributes<HTMLSpanElement>>;
+declare const ChoiceCardBackground: React.ForwardRefExoticComponent<ChoiceCardBackgroundProps & React.RefAttributes<HTMLDivElement>>;
+declare const ChoiceCardRibbon: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    children?: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
+declare const ChoiceCardFooter: React.ForwardRefExoticComponent<ChoiceCardFooterProps & React.RefAttributes<HTMLDivElement>>;
 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, };
+declare const ChoiceCardStatus: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+    placement?: import('./choice-card.types').ChoiceCardStatusPlacement;
+    icon?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ChoiceCardIndex: React.ForwardRefExoticComponent<ChoiceCardIndexProps & React.RefAttributes<HTMLSpanElement>>;
+declare const ChoiceCardStats: React.ForwardRefExoticComponent<ChoiceCardStatsProps & React.RefAttributes<HTMLDivElement>>;
+declare const ChoiceCardStat: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    value: React.ReactNode;
+    label: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ChoiceCardCompareLabels: React.ForwardRefExoticComponent<ChoiceCardCompareLabelsProps & React.RefAttributes<HTMLDivElement>>;
+declare const ChoiceCardCompareLabel: React.ForwardRefExoticComponent<ChoiceCardCompareLabelProps & React.RefAttributes<HTMLDivElement>>;
+declare const ChoiceCardCompareLead: React.ForwardRefExoticComponent<ChoiceCardCompareLeadProps & React.RefAttributes<HTMLDivElement>>;
+declare const ChoiceCardCompareRow: React.ForwardRefExoticComponent<ChoiceCardCompareRowProps & React.RefAttributes<HTMLDivElement>>;
+declare const ChoiceCardCompare: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    fit?: import('./choice-card.types').ChoiceCardCompareFit;
+} & React.RefAttributes<HTMLDivElement>>;
+export { ChoiceCardFeaturedBackdrop } from './choice-card-featured-backdrop';
+export { ChoiceCardGroup, ChoiceCard, ChoiceCardIndicator, ChoiceCardBackground, ChoiceCardRibbon, ChoiceCardFooter, ChoiceCardContent, ChoiceCardMedia, ChoiceCardTitle, ChoiceCardHeader, ChoiceCardDescription, ChoiceCardStatus, ChoiceCardIndex, ChoiceCardStats, ChoiceCardStat, ChoiceCardCompare, ChoiceCardCompareLabels, ChoiceCardCompareLabel, ChoiceCardCompareLead, ChoiceCardCompareRow, };