@cogentic-co/ds 0.4.1

package/dist/chunk-EFLWU2JP.js

@@ -0,0 +1,145 @@
+"use client";
+import { useCycleIndex } from './chunk-6RWCZUAD.js';
+import { cn } from './chunk-GZNLQE3I.js';
+import { CheckCircle2, XCircle } from 'lucide-react';
+import { LazyMotion, domAnimation, m } from 'motion/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var VASPS = [
+  {
+    name: "Aqua Exchange",
+    jurisdiction: "Singapore",
+    flag: "\u{1F1F8}\u{1F1EC}",
+    registered: true,
+    regulator: "MAS",
+    protocols: ["TRP", "TRISA"],
+    riskLevel: "Low",
+    lastVerified: "2 hours ago"
+  },
+  {
+    name: "Atlas Digital",
+    jurisdiction: "United Kingdom",
+    flag: "\u{1F1EC}\u{1F1E7}",
+    registered: true,
+    regulator: "FCA",
+    protocols: ["OpenVASP", "TRP"],
+    riskLevel: "Low",
+    lastVerified: "4 hours ago"
+  },
+  {
+    name: "Nova Crypto",
+    jurisdiction: "UAE",
+    flag: "\u{1F1E6}\u{1F1EA}",
+    registered: true,
+    regulator: "VARA",
+    protocols: ["Sygna"],
+    riskLevel: "Medium",
+    lastVerified: "1 day ago"
+  }
+];
+var riskColour = {
+  Low: "bg-emerald-50 text-emerald-700",
+  Medium: "bg-amber-50 text-amber-700",
+  High: "bg-red-50 text-red-700"
+};
+function AnimationVaspIdentification({ className }) {
+  const [containerRef, index] = useCycleIndex(VASPS.length, 3800);
+  const v = VASPS[index];
+  return /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("flex flex-col p-5", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "font-semibold text-[15px] text-foreground", children: "Counterparty VASP" }),
+        /* @__PURE__ */ jsx("p", { className: "text-[12px] text-gray-400", children: "Identity verification" })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        m.span,
+        {
+          initial: { opacity: 0, scale: 0.9 },
+          animate: { opacity: 1, scale: 1 },
+          className: cn(
+            "rounded-full px-2.5 py-1 font-semibold text-[11px]",
+            riskColour[v.riskLevel]
+          ),
+          children: [
+            v.riskLevel,
+            " risk"
+          ]
+        },
+        index
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      m.div,
+      {
+        initial: { opacity: 0, y: 6 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.3 },
+        className: "mt-4 rounded-lg border border-gray-100 bg-gray-50",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-gray-100 border-b px-4 py-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex size-9 items-center justify-center rounded-lg bg-white text-lg shadow-sm", children: v.flag }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "font-semibold text-[13px] text-gray-900", children: v.name }),
+              /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-gray-500", children: [
+                v.jurisdiction,
+                " ",
+                "\u2022",
+                " ",
+                v.regulator
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2 p-3", children: [
+            { label: "Registered", ok: v.registered },
+            { label: "Identity verified", ok: true },
+            { label: "Sanctions clear", ok: true },
+            { label: "Travel Rule ready", ok: v.protocols.length > 0 }
+          ].map((check, i) => /* @__PURE__ */ jsxs(
+            m.div,
+            {
+              initial: { opacity: 0, y: 4 },
+              animate: { opacity: 1, y: 0 },
+              transition: { delay: 0.1 + i * 0.08 },
+              className: "flex items-center gap-1.5 rounded-md bg-white px-2.5 py-1.5",
+              children: [
+                check.ok ? /* @__PURE__ */ jsx(CheckCircle2, { className: "size-3 text-emerald-500" }) : /* @__PURE__ */ jsx(XCircle, { className: "size-3 text-red-500" }),
+                /* @__PURE__ */ jsx("span", { className: "font-medium text-[10px] text-gray-600", children: check.label })
+              ]
+            },
+            check.label
+          )) })
+        ]
+      },
+      `vasp-${index}`
+    ),
+    /* @__PURE__ */ jsxs(
+      m.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        transition: { delay: 0.3 },
+        className: "mt-3 flex items-center gap-2",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-[10px] text-gray-400", children: "Protocols:" }),
+          v.protocols.map((p) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "rounded-full border border-gray-200 bg-white px-2.5 py-0.5 font-semibold text-[10px] text-gray-600",
+              children: p
+            },
+            p
+          )),
+          /* @__PURE__ */ jsxs("span", { className: "ml-auto text-[10px] text-gray-400", children: [
+            "Verified ",
+            v.lastVerified
+          ] })
+        ]
+      },
+      `proto-${index}`
+    )
+  ] }) });
+}
+
+export { AnimationVaspIdentification };
+//# sourceMappingURL=chunk-EFLWU2JP.js.map
+//# sourceMappingURL=chunk-EFLWU2JP.js.map

