@farzadbagheri/fb-components 0.1.0

package/dist/chunk-UWQ5QNE3.cjs

@@ -0,0 +1,311 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/backgrounds/PredictiveArc.tsx
+function PredictiveArc({
+  color = "#9b7cff",
+  background = "#0d0d11",
+  size = 70,
+  thickness = 3,
+  glow = 16,
+  animated = true,
+  className = ""
+}) {
+  const containerRef = react.useRef(
+    null
+  );
+  react.useEffect(() => {
+    const element = containerRef.current;
+    if (!element) {
+      return;
+    }
+    element.style.setProperty(
+      "--predictive-arc-color",
+      color
+    );
+    element.style.setProperty(
+      "--predictive-arc-background",
+      background
+    );
+    element.style.setProperty(
+      "--predictive-arc-size",
+      `${size}%`
+    );
+    element.style.setProperty(
+      "--predictive-arc-thickness",
+      `${thickness}px`
+    );
+    element.style.setProperty(
+      "--predictive-arc-glow",
+      `${glow}px`
+    );
+  }, [
+    color,
+    background,
+    size,
+    thickness,
+    glow
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `fb-predictive-arc ${animated ? "fb-predictive-arc--animated" : ""} ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fb-predictive-arc__line fb-predictive-arc__line--outer" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fb-predictive-arc__line fb-predictive-arc__line--inner" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fb-predictive-arc__point fb-predictive-arc__point--left" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fb-predictive-arc__point fb-predictive-arc__point--right" })
+      ]
+    }
+  );
+}
+function SignalParticles({
+  color = "#b99cff",
+  background = "#0d0d11",
+  density = 30,
+  size = 3,
+  speed = 1,
+  animated = true,
+  className = ""
+}) {
+  const particles = react.useMemo(
+    () => Array.from({
+      length: Math.max(
+        1,
+        density
+      )
+    }).map(
+      (_, index) => ({
+        id: index,
+        left: index * 37 % 100,
+        top: index * 53 % 100,
+        delay: index % 10 * 0.12
+      })
+    ),
+    [
+      density
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `fb-signal-particles ${className}`,
+      style: {
+        background
+      },
+      children: particles.map(
+        (particle) => /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: animated ? "fb-signal-particles__particle fb-signal-particles__particle--animated" : "fb-signal-particles__particle",
+            style: {
+              left: `${particle.left}%`,
+              top: `${particle.top}%`,
+              width: size,
+              height: size,
+              background: color,
+              animationDuration: `${3 / speed}s`,
+              animationDelay: `${particle.delay}s`,
+              boxShadow: `0 0 ${size * 4}px ${color}`
+            }
+          },
+          particle.id
+        )
+      )
+    }
+  );
+}
+function DotMatrix({
+  color = "#9b7cff",
+  background = "#0d0d11",
+  dotSize = 2,
+  gap = 20,
+  opacity = 0.8,
+  fade = true,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `fb-dot-matrix ${fade ? "fb-dot-matrix--fade" : ""} ${className}`,
+      style: {
+        backgroundColor: background,
+        opacity,
+        backgroundImage: `radial-gradient(
+            circle,
+            ${color} ${dotSize}px,
+            transparent ${dotSize + 0.8}px
+          )`,
+        backgroundSize: `${gap}px ${gap}px`
+      }
+    }
+  );
+}
+function GradientMesh({
+  primary = "#654cff",
+  secondary = "#3c6dff",
+  accent = "#a44cff",
+  background = "#0d0d11",
+  blur = 35,
+  speed = 8,
+  animated = true,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `fb-gradient-mesh ${className}`,
+      style: {
+        background
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: `fb-gradient-mesh__layer ${animated ? "fb-gradient-mesh__layer--animated" : ""}`,
+          style: {
+            background: `
+            radial-gradient(
+              circle at 30% 30%,
+              ${primary},
+              transparent 35%
+            ),
+            radial-gradient(
+              circle at 65% 60%,
+              ${secondary},
+              transparent 32%
+            ),
+            radial-gradient(
+              circle at 50% 50%,
+              ${accent},
+              transparent 40%
+            )
+          `,
+            filter: `blur(${blur}px)`,
+            animationDuration: `${speed}s`
+          }
+        }
+      )
+    }
+  );
+}
+function AuroraGrid({
+  gridColor = "#765cff",
+  auroraColor = "#7c5cff",
+  background = "#09090d",
+  gridSize = 34,
+  glow = 55,
+  speed = 8,
+  animated = true,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `fb-aurora-grid ${className}`,
+      style: {
+        background
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `fb-aurora-grid__grid ${animated ? "fb-aurora-grid__grid--animated" : ""}`,
+            style: {
+              backgroundImage: `
+            linear-gradient(
+              ${gridColor}33 1px,
+              transparent 1px
+            ),
+            linear-gradient(
+              90deg,
+              ${gridColor}33 1px,
+              transparent 1px
+            )
+          `,
+              backgroundSize: `${gridSize}px ${gridSize}px`,
+              animationDuration: `${speed}s`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `fb-aurora-grid__glow ${animated ? "fb-aurora-grid__glow--animated" : ""}`,
+            style: {
+              background: auroraColor,
+              filter: `blur(${glow}px)`,
+              animationDuration: `${speed * 0.8}s`
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function NoiseField({
+  color = "#8f73ff",
+  background = "#0b0b0f",
+  opacity = 0.3,
+  scale = 1,
+  speed = 6,
+  animated = true,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `fb-noise-field ${className}`,
+      style: {
+        background
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `fb-noise-field__blob fb-noise-field__blob--one ${animated ? "fb-noise-field__blob--animated" : ""}`,
+            style: {
+              background: color,
+              opacity,
+              transform: `scale(${scale})`,
+              animationDuration: `${speed}s`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `fb-noise-field__blob fb-noise-field__blob--two ${animated ? "fb-noise-field__blob--animated" : ""}`,
+            style: {
+              background: color,
+              opacity: opacity * 0.7,
+              transform: `scale(${scale * 0.8})`,
+              animationDuration: `${speed * 1.2}s`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `fb-noise-field__texture ${animated ? "fb-noise-field__texture--animated" : ""}`,
+            style: {
+              opacity: opacity * 0.5,
+              animationDuration: `${speed * 0.85}s`
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.AuroraGrid = AuroraGrid;
+exports.DotMatrix = DotMatrix;
+exports.GradientMesh = GradientMesh;
+exports.NoiseField = NoiseField;
+exports.PredictiveArc = PredictiveArc;
+exports.SignalParticles = SignalParticles;
+//# sourceMappingURL=chunk-UWQ5QNE3.cjs.map
+//# sourceMappingURL=chunk-UWQ5QNE3.cjs.map

package/dist/chunk-UWQ5QNE3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/backgrounds/PredictiveArc.tsx","../src/backgrounds/SignalParticles.tsx","../src/backgrounds/DotMatrix.tsx","../src/backgrounds/GradientMesh.tsx","../src/backgrounds/AuroraGrid.tsx","../src/backgrounds/NoiseField.tsx"],"names":["useRef","useEffect","jsxs","jsx","useMemo"],"mappings":"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","file":"chunk-UWQ5QNE3.cjs","sourcesContent":["import {\r\n  useEffect,\r\n  useRef,\r\n} from \"react\";\r\nimport \"./PredictiveArc.css\";\r\n\r\nexport interface PredictiveArcProps {\r\n  color?: string;\r\n  background?: string;\r\n  size?: number;\r\n  thickness?: number;\r\n  glow?: number;\r\n  animated?: boolean;\r\n  className?: string;\r\n}\r\n\r\nexport function PredictiveArc({\r\n  color = \"#9b7cff\",\r\n  background = \"#0d0d11\",\r\n  size = 70,\r\n  thickness = 3,\r\n  glow = 16,\r\n  animated = true,\r\n  className = \"\",\r\n}: PredictiveArcProps) {\r\n  const containerRef =\r\n    useRef<HTMLDivElement>(\r\n      null\r\n    );\r\n\r\n  useEffect(() => {\r\n    const element =\r\n      containerRef.current;\r\n\r\n    if (!element) {\r\n      return;\r\n    }\r\n\r\n    element.style.setProperty(\r\n      \"--predictive-arc-color\",\r\n      color\r\n    );\r\n\r\n    element.style.setProperty(\r\n      \"--predictive-arc-background\",\r\n      background\r\n    );\r\n\r\n    element.style.setProperty(\r\n      \"--predictive-arc-size\",\r\n      `${size}%`\r\n    );\r\n\r\n    element.style.setProperty(\r\n      \"--predictive-arc-thickness\",\r\n      `${thickness}px`\r\n    );\r\n\r\n    element.style.setProperty(\r\n      \"--predictive-arc-glow\",\r\n      `${glow}px`\r\n    );\r\n  }, [\r\n    color,\r\n    background,\r\n    size,\r\n    thickness,\r\n    glow,\r\n  ]);\r\n\r\n  return (\r\n    <div\r\n      ref={containerRef}\r\n      className={`fb-predictive-arc ${\r\n        animated\r\n          ? \"fb-predictive-arc--animated\"\r\n          : \"\"\r\n      } ${className}`}\r\n    >\r\n      <div className=\"fb-predictive-arc__line fb-predictive-arc__line--outer\" />\r\n\r\n      <div className=\"fb-predictive-arc__line fb-predictive-arc__line--inner\" />\r\n\r\n      <span className=\"fb-predictive-arc__point fb-predictive-arc__point--left\" />\r\n\r\n      <span className=\"fb-predictive-arc__point fb-predictive-arc__point--right\" />\r\n    </div>\r\n  );\r\n}","import {\r\n  useMemo,\r\n} from \"react\";\r\n\r\nimport \"./SignalParticles.css\";\r\n\r\nexport interface SignalParticlesProps {\r\n  color?: string;\r\n  background?: string;\r\n  density?: number;\r\n  size?: number;\r\n  speed?: number;\r\n  animated?: boolean;\r\n  className?: string;\r\n}\r\n\r\nexport function SignalParticles({\r\n  color = \"#b99cff\",\r\n  background = \"#0d0d11\",\r\n  density = 30,\r\n  size = 3,\r\n  speed = 1,\r\n  animated = true,\r\n  className = \"\",\r\n}: SignalParticlesProps) {\r\n  const particles =\r\n    useMemo(\r\n      () =>\r\n        Array.from({\r\n          length:\r\n            Math.max(\r\n              1,\r\n              density\r\n            ),\r\n        }).map(\r\n          (\r\n            _,\r\n            index\r\n          ) => ({\r\n            id:\r\n              index,\r\n\r\n            left:\r\n              (index *\r\n                37) %\r\n              100,\r\n\r\n            top:\r\n              (index *\r\n                53) %\r\n              100,\r\n\r\n            delay:\r\n              (index %\r\n                10) *\r\n              0.12,\r\n          })\r\n        ),\r\n      [\r\n        density,\r\n      ]\r\n    );\r\n\r\n  return (\r\n    <div\r\n      className={`fb-signal-particles ${className}`}\r\n      style={{\r\n        background,\r\n      }}\r\n    >\r\n      {particles.map(\r\n        (\r\n          particle\r\n        ) => (\r\n          <span\r\n            key={\r\n              particle.id\r\n            }\r\n            className={\r\n              animated\r\n                ? \"fb-signal-particles__particle fb-signal-particles__particle--animated\"\r\n                : \"fb-signal-particles__particle\"\r\n            }\r\n            style={{\r\n              left:\r\n                `${particle.left}%`,\r\n\r\n              top:\r\n                `${particle.top}%`,\r\n\r\n              width:\r\n                size,\r\n\r\n              height:\r\n                size,\r\n\r\n              background:\r\n                color,\r\n\r\n              animationDuration:\r\n                `${3 / speed}s`,\r\n\r\n              animationDelay:\r\n                `${particle.delay}s`,\r\n\r\n              boxShadow:\r\n                `0 0 ${size * 4}px ${color}`,\r\n            }}\r\n          />\r\n        )\r\n      )}\r\n    </div>\r\n  );\r\n}","import \"./DotMatrix.css\";\r\n\r\nexport interface DotMatrixProps {\r\n  color?: string;\r\n  background?: string;\r\n  dotSize?: number;\r\n  gap?: number;\r\n  opacity?: number;\r\n  fade?: boolean;\r\n  className?: string;\r\n}\r\n\r\nexport function DotMatrix({\r\n  color = \"#9b7cff\",\r\n  background = \"#0d0d11\",\r\n  dotSize = 2,\r\n  gap = 20,\r\n  opacity = 0.8,\r\n  fade = true,\r\n  className = \"\",\r\n}: DotMatrixProps) {\r\n  return (\r\n    <div\r\n      className={`fb-dot-matrix ${\r\n        fade\r\n          ? \"fb-dot-matrix--fade\"\r\n          : \"\"\r\n      } ${className}`}\r\n      style={{\r\n        backgroundColor:\r\n          background,\r\n\r\n        opacity,\r\n\r\n        backgroundImage:\r\n          `radial-gradient(\r\n            circle,\r\n            ${color} ${dotSize}px,\r\n            transparent ${\r\n              dotSize +\r\n              0.8\r\n            }px\r\n          )`,\r\n\r\n        backgroundSize:\r\n          `${gap}px ${gap}px`,\r\n      }}\r\n    />\r\n  );\r\n}","import \"./GradientMesh.css\";\r\n\r\nexport interface GradientMeshProps {\r\n  primary?: string;\r\n  secondary?: string;\r\n  accent?: string;\r\n  background?: string;\r\n  blur?: number;\r\n  speed?: number;\r\n  animated?: boolean;\r\n  className?: string;\r\n}\r\n\r\nexport function GradientMesh({\r\n  primary = \"#654cff\",\r\n  secondary = \"#3c6dff\",\r\n  accent = \"#a44cff\",\r\n  background = \"#0d0d11\",\r\n  blur = 35,\r\n  speed = 8,\r\n  animated = true,\r\n  className = \"\",\r\n}: GradientMeshProps) {\r\n  return (\r\n    <div\r\n      className={`fb-gradient-mesh ${className}`}\r\n      style={{\r\n        background,\r\n      }}\r\n    >\r\n      <div\r\n        className={`fb-gradient-mesh__layer ${\r\n          animated\r\n            ? \"fb-gradient-mesh__layer--animated\"\r\n            : \"\"\r\n        }`}\r\n        style={{\r\n          background: `\r\n            radial-gradient(\r\n              circle at 30% 30%,\r\n              ${primary},\r\n              transparent 35%\r\n            ),\r\n            radial-gradient(\r\n              circle at 65% 60%,\r\n              ${secondary},\r\n              transparent 32%\r\n            ),\r\n            radial-gradient(\r\n              circle at 50% 50%,\r\n              ${accent},\r\n              transparent 40%\r\n            )\r\n          `,\r\n\r\n          filter:\r\n            `blur(${blur}px)`,\r\n\r\n          animationDuration:\r\n            `${speed}s`,\r\n        }}\r\n      />\r\n    </div>\r\n  );\r\n}","import \"./AuroraGrid.css\";\r\n\r\nexport interface AuroraGridProps {\r\n  gridColor?: string;\r\n  auroraColor?: string;\r\n  background?: string;\r\n  gridSize?: number;\r\n  glow?: number;\r\n  speed?: number;\r\n  animated?: boolean;\r\n  className?: string;\r\n}\r\n\r\nexport function AuroraGrid({\r\n  gridColor = \"#765cff\",\r\n  auroraColor = \"#7c5cff\",\r\n  background = \"#09090d\",\r\n  gridSize = 34,\r\n  glow = 55,\r\n  speed = 8,\r\n  animated = true,\r\n  className = \"\",\r\n}: AuroraGridProps) {\r\n  return (\r\n    <div\r\n      className={`fb-aurora-grid ${className}`}\r\n      style={{\r\n        background,\r\n      }}\r\n    >\r\n      <div\r\n        className={`fb-aurora-grid__grid ${\r\n          animated\r\n            ? \"fb-aurora-grid__grid--animated\"\r\n            : \"\"\r\n        }`}\r\n        style={{\r\n          backgroundImage: `\r\n            linear-gradient(\r\n              ${gridColor}33 1px,\r\n              transparent 1px\r\n            ),\r\n            linear-gradient(\r\n              90deg,\r\n              ${gridColor}33 1px,\r\n              transparent 1px\r\n            )\r\n          `,\r\n\r\n          backgroundSize:\r\n            `${gridSize}px ${gridSize}px`,\r\n\r\n          animationDuration:\r\n            `${speed}s`,\r\n        }}\r\n      />\r\n\r\n      <div\r\n        className={`fb-aurora-grid__glow ${\r\n          animated\r\n            ? \"fb-aurora-grid__glow--animated\"\r\n            : \"\"\r\n        }`}\r\n        style={{\r\n          background:\r\n            auroraColor,\r\n\r\n          filter:\r\n            `blur(${glow}px)`,\r\n\r\n          animationDuration:\r\n            `${speed * 0.8}s`,\r\n        }}\r\n      />\r\n    </div>\r\n  );\r\n}","import \"./NoiseField.css\";\r\n\r\nexport interface NoiseFieldProps {\r\n  color?: string;\r\n  background?: string;\r\n  opacity?: number;\r\n  scale?: number;\r\n  speed?: number;\r\n  animated?: boolean;\r\n  className?: string;\r\n}\r\n\r\nexport function NoiseField({\r\n  color = \"#8f73ff\",\r\n  background = \"#0b0b0f\",\r\n  opacity = 0.3,\r\n  scale = 1,\r\n  speed = 6,\r\n  animated = true,\r\n  className = \"\",\r\n}: NoiseFieldProps) {\r\n  return (\r\n    <div\r\n      className={`fb-noise-field ${className}`}\r\n      style={{\r\n        background,\r\n      }}\r\n    >\r\n      <div\r\n        className={`fb-noise-field__blob fb-noise-field__blob--one ${\r\n          animated\r\n            ? \"fb-noise-field__blob--animated\"\r\n            : \"\"\r\n        }`}\r\n        style={{\r\n          background:\r\n            color,\r\n\r\n          opacity,\r\n\r\n          transform:\r\n            `scale(${scale})`,\r\n\r\n          animationDuration:\r\n            `${speed}s`,\r\n        }}\r\n      />\r\n\r\n      <div\r\n        className={`fb-noise-field__blob fb-noise-field__blob--two ${\r\n          animated\r\n            ? \"fb-noise-field__blob--animated\"\r\n            : \"\"\r\n        }`}\r\n        style={{\r\n          background:\r\n            color,\r\n\r\n          opacity:\r\n            opacity * 0.7,\r\n\r\n          transform:\r\n            `scale(${scale * 0.8})`,\r\n\r\n          animationDuration:\r\n            `${speed * 1.2}s`,\r\n        }}\r\n      />\r\n\r\n      <div\r\n        className={`fb-noise-field__texture ${\r\n          animated\r\n            ? \"fb-noise-field__texture--animated\"\r\n            : \"\"\r\n        }`}\r\n        style={{\r\n          opacity:\r\n            opacity * 0.5,\r\n\r\n          animationDuration:\r\n            `${speed * 0.85}s`,\r\n        }}\r\n      />\r\n    </div>\r\n  );\r\n}"]}

package/dist/chunk-WDUETPNG.js

@@ -0,0 +1,256 @@
+import { useState, useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/data/AnimatedCounter.tsx
+function AnimatedCounter({
+  value = 128,
+  duration = 1.5,
+  color = "#ffffff",
+  accent = "#9b7cff",
+  fontSize = 72,
+  prefix = "",
+  suffix = "K",
+  label = "ACTIVE USERS",
+  delta = "+18.4%",
+  decimals = 0,
+  className = "",
+  style,
+  ...props
+}) {
+  const [
+    displayed,
+    setDisplayed
+  ] = useState(0);
+  const frameRef = useRef(
+    null
+  );
+  useEffect(() => {
+    const start = performance.now();
+    const total = Math.max(
+      duration,
+      0.01
+    ) * 1e3;
+    function animate(now) {
+      const progress = Math.min(
+        (now - start) / total,
+        1
+      );
+      const eased = 1 - Math.pow(
+        1 - progress,
+        3
+      );
+      setDisplayed(
+        value * eased
+      );
+      if (progress < 1) {
+        frameRef.current = requestAnimationFrame(
+          animate
+        );
+      }
+    }
+    frameRef.current = requestAnimationFrame(
+      animate
+    );
+    return () => {
+      if (frameRef.current !== null) {
+        cancelAnimationFrame(
+          frameRef.current
+        );
+      }
+    };
+  }, [
+    value,
+    duration
+  ]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      className: `fb-animated-counter ${className}`,
+      style: {
+        ...style,
+        color,
+        ["--fb-counter-accent"]: accent,
+        ["--fb-counter-size"]: `${fontSize}px`
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "fb-animated-counter__label", children: label }),
+        /* @__PURE__ */ jsxs("strong", { children: [
+          prefix,
+          displayed.toLocaleString(
+            void 0,
+            {
+              minimumFractionDigits: decimals,
+              maximumFractionDigits: decimals
+            }
+          ),
+          suffix
+        ] }),
+        delta && /* @__PURE__ */ jsx("small", { children: delta })
+      ]
+    }
+  );
+}
+function RadialProgress({
+  value = 72,
+  size = 180,
+  strokeWidth = 10,
+  color = "#9b7cff",
+  trackColor = "#24242c",
+  animated = true,
+  label = "COMPLETE",
+  className = "",
+  style,
+  ...props
+}) {
+  const clamped = Math.min(
+    100,
+    Math.max(
+      0,
+      value
+    )
+  );
+  const radius = 50 - strokeWidth / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference * (1 - clamped / 100);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      className: `fb-radial-progress ${className}`,
+      style: {
+        ...style,
+        width: size,
+        height: size,
+        ["--fb-radial-color"]: color
+      },
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": clamped,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            viewBox: "0 0 100 100",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: "50",
+                  cy: "50",
+                  r: radius,
+                  fill: "none",
+                  stroke: trackColor,
+                  strokeWidth
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: "50",
+                  cy: "50",
+                  r: radius,
+                  fill: "none",
+                  stroke: color,
+                  strokeWidth,
+                  strokeLinecap: "round",
+                  strokeDasharray: circumference,
+                  strokeDashoffset: offset,
+                  className: animated ? "fb-radial-progress__value fb-radial-progress__value--animated" : "fb-radial-progress__value"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "fb-radial-progress__content", children: [
+          /* @__PURE__ */ jsxs("strong", { children: [
+            Math.round(
+              clamped
+            ),
+            /* @__PURE__ */ jsx("small", { children: "%" })
+          ] }),
+          /* @__PURE__ */ jsx("span", { children: label })
+        ] })
+      ]
+    }
+  );
+}
+var defaultItems = [
+  {
+    label: "Revenue",
+    value: "$84.2K",
+    delta: "+12.6%",
+    positive: true
+  },
+  {
+    label: "Users",
+    value: "18.4K",
+    delta: "+8.1%",
+    positive: true
+  },
+  {
+    label: "Conversion",
+    value: "7.8%",
+    delta: "+2.4%",
+    positive: true
+  },
+  {
+    label: "Latency",
+    value: "94ms",
+    delta: "-11%",
+    positive: true
+  }
+];
+function MetricGrid({
+  accent = "#9b7cff",
+  background = "#111116",
+  columns = 3,
+  radius = 18,
+  items = defaultItems,
+  className = "",
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: `fb-metric-grid ${className}`,
+      style: {
+        ...style,
+        gridTemplateColumns: `repeat(${Math.max(
+          1,
+          columns
+        )}, minmax(0, 1fr))`,
+        ["--fb-metric-accent"]: accent,
+        ["--fb-metric-background"]: background,
+        ["--fb-metric-radius"]: `${radius}px`
+      },
+      children: items.map(
+        (item) => /* @__PURE__ */ jsxs(
+          "article",
+          {
+            children: [
+              /* @__PURE__ */ jsx("span", { children: item.label }),
+              /* @__PURE__ */ jsx("strong", { children: item.value }),
+              item.delta && /* @__PURE__ */ jsx(
+                "small",
+                {
+                  className: item.positive === false ? "is-negative" : "",
+                  children: item.delta
+                }
+              )
+            ]
+          },
+          item.label
+        )
+      )
+    }
+  );
+}
+
+export { AnimatedCounter, MetricGrid, RadialProgress };
+//# sourceMappingURL=chunk-WDUETPNG.js.map
+//# sourceMappingURL=chunk-WDUETPNG.js.map

