@countermeasure-platform/web-components 0.2.0

package/dist/react/index.d.ts

@@ -0,0 +1,6 @@
+export * from './brand/index';
+export * from './primitives/index';
+export * from './threat-visuals/index';
+export * from './topology/index';
+export * from './theme-toggle/index';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,oBAAoB,CAAA;AAClC,cAAc,wBAAwB,CAAA;AACtC,cAAc,kBAAkB,CAAA;AAChC,cAAc,sBAAsB,CAAA"}

package/dist/react/primitives/alert-dialog.d.ts

@@ -0,0 +1,15 @@
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import * as React from 'react';
+declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>): import("react/jsx-runtime").JSX.Element;
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };
+//# sourceMappingURL=alert-dialog.d.ts.map

package/dist/react/primitives/alert-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../src/react/primitives/alert-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AACpE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,2CAExF;AAED,iBAAS,kBAAkB,CAAC,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAE3D;AAED,iBAAS,iBAAiB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,2CAEhG;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAW3D;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAc3D;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ9E;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ9E;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,KAAK,CAAC,2CAQzD;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,WAAW,CAAC,2CAQ/D;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,2CAE1D;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,2CAO1D;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,GACnB,CAAA"}

package/dist/react/primitives/alert-dialog.js

@@ -0,0 +1,2 @@
+import { a as e, c as t, d as n, i as r, l as i, n as a, o, r as s, s as c, t as l, u } from "../../alert-dialog-x70JmbHN.js";
+export { l as AlertDialog, a as AlertDialogAction, s as AlertDialogCancel, r as AlertDialogContent, e as AlertDialogDescription, o as AlertDialogFooter, c as AlertDialogHeader, t as AlertDialogOverlay, i as AlertDialogPortal, u as AlertDialogTitle, n as AlertDialogTrigger };

package/dist/react/primitives/alert.d.ts