package/dist/chunk-EFLWU2JP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/animations/animation-vasp-identification.tsx"],"names":[],"mappings":"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","file":"chunk-EFLWU2JP.js","sourcesContent":["\"use client\"\n\nimport { CheckCircle2, XCircle } from \"lucide-react\"\nimport { domAnimation, LazyMotion, m } from \"motion/react\"\n\nimport { useCycleIndex } from \"../hooks/use-cycle-index\"\n\nimport { cn } from \"../lib/utils\"\n\ntype Vasp = {\n  name: string\n  jurisdiction: string\n  flag: string\n  registered: boolean\n  regulator: string\n  protocols: string[]\n  riskLevel: \"Low\" | \"Medium\" | \"High\"\n  lastVerified: string\n}\n\nconst VASPS: Vasp[] = [\n  {\n    name: \"Aqua Exchange\",\n    jurisdiction: \"Singapore\",\n    flag: \"\\u{1F1F8}\\u{1F1EC}\",\n    registered: true,\n    regulator: \"MAS\",\n    protocols: [\"TRP\", \"TRISA\"],\n    riskLevel: \"Low\",\n    lastVerified: \"2 hours ago\",\n  },\n  {\n    name: \"Atlas Digital\",\n    jurisdiction: \"United Kingdom\",\n    flag: \"\\u{1F1EC}\\u{1F1E7}\",\n    registered: true,\n    regulator: \"FCA\",\n    protocols: [\"OpenVASP\", \"TRP\"],\n    riskLevel: \"Low\",\n    lastVerified: \"4 hours ago\",\n  },\n  {\n    name: \"Nova Crypto\",\n    jurisdiction: \"UAE\",\n    flag: \"\\u{1F1E6}\\u{1F1EA}\",\n    registered: true,\n    regulator: \"VARA\",\n    protocols: [\"Sygna\"],\n    riskLevel: \"Medium\",\n    lastVerified: \"1 day ago\",\n  },\n]\n\nconst riskColour: Record<string, string> = {\n  Low: \"bg-emerald-50 text-emerald-700\",\n  Medium: \"bg-amber-50 text-amber-700\",\n  High: \"bg-red-50 text-red-700\",\n}\n\nexport default function AnimationVaspIdentification({ className }: { className?: string }) {\n  const [containerRef, index] = useCycleIndex(VASPS.length, 3800)\n\n  const v = VASPS[index]\n\n  return (\n    <LazyMotion features={domAnimation}>\n      <div ref={containerRef} className={cn(\"flex flex-col p-5\", className)}>\n        {/* Header */}\n        <div className=\"flex items-center justify-between\">\n          <div>\n            <p className=\"font-semibold text-[15px] text-foreground\">Counterparty VASP</p>\n            <p className=\"text-[12px] text-gray-400\">Identity verification</p>\n          </div>\n          <m.span\n            key={index}\n            initial={{ opacity: 0, scale: 0.9 }}\n            animate={{ opacity: 1, scale: 1 }}\n            className={cn(\n              \"rounded-full px-2.5 py-1 font-semibold text-[11px]\",\n              riskColour[v.riskLevel],\n            )}\n          >\n            {v.riskLevel} risk\n          </m.span>\n        </div>\n\n        {/* VASP card */}\n        <m.div\n          key={`vasp-${index}`}\n          initial={{ opacity: 0, y: 6 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.3 }}\n          className=\"mt-4 rounded-lg border border-gray-100 bg-gray-50\"\n        >\n          {/* Name & jurisdiction */}\n          <div className=\"flex items-center gap-3 border-gray-100 border-b px-4 py-3\">\n            <div className=\"flex size-9 items-center justify-center rounded-lg bg-white text-lg shadow-sm\">\n              {v.flag}\n            </div>\n            <div>\n              <p className=\"font-semibold text-[13px] text-gray-900\">{v.name}</p>\n              <p className=\"text-[11px] text-gray-500\">\n                {v.jurisdiction} {\"\\u2022\"} {v.regulator}\n              </p>\n            </div>\n          </div>\n\n          {/* Verification checks */}\n          <div className=\"grid grid-cols-2 gap-2 p-3\">\n            {[\n              { label: \"Registered\", ok: v.registered },\n              { label: \"Identity verified\", ok: true },\n              { label: \"Sanctions clear\", ok: true },\n              { label: \"Travel Rule ready\", ok: v.protocols.length > 0 },\n            ].map((check, i) => (\n              <m.div\n                key={check.label}\n                initial={{ opacity: 0, y: 4 }}\n                animate={{ opacity: 1, y: 0 }}\n                transition={{ delay: 0.1 + i * 0.08 }}\n                className=\"flex items-center gap-1.5 rounded-md bg-white px-2.5 py-1.5\"\n              >\n                {check.ok ? (\n                  <CheckCircle2 className=\"size-3 text-emerald-500\" />\n                ) : (\n                  <XCircle className=\"size-3 text-red-500\" />\n                )}\n                <span className=\"font-medium text-[10px] text-gray-600\">{check.label}</span>\n              </m.div>\n            ))}\n          </div>\n        </m.div>\n\n        {/* Protocols */}\n        <m.div\n          key={`proto-${index}`}\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          transition={{ delay: 0.3 }}\n          className=\"mt-3 flex items-center gap-2\"\n        >\n          <span className=\"font-medium text-[10px] text-gray-400\">Protocols:</span>\n          {v.protocols.map((p) => (\n            <span\n              key={p}\n              className=\"rounded-full border border-gray-200 bg-white px-2.5 py-0.5 font-semibold text-[10px] text-gray-600\"\n            >\n              {p}\n            </span>\n          ))}\n          <span className=\"ml-auto text-[10px] text-gray-400\">Verified {v.lastVerified}</span>\n        </m.div>\n      </div>\n    </LazyMotion>\n  )\n}\n"]}

