@mova-ui/react 0.1.0 → 0.4.1

package/dist/catalog/components/css-animations/yui-components/YuiUiKit2.js

@@ -0,0 +1,356 @@
+"use client";
+
+// .generated/catalog/components/css-animations/yui-components/YuiUiKit2.tsx
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  Edit3,
+  Trash2,
+  HelpCircle,
+  Download,
+  Check,
+  Layers,
+  Plus,
+  Minus,
+  Grid,
+  List,
+  MoreHorizontal,
+  LayoutGrid,
+  LayoutList
+} from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ContextMenuEditDelete({ theme = "dark" }) {
+  const [isOpen, setIsOpen] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center", children: [
+    /* @__PURE__ */ jsx(
+      motion.button,
+      {
+        whileTap: { scale: 0.95 },
+        onClick: () => setIsOpen(!isOpen),
+        className: `px-4 py-2 rounded-2xl border text-xs font-semibold shadow-sm cursor-pointer ${theme === "dark" ? "bg-[#181818] border-neutral-700 text-white" : "bg-white border-neutral-200 text-neutral-900"}`,
+        children: "Actions Menu"
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: { opacity: 0, scale: 0.88, y: -4 },
+        animate: { opacity: 1, scale: 1, y: 6 },
+        exit: { opacity: 0, scale: 0.88, y: -4 },
+        transition: { duration: 0.2 },
+        className: `absolute top-full z-30 w-32 p-1 rounded-2xl border shadow-xl flex flex-col gap-0.5 ${theme === "dark" ? "bg-[#181818] border-neutral-700" : "bg-white border-neutral-200"}`,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => setIsOpen(false),
+              className: `flex items-center gap-2 w-full text-left px-3 py-2 rounded-xl text-xs font-medium cursor-pointer border-0 ${theme === "dark" ? "text-white hover:bg-neutral-800" : "text-neutral-900 hover:bg-neutral-100"}`,
+              children: [
+                /* @__PURE__ */ jsx(Edit3, { className: "w-3.5 h-3.5" }),
+                /* @__PURE__ */ jsx("span", { children: "Edit" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => setIsOpen(false),
+              className: "flex items-center gap-2 w-full text-left px-3 py-2 rounded-xl text-xs font-medium text-rose-500 hover:bg-rose-500/10 cursor-pointer border-0",
+              children: [
+                /* @__PURE__ */ jsx(Trash2, { className: "w-3.5 h-3.5" }),
+                /* @__PURE__ */ jsx("span", { children: "Delete" })
+              ]
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+function QuestionTooltip({ theme = "dark" }) {
+  const [show, setShow] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center justify-center", children: [
+    /* @__PURE__ */ jsx(AnimatePresence, { children: show && /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: { opacity: 0, y: 6, scale: 0.9 },
+        animate: { opacity: 1, y: -6, scale: 1 },
+        exit: { opacity: 0, y: 4, scale: 0.9 },
+        transition: { type: "spring", bounce: 0.3, duration: 0.35 },
+        className: `absolute -top-9 px-3 py-1.5 rounded-xl border text-[11px] shadow-xl whitespace-nowrap z-20 pointer-events-none ${theme === "dark" ? "bg-[#222] border-neutral-700 text-neutral-200" : "bg-neutral-900 border-neutral-800 text-white"}`,
+        children: [
+          "Helpful tooltip preview text",
+          /* @__PURE__ */ jsx("div", { className: `absolute -bottom-1 left-1/2 -translate-x-1/2 w-2 h-2 rotate-45 border-r border-b ${theme === "dark" ? "bg-[#222] border-neutral-700" : "bg-neutral-900 border-neutral-800"}` })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      motion.button,
+      {
+        onMouseEnter: () => setShow(true),
+        onMouseLeave: () => setShow(false),
+        whileHover: { scale: 1.1 },
+        whileTap: { scale: 0.9 },
+        className: `w-10 h-10 rounded-full border flex items-center justify-center cursor-pointer shadow-md ${theme === "dark" ? "bg-[#1e1e1e] border-neutral-700 text-[#0a84ff]" : "bg-white border-neutral-200 text-[#0071e3]"}`,
+        children: /* @__PURE__ */ jsx(HelpCircle, { className: "w-5 h-5" })
+      }
+    )
+  ] });
+}
+function DownloadAnimatedIcons({ theme = "dark" }) {
+  const [isDownloading, setIsDownloading] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+    /* @__PURE__ */ jsx(
+      motion.button,
+      {
+        whileHover: { scale: 1.08 },
+        whileTap: { scale: 0.9 },
+        onClick: () => {
+          setIsDownloading(true);
+          setTimeout(() => setIsDownloading(false), 2e3);
+        },
+        className: `w-11 h-11 rounded-2xl border flex items-center justify-center shadow-md cursor-pointer ${theme === "dark" ? "bg-[#181818] border-neutral-700 text-white" : "bg-white border-neutral-200 text-neutral-900"}`,
+        children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            animate: isDownloading ? { y: [0, 4, 0] } : {},
+            transition: { repeat: Infinity, duration: 0.6 },
+            children: /* @__PURE__ */ jsx(Download, { className: "w-5 h-5 text-[#0a84ff]" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      motion.button,
+      {
+        whileHover: { scale: 1.08 },
+        whileTap: { scale: 0.9 },
+        className: `w-11 h-11 rounded-2xl border flex items-center justify-center shadow-md cursor-pointer ${isDownloading ? "bg-emerald-500/20 border-emerald-500/40 text-emerald-400" : theme === "dark" ? "bg-[#181818] border-neutral-700 text-neutral-300" : "bg-white border-neutral-200 text-neutral-700"}`,
+        children: isDownloading ? /* @__PURE__ */ jsx(Check, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx(Download, { className: "w-5 h-5" })
+      }
+    )
+  ] });
+}
+function PipModeIcons({ theme = "dark" }) {
+  const [isPip, setIsPip] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    motion.button,
+    {
+      whileHover: { scale: 1.05 },
+      whileTap: { scale: 0.92 },
+      onClick: () => setIsPip(!isPip),
+      className: `relative w-16 h-12 rounded-2xl border-2 flex items-center justify-center shadow-md cursor-pointer transition-colors ${isPip ? "bg-blue-500/20 border-blue-500/50 text-blue-400" : theme === "dark" ? "bg-[#1e1e1e] border-neutral-700 text-neutral-400" : "bg-white border-neutral-200 text-neutral-600"}`,
+      children: [
+        /* @__PURE__ */ jsx(Layers, { className: "w-5 h-5" }),
+        /* @__PURE__ */ jsx(AnimatePresence, { children: isPip && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { opacity: 0, scale: 0.5, x: 5, y: -5 },
+            animate: { opacity: 1, scale: 1, x: 0, y: 0 },
+            exit: { opacity: 0, scale: 0.5 },
+            className: "absolute bottom-1.5 right-1.5 w-4 h-3 rounded-sm bg-blue-500 border border-white shadow-sm"
+          }
+        ) })
+      ]
+    }
+  );
+}
+function SimplePlusMinusBtn({ theme = "dark" }) {
+  const [count, setCount] = useState(1);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      motion.button,
+      {
+        whileHover: { scale: 1.06 },
+        whileTap: { scale: 0.92 },
+        onClick: () => setCount(Math.max(0, count - 1)),
+        className: `w-9 h-9 rounded-xl border flex items-center justify-center shadow-sm cursor-pointer ${theme === "dark" ? "bg-neutral-900 border-neutral-700 text-neutral-400" : "bg-neutral-100 border-neutral-200 text-neutral-600"}`,
+        children: /* @__PURE__ */ jsx(Minus, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      motion.button,
+      {
+        whileHover: { scale: 1.06 },
+        whileTap: { scale: 0.92 },
+        onClick: () => setCount(count + 1),
+        className: `w-9 h-9 rounded-xl border flex items-center justify-center shadow-md cursor-pointer ${theme === "dark" ? "bg-neutral-200 border-white text-neutral-900" : "bg-neutral-900 border-neutral-900 text-white"}`,
+        children: /* @__PURE__ */ jsx(Plus, { className: "w-4 h-4" })
+      }
+    )
+  ] });
+}
+function SegmentedABTabs({ theme = "dark" }) {
+  const [tab, setTab] = useState("A");
+  return /* @__PURE__ */ jsx("div", { className: `relative flex items-center p-1 rounded-2xl border shadow-inner ${theme === "dark" ? "bg-[#181818] border-neutral-700" : "bg-neutral-100 border-neutral-200"}`, children: ["A", "B"].map((item) => {
+    const isSelected = tab === item;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setTab(item),
+        className: "relative px-6 py-2 rounded-xl text-xs font-bold cursor-pointer border-0 bg-transparent",
+        children: [
+          isSelected && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              layoutId: "ab-tab-pill",
+              transition: { type: "spring", bounce: 0.2, duration: 0.4 },
+              className: `absolute inset-0 rounded-xl shadow-md ${theme === "dark" ? "bg-neutral-200" : "bg-neutral-900"}`
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: `relative z-10 ${isSelected ? theme === "dark" ? "text-neutral-900" : "text-white" : theme === "dark" ? "text-neutral-500" : "text-neutral-400"}`, children: item })
+        ]
+      },
+      item
+    );
+  }) });
+}
+function QuantityCounter({ theme = "dark" }) {
+  const [num, setNum] = useState(3);
+  return /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-3 px-3 py-1.5 rounded-full border shadow-sm ${theme === "dark" ? "bg-[#181818] border-neutral-700" : "bg-white border-neutral-200"}`, children: [
+    /* @__PURE__ */ jsx(
+      motion.button,
+      {
+        whileTap: { scale: 0.88 },
+        onClick: () => setNum(Math.max(1, num - 1)),
+        className: "w-7 h-7 rounded-full bg-neutral-500/15 flex items-center justify-center cursor-pointer border-0 text-inherit hover:bg-neutral-500/25",
+        children: /* @__PURE__ */ jsx(Minus, { className: "w-3.5 h-3.5" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      motion.span,
+      {
+        initial: { scale: 0.8, opacity: 0.5 },
+        animate: { scale: 1, opacity: 1 },
+        className: "text-xs font-mono font-bold w-4 text-center",
+        children: num
+      },
+      num
+    ),
+    /* @__PURE__ */ jsx(
+      motion.button,
+      {
+        whileTap: { scale: 0.88 },
+        onClick: () => setNum(num + 1),
+        className: "w-7 h-7 rounded-full bg-neutral-500/15 flex items-center justify-center cursor-pointer border-0 text-inherit hover:bg-neutral-500/25",
+        children: /* @__PURE__ */ jsx(Plus, { className: "w-3.5 h-3.5" })
+      }
+    )
+  ] });
+}
+function ListColumnToggle({ theme = "dark" }) {
+  const [view, setView] = useState("grid");
+  return /* @__PURE__ */ jsxs(
+    motion.button,
+    {
+      whileTap: { scale: 0.95 },
+      onClick: () => setView(view === "grid" ? "list" : "grid"),
+      className: `flex items-center gap-2 px-4 py-2.5 rounded-2xl border text-xs font-semibold shadow-sm cursor-pointer transition-colors ${theme === "dark" ? "bg-[#181818] border-neutral-700 text-white hover:bg-neutral-800" : "bg-white border-neutral-200 text-neutral-900 hover:bg-neutral-50"}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { rotate: -90, opacity: 0 },
+            animate: { rotate: 0, opacity: 1 },
+            transition: { duration: 0.2 },
+            children: view === "grid" ? /* @__PURE__ */ jsx(Grid, { className: "w-4 h-4 text-[#0a84ff]" }) : /* @__PURE__ */ jsx(List, { className: "w-4 h-4 text-[#0a84ff]" })
+          },
+          view
+        ),
+        /* @__PURE__ */ jsx("span", { children: view === "grid" ? "Grid View" : "List View" })
+      ]
+    }
+  );
+}
+function FollowCheckButton({ theme = "dark" }) {
+  const [following, setFollowing] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    motion.button,
+    {
+      whileHover: { scale: 1.05 },
+      whileTap: { scale: 0.94 },
+      onClick: () => setFollowing(!following),
+      className: `flex items-center gap-2 px-5 py-2.5 rounded-full border text-xs font-semibold shadow-md transition-all cursor-pointer ${following ? theme === "dark" ? "bg-blue-500/20 border-blue-500/40 text-blue-300" : "bg-blue-50 border-blue-200 text-blue-700" : theme === "dark" ? "bg-neutral-200 border-white text-neutral-900" : "bg-neutral-900 border-neutral-900 text-white"}`,
+      children: [
+        following ? /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 text-[#0a84ff]" }) : /* @__PURE__ */ jsx(Plus, { className: "w-3.5 h-3.5" }),
+        /* @__PURE__ */ jsx("span", { children: following ? "Following" : "+ Follow" })
+      ]
+    }
+  );
+}
+function MenuDotsExpand({ theme = "dark" }) {
+  const [pulse, setPulse] = useState(false);
+  return /* @__PURE__ */ jsx(
+    motion.button,
+    {
+      whileTap: { scale: 0.88 },
+      onClick: () => {
+        setPulse(true);
+        setTimeout(() => setPulse(false), 500);
+      },
+      className: `w-11 h-11 rounded-2xl border flex items-center justify-center shadow-md cursor-pointer ${theme === "dark" ? "bg-[#181818] border-neutral-700 text-white" : "bg-white border-neutral-200 text-neutral-900"}`,
+      children: /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          animate: pulse ? { scale: [1, 1.3, 1] } : {},
+          transition: { duration: 0.3 },
+          children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "w-5 h-5 text-neutral-400 hover:text-white" })
+        }
+      )
+    }
+  );
+}
+function CompactModeSwitch({ theme = "dark" }) {
+  const [mode, setMode] = useState("grid");
+  return /* @__PURE__ */ jsxs("div", { className: `relative flex items-center p-1 rounded-2xl border ${theme === "dark" ? "bg-[#181818] border-neutral-700" : "bg-neutral-100 border-neutral-200"}`, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setMode("grid"),
+        className: "relative p-2 rounded-xl cursor-pointer border-0 bg-transparent",
+        children: [
+          mode === "grid" && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              layoutId: "mode-switch-pill",
+              transition: { type: "spring", bounce: 0.2, duration: 0.35 },
+              className: `absolute inset-0 rounded-xl ${theme === "dark" ? "bg-neutral-700" : "bg-white shadow-sm"}`
+            }
+          ),
+          /* @__PURE__ */ jsx(LayoutGrid, { className: `relative z-10 w-4 h-4 ${mode === "grid" ? theme === "dark" ? "text-white" : "text-black" : "text-neutral-400"}` })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setMode("list"),
+        className: "relative p-2 rounded-xl cursor-pointer border-0 bg-transparent",
+        children: [
+          mode === "list" && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              layoutId: "mode-switch-pill",
+              transition: { type: "spring", bounce: 0.2, duration: 0.35 },
+              className: `absolute inset-0 rounded-xl ${theme === "dark" ? "bg-neutral-700" : "bg-white shadow-sm"}`
+            }
+          ),
+          /* @__PURE__ */ jsx(LayoutList, { className: `relative z-10 w-4 h-4 ${mode === "list" ? theme === "dark" ? "text-white" : "text-black" : "text-neutral-400"}` })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  CompactModeSwitch,
+  ContextMenuEditDelete,
+  DownloadAnimatedIcons,
+  FollowCheckButton,
+  ListColumnToggle,
+  MenuDotsExpand,
+  PipModeIcons,
+  QuantityCounter,
+  QuestionTooltip,
+  SegmentedABTabs,
+  SimplePlusMinusBtn
+};

