impact-nova 2.6.3 → 3.0.0-alpha.0

package/dist/components/data-display/hex-tilemap/internals/hex-tilemap-viewport.js

@@ -0,0 +1,147 @@
+import { jsxs as w, jsx as i } from "react/jsx-runtime";
+import * as n from "react";
+import { createComponent as I } from "../../../../lib/primitives/create-component.js";
+import { cn as k } from "../../../../lib/utils.js";
+import { hexTilemapViewportVariants as L } from "../hex-tilemap.variants.js";
+import { HEX_BUTTON_ZOOM_STEP as g } from "./hex-camera.js";
+import { extentsFromTiles as $, buildLandPath as E, hexTileToPixel as V } from "./hex-geometry.js";
+import { useHexTilemapContext as D } from "./hex-tilemap-context.js";
+import { HexTilemapTooltip as O } from "./hex-tilemap-tooltip.js";
+import { HexTilemapZoom as _ } from "./hex-tilemap-zoom.js";
+import { useHexCamera as z } from "./use-hex-camera.js";
+const F = 315, N = "M9.56148 9.69087C9.20834 10.3244 8.53986 10.7171 7.81452 10.7171H3.94774C3.23129 10.7171 2.56957 10.3339 2.21301 9.71249L0.265298 6.3179C-0.090937 5.69704-0.0882008 4.93312 0.272474 4.31482L2.21064 0.992257C2.56906 0.377822 3.22686 0 3.93819 0H7.824C8.54428 0 9.20893 0.387309 9.56404 1.01397L11.4467 4.33636C11.7909 4.94364 11.7935 5.6864 11.4536 6.2961L9.56148 9.69087Z", J = I(
+  "HexTilemapViewport",
+  ({ className: v, height: T = F, ...C }, r) => {
+    const {
+      layout: s,
+      visiblePoints: P,
+      series: h,
+      setHoverPoint: m,
+      mapLabel: b,
+      setZoom: H,
+      zoom: Z
+    } = D(), c = n.useRef(null), p = n.useRef(null), f = n.useId(), y = n.useMemo(
+      () => new Map(h.map((e) => [e.id, e.color])),
+      [h]
+    ), t = n.useMemo(() => $(s.land), [s.land]), M = n.useMemo(
+      () => ({ width: t.width, height: t.height }),
+      [t.height, t.width]
+    ), R = n.useMemo(
+      () => E(s.land, t.originColumn, t.originRow),
+      [t.originColumn, t.originRow, s.land]
+    ), o = z({
+      extents: M,
+      zoom: Z,
+      onZoomChange: H,
+      svgRef: p,
+      viewportRef: c
+    }), B = n.useCallback(
+      (e) => {
+        c.current = e, typeof r == "function" ? r(e) : r && (r.current = e);
+      },
+      [r]
+    ), x = n.useCallback(
+      (e, d) => {
+        const a = c.current?.getBoundingClientRect(), l = d.getBoundingClientRect();
+        a && m({
+          id: e.id,
+          label: e.label,
+          value: e.value,
+          seriesId: e.seriesId,
+          clientX: l.left + l.width / 2 - a.left,
+          clientY: l.top - a.top
+        });
+      },
+      [m]
+    );
+    return /* @__PURE__ */ w(
+      "div",
+      {
+        ref: B,
+        "data-component": "hex-tilemap-viewport",
+        tabIndex: 0,
+        className: k(L({ panning: o.isPanning }), v),
+        style: { height: T },
+        ...C,
+        onPointerDown: o.handlePointerDown,
+        onPointerMove: o.handlePointerMove,
+        onPointerUp: o.endPan,
+        onPointerCancel: o.endPan,
+        onKeyDown: o.handleKeyDown,
+        children: [
+          /* @__PURE__ */ w(
+            "svg",
+            {
+              ref: p,
+              className: "block size-full max-h-full max-w-full overflow-hidden",
+              width: "100%",
+              height: "100%",
+              viewBox: `${o.initialViewBox.x} ${o.initialViewBox.y} ${o.initialViewBox.width} ${o.initialViewBox.height}`,
+              preserveAspectRatio: "xMidYMid meet",
+              role: "img",
+              "aria-label": b,
+              children: [
+                /* @__PURE__ */ i("defs", { children: /* @__PURE__ */ i("filter", { id: f, x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ i("feDropShadow", { dx: "0", dy: "0.5", stdDeviation: "0.5", floodOpacity: "0.08" }) }) }),
+                /* @__PURE__ */ i(
+                  "path",
+                  {
+                    d: R,
+                    className: "pointer-events-none fill-canvas-elevated stroke-content/15",
+                    strokeWidth: 0.35,
+                    filter: `url(#${f})`
+                  }
+                ),
+                P.map((e) => {
+                  const { pixelX: d, pixelY: a } = V(
+                    e.tile.x - t.originColumn,
+                    e.tile.y - t.originRow
+                  ), l = y.get(e.seriesId) ?? "var(--color-success)";
+                  return /* @__PURE__ */ i(
+                    "path",
+                    {
+                      "data-testid": "hex-tilemap-point",
+                      "data-point-id": e.id,
+                      d: N,
+                      transform: `translate(${d}, ${a})`,
+                      fill: l,
+                      className: "cursor-pointer stroke-content/10 outline-none focus-visible:stroke-brand",
+                      strokeWidth: 0.3,
+                      tabIndex: 0,
+                      role: "img",
+                      "aria-label": `${e.label}, ${e.value}`,
+                      onPointerEnter: (u) => {
+                        o.isPanning || x(e, u.currentTarget);
+                      },
+                      onPointerLeave: () => m(null),
+                      onFocus: (u) => {
+                        x(e, u.currentTarget);
+                      },
+                      onBlur: () => m(null)
+                    },
+                    e.id
+                  );
+                })
+              ]
+            }
+          ),
+          /* @__PURE__ */ i(O, {}),
+          /* @__PURE__ */ i(
+            _,
+            {
+              onZoomIn: () => o.zoomBy(g),
+              onZoomOut: () => o.zoomBy(-g),
+              onZoomTo: o.zoomTo,
+              onZoomToFit: o.zoomToFit,
+              onReset: o.resetZoom,
+              canZoomIn: o.canZoomIn,
+              canZoomOut: o.canZoomOut
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  J as HexTilemapViewport
+};

package/dist/components/data-display/hex-tilemap/internals/hex-tilemap-zoom.d.ts

@@ -0,0 +1,13 @@
+import { HexTilemapZoomProps } from '../hex-tilemap.types';
+import { HEX_BUTTON_ZOOM_STEP } from './hex-camera';
+export interface HexTilemapZoomControlProps extends HexTilemapZoomProps {
+    onZoomIn: () => void;
+    onZoomOut: () => void;
+    onZoomTo: (zoom: number) => void;
+    onZoomToFit: () => void;
+    onReset: () => void;
+    canZoomIn: boolean;
+    canZoomOut: boolean;
+}
+export declare const HexTilemapZoom: import('react').ForwardRefExoticComponent<HexTilemapZoomControlProps & import('react').RefAttributes<HTMLDivElement>>;
+export { HEX_BUTTON_ZOOM_STEP };

package/dist/components/data-display/hex-tilemap/internals/hex-tilemap-zoom.js

@@ -0,0 +1,99 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { RemoveMinimize as T, ArrowDown as f, Plus as z, Reset as N } from "impact-nova-icons";
+import { DropdownMenu as g, DropdownMenuTrigger as w, DropdownMenuContent as M, DropdownMenuItem as a, DropdownMenuSeparator as C } from "../../../feedback/dropdown-menu/dropdown-menu.js";
+import { createComponent as D } from "../../../../lib/primitives/create-component.js";
+import { cn as S } from "../../../../lib/utils.js";
+import { useImpactNovaI18n as v } from "../../../../i18n/use-impact-nova-i18n.js";
+import { hexTilemapZoomButtonVariants as t, hexTilemapZoomVariants as O } from "../hex-tilemap.variants.js";
+import { HEX_ZOOM_PRESETS as P } from "./hex-camera.js";
+import { HEX_BUTTON_ZOOM_STEP as F } from "./hex-camera.js";
+import { useHexTilemapContext as Z } from "./hex-tilemap-context.js";
+const V = D(
+  "HexTilemapZoom",
+  ({
+    className: r,
+    onZoomIn: l,
+    onZoomOut: s,
+    onZoomTo: p,
+    onZoomToFit: c,
+    onReset: m,
+    canZoomIn: d,
+    canZoomOut: u,
+    ...x
+  }, h) => {
+    const { t: o } = v(), { zoom: b } = Z();
+    return /* @__PURE__ */ i(
+      "div",
+      {
+        ref: h,
+        "data-component": "hex-tilemap-zoom",
+        "data-hex-tilemap-zoom": "",
+        className: S(O(), r),
+        onPointerDown: (n) => n.stopPropagation(),
+        ...x,
+        children: [
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              className: t(),
+              "aria-label": o("hexTilemap.zoomOut"),
+              disabled: !u,
+              onClick: s,
+              children: /* @__PURE__ */ e(T, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ i(g, { children: [
+            /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ i(
+              "button",
+              {
+                type: "button",
+                className: "inline-flex h-8 items-center gap-0.5 rounded-full px-1 text-sm font-semibold leading-[21px] text-secondary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring",
+                "aria-label": o("hexTilemap.zoomMenu"),
+                children: [
+                  /* @__PURE__ */ i("span", { children: [
+                    b,
+                    "%"
+                  ] }),
+                  /* @__PURE__ */ e(f, { className: "size-4" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ i(M, { align: "end", className: "min-w-[200px]", children: [
+              /* @__PURE__ */ e(a, { onSelect: c, children: o("hexTilemap.zoomToFit") }),
+              P.map((n) => /* @__PURE__ */ e(a, { onSelect: () => p(n), children: o("hexTilemap.zoomToPercent", { percent: n }) }, n)),
+              /* @__PURE__ */ e(C, {}),
+              /* @__PURE__ */ e(a, { onSelect: m, children: o("hexTilemap.reset") })
+            ] })
+          ] }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              className: t(),
+              "aria-label": o("hexTilemap.zoomIn"),
+              disabled: !d,
+              onClick: l,
+              children: /* @__PURE__ */ e(z, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: "mx-1 h-[18px] w-px bg-stroke", "aria-hidden": !0 }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              className: t(),
+              "aria-label": o("hexTilemap.zoomReset"),
+              onClick: m,
+              children: /* @__PURE__ */ e(N, { className: "size-4" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  F as HEX_BUTTON_ZOOM_STEP,
+  V as HexTilemapZoom
+};

package/dist/components/data-display/hex-tilemap/internals/hex-world-grid.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Shared hex cell coordinate. World land now lives on WORLD_HEX_LATTICE
+ * (Natural Earth 50m), not a hand-drawn Highcharts silhouette.
+ */
+export interface HexGridTile {
+    x: number;
+    y: number;
+}

package/dist/components/data-display/hex-tilemap/internals/use-hex-camera.d.ts

@@ -0,0 +1,27 @@
+import { HexCamera, HexCameraExtents } from './hex-camera';
+import * as React from "react";
+interface UseHexCameraOptions {
+    extents: HexCameraExtents;
+    zoom: number;
+    onZoomChange: (zoom: number) => void;
+    svgRef: React.RefObject<SVGSVGElement | null>;
+    viewportRef: React.RefObject<HTMLDivElement | null>;
+}
+export declare function useHexCamera({ extents, zoom, onZoomChange, svgRef, viewportRef, }: UseHexCameraOptions): {
+    isPanning: boolean;
+    handlePointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
+    handlePointerMove: (event: React.PointerEvent<HTMLDivElement>) => void;
+    endPan: (event?: React.PointerEvent<HTMLDivElement>) => void;
+    handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    zoomBy: (delta: number, focal?: {
+        x: number;
+        y: number;
+    }, immediate?: boolean) => void;
+    zoomTo: (nextZoom: number) => void;
+    resetZoom: () => void;
+    zoomToFit: () => void;
+    initialViewBox: HexCamera;
+    canZoomIn: boolean;
+    canZoomOut: boolean;
+};
+export {};

package/dist/components/data-display/hex-tilemap/internals/use-hex-camera.js

@@ -0,0 +1,137 @@
+import * as r from "react";
+import { centeredCamera as C, applyCameraViewBox as D, prefersReducedMotion as W, clampZoom as I, zoomCameraAt as H, HEX_ZOOM_DEFAULT as M, clientToSvgPoint as T, panCamera as E, HEX_BUTTON_ZOOM_STEP as Y, HEX_ZOOM_MIN as q, HEX_ZOOM_MAX as K, interpolateCamera as V, HEX_WHEEL_ZOOM_STEP as j, easeOutCubic as z } from "./hex-camera.js";
+const G = 180;
+function Q({
+  extents: f,
+  zoom: m,
+  onZoomChange: Z,
+  svgRef: l,
+  viewportRef: P
+}) {
+  const [x, g] = r.useState(!1), c = r.useRef(C(f, m)), o = r.useRef(f), w = r.useRef(m), p = r.useRef(null), k = r.useRef(null), a = r.useCallback((t) => {
+    c.current = t;
+    const e = l.current;
+    e && D(e, t);
+  }, [l]), y = r.useCallback(
+    (t) => {
+      const e = I(t);
+      e !== w.current && Z(e);
+    },
+    [Z]
+  ), d = r.useCallback(() => {
+    p.current !== null && (cancelAnimationFrame(p.current), p.current = null);
+  }, []), i = r.useCallback(
+    (t, e) => {
+      d();
+      const n = c.current;
+      if (y(e), W()) {
+        a(t);
+        return;
+      }
+      const u = performance.now(), s = (X) => {
+        const b = Math.min(1, (X - u) / G);
+        if (a(V(n, t, z(b))), b < 1) {
+          p.current = requestAnimationFrame(s);
+          return;
+        }
+        p.current = null;
+      };
+      p.current = requestAnimationFrame(s);
+    },
+    [d, y, a]
+  ), A = f.width, _ = f.height;
+  r.useEffect(() => {
+    o.current = { width: A, height: _ }, w.current = m;
+  }, [_, A, m]), r.useEffect(() => {
+    const t = { width: A, height: _ };
+    o.current = t;
+    const e = C(t, w.current);
+    c.current = e;
+    const n = l.current;
+    n && D(n, e);
+  }, [_, A, l]), r.useLayoutEffect(() => {
+    const t = l.current;
+    t && D(t, c.current);
+  }), r.useEffect(() => () => d(), [d]);
+  const h = r.useCallback(
+    (t, e, n = !1) => {
+      const u = I(w.current + t), s = H(c.current, o.current, u, e);
+      if (n) {
+        d(), a(s), y(u);
+        return;
+      }
+      i(s, u);
+    },
+    [i, d, y, a]
+  ), F = r.useCallback(
+    (t) => {
+      const e = I(t);
+      i(H(c.current, o.current, e), e);
+    },
+    [i]
+  ), O = r.useCallback(() => {
+    i(C(o.current, M), M);
+  }, [i]), L = r.useCallback(() => {
+    i(C(o.current, M), M);
+  }, [i]), S = r.useCallback(
+    (t) => {
+      t.button === 0 && (t.target.closest("[data-hex-tilemap-zoom]") || (k.current = {
+        pointerId: t.pointerId,
+        lastX: t.clientX,
+        lastY: t.clientY
+      }, t.currentTarget.setPointerCapture(t.pointerId), g(!0)));
+    },
+    []
+  ), R = r.useCallback(
+    (t) => {
+      const e = k.current, n = l.current;
+      if (!e || e.pointerId !== t.pointerId || !n) return;
+      const u = T(n, e.lastX, e.lastY), s = T(n, t.clientX, t.clientY);
+      e.lastX = t.clientX, e.lastY = t.clientY, !(!u || !s) && a(
+        E(c.current, o.current, s.x - u.x, s.y - u.y)
+      );
+    },
+    [a, l]
+  ), B = r.useCallback((t) => {
+    t && k.current && k.current.pointerId !== t.pointerId || (k.current = null, g(!1));
+  }, []);
+  r.useEffect(() => {
+    const t = P.current;
+    if (!t) return;
+    const e = (n) => {
+      n.preventDefault();
+      const u = l.current, s = n.deltaY < 0 ? 1 : -1, X = n.ctrlKey ? 10 : j, b = u ? T(u, n.clientX, n.clientY) : null;
+      h(s * X, b ?? void 0, !0);
+    };
+    return t.addEventListener("wheel", e, { passive: !1 }), () => t.removeEventListener("wheel", e);
+  }, [l, P, h]);
+  const N = r.useCallback(
+    (t) => {
+      const e = c.current.width * 0.08;
+      t.key === "+" || t.key === "=" ? (t.preventDefault(), h(Y)) : t.key === "-" || t.key === "_" ? (t.preventDefault(), h(-Y)) : t.key === "ArrowLeft" ? (t.preventDefault(), a(E(c.current, o.current, -e, 0))) : t.key === "ArrowRight" ? (t.preventDefault(), a(E(c.current, o.current, e, 0))) : t.key === "ArrowUp" ? (t.preventDefault(), a(E(c.current, o.current, 0, -e))) : t.key === "ArrowDown" ? (t.preventDefault(), a(E(c.current, o.current, 0, e))) : t.key === "0" && (t.preventDefault(), O());
+    },
+    [a, O, h]
+  ), U = r.useMemo(
+    () => C(f, m),
+    // Recapture only when the land frame changes so wheel/pan viewBox writes stay on the SVG.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [f.height, f.width]
+  );
+  return {
+    isPanning: x,
+    handlePointerDown: S,
+    handlePointerMove: R,
+    endPan: B,
+    handleKeyDown: N,
+    zoomBy: h,
+    zoomTo: F,
+    resetZoom: O,
+    zoomToFit: L,
+    initialViewBox: U,
+    canZoomIn: m < K,
+    canZoomOut: m > q
+  };
+}
+export {
+  Q as useHexCamera
+};

package/dist/components/data-display/notch-card/index.d.ts

@@ -0,0 +1,2 @@
+export { NotchCard, NotchCardContent, NotchCardBadge } from './notch-card';
+export type { NotchCardProps, NotchCardContentProps, NotchCardBadgeProps, NotchCardTone, NotchCardSize, NotchCardPlacement, NotchCardBadgeTone, } from './notch-card.types';

package/dist/components/data-display/notch-card/index.js

@@ -0,0 +1,6 @@
+import { NotchCard as r, NotchCardBadge as a, NotchCardContent as d } from "./notch-card.js";
+export {
+  r as NotchCard,
+  a as NotchCardBadge,
+  d as NotchCardContent
+};

package/dist/components/data-display/notch-card/notch-card.d.ts

@@ -0,0 +1,7 @@
+import { NotchCardBadgeProps, NotchCardContentProps, NotchCardProps } from './notch-card.types';
+import * as React from "react";
+declare const NotchCard: React.ForwardRefExoticComponent<NotchCardProps & React.RefAttributes<HTMLDivElement>>;
+declare const NotchCardContent: React.ForwardRefExoticComponent<NotchCardContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const NotchCardBadge: React.ForwardRefExoticComponent<NotchCardBadgeProps & React.RefAttributes<HTMLDivElement>>;
+export { NotchCard, NotchCardContent, NotchCardBadge };
+export type { NotchCardProps, NotchCardContentProps, NotchCardBadgeProps, NotchCardPlacement, } from './notch-card.types';

package/dist/components/data-display/notch-card/notch-card.js

@@ -0,0 +1,151 @@
+import { jsx as C, jsxs as w, Fragment as y } from "react/jsx-runtime";
+import * as n from "react";
+import { Slot as R } from "@radix-ui/react-slot";
+import { createComponent as z } from "../../../lib/primitives/create-component.js";
+import { cn as E } from "../../../lib/utils.js";
+import { notchCardHangPx as V, buildNotchCardPath as _, NOTCH_CARD_BADGE_INSET_PX as H } from "./notch-card.path.js";
+import { notchCardSurfaceVariants as k, notchCardVariants as G, notchCardBadgeVariants as I, notchCardContentVariants as j } from "./notch-card.variants.js";
+const P = n.createContext(null);
+function T() {
+  const t = n.useContext(P);
+  if (!t)
+    throw new Error("NotchCard components must be used within NotchCard");
+  return t;
+}
+function A(t, o) {
+  return {
+    w: t?.clientWidth ?? 0,
+    h: t?.clientHeight ?? 0,
+    badgeW: o?.offsetWidth ?? 0,
+    badgeH: o?.offsetHeight ?? 0,
+    rtl: t ? getComputedStyle(t).direction === "rtl" : !1
+  };
+}
+const Y = z(
+  "NotchCard",
+  ({ className: t, tone: o = "default", size: p = "md", placement: f = "bottom-start", children: d, ...g }, v) => {
+    const a = n.useRef(null), [i, x] = n.useState(null), [e, b] = n.useState({
+      w: 0,
+      h: 0,
+      badgeW: 0,
+      badgeH: 0,
+      rtl: !1
+    }), r = o ?? "default", l = p ?? "md", s = f ?? "bottom-start", c = s.startsWith("top"), N = s.endsWith("end");
+    n.useLayoutEffect(() => {
+      const u = a.current, S = () => {
+        b(A(u, i));
+      };
+      S();
+      const W = new ResizeObserver(S);
+      return u && W.observe(u), i && W.observe(i), () => W.disconnect();
+    }, [i]);
+    const h = V(e.badgeH), m = n.useMemo(() => {
+      const u = _({
+        width: e.w,
+        height: e.h,
+        badgeWidth: e.badgeW,
+        badgeHeight: e.badgeH,
+        rtl: N ? !e.rtl : e.rtl,
+        flipY: c
+      });
+      return u ? `path('${u}')` : void 0;
+    }, [e, N, c]), B = n.useMemo(
+      () => ({
+        tone: r,
+        size: l,
+        placement: s,
+        setBadgeEl: x
+      }),
+      [r, l, s]
+    );
+    return /* @__PURE__ */ C(P.Provider, { value: B, children: /* @__PURE__ */ w(
+      "div",
+      {
+        ref: v,
+        "data-component": "notch-card",
+        "data-tone": r,
+        "data-size": l,
+        "data-placement": s,
+        className: E(G({ tone: r, size: l }), t),
+        style: c ? { paddingTop: h } : { paddingBottom: h },
+        ...g,
+        children: [
+          /* @__PURE__ */ C(
+            "div",
+            {
+              ref: a,
+              "data-slot": "notch-card-surface",
+              "aria-hidden": !0,
+              className: k({ tone: r }),
+              style: {
+                top: c ? h : 0,
+                bottom: c ? 0 : h,
+                clipPath: m,
+                WebkitClipPath: m
+              }
+            }
+          ),
+          d
+        ]
+      }
+    ) });
+  }
+), $ = z(
+  "NotchCardContent",
+  ({ className: t, ...o }, p) => {
+    const { size: f, placement: d } = T();
+    return /* @__PURE__ */ C(
+      "div",
+      {
+        ref: p,
+        "data-component": "notch-card-content",
+        className: E(j({ size: f, placement: d }), t),
+        ...o
+      }
+    );
+  }
+), q = z(
+  "NotchCardBadge",
+  ({
+    className: t,
+    asChild: o = !1,
+    tone: p,
+    size: f,
+    icon: d,
+    children: g,
+    ...v
+  }, a) => {
+    const { tone: i, size: x, placement: e, setBadgeEl: b } = T(), r = e.startsWith("top"), l = e.endsWith("end"), s = p ?? (i === "iris" ? "iris" : "default"), c = f ?? x, N = o ? R : "div", h = n.useCallback(
+      (m) => {
+        b(m), typeof a == "function" ? a(m) : a && (a.current = m);
+      },
+      [a, b]
+    );
+    return /* @__PURE__ */ C(
+      N,
+      {
+        ref: h,
+        "data-component": "notch-card-badge",
+        "data-tone": s,
+        className: E(
+          I({ tone: s, size: c }),
+          t
+        ),
+        style: {
+          ...l ? { insetInlineEnd: H } : { insetInlineStart: H },
+          ...r ? { top: 0 } : { bottom: 0 }
+        },
+        ...v,
+        children: o ? g : /* @__PURE__ */ w(y, { children: [
+          d != null ? /* @__PURE__ */ C("span", { "data-slot": "notch-card-badge-icon", className: "inline-flex shrink-0 text-current", children: d }) : null,
+          g
+        ] })
+      }
+    );
+  }
+);
+export {
+  Y as NotchCard,
+  q as NotchCardBadge,
+  $ as NotchCardContent
+};

package/dist/components/data-display/notch-card/notch-card.path.d.ts

@@ -0,0 +1,19 @@
+export declare const NOTCH_CARD_RADIUS = 18;
+export declare const NOTCH_CARD_BADGE_INSET_PX = 3;
+export declare const NOTCH_CARD_BADGE_HANG_PX = 7;
+export declare const NOTCH_CARD_NOTCH_DEPTH_PX = 25;
+export declare const NOTCH_CARD_BADGE_GAP_Y_PX = 4;
+export declare function notchCardHangPx(badgeHeight: number): number;
+export type NotchCardPathInput = {
+    width: number;
+    height: number;
+    badgeWidth: number;
+    badgeHeight: number;
+    rtl?: boolean;
+    flipY?: boolean;
+};
+/**
+ * Same KPI notch on every size: 25px depth, unscaled Figma cubics. Taller pills
+ * hang more; the curve is not stretched.
+ */
+export declare function buildNotchCardPath({ width, height, badgeWidth, badgeHeight, rtl, flipY, }: NotchCardPathInput): string;