package/dist/chunk-WDUETPNG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data/AnimatedCounter.tsx","../src/data/RadialProgress.tsx","../src/data/MetricGrid.tsx"],"names":["jsxs","jsx"],"mappings":"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","file":"chunk-WDUETPNG.js","sourcesContent":["import {\r\n  useEffect,\r\n  useRef,\r\n  useState,\r\n} from \"react\";\r\n\r\nimport type {\r\n  HTMLAttributes,\r\n} from \"react\";\r\n\r\nimport \"./AnimatedCounter.css\";\r\n\r\nexport interface AnimatedCounterProps\r\n  extends HTMLAttributes<HTMLDivElement> {\r\n  value?: number;\r\n  duration?: number;\r\n\r\n  color?: string;\r\n  accent?: string;\r\n\r\n  fontSize?: number;\r\n\r\n  prefix?: string;\r\n  suffix?: string;\r\n\r\n  label?: string;\r\n  delta?: string;\r\n\r\n  decimals?: number;\r\n\r\n  className?: string;\r\n}\r\n\r\nexport function AnimatedCounter({\r\n  value = 128,\r\n  duration = 1.5,\r\n\r\n  color = \"#ffffff\",\r\n  accent = \"#9b7cff\",\r\n\r\n  fontSize = 72,\r\n\r\n  prefix = \"\",\r\n  suffix = \"K\",\r\n\r\n  label =\r\n    \"ACTIVE USERS\",\r\n\r\n  delta =\r\n    \"+18.4%\",\r\n\r\n  decimals = 0,\r\n\r\n  className = \"\",\r\n  style,\r\n\r\n  ...props\r\n}: AnimatedCounterProps) {\r\n  const [\r\n    displayed,\r\n    setDisplayed,\r\n  ] =\r\n    useState(0);\r\n\r\n  const frameRef =\r\n    useRef<number | null>(\r\n      null\r\n    );\r\n\r\n  useEffect(() => {\r\n    const start =\r\n      performance.now();\r\n\r\n    const total =\r\n      Math.max(\r\n        duration,\r\n        0.01\r\n      ) *\r\n      1000;\r\n\r\n    function animate(\r\n      now: number\r\n    ) {\r\n      const progress =\r\n        Math.min(\r\n          (\r\n            now -\r\n            start\r\n          ) /\r\n            total,\r\n          1\r\n        );\r\n\r\n      const eased =\r\n        1 -\r\n        Math.pow(\r\n          1 -\r\n            progress,\r\n          3\r\n        );\r\n\r\n      setDisplayed(\r\n        value *\r\n          eased\r\n      );\r\n\r\n      if (\r\n        progress <\r\n        1\r\n      ) {\r\n        frameRef.current =\r\n          requestAnimationFrame(\r\n            animate\r\n          );\r\n      }\r\n    }\r\n\r\n    frameRef.current =\r\n      requestAnimationFrame(\r\n        animate\r\n      );\r\n\r\n    return () => {\r\n      if (\r\n        frameRef.current !==\r\n        null\r\n      ) {\r\n        cancelAnimationFrame(\r\n          frameRef.current\r\n        );\r\n      }\r\n    };\r\n  }, [\r\n    value,\r\n    duration,\r\n  ]);\r\n\r\n  return (\r\n    <div\r\n      {...props}\r\n      className={`fb-animated-counter ${className}`}\r\n      style={{\r\n        ...style,\r\n\r\n        color,\r\n\r\n        [\"--fb-counter-accent\" as string]:\r\n          accent,\r\n\r\n        [\"--fb-counter-size\" as string]:\r\n          `${fontSize}px`,\r\n      }}\r\n    >\r\n      <span className=\"fb-animated-counter__label\">\r\n        {label}\r\n      </span>\r\n\r\n      <strong>\r\n        {prefix}\r\n\r\n        {displayed.toLocaleString(\r\n          undefined,\r\n          {\r\n            minimumFractionDigits:\r\n              decimals,\r\n\r\n            maximumFractionDigits:\r\n              decimals,\r\n          }\r\n        )}\r\n\r\n        {suffix}\r\n      </strong>\r\n\r\n      {delta && (\r\n        <small>\r\n          {delta}\r\n        </small>\r\n      )}\r\n    </div>\r\n  );\r\n}","import type {\r\n  HTMLAttributes,\r\n} from \"react\";\r\n\r\nimport \"./RadialProgress.css\";\r\n\r\nexport interface RadialProgressProps\r\n  extends HTMLAttributes<HTMLDivElement> {\r\n  value?: number;\r\n\r\n  size?: number;\r\n  strokeWidth?: number;\r\n\r\n  color?: string;\r\n  trackColor?: string;\r\n\r\n  animated?: boolean;\r\n\r\n  label?: string;\r\n\r\n  className?: string;\r\n}\r\n\r\nexport function RadialProgress({\r\n  value = 72,\r\n\r\n  size = 180,\r\n  strokeWidth = 10,\r\n\r\n  color = \"#9b7cff\",\r\n  trackColor = \"#24242c\",\r\n\r\n  animated = true,\r\n\r\n  label =\r\n    \"COMPLETE\",\r\n\r\n  className = \"\",\r\n  style,\r\n\r\n  ...props\r\n}: RadialProgressProps) {\r\n  const clamped =\r\n    Math.min(\r\n      100,\r\n      Math.max(\r\n        0,\r\n        value\r\n      )\r\n    );\r\n\r\n  const radius =\r\n    50 -\r\n    strokeWidth /\r\n      2;\r\n\r\n  const circumference =\r\n    2 *\r\n    Math.PI *\r\n    radius;\r\n\r\n  const offset =\r\n    circumference *\r\n    (\r\n      1 -\r\n      clamped /\r\n        100\r\n    );\r\n\r\n  return (\r\n    <div\r\n      {...props}\r\n      className={`fb-radial-progress ${className}`}\r\n      style={{\r\n        ...style,\r\n\r\n        width:\r\n          size,\r\n\r\n        height:\r\n          size,\r\n\r\n        [\"--fb-radial-color\" as string]:\r\n          color,\r\n      }}\r\n      role=\"progressbar\"\r\n      aria-valuemin={0}\r\n      aria-valuemax={100}\r\n      aria-valuenow={\r\n        clamped\r\n      }\r\n    >\r\n      <svg\r\n        viewBox=\"0 0 100 100\"\r\n        aria-hidden=\"true\"\r\n      >\r\n        <circle\r\n          cx=\"50\"\r\n          cy=\"50\"\r\n          r={\r\n            radius\r\n          }\r\n          fill=\"none\"\r\n          stroke={\r\n            trackColor\r\n          }\r\n          strokeWidth={\r\n            strokeWidth\r\n          }\r\n        />\r\n\r\n        <circle\r\n          cx=\"50\"\r\n          cy=\"50\"\r\n          r={\r\n            radius\r\n          }\r\n          fill=\"none\"\r\n          stroke={\r\n            color\r\n          }\r\n          strokeWidth={\r\n            strokeWidth\r\n          }\r\n          strokeLinecap=\"round\"\r\n          strokeDasharray={\r\n            circumference\r\n          }\r\n          strokeDashoffset={\r\n            offset\r\n          }\r\n          className={\r\n            animated\r\n              ? \"fb-radial-progress__value fb-radial-progress__value--animated\"\r\n              : \"fb-radial-progress__value\"\r\n          }\r\n        />\r\n      </svg>\r\n\r\n      <div className=\"fb-radial-progress__content\">\r\n        <strong>\r\n          {Math.round(\r\n            clamped\r\n          )}\r\n          <small>\r\n            %\r\n          </small>\r\n        </strong>\r\n\r\n        <span>\r\n          {label}\r\n        </span>\r\n      </div>\r\n    </div>\r\n  );\r\n}","import type {\r\n  HTMLAttributes,\r\n} from \"react\";\r\n\r\nimport \"./MetricGrid.css\";\r\n\r\nexport interface MetricItem {\r\n  label: string;\r\n  value: string;\r\n  delta?: string;\r\n  positive?: boolean;\r\n}\r\n\r\nexport interface MetricGridProps\r\n  extends HTMLAttributes<HTMLDivElement> {\r\n  accent?: string;\r\n  background?: string;\r\n\r\n  columns?: number;\r\n  radius?: number;\r\n\r\n  items?: MetricItem[];\r\n\r\n  className?: string;\r\n}\r\n\r\nconst defaultItems:\r\n  MetricItem[] = [\r\n    {\r\n      label:\r\n        \"Revenue\",\r\n\r\n      value:\r\n        \"$84.2K\",\r\n\r\n      delta:\r\n        \"+12.6%\",\r\n\r\n      positive:\r\n        true,\r\n    },\r\n\r\n    {\r\n      label:\r\n        \"Users\",\r\n\r\n      value:\r\n        \"18.4K\",\r\n\r\n      delta:\r\n        \"+8.1%\",\r\n\r\n      positive:\r\n        true,\r\n    },\r\n\r\n    {\r\n      label:\r\n        \"Conversion\",\r\n\r\n      value:\r\n        \"7.8%\",\r\n\r\n      delta:\r\n        \"+2.4%\",\r\n\r\n      positive:\r\n        true,\r\n    },\r\n\r\n    {\r\n      label:\r\n        \"Latency\",\r\n\r\n      value:\r\n        \"94ms\",\r\n\r\n      delta:\r\n        \"-11%\",\r\n\r\n      positive:\r\n        true,\r\n    },\r\n  ];\r\n\r\nexport function MetricGrid({\r\n  accent = \"#9b7cff\",\r\n  background = \"#111116\",\r\n\r\n  columns = 3,\r\n  radius = 18,\r\n\r\n  items =\r\n    defaultItems,\r\n\r\n  className = \"\",\r\n  style,\r\n\r\n  ...props\r\n}: MetricGridProps) {\r\n  return (\r\n    <div\r\n      {...props}\r\n      className={`fb-metric-grid ${className}`}\r\n      style={{\r\n        ...style,\r\n\r\n        gridTemplateColumns:\r\n          `repeat(${Math.max(\r\n            1,\r\n            columns\r\n          )}, minmax(0, 1fr))`,\r\n\r\n        [\"--fb-metric-accent\" as string]:\r\n          accent,\r\n\r\n        [\"--fb-metric-background\" as string]:\r\n          background,\r\n\r\n        [\"--fb-metric-radius\" as string]:\r\n          `${radius}px`,\r\n      }}\r\n    >\r\n      {items.map(\r\n        (\r\n          item\r\n        ) => (\r\n          <article\r\n            key={\r\n              item.label\r\n            }\r\n          >\r\n            <span>\r\n              {\r\n                item.label\r\n              }\r\n            </span>\r\n\r\n            <strong>\r\n              {\r\n                item.value\r\n              }\r\n            </strong>\r\n\r\n            {item.delta && (\r\n              <small\r\n                className={\r\n                  item.positive ===\r\n                  false\r\n                    ? \"is-negative\"\r\n                    : \"\"\r\n                }\r\n              >\r\n                {\r\n                  item.delta\r\n                }\r\n              </small>\r\n            )}\r\n          </article>\r\n        )\r\n      )}\r\n    </div>\r\n  );\r\n}"]}