package/dist/catalog/components/dither-charts/ActivityHeatmap.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare function ActivityHeatmap({ theme, compact }: {
+    theme?: 'dark' | 'light';
+    compact?: boolean;
+}): React.JSX.Element;

package/dist/catalog/components/dither-charts/ActivityHeatmap.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  ActivityHeatmap
+} from "../../../catalog-chunks/chunk-62CFYJEA.js";
+import "../../../catalog-chunks/chunk-GDCQNKP7.js";
+export {
+  ActivityHeatmap
+};

package/dist/catalog/components/dither-charts/ChartCard.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function ChartCard(): React.JSX.Element;

package/dist/catalog/components/dither-charts/ChartCard.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  ChartCard
+} from "../../../catalog-chunks/chunk-BSR45QIS.js";
+import "../../../catalog-chunks/chunk-KRXJK3FG.js";
+export {
+  ChartCard
+};

package/dist/catalog/components/dither-charts/DeviceUsageChart.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare function DeviceUsageChart({ theme, compact }: {
+    theme?: 'dark' | 'light';
+    compact?: boolean;
+}): React.JSX.Element;

package/dist/catalog/components/dither-charts/DeviceUsageChart.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  DeviceUsageChart
+} from "../../../catalog-chunks/chunk-B64DVBSK.js";
+import "../../../catalog-chunks/chunk-GDCQNKP7.js";
+export {
+  DeviceUsageChart
+};