package/dist/chunk-F7REPQOA.js

@@ -0,0 +1,93 @@
+"use client";
+import { EASE_OUT } from './chunk-TAPJEVUA.js';
+import { cn } from './chunk-GZNLQE3I.js';
+import { motion } from 'motion/react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function AnimationSlackNotification({ className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col bg-white p-4", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-gray-100 border-b pb-2.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-bold text-[13px] text-gray-900", children: "# compliance-alerts" }),
+      /* @__PURE__ */ jsx("span", { className: "rounded bg-red-100 px-1.5 py-0.5 font-bold text-[9px] text-red-600", children: "3 new" })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: { opacity: 0, y: 10 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.5, ease: EASE_OUT, delay: 0.3 },
+        className: "mt-3 flex gap-2.5",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-md bg-gray-900", children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M7 1L12 4V10L7 13L2 10V4L7 1Z", stroke: "#00D4FF", strokeWidth: "1.2" }) }) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-bold text-[13px] text-gray-900", children: "Cogentic" }),
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400", children: "APP 10:42 AM" })
+            ] }),
+            /* @__PURE__ */ jsxs(
+              motion.div,
+              {
+                initial: { opacity: 0, x: -8 },
+                animate: { opacity: 1, x: 0 },
+                transition: { duration: 0.4, ease: EASE_OUT, delay: 0.6 },
+                className: "mt-1.5 rounded-md border-red-400 border-l-[3px] bg-gray-50 px-3 py-2.5",
+                children: [
+                  /* @__PURE__ */ jsx("p", { className: "font-semibold text-[12px] text-gray-900", children: "Transfer flagged \u2014 manual review required" }),
+                  /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex flex-wrap gap-x-4 gap-y-1", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-gray-500", children: [
+                      /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-700", children: "TXN-0847" }),
+                      " \xB7 AU \u2192 SG"
+                    ] }),
+                    /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-gray-500", children: [
+                      "Risk: ",
+                      /* @__PURE__ */ jsx("span", { className: "font-semibold text-red-500", children: "High (72)" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-[11px] text-gray-500 leading-relaxed", children: "PEP screening match detected. Beneficiary threshold exceeded for SG corridor." })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: { opacity: 0 },
+                animate: { opacity: 1 },
+                transition: { duration: 0.3, delay: 0.9 },
+                className: "mt-2 flex gap-1.5",
+                children: ["Review", "Approve", "Escalate"].map((label) => /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "rounded border border-gray-200 bg-white px-2.5 py-1 font-medium text-[11px] text-gray-700",
+                    children: label
+                  },
+                  label
+                ))
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              motion.div,
+              {
+                initial: { opacity: 0, y: 6 },
+                animate: { opacity: 1, y: 0 },
+                transition: { duration: 0.4, ease: EASE_OUT, delay: 1.3 },
+                className: "mt-3 flex items-start gap-2 border-gray-100 border-t pt-2.5",
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-emerald-100 font-bold text-[9px] text-emerald-700", children: "JC" }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold text-[11px] text-gray-900", children: "J. Chen" }),
+                    /* @__PURE__ */ jsx("span", { className: "ml-1.5 text-[10px] text-gray-400", children: "10:44 AM" }),
+                    /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-[11px] text-gray-600", children: "Reviewed. PEP match is a false positive \u2014 approved." })
+                  ] })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+export { AnimationSlackNotification };
+//# sourceMappingURL=chunk-F7REPQOA.js.map
+//# sourceMappingURL=chunk-F7REPQOA.js.map