@@ -0,0 +1,16 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const alertVariants: (props?: ({
+    variant?: "error" | "warning" | "info" | "success" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+export type AlertProps = React.ComponentProps<'div'> & VariantProps<typeof alertVariants> & {
+    icon?: React.ReactNode;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+};
+declare function Alert({ className, variant, icon, dismissible, onDismiss, children, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element | null;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<'h5'>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export { Alert, AlertTitle, AlertDescription, alertVariants, type AlertVariant };
+//# sourceMappingURL=alert.d.ts.map

package/dist/react/primitives/alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/react/primitives/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,aAAa;;8EAiBlB,CAAA;AAED,KAAK,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;AAE5D,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAClD,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IACnC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB,CAAA;AAEH,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAgB,EAChB,IAAI,EACJ,WAAmB,EACnB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,UAAU,kDA+BZ;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAQtE;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ7E;AAED,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,aAAa,EAAE,KAAK,YAAY,EAAE,CAAA"}

package/dist/react/primitives/alert.js

@@ -0,0 +1,61 @@
+import { t as e } from "../../utils-B7XIe3qq.js";
+import { t } from "../../dist-BCCeHAQm.js";
+import { t as n } from "../../x-DCVjAtEF.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import * as a from "react";
+//#region src/react/primitives/alert.tsx
+var o = t("relative flex gap-3 rounded-xl border p-4 text-sm transition-all duration-200 [&>svg]:size-5 [&>svg]:shrink-0", {
+	variants: { variant: {
+		info: "border-accent-cyan/30 bg-accent-cyan/5 text-accent-cyan [&>svg]:text-accent-cyan",
+		success: "border-accent-emerald/30 bg-accent-emerald/5 text-accent-emerald [&>svg]:text-accent-emerald",
+		warning: "border-accent-amber/30 bg-accent-amber/5 text-accent-amber [&>svg]:text-accent-amber",
+		error: "border-accent-rose/30 bg-accent-rose/5 text-accent-rose [&>svg]:text-accent-rose"
+	} },
+	defaultVariants: { variant: "info" }
+});
+function s({ className: t, variant: s = "info", icon: c, dismissible: l = !1, onDismiss: u, children: d, ...f }) {
+	let [p, m] = a.useState(!1);
+	return p ? null : /* @__PURE__ */ i("div", {
+		"data-slot": "alert",
+		role: "alert",
+		className: e(o({ variant: s }), t),
+		...f,
+		children: [
+			c && /* @__PURE__ */ r("span", {
+				className: "mt-0.5 shrink-0",
+				children: c
+			}),
+			/* @__PURE__ */ r("div", {
+				className: "flex-1",
+				children: d
+			}),
+			l && /* @__PURE__ */ r("button", {
+				type: "button",
+				"aria-label": "Dismiss",
+				onClick: () => {
+					m(!0), u?.();
+				},
+				className: "shrink-0 rounded-lg p-0.5 opacity-70 transition-opacity hover:opacity-100",
+				children: /* @__PURE__ */ r(n, { className: "size-4" })
+			})
+		]
+	});
+}
+function c({ className: t, ...n }) {
+	return /* @__PURE__ */ r("h5", {
+		"data-slot": "alert-title",
+		className: e("mb-1 font-semibold leading-none tracking-tight", t),
+		...n
+	});
+}
+function l({ className: t, ...n }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "alert-description",
+		className: e("text-sm opacity-90 [&_p]:leading-relaxed", t),
+		...n
+	});
+}
+//#endregion
+export { s as Alert, l as AlertDescription, c as AlertTitle, o as alertVariants };
+
+//# sourceMappingURL=alert.js.map

package/dist/react/primitives/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","names":[],"sources":["../../../src/react/primitives/alert.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { XIcon } from 'lucide-react'\n\nimport { cn } from './utils'\n\nconst alertVariants = cva(\n  'relative flex gap-3 rounded-xl border p-4 text-sm transition-all duration-200 [&>svg]:size-5 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        info: 'border-accent-cyan/30 bg-accent-cyan/5 text-accent-cyan [&>svg]:text-accent-cyan',\n        success:\n          'border-accent-emerald/30 bg-accent-emerald/5 text-accent-emerald [&>svg]:text-accent-emerald',\n        warning:\n          'border-accent-amber/30 bg-accent-amber/5 text-accent-amber [&>svg]:text-accent-amber',\n        error: 'border-accent-rose/30 bg-accent-rose/5 text-accent-rose [&>svg]:text-accent-rose',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n    },\n  }\n)\n\ntype AlertVariant = 'info' | 'success' | 'warning' | 'error'\n\nexport type AlertProps = React.ComponentProps<'div'> &\n  VariantProps<typeof alertVariants> & {\n    icon?: React.ReactNode\n    dismissible?: boolean\n    onDismiss?: () => void\n  }\n\nfunction Alert({\n  className,\n  variant = 'info',\n  icon,\n  dismissible = false,\n  onDismiss,\n  children,\n  ...props\n}: AlertProps) {\n  const [dismissed, setDismissed] = React.useState(false)\n\n  if (dismissed) {\n    return null\n  }\n\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    >\n      {icon && <span className=\"mt-0.5 shrink-0\">{icon}</span>}\n      <div className=\"flex-1\">{children}</div>\n      {dismissible && (\n        <button\n          type=\"button\"\n          aria-label=\"Dismiss\"\n          onClick={() => {\n            setDismissed(true)\n            onDismiss?.()\n          }}\n          className=\"shrink-0 rounded-lg p-0.5 opacity-70 transition-opacity hover:opacity-100\"\n        >\n          <XIcon className=\"size-4\" />\n        </button>\n      )}\n    </div>\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<'h5'>) {\n  return (\n    <h5\n      data-slot=\"alert-title\"\n      className={cn('mb-1 font-semibold leading-none tracking-tight', className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn('text-sm opacity-90 [&_p]:leading-relaxed', className)}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, alertVariants, type AlertVariant }\n"],"mappings":";;;;;;AAMA,IAAM,IAAgB,EACpB,iHACA;CACE,UAAU,EACR,SAAS;EACP,MAAM;EACN,SACE;EACF,SACE;EACF,OAAO;EACR,EACF;CACD,iBAAiB,EACf,SAAS,QACV;CACF,CACF;AAWD,SAAS,EAAM,EACb,cACA,aAAU,QACV,SACA,iBAAc,IACd,cACA,aACA,GAAG,KACU;CACb,IAAM,CAAC,GAAW,KAAgB,EAAM,SAAS,GAAM;AAMvD,QAJI,IACK,OAIP,kBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,EAAG,EAAc,EAAE,YAAS,CAAC,EAAE,EAAU;EACpD,GAAI;YAJN;GAMG,KAAQ,kBAAC,QAAD;IAAM,WAAU;cAAmB;IAAY,CAAA;GACxD,kBAAC,OAAD;IAAK,WAAU;IAAU;IAAe,CAAA;GACvC,KACC,kBAAC,UAAD;IACE,MAAK;IACL,cAAW;IACX,eAAe;AAEb,KADA,EAAa,GAAK,EAClB,KAAa;;IAEf,WAAU;cAEV,kBAAC,GAAD,EAAO,WAAU,UAAW,CAAA;IACrB,CAAA;GAEP;;;AAIV,SAAS,EAAW,EAAE,cAAW,GAAG,KAAqC;AACvE,QACE,kBAAC,MAAD;EACE,aAAU;EACV,WAAW,EAAG,kDAAkD,EAAU;EAC1E,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAiB,EAAE,cAAW,GAAG,KAAsC;AAC9E,QACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EAAG,4CAA4C,EAAU;EACpE,GAAI;EACJ,CAAA"}

package/dist/react/primitives/animated-counter.d.ts

@@ -0,0 +1,37 @@
+/**
+ * AnimatedCounter - Animated number display with count-up effect
+ *
+ * Uses requestAnimationFrame for smooth 60fps animation.
+ * Respects prefers-reduced-motion.
+ */
+interface AnimatedCounterProps {
+    /** Target value to count to */
+    value: number;
+    /** Animation duration in ms */
+    duration?: number;
+    /** Delay before starting animation */
+    delay?: number;
+    /** Number of decimal places */
+    decimals?: number;
+    /** Prefix to display before the number (e.g., "$") */
+    prefix?: string;
+    /** Suffix to display after the number (e.g., "%") */
+    suffix?: string;
+    /** Additional CSS classes */
+    className?: string | undefined;
+    /** Whether to animate only when in view */
+    animateOnView?: boolean;
+}
+export declare function AnimatedCounter({ value, duration, delay, decimals, prefix, suffix, className, }: Omit<AnimatedCounterProps, 'animateOnView'>): import("react/jsx-runtime").JSX.Element;
+/**
+ * AnimatedPercentage - Specialized counter for percentage values
+ */
+export declare function AnimatedPercentage({ value, duration, delay, className, }: Omit<AnimatedCounterProps, 'suffix' | 'decimals' | 'prefix' | 'animateOnView'>): import("react/jsx-runtime").JSX.Element;
+/**
+ * AnimatedScore - Score display with color based on value
+ */
+export declare function AnimatedScore({ value, duration, delay, className, showSuffix, }: Omit<AnimatedCounterProps, 'suffix' | 'decimals' | 'prefix' | 'animateOnView'> & {
+    showSuffix?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=animated-counter.d.ts.map

package/dist/react/primitives/animated-counter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-counter.d.ts","sourceRoot":"","sources":["../../../src/react/primitives/animated-counter.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAqGH,UAAU,oBAAoB;IAC5B,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAe,EACf,KAAS,EACT,QAAY,EACZ,MAAW,EACX,MAAW,EACX,SAAS,GACV,EAAE,IAAI,CAAC,oBAAoB,EAAE,eAAe,CAAC,2CAa7C;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAe,EACf,KAAS,EACT,SAAS,GACV,EAAE,IAAI,CAAC,oBAAoB,EAAE,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,eAAe,CAAC,2CAWhF;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAe,EACf,KAAS,EACT,SAAS,EACT,UAAiB,GAClB,EAAE,IAAI,CAAC,oBAAoB,EAAE,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,eAAe,CAAC,GAAG;IAClF,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,2CAkBA"}

package/dist/react/primitives/animated-counter.js

@@ -0,0 +1,86 @@
+import { t as e } from "../../utils-B7XIe3qq.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useEffect as r, useRef as i, useState as a, useSyncExternalStore as o } from "react";
+//#region src/react/primitives/animated-counter.tsx
+var s = "(prefers-reduced-motion: reduce)";
+function c() {
+	return typeof window > "u" ? !1 : window.matchMedia(s).matches;
+}
+function l() {
+	return !1;
+}
+function u(e) {
+	let t = window.matchMedia(s);
+	return t.addEventListener("change", e), () => t.removeEventListener("change", e);
+}
+function d() {
+	return o(u, c, l);
+}
+var f = (e) => 1 - (1 - e) ** 3;
+function p(e, t = {}) {
+	let { start: n = 0, duration: o = 1e3, delay: s = 0, decimals: c = 0, easing: l = f } = t, u = d(), p = i(void 0), m = i(void 0), [h, g] = a(u ? e : n);
+	return r(() => {
+		if (u) return;
+		let t = setTimeout(() => {
+			m.current = void 0;
+			let t = (r) => {
+				m.current ||= r;
+				let i = r - m.current, a = Math.min(i / o, 1), s = l(a), u = n + (e - n) * s;
+				g(c > 0 ? Math.round(u * 10 ** c) / 10 ** c : Math.round(u)), a < 1 && (p.current = requestAnimationFrame(t));
+			};
+			p.current = requestAnimationFrame(t);
+		}, s);
+		return () => {
+			clearTimeout(t), p.current && cancelAnimationFrame(p.current);
+		};
+	}, [
+		e,
+		n,
+		o,
+		s,
+		c,
+		l,
+		u
+	]), h;
+}
+function m({ value: t, duration: r = 1e3, delay: i = 0, decimals: a = 0, prefix: o = "", suffix: s = "", className: c }) {
+	let l = p(t, {
+		duration: r,
+		delay: i,
+		decimals: a
+	}), u = a > 0 ? l.toFixed(a) : l.toLocaleString();
+	return /* @__PURE__ */ n("span", {
+		className: e("tabular-nums", c),
+		"aria-live": "polite",
+		"aria-atomic": "true",
+		children: [
+			o,
+			u,
+			s
+		]
+	});
+}
+function h({ value: e, duration: n = 1e3, delay: r = 0, className: i }) {
+	return /* @__PURE__ */ t(m, {
+		value: e,
+		duration: n,
+		delay: r,
+		decimals: 0,
+		suffix: "%",
+		className: i
+	});
+}
+function g({ value: n, duration: r = 1e3, delay: i = 0, className: a, showSuffix: o = !0 }) {
+	return /* @__PURE__ */ t(m, {
+		value: n,
+		duration: r,
+		delay: i,
+		decimals: 0,
+		suffix: o ? "%" : "",
+		className: e(((e) => e >= 80 ? "text-emerald-400" : e >= 60 ? "text-amber-400" : e >= 40 ? "text-orange-400" : "text-rose-400")(n), a)
+	});
+}
+//#endregion
+export { m as AnimatedCounter, h as AnimatedPercentage, g as AnimatedScore };
+
+//# sourceMappingURL=animated-counter.js.map

package/dist/react/primitives/animated-counter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-counter.js","names":[],"sources":["../../../src/react/primitives/animated-counter.tsx"],"sourcesContent":["/**\n * AnimatedCounter - Animated number display with count-up effect\n *\n * Uses requestAnimationFrame for smooth 60fps animation.\n * Respects prefers-reduced-motion.\n */\n\nimport { useState, useEffect, useRef, useSyncExternalStore } from 'react'\nimport { cn } from './utils'\n\n// --- Inlined useReducedMotion hook ---\n\nconst REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)'\n\nfunction getSnapshot(): boolean {\n  if (typeof window === 'undefined') return false\n  return window.matchMedia(REDUCED_MOTION_QUERY).matches\n}\n\nfunction getServerSnapshot(): boolean {\n  return false\n}\n\nfunction subscribe(callback: () => void): () => void {\n  const mediaQuery = window.matchMedia(REDUCED_MOTION_QUERY)\n  mediaQuery.addEventListener('change', callback)\n  return () => mediaQuery.removeEventListener('change', callback)\n}\n\nfunction useReducedMotion(): boolean {\n  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n\n// --- Inlined useCountUp hook ---\n\ninterface UseCountUpOptions {\n  start?: number\n  duration?: number\n  delay?: number\n  decimals?: number\n  easing?: (t: number) => number\n}\n\nconst easeOutCubic = (t: number): number => {\n  return 1 - Math.pow(1 - t, 3)\n}\n\nfunction useCountUp(end: number, options: UseCountUpOptions = {}): number {\n  const { start = 0, duration = 1000, delay = 0, decimals = 0, easing = easeOutCubic } = options\n\n  const prefersReducedMotion = useReducedMotion()\n  const frameRef = useRef<number | undefined>(undefined)\n  const startTimeRef = useRef<number | undefined>(undefined)\n\n  const initialValue = prefersReducedMotion ? end : start\n  const [count, setCount] = useState(initialValue)\n\n  useEffect(() => {\n    if (prefersReducedMotion) {\n      return\n    }\n\n    const startAnimation = () => {\n      startTimeRef.current = undefined\n\n      const animate = (currentTime: number) => {\n        if (!startTimeRef.current) {\n          startTimeRef.current = currentTime\n        }\n\n        const elapsed = currentTime - startTimeRef.current\n        const progress = Math.min(elapsed / duration, 1)\n        const easedProgress = easing(progress)\n\n        const currentValue = start + (end - start) * easedProgress\n\n        const roundedValue =\n          decimals > 0\n            ? Math.round(currentValue * Math.pow(10, decimals)) / Math.pow(10, decimals)\n            : Math.round(currentValue)\n\n        setCount(roundedValue)\n\n        if (progress < 1) {\n          frameRef.current = requestAnimationFrame(animate)\n        }\n      }\n\n      frameRef.current = requestAnimationFrame(animate)\n    }\n\n    const timeoutId = setTimeout(startAnimation, delay)\n\n    return () => {\n      clearTimeout(timeoutId)\n      if (frameRef.current) {\n        cancelAnimationFrame(frameRef.current)\n      }\n    }\n  }, [end, start, duration, delay, decimals, easing, prefersReducedMotion])\n\n  return count\n}\n\n// --- AnimatedCounter components ---\n\ninterface AnimatedCounterProps {\n  /** Target value to count to */\n  value: number\n  /** Animation duration in ms */\n  duration?: number\n  /** Delay before starting animation */\n  delay?: number\n  /** Number of decimal places */\n  decimals?: number\n  /** Prefix to display before the number (e.g., \"$\") */\n  prefix?: string\n  /** Suffix to display after the number (e.g., \"%\") */\n  suffix?: string\n  /** Additional CSS classes */\n  className?: string | undefined\n  /** Whether to animate only when in view */\n  animateOnView?: boolean\n}\n\nexport function AnimatedCounter({\n  value,\n  duration = 1000,\n  delay = 0,\n  decimals = 0,\n  prefix = '',\n  suffix = '',\n  className,\n}: Omit<AnimatedCounterProps, 'animateOnView'>) {\n  const displayValue = useCountUp(value, { duration, delay, decimals })\n\n  const formattedValue =\n    decimals > 0 ? displayValue.toFixed(decimals) : displayValue.toLocaleString()\n\n  return (\n    <span className={cn('tabular-nums', className)} aria-live=\"polite\" aria-atomic=\"true\">\n      {prefix}\n      {formattedValue}\n      {suffix}\n    </span>\n  )\n}\n\n/**\n * AnimatedPercentage - Specialized counter for percentage values\n */\nexport function AnimatedPercentage({\n  value,\n  duration = 1000,\n  delay = 0,\n  className,\n}: Omit<AnimatedCounterProps, 'suffix' | 'decimals' | 'prefix' | 'animateOnView'>) {\n  return (\n    <AnimatedCounter\n      value={value}\n      duration={duration}\n      delay={delay}\n      decimals={0}\n      suffix=\"%\"\n      className={className}\n    />\n  )\n}\n\n/**\n * AnimatedScore - Score display with color based on value\n */\nexport function AnimatedScore({\n  value,\n  duration = 1000,\n  delay = 0,\n  className,\n  showSuffix = true,\n}: Omit<AnimatedCounterProps, 'suffix' | 'decimals' | 'prefix' | 'animateOnView'> & {\n  showSuffix?: boolean\n}) {\n  const getScoreColor = (score: number) => {\n    if (score >= 80) return 'text-emerald-400'\n    if (score >= 60) return 'text-amber-400'\n    if (score >= 40) return 'text-orange-400'\n    return 'text-rose-400'\n  }\n\n  return (\n    <AnimatedCounter\n      value={value}\n      duration={duration}\n      delay={delay}\n      decimals={0}\n      suffix={showSuffix ? '%' : ''}\n      className={cn(getScoreColor(value), className)}\n    />\n  )\n}\n"],"mappings":";;;;AAYA,IAAM,IAAuB;AAE7B,SAAS,IAAuB;AAE9B,QADI,OAAO,SAAW,MAAoB,KACnC,OAAO,WAAW,EAAqB,CAAC;;AAGjD,SAAS,IAA6B;AACpC,QAAO;;AAGT,SAAS,EAAU,GAAkC;CACnD,IAAM,IAAa,OAAO,WAAW,EAAqB;AAE1D,QADA,EAAW,iBAAiB,UAAU,EAAS,QAClC,EAAW,oBAAoB,UAAU,EAAS;;AAGjE,SAAS,IAA4B;AACnC,QAAO,EAAqB,GAAW,GAAa,EAAkB;;AAaxE,IAAM,KAAgB,MACb,KAAa,IAAI,MAAG;AAG7B,SAAS,EAAW,GAAa,IAA6B,EAAE,EAAU;CACxE,IAAM,EAAE,WAAQ,GAAG,cAAW,KAAM,WAAQ,GAAG,cAAW,GAAG,YAAS,MAAiB,GAEjF,IAAuB,GAAkB,EACzC,IAAW,EAA2B,KAAA,EAAU,EAChD,IAAe,EAA2B,KAAA,EAAU,EAGpD,CAAC,GAAO,KAAY,EADL,IAAuB,IAAM,EACF;AA8ChD,QA5CA,QAAgB;AACd,MAAI,EACF;EAgCF,IAAM,IAAY,iBA7BW;AAC3B,KAAa,UAAU,KAAA;GAEvB,IAAM,KAAW,MAAwB;AACvC,IACE,EAAa,YAAU;IAGzB,IAAM,IAAU,IAAc,EAAa,SACrC,IAAW,KAAK,IAAI,IAAU,GAAU,EAAE,EAC1C,IAAgB,EAAO,EAAS,EAEhC,IAAe,KAAS,IAAM,KAAS;AAS7C,IAFA,EAJE,IAAW,IACP,KAAK,MAAM,IAAwB,MAAI,EAAU,GAAY,MAAI,IACjE,KAAK,MAAM,EAAa,CAER,EAElB,IAAW,MACb,EAAS,UAAU,sBAAsB,EAAQ;;AAIrD,KAAS,UAAU,sBAAsB,EAAQ;KAGN,EAAM;AAEnD,eAAa;AAEX,GADA,aAAa,EAAU,EACnB,EAAS,WACX,qBAAqB,EAAS,QAAQ;;IAGzC;EAAC;EAAK;EAAO;EAAU;EAAO;EAAU;EAAQ;EAAqB,CAAC,EAElE;;AAwBT,SAAgB,EAAgB,EAC9B,UACA,cAAW,KACX,WAAQ,GACR,cAAW,GACX,YAAS,IACT,YAAS,IACT,gBAC8C;CAC9C,IAAM,IAAe,EAAW,GAAO;EAAE;EAAU;EAAO;EAAU,CAAC,EAE/D,IACJ,IAAW,IAAI,EAAa,QAAQ,EAAS,GAAG,EAAa,gBAAgB;AAE/E,QACE,kBAAC,QAAD;EAAM,WAAW,EAAG,gBAAgB,EAAU;EAAE,aAAU;EAAS,eAAY;YAA/E;GACG;GACA;GACA;GACI;;;AAOX,SAAgB,EAAmB,EACjC,UACA,cAAW,KACX,WAAQ,GACR,gBACiF;AACjF,QACE,kBAAC,GAAD;EACS;EACG;EACH;EACP,UAAU;EACV,QAAO;EACI;EACX,CAAA;;AAON,SAAgB,EAAc,EAC5B,UACA,cAAW,KACX,WAAQ,GACR,cACA,gBAAa,MAGZ;AAQD,QACE,kBAAC,GAAD;EACS;EACG;EACH;EACP,UAAU;EACV,QAAQ,IAAa,MAAM;EAC3B,WAAW,IAdQ,MACjB,KAAS,KAAW,qBACpB,KAAS,KAAW,mBACpB,KAAS,KAAW,oBACjB,iBAUuB,EAAM,EAAE,EAAU;EAC9C,CAAA"}

package/dist/react/primitives/aspect-ratio.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface AspectRatioProps extends React.ComponentProps<'div'> {
+    /** The desired width-to-height ratio (e.g. 16/9, 4/3, 1) */
+    ratio?: number;
+}
+declare function AspectRatio({ className, ratio, style, children, ...props }: AspectRatioProps): import("react/jsx-runtime").JSX.Element;
+export { AspectRatio };
+//# sourceMappingURL=aspect-ratio.d.ts.map

package/dist/react/primitives/aspect-ratio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio.d.ts","sourceRoot":"","sources":["../../../src/react/primitives/aspect-ratio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACnE,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,KAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAWzF;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/react/primitives/aspect-ratio.js

@@ -0,0 +1,23 @@
+import { t as e } from "../../utils-B7XIe3qq.js";
+import { jsx as t } from "react/jsx-runtime";
+import "react";
+//#region src/react/primitives/aspect-ratio.tsx
+function n({ className: n, ratio: r = 1, style: i, children: a, ...o }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "aspect-ratio",
+		className: e("relative w-full", n),
+		style: {
+			paddingBottom: `${1 / r * 100}%`,
+			...i
+		},
+		...o,
+		children: /* @__PURE__ */ t("div", {
+			className: "absolute inset-0",
+			children: a
+		})
+	});
+}
+//#endregion
+export { n as AspectRatio };
+
+//# sourceMappingURL=aspect-ratio.js.map

package/dist/react/primitives/aspect-ratio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio.js","names":[],"sources":["../../../src/react/primitives/aspect-ratio.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from './utils'\n\nexport interface AspectRatioProps extends React.ComponentProps<'div'> {\n  /** The desired width-to-height ratio (e.g. 16/9, 4/3, 1) */\n  ratio?: number\n}\n\nfunction AspectRatio({ className, ratio = 1, style, children, ...props }: AspectRatioProps) {\n  return (\n    <div\n      data-slot=\"aspect-ratio\"\n      className={cn('relative w-full', className)}\n      style={{ paddingBottom: `${(1 / ratio) * 100}%`, ...style }}\n      {...props}\n    >\n      <div className=\"absolute inset-0\">{children}</div>\n    </div>\n  )\n}\n\nexport { AspectRatio }\n"],"mappings":";;;;AASA,SAAS,EAAY,EAAE,cAAW,WAAQ,GAAG,UAAO,aAAU,GAAG,KAA2B;AAC1F,QACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EAAG,mBAAmB,EAAU;EAC3C,OAAO;GAAE,eAAe,GAAI,IAAI,IAAS,IAAI;GAAI,GAAG;GAAO;EAC3D,GAAI;YAEJ,kBAAC,OAAD;GAAK,WAAU;GAAoB;GAAe,CAAA;EAC9C,CAAA"}

package/dist/react/primitives/attack-path.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+export type AttackStepType = 'initial_access' | 'execution' | 'persistence' | 'privilege_escalation' | 'defense_evasion' | 'credential_access' | 'discovery' | 'lateral_movement' | 'collection' | 'exfiltration' | 'impact' | 'command_and_control';
+export type AttackStepSeverity = 'critical' | 'high' | 'medium' | 'low';
+export interface AttackStep {
+    id: string;
+    label: string;
+    type: AttackStepType;
+    description?: string;
+    severity?: AttackStepSeverity;
+    mitigated?: boolean;
+    techniques?: string[];
+}
+declare const stepVariants: (props?: ({
+    severity?: "high" | "low" | "critical" | "medium" | null | undefined;
+    mitigated?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface AttackPathStepProps extends Omit<React.ComponentProps<'div'>, 'onClick'> {
+    step: AttackStep;
+    showTechniques?: boolean;
+    onClick?: ((step: AttackStep) => void) | undefined;
+}
+declare function AttackPathStep({ className, step, showTechniques, onClick, ...props }: AttackPathStepProps): import("react/jsx-runtime").JSX.Element;
+export interface AttackPathProps extends React.ComponentProps<'div'> {
+    steps: AttackStep[];
+    /** Optional title above the path. */
+    title?: string;
+    /** Show MITRE technique IDs in the tooltip. */
+    showTechniques?: boolean;
+    /** Callback when a step node is clicked. */
+    onStepClick?: (step: AttackStep) => void;
+}
+declare function AttackPath({ className, steps, title, showTechniques, onStepClick, ...props }: AttackPathProps): import("react/jsx-runtime").JSX.Element;
+export { AttackPath, AttackPathStep, stepVariants };
+//# sourceMappingURL=attack-path.d.ts.map

package/dist/react/primitives/attack-path.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attack-path.d.ts","sourceRoot":"","sources":["../../../src/react/primitives/attack-path.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,MAAM,MAAM,cAAc,GACtB,gBAAgB,GAChB,WAAW,GACX,aAAa,GACb,sBAAsB,GACtB,iBAAiB,GACjB,mBAAmB,GACnB,WAAW,GACX,kBAAkB,GAClB,YAAY,GACZ,cAAc,GACd,QAAQ,GACR,qBAAqB,CAAA;AAEzB,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAA;AAEvE,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,cAAc,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,kBAAkB,CAAA;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;CACtB;AAyBD,QAAA,MAAM,YAAY;;;8EAmBjB,CAAA;AAgCD,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IACvF,IAAI,EAAE,UAAU,CAAA;IAChB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,OAAO,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;CACnD;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,IAAI,EACJ,cAAsB,EACtB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAkErB;AAMD,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAClE,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+CAA+C;IAC/C,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAA;CACzC;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,KAAK,EACL,KAAK,EACL,cAAsB,EACtB,WAAW,EACX,GAAG,KAAK,EACT,EAAE,eAAe,2CAyBjB;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,CAAA"}

package/dist/react/primitives/attack-path.js

@@ -0,0 +1,125 @@
+import { t as e } from "../../utils-B7XIe3qq.js";
+import { t } from "../../dist-BCCeHAQm.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import * as i from "react";
+//#region src/react/primitives/attack-path.tsx
+var a = {
+	initial_access: "Initial Access",
+	execution: "Execution",
+	persistence: "Persistence",
+	privilege_escalation: "Privilege Escalation",
+	defense_evasion: "Defense Evasion",
+	credential_access: "Credential Access",
+	discovery: "Discovery",
+	lateral_movement: "Lateral Movement",
+	collection: "Collection",
+	exfiltration: "Exfiltration",
+	impact: "Impact",
+	command_and_control: "Command & Control"
+}, o = t("group relative flex flex-col items-center gap-1 rounded-xl border px-4 py-3 text-center backdrop-blur-[20px] transition-all duration-200", {
+	variants: {
+		severity: {
+			critical: "border-accent-rose/40 bg-accent-rose/10 hover:bg-accent-rose/15",
+			high: "border-accent-rose/30 bg-accent-rose/5 hover:bg-accent-rose/10",
+			medium: "border-accent-amber/30 bg-accent-amber/5 hover:bg-accent-amber/10",
+			low: "border-accent-cyan/30 bg-accent-cyan/5 hover:bg-accent-cyan/10"
+		},
+		mitigated: {
+			true: "opacity-60",
+			false: ""
+		}
+	},
+	defaultVariants: { mitigated: !1 }
+}), s = "border-border-glass bg-glass hover:bg-glass-hover";
+function c() {
+	return /* @__PURE__ */ n("div", {
+		"aria-hidden": "true",
+		className: "flex shrink-0 items-center px-1 text-foreground-muted",
+		children: /* @__PURE__ */ r("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 2,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			className: "size-4",
+			children: [/* @__PURE__ */ n("path", { d: "M5 12h14" }), /* @__PURE__ */ n("path", { d: "m12 5 7 7-7 7" })]
+		})
+	});
+}
+function l({ className: t, step: i, showTechniques: c = !1, onClick: l, ...u }) {
+	let d = i.description || c && i.techniques && i.techniques.length > 0;
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "attack-path-step",
+		role: "listitem",
+		className: e(i.severity ? o({
+			severity: i.severity,
+			mitigated: i.mitigated ?? !1
+		}) : e(o({ mitigated: i.mitigated ?? !1 }), s), l && "cursor-pointer", t),
+		onClick: l ? () => l(i) : void 0,
+		...u,
+		children: [
+			/* @__PURE__ */ n("span", {
+				className: "text-[10px] font-bold uppercase tracking-wider text-foreground-muted",
+				children: a[i.type]
+			}),
+			/* @__PURE__ */ n("span", {
+				className: "text-xs font-medium text-foreground",
+				children: i.label
+			}),
+			i.mitigated && /* @__PURE__ */ n("span", {
+				"aria-label": "Mitigated",
+				className: "absolute -right-1 -top-1 flex size-5 items-center justify-center rounded-full bg-accent-emerald text-[10px] text-white",
+				children: /* @__PURE__ */ n("svg", {
+					xmlns: "http://www.w3.org/2000/svg",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: 3,
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					className: "size-3",
+					children: /* @__PURE__ */ n("path", { d: "M20 6 9 17l-5-5" })
+				})
+			}),
+			d && /* @__PURE__ */ r("div", {
+				className: "pointer-events-none absolute left-1/2 top-full z-10 mt-2 hidden w-48 -translate-x-1/2 rounded-lg border border-border-glass bg-surface-secondary/95 p-3 text-left shadow-lg backdrop-blur-xl group-hover:block",
+				children: [i.description && /* @__PURE__ */ n("p", {
+					className: "text-xs text-foreground-secondary",
+					children: i.description
+				}), c && i.techniques && i.techniques.length > 0 && /* @__PURE__ */ n("ul", {
+					className: "mt-2 flex flex-col gap-1",
+					children: i.techniques.map((e) => /* @__PURE__ */ n("li", {
+						className: "text-[11px] font-mono text-foreground-muted",
+						children: e
+					}, e))
+				})]
+			})
+		]
+	});
+}
+function u({ className: t, steps: a, title: o, showTechniques: s = !1, onStepClick: u, ...d }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "attack-path",
+		role: "list",
+		"aria-label": o ?? "Attack Path",
+		className: e("flex flex-col gap-3", t),
+		...d,
+		children: [o && /* @__PURE__ */ n("div", {
+			className: "text-sm font-semibold text-foreground",
+			children: o
+		}), /* @__PURE__ */ n("div", {
+			className: "flex items-center gap-1 overflow-x-auto pb-2",
+			children: a.map((e, t) => /* @__PURE__ */ r(i.Fragment, { children: [/* @__PURE__ */ n(l, {
+				step: e,
+				showTechniques: s,
+				onClick: u ?? void 0
+			}), t < a.length - 1 && /* @__PURE__ */ n(c, {})] }, e.id))
+		})]
+	});
+}
+//#endregion
+export { u as AttackPath, l as AttackPathStep, o as stepVariants };
+
+//# sourceMappingURL=attack-path.js.map

package/dist/react/primitives/attack-path.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attack-path.js","names":[],"sources":["../../../src/react/primitives/attack-path.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cva } from 'class-variance-authority'\n\nimport { cn } from './utils'\n\n/* ------------------------------------------------------------------ */\n/*  Types                                                              */\n/* ------------------------------------------------------------------ */\n\nexport type AttackStepType =\n  | 'initial_access'\n  | 'execution'\n  | 'persistence'\n  | 'privilege_escalation'\n  | 'defense_evasion'\n  | 'credential_access'\n  | 'discovery'\n  | 'lateral_movement'\n  | 'collection'\n  | 'exfiltration'\n  | 'impact'\n  | 'command_and_control'\n\nexport type AttackStepSeverity = 'critical' | 'high' | 'medium' | 'low'\n\nexport interface AttackStep {\n  id: string\n  label: string\n  type: AttackStepType\n  description?: string\n  severity?: AttackStepSeverity\n  mitigated?: boolean\n  techniques?: string[]\n}\n\n/* ------------------------------------------------------------------ */\n/*  Helpers                                                            */\n/* ------------------------------------------------------------------ */\n\nconst TYPE_LABELS: Record<AttackStepType, string> = {\n  initial_access: 'Initial Access',\n  execution: 'Execution',\n  persistence: 'Persistence',\n  privilege_escalation: 'Privilege Escalation',\n  defense_evasion: 'Defense Evasion',\n  credential_access: 'Credential Access',\n  discovery: 'Discovery',\n  lateral_movement: 'Lateral Movement',\n  collection: 'Collection',\n  exfiltration: 'Exfiltration',\n  impact: 'Impact',\n  command_and_control: 'Command & Control',\n}\n\n/* ------------------------------------------------------------------ */\n/*  Variants                                                           */\n/* ------------------------------------------------------------------ */\n\nconst stepVariants = cva(\n  'group relative flex flex-col items-center gap-1 rounded-xl border px-4 py-3 text-center backdrop-blur-[20px] transition-all duration-200',\n  {\n    variants: {\n      severity: {\n        critical: 'border-accent-rose/40 bg-accent-rose/10 hover:bg-accent-rose/15',\n        high: 'border-accent-rose/30 bg-accent-rose/5 hover:bg-accent-rose/10',\n        medium: 'border-accent-amber/30 bg-accent-amber/5 hover:bg-accent-amber/10',\n        low: 'border-accent-cyan/30 bg-accent-cyan/5 hover:bg-accent-cyan/10',\n      },\n      mitigated: {\n        true: 'opacity-60',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      mitigated: false,\n    },\n  }\n)\n\nconst defaultStepClass = 'border-border-glass bg-glass hover:bg-glass-hover'\n\n/* ------------------------------------------------------------------ */\n/*  Arrow connector                                                    */\n/* ------------------------------------------------------------------ */\n\nfunction StepArrow() {\n  return (\n    <div aria-hidden=\"true\" className=\"flex shrink-0 items-center px-1 text-foreground-muted\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth={2}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"size-4\"\n      >\n        <path d=\"M5 12h14\" />\n        <path d=\"m12 5 7 7-7 7\" />\n      </svg>\n    </div>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  AttackPathStep                                                     */\n/* ------------------------------------------------------------------ */\n\nexport interface AttackPathStepProps extends Omit<React.ComponentProps<'div'>, 'onClick'> {\n  step: AttackStep\n  showTechniques?: boolean\n  onClick?: ((step: AttackStep) => void) | undefined\n}\n\nfunction AttackPathStep({\n  className,\n  step,\n  showTechniques = false,\n  onClick,\n  ...props\n}: AttackPathStepProps) {\n  const hasTip =\n    step.description || (showTechniques && step.techniques && step.techniques.length > 0)\n\n  return (\n    <div\n      data-slot=\"attack-path-step\"\n      role=\"listitem\"\n      className={cn(\n        step.severity\n          ? stepVariants({ severity: step.severity, mitigated: step.mitigated ?? false })\n          : cn(stepVariants({ mitigated: step.mitigated ?? false }), defaultStepClass),\n        onClick && 'cursor-pointer',\n        className\n      )}\n      onClick={onClick ? () => onClick(step) : undefined}\n      {...props}\n    >\n      {/* Type label */}\n      <span className=\"text-[10px] font-bold uppercase tracking-wider text-foreground-muted\">\n        {TYPE_LABELS[step.type]}\n      </span>\n\n      {/* Step label */}\n      <span className=\"text-xs font-medium text-foreground\">{step.label}</span>\n\n      {/* Mitigated indicator */}\n      {step.mitigated && (\n        <span\n          aria-label=\"Mitigated\"\n          className=\"absolute -right-1 -top-1 flex size-5 items-center justify-center rounded-full bg-accent-emerald text-[10px] text-white\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth={3}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            className=\"size-3\"\n          >\n            <path d=\"M20 6 9 17l-5-5\" />\n          </svg>\n        </span>\n      )}\n\n      {/* Tooltip popup */}\n      {hasTip && (\n        <div className=\"pointer-events-none absolute left-1/2 top-full z-10 mt-2 hidden w-48 -translate-x-1/2 rounded-lg border border-border-glass bg-surface-secondary/95 p-3 text-left shadow-lg backdrop-blur-xl group-hover:block\">\n          {step.description && (\n            <p className=\"text-xs text-foreground-secondary\">{step.description}</p>\n          )}\n          {showTechniques && step.techniques && step.techniques.length > 0 && (\n            <ul className=\"mt-2 flex flex-col gap-1\">\n              {step.techniques.map(t => (\n                <li key={t} className=\"text-[11px] font-mono text-foreground-muted\">\n                  {t}\n                </li>\n              ))}\n            </ul>\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  AttackPath                                                         */\n/* ------------------------------------------------------------------ */\n\nexport interface AttackPathProps extends React.ComponentProps<'div'> {\n  steps: AttackStep[]\n  /** Optional title above the path. */\n  title?: string\n  /** Show MITRE technique IDs in the tooltip. */\n  showTechniques?: boolean\n  /** Callback when a step node is clicked. */\n  onStepClick?: (step: AttackStep) => void\n}\n\nfunction AttackPath({\n  className,\n  steps,\n  title,\n  showTechniques = false,\n  onStepClick,\n  ...props\n}: AttackPathProps) {\n  return (\n    <div\n      data-slot=\"attack-path\"\n      role=\"list\"\n      aria-label={title ?? 'Attack Path'}\n      className={cn('flex flex-col gap-3', className)}\n      {...props}\n    >\n      {title && <div className=\"text-sm font-semibold text-foreground\">{title}</div>}\n\n      <div className=\"flex items-center gap-1 overflow-x-auto pb-2\">\n        {steps.map((step, i) => (\n          <React.Fragment key={step.id}>\n            <AttackPathStep\n              step={step}\n              showTechniques={showTechniques}\n              onClick={onStepClick ?? undefined}\n            />\n            {i < steps.length - 1 && <StepArrow />}\n          </React.Fragment>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport { AttackPath, AttackPathStep, stepVariants }\n"],"mappings":";;;;;AAuCA,IAAM,IAA8C;CAClD,gBAAgB;CAChB,WAAW;CACX,aAAa;CACb,sBAAsB;CACtB,iBAAiB;CACjB,mBAAmB;CACnB,WAAW;CACX,kBAAkB;CAClB,YAAY;CACZ,cAAc;CACd,QAAQ;CACR,qBAAqB;CACtB,EAMK,IAAe,EACnB,4IACA;CACE,UAAU;EACR,UAAU;GACR,UAAU;GACV,MAAM;GACN,QAAQ;GACR,KAAK;GACN;EACD,WAAW;GACT,MAAM;GACN,OAAO;GACR;EACF;CACD,iBAAiB,EACf,WAAW,IACZ;CACF,CACF,EAEK,IAAmB;AAMzB,SAAS,IAAY;AACnB,QACE,kBAAC,OAAD;EAAK,eAAY;EAAO,WAAU;YAChC,kBAAC,OAAD;GACE,OAAM;GACN,SAAQ;GACR,MAAK;GACL,QAAO;GACP,aAAa;GACb,eAAc;GACd,gBAAe;GACf,WAAU;aARZ,CAUE,kBAAC,QAAD,EAAM,GAAE,YAAa,CAAA,EACrB,kBAAC,QAAD,EAAM,GAAE,iBAAkB,CAAA,CACtB;;EACF,CAAA;;AAcV,SAAS,EAAe,EACtB,cACA,SACA,oBAAiB,IACjB,YACA,GAAG,KACmB;CACtB,IAAM,IACJ,EAAK,eAAgB,KAAkB,EAAK,cAAc,EAAK,WAAW,SAAS;AAErF,QACE,kBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,EACT,EAAK,WACD,EAAa;GAAE,UAAU,EAAK;GAAU,WAAW,EAAK,aAAa;GAAO,CAAC,GAC7E,EAAG,EAAa,EAAE,WAAW,EAAK,aAAa,IAAO,CAAC,EAAE,EAAiB,EAC9E,KAAW,kBACX,EACD;EACD,SAAS,UAAgB,EAAQ,EAAK,GAAG,KAAA;EACzC,GAAI;YAXN;GAcE,kBAAC,QAAD;IAAM,WAAU;cACb,EAAY,EAAK;IACb,CAAA;GAGP,kBAAC,QAAD;IAAM,WAAU;cAAuC,EAAK;IAAa,CAAA;GAGxE,EAAK,aACJ,kBAAC,QAAD;IACE,cAAW;IACX,WAAU;cAEV,kBAAC,OAAD;KACE,OAAM;KACN,SAAQ;KACR,MAAK;KACL,QAAO;KACP,aAAa;KACb,eAAc;KACd,gBAAe;KACf,WAAU;eAEV,kBAAC,QAAD,EAAM,GAAE,mBAAoB,CAAA;KACxB,CAAA;IACD,CAAA;GAIR,KACC,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,EAAK,eACJ,kBAAC,KAAD;KAAG,WAAU;eAAqC,EAAK;KAAgB,CAAA,EAExE,KAAkB,EAAK,cAAc,EAAK,WAAW,SAAS,KAC7D,kBAAC,MAAD;KAAI,WAAU;eACX,EAAK,WAAW,KAAI,MACnB,kBAAC,MAAD;MAAY,WAAU;gBACnB;MACE,EAFI,EAEJ,CACL;KACC,CAAA,CAEH;;GAEJ;;;AAkBV,SAAS,EAAW,EAClB,cACA,UACA,UACA,oBAAiB,IACjB,gBACA,GAAG,KACe;AAClB,QACE,kBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,cAAY,KAAS;EACrB,WAAW,EAAG,uBAAuB,EAAU;EAC/C,GAAI;YALN,CAOG,KAAS,kBAAC,OAAD;GAAK,WAAU;aAAyC;GAAY,CAAA,EAE9E,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAM,KAAK,GAAM,MAChB,kBAAC,EAAM,UAAP,EAAA,UAAA,CACE,kBAAC,GAAD;IACQ;IACU;IAChB,SAAS,KAAe,KAAA;IACxB,CAAA,EACD,IAAI,EAAM,SAAS,KAAK,kBAAC,GAAD,EAAa,CAAA,CACvB,EAAA,EAPI,EAAK,GAOT,CACjB;GACE,CAAA,CACF"}

package/dist/react/primitives/avatar.d.ts

@@ -0,0 +1,25 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const avatarVariants: (props?: ({
+    size?: "md" | "sm" | "lg" | "xs" | "xl" | null | undefined;
+    shape?: "circle" | "square" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type AvatarShape = 'circle' | 'square';
+type AvatarStatus = 'online' | 'offline' | 'away' | 'busy';
+export type AvatarProps = React.ComponentProps<'div'> & VariantProps<typeof avatarVariants> & {
+    status?: AvatarStatus;
+};
+declare function Avatar({ className, size, shape, status, children, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export type AvatarImageProps = React.ComponentProps<'img'> & {
+    onLoadingStatusChange?: (status: 'loading' | 'loaded' | 'error') => void;
+};
+declare function AvatarImage({ className, src, alt, onLoadingStatusChange, ...props }: AvatarImageProps): import("react/jsx-runtime").JSX.Element | null;
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+export interface AvatarGroupProps extends React.ComponentProps<'div'> {
+    /** Maximum number of avatars to show before truncating */
+    max?: number;
+}
+declare function AvatarGroup({ className, max, children, ...props }: AvatarGroupProps): import("react/jsx-runtime").JSX.Element;
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, avatarVariants, type AvatarSize, type AvatarShape, type AvatarStatus, };
+//# sourceMappingURL=avatar.d.ts.map

package/dist/react/primitives/avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/react/primitives/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAQjE,QAAA,MAAM,cAAc;;;8EAqBnB,CAAA;AAED,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAClD,KAAK,WAAW,GAAG,QAAQ,GAAG,QAAQ,CAAA;AACtC,KAAK,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;AAE1D,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GACnD,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,MAAM,CAAC,EAAE,YAAY,CAAA;CACtB,CAAA;AAEH,iBAAS,MAAM,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAYlF;AAMD,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC3D,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,KAAK,IAAI,CAAA;CACzE,CAAA;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,EACH,GAAQ,EACR,qBAAqB,EACrB,GAAG,KAAK,EACT,EAAE,gBAAgB,kDA4BlB;AAMD,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAW5E;AA6BD,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACnE,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CA8B5E;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,cAAc,EACd,WAAW,EACX,cAAc,EACd,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,YAAY,GAClB,CAAA"}