package/dist/catalog/components/dither-charts/DitherBarChart.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare function DitherBarChart({ theme, compact }: {
+    theme?: 'dark' | 'light';
+    compact?: boolean;
+}): React.JSX.Element;

package/dist/catalog/components/dither-charts/DitherBarChart.js

@@ -0,0 +1,148 @@
+"use client";
+
+// .generated/catalog/components/dither-charts/DitherBarChart.tsx
+import { useEffect, useRef, useState, useMemo } from "react";
+import { motion, AnimatePresence, useSpring, useTransform, useReducedMotion } from "framer-motion";
+import { BarChart3 } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PERIODS = [
+  { name: "7D", mult: 1 },
+  { name: "30D", mult: 3.8 },
+  { name: "90D", mult: 11.2 },
+  { name: "1Y", mult: 42.5 }
+];
+var LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+var BASE_VALUES = [42, 68, 55, 92, 85, 110, 74];
+function AnimatedValue({ value }) {
+  const prefersReducedMotion = useReducedMotion();
+  const spring = useSpring(value, { stiffness: 190, damping: 27, mass: 0.7 });
+  const display = useTransform(spring, (current) => Math.round(current).toLocaleString("en-US"));
+  useEffect(() => {
+    if (prefersReducedMotion) spring.jump(value);
+    else spring.set(value);
+  }, [value, spring, prefersReducedMotion]);
+  return /* @__PURE__ */ jsx(motion.span, { className: "tabular-nums", children: display });
+}
+function DitherBarChart({ theme = "dark", compact = false }) {
+  const [periodIdx, setPeriodIdx] = useState(1);
+  const [hoveredIdx, setHoveredIdx] = useState(null);
+  const canvasRef = useRef(null);
+  const timeRef = useRef(0);
+  const requestRef = useRef(void 0);
+  const period = PERIODS[periodIdx];
+  const { data, total, maxVal } = useMemo(() => {
+    const raw = BASE_VALUES.map((v) => Math.round(v * period.mult));
+    const tot = raw.reduce((a, b) => a + b, 0);
+    const mx = Math.max(...raw);
+    return { data: raw, total: tot, maxVal: mx };
+  }, [periodIdx]);
+  useEffect(() => {
+    const draw = () => {
+      timeRef.current += 0.03;
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+      const rect = canvas.getBoundingClientRect();
+      if (canvas.width !== rect.width * dpr || canvas.height !== rect.height * dpr) {
+        canvas.width = rect.width * dpr;
+        canvas.height = rect.height * dpr;
+      }
+      ctx.save();
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.scale(dpr, dpr);
+      const w = rect.width;
+      const h = rect.height;
+      const colW = w / data.length;
+      const barW = Math.min(colW * 0.55, 36);
+      const cell = Math.max(3, Math.round(w / 160));
+      data.forEach((val, i) => {
+        const cx = i * colW + colW / 2;
+        const x0 = cx - barW / 2;
+        const barH = val / maxVal * (h * 0.82);
+        const yTop = h - barH;
+        const isHovered = hoveredIdx === i;
+        for (let bx = Math.floor(x0); bx < Math.ceil(x0 + barW); bx += cell) {
+          for (let by = Math.floor(yTop); by < h; by += cell) {
+            const distToTop = (by - yTop) / barH;
+            const wave = Math.sin(bx * 0.08 + timeRef.current * 2) * 0.1;
+            const density = 0.4 + 0.6 * (1 - distToTop) + wave;
+            if (Math.random() < density || isHovered) {
+              ctx.fillStyle = isHovered ? "#FFFFFF" : "rgba(255, 255, 255, 0.75)";
+              const sz = cell * (isHovered ? 0.95 : 0.75);
+              const offset = (cell - sz) / 2;
+              ctx.fillRect(bx + offset, by + offset, sz, sz);
+            }
+          }
+        }
+      });
+      ctx.restore();
+      requestRef.current = requestAnimationFrame(draw);
+    };
+    requestRef.current = requestAnimationFrame(draw);
+    return () => {
+      if (requestRef.current) cancelAnimationFrame(requestRef.current);
+    };
+  }, [data, maxVal, hoveredIdx]);
+  return /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col items-center gap-3 font-sans", children: [
+    /* @__PURE__ */ jsxs("div", { className: `w-full rounded-2xl p-4 flex flex-col gap-3 shadow-lg border transition-colors ${theme === "dark" ? "bg-[#181818] border-white/10 text-white" : "bg-white border-neutral-200 text-black"}`, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(BarChart3, { className: "w-4 h-4 text-neutral-400" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-neutral-400", children: "Dither Vertical Bars" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-emerald-400", children: "\u2191 18.4%" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold tracking-tight", children: /* @__PURE__ */ jsx(AnimatedValue, { value: total }) }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-neutral-400", children: "total events" })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "relative h-[160px] w-full touch-none cursor-pointer",
+          onPointerMove: (e) => {
+            const rect = e.currentTarget.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const colW = rect.width / data.length;
+            const idx = Math.min(Math.max(0, Math.floor(x / colW)), data.length - 1);
+            setHoveredIdx(idx);
+          },
+          onPointerLeave: () => setHoveredIdx(null),
+          children: [
+            /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "w-full h-full pointer-events-none" }),
+            /* @__PURE__ */ jsx(AnimatePresence, { children: hoveredIdx !== null && /* @__PURE__ */ jsxs(
+              motion.div,
+              {
+                initial: { opacity: 0, scale: 0.9 },
+                animate: { opacity: 1, scale: 1 },
+                exit: { opacity: 0, scale: 0.9 },
+                className: "absolute bg-neutral-900 border border-neutral-700 text-white rounded-lg px-2.5 py-1 text-xs font-semibold shadow-xl pointer-events-none transform -translate-x-1/2 -translate-y-full top-2",
+                style: { left: `${(hoveredIdx + 0.5) / data.length * 100}%` },
+                children: [
+                  LABELS[hoveredIdx],
+                  ": ",
+                  data[hoveredIdx]
+                ]
+              }
+            ) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex justify-between text-[11px] text-neutral-400 px-1 pt-1", children: LABELS.map((lbl, idx) => /* @__PURE__ */ jsx("span", { className: hoveredIdx === idx ? "text-white font-bold" : "", children: lbl }, lbl)) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "inline-flex bg-neutral-800/60 rounded-lg p-1 gap-1 border border-white/10", children: PERIODS.map((p, idx) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setPeriodIdx(idx),
+        className: `px-3 py-1 rounded-md text-xs font-semibold transition-all ${periodIdx === idx ? "bg-white text-black shadow-sm" : "text-neutral-400 hover:text-white"}`,
+        children: p.name
+      },
+      p.name
+    )) })
+  ] });
+}
+export {
+  DitherBarChart
+};

package/dist/catalog/components/dither-charts/DitherBook.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React from 'react';
+export interface BookPage {
+    id: string;
+    title: string;
+    src: string;
+}
+export interface BookSettings {
+    padding: number;
+    imageRadius: number;
+    creaseOpacity: number;
+    paperColor: string;
+    shadowIntensity: number;
+}
+export declare const PAGES: BookPage[];
+export declare function Book({ pages, currentIndex, isFlipping, direction, onFlipComplete, settings, isIntro, onPrevPage, onNextPage }: any): React.JSX.Element;
+export declare function DitherBook({ theme, compact }: {
+    theme?: 'dark' | 'light';
+    compact?: boolean;
+}): React.JSX.Element;