package/dist/chunk-F7REPQOA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/animations/animation-slack-notification.tsx"],"names":[],"mappings":"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","file":"chunk-F7REPQOA.js","sourcesContent":["\"use client\"\n\nimport { motion } from \"motion/react\"\n\nimport { EASE_OUT } from \"../lib/animation\"\nimport { cn } from \"../lib/utils\"\n\nexport default function AnimationSlackNotification({ className }: { className?: string }) {\n  return (\n    <div className={cn(\"flex flex-col bg-white p-4\", className)}>\n      {/* Channel header */}\n      <div className=\"flex items-center gap-2 border-gray-100 border-b pb-2.5\">\n        <span className=\"font-bold text-[13px] text-gray-900\"># compliance-alerts</span>\n        <span className=\"rounded bg-red-100 px-1.5 py-0.5 font-bold text-[9px] text-red-600\">\n          3 new\n        </span>\n      </div>\n\n      {/* Bot message */}\n      <motion.div\n        initial={{ opacity: 0, y: 10 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.5, ease: EASE_OUT, delay: 0.3 }}\n        className=\"mt-3 flex gap-2.5\"\n      >\n        {/* Bot avatar */}\n        <div className=\"flex size-8 shrink-0 items-center justify-center rounded-md bg-gray-900\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n            <path d=\"M7 1L12 4V10L7 13L2 10V4L7 1Z\" stroke=\"#00D4FF\" strokeWidth=\"1.2\" />\n          </svg>\n        </div>\n\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"flex items-baseline gap-2\">\n            <span className=\"font-bold text-[13px] text-gray-900\">Cogentic</span>\n            <span className=\"text-[10px] text-gray-400\">APP 10:42 AM</span>\n          </div>\n\n          {/* Attachment card */}\n          <motion.div\n            initial={{ opacity: 0, x: -8 }}\n            animate={{ opacity: 1, x: 0 }}\n            transition={{ duration: 0.4, ease: EASE_OUT, delay: 0.6 }}\n            className=\"mt-1.5 rounded-md border-red-400 border-l-[3px] bg-gray-50 px-3 py-2.5\"\n          >\n            <p className=\"font-semibold text-[12px] text-gray-900\">\n              Transfer flagged — manual review required\n            </p>\n            <div className=\"mt-1.5 flex flex-wrap gap-x-4 gap-y-1\">\n              <span className=\"text-[11px] text-gray-500\">\n                <span className=\"font-medium text-gray-700\">TXN-0847</span> &middot; AU &rarr; SG\n              </span>\n              <span className=\"text-[11px] text-gray-500\">\n                Risk: <span className=\"font-semibold text-red-500\">High (72)</span>\n              </span>\n            </div>\n            <p className=\"mt-1.5 text-[11px] text-gray-500 leading-relaxed\">\n              PEP screening match detected. Beneficiary threshold exceeded for SG corridor.\n            </p>\n          </motion.div>\n\n          {/* Action buttons */}\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            transition={{ duration: 0.3, delay: 0.9 }}\n            className=\"mt-2 flex gap-1.5\"\n          >\n            {[\"Review\", \"Approve\", \"Escalate\"].map((label) => (\n              <span\n                key={label}\n                className=\"rounded border border-gray-200 bg-white px-2.5 py-1 font-medium text-[11px] text-gray-700\"\n              >\n                {label}\n              </span>\n            ))}\n          </motion.div>\n\n          {/* Thread reply */}\n          <motion.div\n            initial={{ opacity: 0, y: 6 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ duration: 0.4, ease: EASE_OUT, delay: 1.3 }}\n            className=\"mt-3 flex items-start gap-2 border-gray-100 border-t pt-2.5\"\n          >\n            <div className=\"flex size-5 shrink-0 items-center justify-center rounded-full bg-emerald-100 font-bold text-[9px] text-emerald-700\">\n              JC\n            </div>\n            <div>\n              <span className=\"font-semibold text-[11px] text-gray-900\">J. Chen</span>\n              <span className=\"ml-1.5 text-[10px] text-gray-400\">10:44 AM</span>\n              <p className=\"mt-0.5 text-[11px] text-gray-600\">\n                Reviewed. PEP match is a false positive — approved.\n              </p>\n            </div>\n          </motion.div>\n        </div>\n      </motion.div>\n    </div>\n  )\n}\n"]}

package/dist/chunk-FKPK3CB7.js

@@ -0,0 +1,143 @@
+"use client";
+import { EASE_OUT } from './chunk-TAPJEVUA.js';
+import { useCycleIndex } from './chunk-6RWCZUAD.js';
+import { __spreadValues, cn } from './chunk-GZNLQE3I.js';
+import { Activity, ShieldCheck, AlertTriangle } from 'lucide-react';
+import { LazyMotion, domAnimation, m } from 'motion/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var SCENARIOS = [
+  {
+    transfers: { value: "1,247", change: "12.3%", up: true },
+    compliant: { value: "1,238", change: "14.1%", up: true },
+    flagged: { value: "9", change: "8.2%", up: false },
+    bars: [30, 55, 70, 100, 45, 25, 60],
+    activeBar: 3
+  },
+  {
+    transfers: { value: "892", change: "6.7%", up: true },
+    compliant: { value: "874", change: "5.2%", up: true },
+    flagged: { value: "18", change: "22.4%", up: true },
+    bars: [45, 35, 60, 50, 80, 100, 40],
+    activeBar: 5
+  },
+  {
+    transfers: { value: "2,103", change: "18.9%", up: true },
+    compliant: { value: "2,091", change: "19.3%", up: true },
+    flagged: { value: "12", change: "4.1%", up: false },
+    bars: [60, 75, 50, 85, 65, 90, 100],
+    activeBar: 6
+  }
+];
+var DAYS = ["MO", "TU", "WE", "TH", "FR", "SA", "SU"];
+var CYCLE_MS = 4e3;
+function AnimatedValue({ value }) {
+  return /* @__PURE__ */ jsx(
+    m.span,
+    {
+      initial: { opacity: 0, y: 6 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.35, ease: EASE_OUT },
+      children: value
+    },
+    value
+  );
+}
+function AnimationRealtimeUpdates({ className }) {
+  const [containerRef, index] = useCycleIndex(SCENARIOS.length, CYCLE_MS);
+  const scenario = SCENARIOS[index];
+  const metrics = [
+    __spreadValues({
+      icon: Activity,
+      label: "Transfers screened",
+      sub: "All protocols"
+    }, scenario.transfers),
+    __spreadValues({
+      icon: ShieldCheck,
+      label: "Compliant",
+      sub: "Auto-approved"
+    }, scenario.compliant),
+    __spreadValues({
+      icon: AlertTriangle,
+      label: "Flagged",
+      sub: "Manual review"
+    }, scenario.flagged)
+  ];
+  return /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("flex flex-col p-5", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "font-semibold text-[15px] text-foreground", children: "Compliance Overview" }),
+        /* @__PURE__ */ jsx("p", { className: "text-[12px] text-gray-400", children: "Weekly screening summary" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-0.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "size-1 rounded-full bg-gray-300" }),
+        /* @__PURE__ */ jsx("span", { className: "size-1 rounded-full bg-gray-300" }),
+        /* @__PURE__ */ jsx("span", { className: "size-1 rounded-full bg-gray-300" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col gap-3", children: metrics.map((metric) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex size-9 items-center justify-center rounded-lg bg-gray-100", children: /* @__PURE__ */ jsx(metric.icon, { className: "size-4 text-foreground", strokeWidth: 1.5 }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsx("p", { className: "font-medium text-[13px] text-foreground", children: metric.label }),
+        /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-400", children: metric.sub })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx("p", { className: "font-mono font-semibold text-[14px] text-foreground", children: /* @__PURE__ */ jsx(AnimatedValue, { value: metric.value }) }) }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-center gap-0.5 font-medium text-[11px]",
+            metric.up ? "text-foreground" : "text-emerald-600"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                width: "10",
+                height: "10",
+                viewBox: "0 0 10 10",
+                className: cn(!metric.up && "rotate-180"),
+                children: /* @__PURE__ */ jsx("path", { d: "M5 2L8.5 7H1.5L5 2Z", fill: "currentColor" })
+              }
+            ),
+            /* @__PURE__ */ jsx(AnimatedValue, { value: metric.change })
+          ]
+        }
+      )
+    ] }, metric.label)) }),
+    /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-1 items-end gap-2", children: scenario.bars.map((height, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx("div", { className: "relative w-full", style: { height: 80 }, children: /* @__PURE__ */ jsx(
+        m.div,
+        {
+          className: cn(
+            "absolute inset-x-0 bottom-0 rounded-t-md",
+            i === scenario.activeBar ? "bg-tagline" : "bg-foreground"
+          ),
+          style: { transformOrigin: "bottom", height: "100%" },
+          initial: { scaleY: 0 },
+          animate: { scaleY: height / 100 },
+          transition: {
+            duration: 0.6,
+            delay: i * 0.05,
+            ease: EASE_OUT
+          }
+        },
+        `${index}-${i}`
+      ) }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "font-medium text-[10px]",
+            i === scenario.activeBar ? "text-gray-900" : "text-gray-400"
+          ),
+          children: DAYS[i]
+        }
+      )
+    ] }, i)) })
+  ] }) });
+}
+
+export { AnimationRealtimeUpdates };
+//# sourceMappingURL=chunk-FKPK3CB7.js.map
+//# sourceMappingURL=chunk-FKPK3CB7.js.map

package/dist/chunk-FKPK3CB7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/animations/animation-realtime-updates.tsx"],"names":[],"mappings":"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","file":"chunk-FKPK3CB7.js","sourcesContent":["\"use client\"\n\nimport { Activity, AlertTriangle, ShieldCheck } from \"lucide-react\"\nimport { domAnimation, LazyMotion, m } from \"motion/react\"\n\nimport { useCycleIndex } from \"../hooks/use-cycle-index\"\n\nimport { EASE_OUT } from \"../lib/animation\"\nimport { cn } from \"../lib/utils\"\n\ntype Scenario = {\n  transfers: { value: string; change: string; up: boolean }\n  compliant: { value: string; change: string; up: boolean }\n  flagged: { value: string; change: string; up: boolean }\n  bars: number[]\n  activeBar: number\n}\n\nconst SCENARIOS: Scenario[] = [\n  {\n    transfers: { value: \"1,247\", change: \"12.3%\", up: true },\n    compliant: { value: \"1,238\", change: \"14.1%\", up: true },\n    flagged: { value: \"9\", change: \"8.2%\", up: false },\n    bars: [30, 55, 70, 100, 45, 25, 60],\n    activeBar: 3,\n  },\n  {\n    transfers: { value: \"892\", change: \"6.7%\", up: true },\n    compliant: { value: \"874\", change: \"5.2%\", up: true },\n    flagged: { value: \"18\", change: \"22.4%\", up: true },\n    bars: [45, 35, 60, 50, 80, 100, 40],\n    activeBar: 5,\n  },\n  {\n    transfers: { value: \"2,103\", change: \"18.9%\", up: true },\n    compliant: { value: \"2,091\", change: \"19.3%\", up: true },\n    flagged: { value: \"12\", change: \"4.1%\", up: false },\n    bars: [60, 75, 50, 85, 65, 90, 100],\n    activeBar: 6,\n  },\n]\n\nconst DAYS = [\"MO\", \"TU\", \"WE\", \"TH\", \"FR\", \"SA\", \"SU\"]\n\nconst CYCLE_MS = 4000\n\nfunction AnimatedValue({ value }: { value: string }) {\n  return (\n    <m.span\n      key={value}\n      initial={{ opacity: 0, y: 6 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.35, ease: EASE_OUT }}\n    >\n      {value}\n    </m.span>\n  )\n}\n\nexport default function AnimationRealtimeUpdates({ className }: { className?: string }) {\n  const [containerRef, index] = useCycleIndex(SCENARIOS.length, CYCLE_MS)\n  const scenario = SCENARIOS[index]\n\n  const metrics = [\n    {\n      icon: Activity,\n      label: \"Transfers screened\",\n      sub: \"All protocols\",\n      ...scenario.transfers,\n    },\n    {\n      icon: ShieldCheck,\n      label: \"Compliant\",\n      sub: \"Auto-approved\",\n      ...scenario.compliant,\n    },\n    {\n      icon: AlertTriangle,\n      label: \"Flagged\",\n      sub: \"Manual review\",\n      ...scenario.flagged,\n    },\n  ]\n\n  return (\n    <LazyMotion features={domAnimation}>\n      <div ref={containerRef} className={cn(\"flex flex-col p-5\", className)}>\n        {/* Dashboard header */}\n        <div className=\"flex items-start justify-between\">\n          <div>\n            <p className=\"font-semibold text-[15px] text-foreground\">Compliance Overview</p>\n            <p className=\"text-[12px] text-gray-400\">Weekly screening summary</p>\n          </div>\n          <div className=\"flex gap-0.5\">\n            <span className=\"size-1 rounded-full bg-gray-300\" />\n            <span className=\"size-1 rounded-full bg-gray-300\" />\n            <span className=\"size-1 rounded-full bg-gray-300\" />\n          </div>\n        </div>\n\n        {/* Metric rows */}\n        <div className=\"mt-4 flex flex-col gap-3\">\n          {metrics.map((metric) => (\n            <div key={metric.label} className=\"flex items-center gap-3\">\n              <div className=\"flex size-9 items-center justify-center rounded-lg bg-gray-100\">\n                <metric.icon className=\"size-4 text-foreground\" strokeWidth={1.5} />\n              </div>\n              <div className=\"flex-1\">\n                <p className=\"font-medium text-[13px] text-foreground\">{metric.label}</p>\n                <p className=\"text-[10px] text-gray-400\">{metric.sub}</p>\n              </div>\n              <div className=\"text-right\">\n                <p className=\"font-mono font-semibold text-[14px] text-foreground\">\n                  <AnimatedValue value={metric.value} />\n                </p>\n              </div>\n              <div\n                className={cn(\n                  \"flex items-center gap-0.5 font-medium text-[11px]\",\n                  metric.up ? \"text-foreground\" : \"text-emerald-600\",\n                )}\n              >\n                <svg\n                  width=\"10\"\n                  height=\"10\"\n                  viewBox=\"0 0 10 10\"\n                  className={cn(!metric.up && \"rotate-180\")}\n                >\n                  <path d=\"M5 2L8.5 7H1.5L5 2Z\" fill=\"currentColor\" />\n                </svg>\n                <AnimatedValue value={metric.change} />\n              </div>\n            </div>\n          ))}\n        </div>\n\n        {/* Bar chart */}\n        <div className=\"mt-4 flex flex-1 items-end gap-2\">\n          {scenario.bars.map((height, i) => (\n            <div key={i} className=\"flex flex-1 flex-col items-center gap-1.5\">\n              <div className=\"relative w-full\" style={{ height: 80 }}>\n                <m.div\n                  className={cn(\n                    \"absolute inset-x-0 bottom-0 rounded-t-md\",\n                    i === scenario.activeBar ? \"bg-tagline\" : \"bg-foreground\",\n                  )}\n                  style={{ transformOrigin: \"bottom\", height: \"100%\" }}\n                  initial={{ scaleY: 0 }}\n                  animate={{ scaleY: height / 100 }}\n                  transition={{\n                    duration: 0.6,\n                    delay: i * 0.05,\n                    ease: EASE_OUT,\n                  }}\n                  key={`${index}-${i}`}\n                />\n              </div>\n              <span\n                className={cn(\n                  \"font-medium text-[10px]\",\n                  i === scenario.activeBar ? \"text-gray-900\" : \"text-gray-400\",\n                )}\n              >\n                {DAYS[i]}\n              </span>\n            </div>\n          ))}\n        </div>\n      </div>\n    </LazyMotion>\n  )\n}\n"]}

package/dist/chunk-GZNLQE3I.js

@@ -0,0 +1,55 @@
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function timeAgo(date) {
+  const now = /* @__PURE__ */ new Date();
+  const then = new Date(date);
+  const diffMs = now.getTime() - then.getTime();
+  const diffMins = Math.floor(diffMs / 6e4);
+  if (diffMins < 60) return `${diffMins}m ago`;
+  const diffHrs = Math.floor(diffMins / 60);
+  if (diffHrs < 24) return `${diffHrs}h ago`;
+  const diffDays = Math.floor(diffHrs / 24);
+  if (diffDays < 30) return `${diffDays}d ago`;
+  const diffMonths = Math.floor(diffDays / 30);
+  return `${diffMonths}mo ago`;
+}
+
+export { __objRest, __spreadProps, __spreadValues, cn, timeAgo };
+//# sourceMappingURL=chunk-GZNLQE3I.js.map
+//# sourceMappingURL=chunk-GZNLQE3I.js.map

package/dist/chunk-GZNLQE3I.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;AAEO,SAAS,QAAQ,IAAA,EAAsB;AAC5C,EAAA,MAAM,GAAA,uBAAU,IAAA,EAAK;AACrB,EAAA,MAAM,IAAA,GAAO,IAAI,IAAA,CAAK,IAAI,CAAA;AAC1B,EAAA,MAAM,MAAA,GAAS,GAAA,CAAI,OAAA,EAAQ,GAAI,KAAK,OAAA,EAAQ;AAC5C,EAAA,MAAM,QAAA,GAAW,IAAA,CAAK,KAAA,CAAM,MAAA,GAAS,GAAK,CAAA;AAC1C,EAAA,IAAI,QAAA,GAAW,EAAA,EAAI,OAAO,CAAA,EAAG,QAAQ,CAAA,KAAA,CAAA;AACrC,EAAA,MAAM,OAAA,GAAU,IAAA,CAAK,KAAA,CAAM,QAAA,GAAW,EAAE,CAAA;AACxC,EAAA,IAAI,OAAA,GAAU,EAAA,EAAI,OAAO,CAAA,EAAG,OAAO,CAAA,KAAA,CAAA;AACnC,EAAA,MAAM,QAAA,GAAW,IAAA,CAAK,KAAA,CAAM,OAAA,GAAU,EAAE,CAAA;AACxC,EAAA,IAAI,QAAA,GAAW,EAAA,EAAI,OAAO,CAAA,EAAG,QAAQ,CAAA,KAAA,CAAA;AACrC,EAAA,MAAM,UAAA,GAAa,IAAA,CAAK,KAAA,CAAM,QAAA,GAAW,EAAE,CAAA;AAC3C,EAAA,OAAO,GAAG,UAAU,CAAA,MAAA,CAAA;AACtB","file":"chunk-GZNLQE3I.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n\nexport function timeAgo(date: string): string {\n  const now = new Date()\n  const then = new Date(date)\n  const diffMs = now.getTime() - then.getTime()\n  const diffMins = Math.floor(diffMs / 60000)\n  if (diffMins < 60) return `${diffMins}m ago`\n  const diffHrs = Math.floor(diffMins / 60)\n  if (diffHrs < 24) return `${diffHrs}h ago`\n  const diffDays = Math.floor(diffHrs / 24)\n  if (diffDays < 30) return `${diffDays}d ago`\n  const diffMonths = Math.floor(diffDays / 30)\n  return `${diffMonths}mo ago`\n}\n"]}