@farzadbagheri/fb-components 0.1.0

package/dist/chunk-CTD2GDO6.cjs

@@ -0,0 +1,121 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/landing/StartupLanding.tsx
+function StartupLanding({
+  accent = "#7d63ff",
+  background = "#08080c",
+  radius = 20,
+  showMetrics = true,
+  showFeatures = true,
+  className = "",
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      ...props,
+      className: `fb-startup-landing ${className}`,
+      style: {
+        ...style,
+        background,
+        ["--fb-startup-accent"]: accent,
+        ["--fb-startup-radius"]: `${radius}px`
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "fb-startup-landing__nav", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "ACME." }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("a", { href: "#product", children: "Product" }),
+            /* @__PURE__ */ jsxRuntime.jsx("a", { href: "#features", children: "Features" }),
+            /* @__PURE__ */ jsxRuntime.jsx("a", { href: "#pricing", children: "Pricing" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              children: "Join waitlist"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fb-startup-landing__hero", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "LAUNCHING 2026" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("h2", { children: [
+            "From idea",
+            /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+            "to momentum."
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { children: "A focused operating layer for ambitious startups that want to build, launch and learn faster." }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              children: "Get early access"
+            }
+          )
+        ] }),
+        showMetrics && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fb-startup-landing__metrics", children: [
+          [
+            "42K",
+            "Early users"
+          ],
+          [
+            "4.9",
+            "Average rating"
+          ],
+          [
+            "99.9%",
+            "Platform uptime"
+          ]
+        ].map(
+          ([
+            value,
+            label
+          ]) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "article",
+            {
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("strong", { children: value }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
+              ]
+            },
+            label
+          )
+        ) }),
+        showFeatures && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            id: "features",
+            className: "fb-startup-landing__features",
+            children: [
+              "Ship",
+              "Measure",
+              "Scale"
+            ].map(
+              (feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "article",
+                {
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                      "0",
+                      index + 1
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("h3", { children: feature }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Simple tools designed around the decisions that matter." })
+                  ]
+                },
+                feature
+              )
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.StartupLanding = StartupLanding;
+//# sourceMappingURL=chunk-CTD2GDO6.cjs.map
+//# sourceMappingURL=chunk-CTD2GDO6.cjs.map

package/dist/chunk-CTD2GDO6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/landing/StartupLanding.tsx"],"names":["jsxs","jsx"],"mappings":";;;;;AAkBO,SAAS,cAAA,CAAe;AAAA,EAC7B,MAAA,GAAS,SAAA;AAAA,EACT,UAAA,GAAa,SAAA;AAAA,EACb,MAAA,GAAS,EAAA;AAAA,EAET,WAAA,GAAc,IAAA;AAAA,EACd,YAAA,GAAe,IAAA;AAAA,EAEf,SAAA,GAAY,EAAA;AAAA,EACZ,KAAA;AAAA,EAEA,GAAG;AACL,CAAA,EAAwB;AACtB,EAAA,uBACEA,eAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,sBAAsB,SAAS,CAAA,CAAA;AAAA,MAC1C,KAAA,EAAO;AAAA,QACL,GAAG,KAAA;AAAA,QAEH,UAAA;AAAA,QAEA,CAAC,qBAA+B,GAC9B,MAAA;AAAA,QAEF,CAAC,qBAA+B,GAC9B,CAAA,EAAG,MAAM,CAAA,EAAA;AAAA,OACb;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yBAAA,EACb,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAAC,YAAO,QAAA,EAAA,OAAA,EAER,CAAA;AAAA,0CAEC,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,4BAAAA,cAAA,CAAC,GAAA,EAAA,EAAE,IAAA,EAAK,UAAA,EAAW,QAAA,EAAA,SAAA,EAEnB,CAAA;AAAA,4BAEAA,cAAA,CAAC,GAAA,EAAA,EAAE,IAAA,EAAK,WAAA,EAAY,QAAA,EAAA,UAAA,EAEpB,CAAA;AAAA,4BAEAA,cAAA,CAAC,GAAA,EAAA,EAAE,IAAA,EAAK,UAAA,EAAW,QAAA,EAAA,SAAA,EAEnB;AAAA,WAAA,EACF,CAAA;AAAA,0BAEAA,cAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACN,QAAA,EAAA;AAAA;AAAA;AAED,SAAA,EACF,CAAA;AAAA,wBAEAD,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0BAAA,EACb,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAAC,UAAK,QAAA,EAAA,gBAAA,EAEN,CAAA;AAAA,0CAEC,IAAA,EAAA,EAAG,QAAA,EAAA;AAAA,YAAA,WAAA;AAAA,2CAED,IAAA,EAAA,EAAG,CAAA;AAAA,YAAE;AAAA,WAAA,EAER,CAAA;AAAA,0BAEAA,cAAA,CAAC,OAAE,QAAA,EAAA,+FAAA,EAMH,CAAA;AAAA,0BAEAA,cAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACN,QAAA,EAAA;AAAA;AAAA;AAED,SAAA,EACF,CAAA;AAAA,QAEC,WAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAAA,EACZ,QAAA,EAAA;AAAA,UACC;AAAA,YACE,KAAA;AAAA,YACA;AAAA,WACF;AAAA,UACA;AAAA,YACE,KAAA;AAAA,YACA;AAAA,WACF;AAAA,UACA;AAAA,YACE,OAAA;AAAA,YACA;AAAA;AACF,SACF,CAAE,GAAA;AAAA,UACA,CACE;AAAA,YACE,KAAA;AAAA,YACA;AAAA,WACF,qBAEAD,eAAA;AAAA,YAAC,SAAA;AAAA,YAAA;AAAA,cAKC,QAAA,EAAA;AAAA,gCAAAC,cAAA,CAAC,YACE,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,gCAEAA,cAAA,CAAC,UACE,QAAA,EAAA,KAAA,EACH;AAAA;AAAA,aAAA;AAAA,YATE;AAAA;AAUJ,SAEJ,EACF,CAAA;AAAA,QAGD,YAAA,oBACCA,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAG,UAAA;AAAA,YACH,SAAA,EAAU,8BAAA;AAAA,YAET,QAAA,EAAA;AAAA,cACC,MAAA;AAAA,cACA,SAAA;AAAA,cACA;AAAA,aACF,CAAE,GAAA;AAAA,cACA,CACE,SACA,KAAA,qBAEAD,eAAA;AAAA,gBAAC,SAAA;AAAA,gBAAA;AAAA,kBAKC,QAAA,EAAA;AAAA,oCAAAA,eAAA,CAAC,MAAA,EAAA,EAAK,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,sBAEF,KAAA,GACA;AAAA,qBAAA,EAEJ,CAAA;AAAA,oCAEAC,cAAA,CAAC,QACE,QAAA,EAAA,OAAA,EACH,CAAA;AAAA,oCAEAA,cAAA,CAAC,OAAE,QAAA,EAAA,yDAAA,EAKH;AAAA;AAAA,iBAAA;AAAA,gBAnBE;AAAA;AAoBJ;AAEJ;AAAA;AACF;AAAA;AAAA,GAEJ;AAEJ","file":"chunk-CTD2GDO6.cjs","sourcesContent":["import type {\r\n  HTMLAttributes,\r\n} from \"react\";\r\n\r\nimport \"./StartupLanding.css\";\r\n\r\nexport interface StartupLandingProps\r\n  extends HTMLAttributes<HTMLElement> {\r\n  accent?: string;\r\n  background?: string;\r\n  radius?: number;\r\n\r\n  showMetrics?: boolean;\r\n  showFeatures?: boolean;\r\n\r\n  className?: string;\r\n}\r\n\r\nexport function StartupLanding({\r\n  accent = \"#7d63ff\",\r\n  background = \"#08080c\",\r\n  radius = 20,\r\n\r\n  showMetrics = true,\r\n  showFeatures = true,\r\n\r\n  className = \"\",\r\n  style,\r\n\r\n  ...props\r\n}: StartupLandingProps) {\r\n  return (\r\n    <section\r\n      {...props}\r\n      className={`fb-startup-landing ${className}`}\r\n      style={{\r\n        ...style,\r\n\r\n        background,\r\n\r\n        [\"--fb-startup-accent\" as string]:\r\n          accent,\r\n\r\n        [\"--fb-startup-radius\" as string]:\r\n          `${radius}px`,\r\n      }}\r\n    >\r\n      <nav className=\"fb-startup-landing__nav\">\r\n        <strong>\r\n          ACME.\r\n        </strong>\r\n\r\n        <div>\r\n          <a href=\"#product\">\r\n            Product\r\n          </a>\r\n\r\n          <a href=\"#features\">\r\n            Features\r\n          </a>\r\n\r\n          <a href=\"#pricing\">\r\n            Pricing\r\n          </a>\r\n        </div>\r\n\r\n        <button\r\n          type=\"button\"\r\n        >\r\n          Join waitlist\r\n        </button>\r\n      </nav>\r\n\r\n      <div className=\"fb-startup-landing__hero\">\r\n        <span>\r\n          LAUNCHING 2026\r\n        </span>\r\n\r\n        <h2>\r\n          From idea\r\n          <br />\r\n          to momentum.\r\n        </h2>\r\n\r\n        <p>\r\n          A focused operating\r\n          layer for ambitious\r\n          startups that want to\r\n          build, launch and learn\r\n          faster.\r\n        </p>\r\n\r\n        <button\r\n          type=\"button\"\r\n        >\r\n          Get early access\r\n        </button>\r\n      </div>\r\n\r\n      {showMetrics && (\r\n        <div className=\"fb-startup-landing__metrics\">\r\n          {[\r\n            [\r\n              \"42K\",\r\n              \"Early users\",\r\n            ],\r\n            [\r\n              \"4.9\",\r\n              \"Average rating\",\r\n            ],\r\n            [\r\n              \"99.9%\",\r\n              \"Platform uptime\",\r\n            ],\r\n          ].map(\r\n            (\r\n              [\r\n                value,\r\n                label,\r\n              ]\r\n            ) => (\r\n              <article\r\n                key={\r\n                  label\r\n                }\r\n              >\r\n                <strong>\r\n                  {value}\r\n                </strong>\r\n\r\n                <span>\r\n                  {label}\r\n                </span>\r\n              </article>\r\n            )\r\n          )}\r\n        </div>\r\n      )}\r\n\r\n      {showFeatures && (\r\n        <div\r\n          id=\"features\"\r\n          className=\"fb-startup-landing__features\"\r\n        >\r\n          {[\r\n            \"Ship\",\r\n            \"Measure\",\r\n            \"Scale\",\r\n          ].map(\r\n            (\r\n              feature,\r\n              index\r\n            ) => (\r\n              <article\r\n                key={\r\n                  feature\r\n                }\r\n              >\r\n                <span>\r\n                  0{\r\n                    index +\r\n                    1\r\n                  }\r\n                </span>\r\n\r\n                <h3>\r\n                  {feature}\r\n                </h3>\r\n\r\n                <p>\r\n                  Simple tools\r\n                  designed around\r\n                  the decisions\r\n                  that matter.\r\n                </p>\r\n              </article>\r\n            )\r\n          )}\r\n        </div>\r\n      )}\r\n    </section>\r\n  );\r\n}"]}

package/dist/chunk-EIE6FLCL.js

@@ -0,0 +1,202 @@
+import { useState } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/ui/SpotlightCard.tsx
+function SpotlightCard({
+  children = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { children: "FB" }),
+    /* @__PURE__ */ jsx("strong", { children: "Spotlight" }),
+    /* @__PURE__ */ jsx("p", { children: "Move your pointer across the card." })
+  ] }),
+  background = "#111116",
+  spotlightColor = "#9b7cff",
+  radius = 14,
+  glow = 35,
+  borderOpacity = 0.12,
+  className = ""
+}) {
+  const [
+    point,
+    setPoint
+  ] = useState({
+    x: 50,
+    y: 30
+  });
+  function handleMove(event) {
+    const rect = event.currentTarget.getBoundingClientRect();
+    setPoint({
+      x: (event.clientX - rect.left) / rect.width * 100,
+      y: (event.clientY - rect.top) / rect.height * 100
+    });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `fb-spotlight-card ${className}`,
+      onMouseMove: handleMove,
+      style: {
+        borderRadius: radius,
+        borderColor: `rgba(
+            255,
+            255,
+            255,
+            ${borderOpacity}
+          )`,
+        background: `
+          radial-gradient(
+            circle at
+            ${point.x}%
+            ${point.y}%,
+            ${spotlightColor}${hexAlpha(
+          glow / 100
+        )},
+            transparent 38%
+          ),
+          ${background}
+        `
+      },
+      children
+    }
+  );
+}
+function hexAlpha(opacity) {
+  return Math.round(
+    Math.min(
+      1,
+      Math.max(
+        0,
+        opacity
+      )
+    ) * 255
+  ).toString(16).padStart(
+    2,
+    "0"
+  );
+}
+function hexToRgb(value) {
+  const clean = value.replace(
+    "#",
+    ""
+  ).trim();
+  const normalized = clean.length === 3 ? clean.split("").map(
+    (character) => character + character
+  ).join("") : clean;
+  if (normalized.length !== 6) {
+    return {
+      r: 143,
+      g: 115,
+      b: 255
+    };
+  }
+  return {
+    r: Number.parseInt(
+      normalized.slice(
+        0,
+        2
+      ),
+      16
+    ),
+    g: Number.parseInt(
+      normalized.slice(
+        2,
+        4
+      ),
+      16
+    ),
+    b: Number.parseInt(
+      normalized.slice(
+        4,
+        6
+      ),
+      16
+    )
+  };
+}
+function GlassCard({
+  children = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "fb-glass-card__eyebrow", children: "01 / FEATURE" }),
+    /* @__PURE__ */ jsxs("div", { className: "fb-glass-card__content", children: [
+      /* @__PURE__ */ jsxs("strong", { children: [
+        "Built for",
+        /* @__PURE__ */ jsx("br", {}),
+        "motion."
+      ] }),
+      /* @__PURE__ */ jsx("p", { children: "Premium interaction without visual noise." })
+    ] })
+  ] }),
+  tint = "#8f73ff",
+  opacity = 0.08,
+  blur = 18,
+  radius = 22,
+  borderOpacity = 0.16,
+  glowColor = "#8f73ff",
+  glow = 34,
+  className = "",
+  style,
+  ...props
+}) {
+  const tintRgb = hexToRgb(
+    tint
+  );
+  const glowRgb = hexToRgb(
+    glowColor
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      className: `fb-glass-card ${className}`,
+      style: {
+        ...style,
+        borderRadius: radius,
+        borderColor: `rgba(
+            255,
+            255,
+            255,
+            ${borderOpacity}
+          )`,
+        background: `linear-gradient(
+            145deg,
+            rgba(
+              ${tintRgb.r},
+              ${tintRgb.g},
+              ${tintRgb.b},
+              ${opacity}
+            ),
+            rgba(
+              255,
+              255,
+              255,
+              ${opacity * 0.35}
+            )
+          )`,
+        backdropFilter: `blur(${blur}px)`,
+        WebkitBackdropFilter: `blur(${blur}px)`,
+        boxShadow: `0 24px 80px rgba(
+            ${glowRgb.r},
+            ${glowRgb.g},
+            ${glowRgb.b},
+            ${glow / 400}
+          )`
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "fb-glass-card__glow",
+            "aria-hidden": "true",
+            style: {
+              background: glowColor,
+              filter: `blur(${glow}px)`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "fb-glass-card__inner", children })
+      ]
+    }
+  );
+}
+
+export { GlassCard, SpotlightCard };
+//# sourceMappingURL=chunk-EIE6FLCL.js.map
+//# sourceMappingURL=chunk-EIE6FLCL.js.map

package/dist/chunk-EIE6FLCL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/SpotlightCard.tsx","../src/ui/GlassCard.tsx"],"names":["jsxs","Fragment","jsx"],"mappings":"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","file":"chunk-EIE6FLCL.js","sourcesContent":["import {\r\n  useState,\r\n} from \"react\";\r\n\r\nimport \"./SpotlightCard.css\";\r\n\r\nexport interface SpotlightCardProps {\r\n  children?:\r\n    React.ReactNode;\r\n\r\n  background?:\r\n    string;\r\n\r\n  spotlightColor?:\r\n    string;\r\n\r\n  radius?:\r\n    number;\r\n\r\n  glow?:\r\n    number;\r\n\r\n  borderOpacity?:\r\n    number;\r\n\r\n  className?:\r\n    string;\r\n}\r\n\r\nexport function SpotlightCard({\r\n  children = (\r\n    <>\r\n      <span>\r\n        FB\r\n      </span>\r\n\r\n      <strong>\r\n        Spotlight\r\n      </strong>\r\n\r\n      <p>\r\n        Move your pointer\r\n        across the card.\r\n      </p>\r\n    </>\r\n  ),\r\n\r\n  background =\r\n    \"#111116\",\r\n\r\n  spotlightColor =\r\n    \"#9b7cff\",\r\n\r\n  radius =\r\n    14,\r\n\r\n  glow =\r\n    35,\r\n\r\n  borderOpacity =\r\n    0.12,\r\n\r\n  className =\r\n    \"\",\r\n}: SpotlightCardProps) {\r\n  const [\r\n    point,\r\n    setPoint,\r\n  ] =\r\n    useState({\r\n      x: 50,\r\n      y: 30,\r\n    });\r\n\r\n  function handleMove(\r\n    event:\r\n      React.MouseEvent<HTMLDivElement>\r\n  ) {\r\n    const rect =\r\n      event.currentTarget.getBoundingClientRect();\r\n\r\n    setPoint({\r\n      x:\r\n        ((event.clientX -\r\n          rect.left) /\r\n          rect.width) *\r\n        100,\r\n\r\n      y:\r\n        ((event.clientY -\r\n          rect.top) /\r\n          rect.height) *\r\n        100,\r\n    });\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={`fb-spotlight-card ${className}`}\r\n      onMouseMove={\r\n        handleMove\r\n      }\r\n      style={{\r\n        borderRadius:\r\n          radius,\r\n\r\n        borderColor:\r\n          `rgba(\r\n            255,\r\n            255,\r\n            255,\r\n            ${borderOpacity}\r\n          )`,\r\n\r\n        background: `\r\n          radial-gradient(\r\n            circle at\r\n            ${point.x}%\r\n            ${point.y}%,\r\n            ${spotlightColor}${hexAlpha(\r\n              glow /\r\n                100\r\n            )},\r\n            transparent 38%\r\n          ),\r\n          ${background}\r\n        `,\r\n      }}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction hexAlpha(\r\n  opacity: number\r\n) {\r\n  return Math.round(\r\n    Math.min(\r\n      1,\r\n      Math.max(\r\n        0,\r\n        opacity\r\n      )\r\n    ) *\r\n      255\r\n  )\r\n    .toString(16)\r\n    .padStart(\r\n      2,\r\n      \"0\"\r\n    );\r\n}","import type {\r\n  HTMLAttributes,\r\n  ReactNode,\r\n} from \"react\";\r\n\r\nimport \"./GlassCard.css\";\r\n\r\nexport interface GlassCardProps\r\n  extends HTMLAttributes<HTMLDivElement> {\r\n  children?: ReactNode;\r\n\r\n  tint?: string;\r\n\r\n  opacity?: number;\r\n\r\n  blur?: number;\r\n\r\n  radius?: number;\r\n\r\n  borderOpacity?: number;\r\n\r\n  glowColor?: string;\r\n\r\n  glow?: number;\r\n\r\n  className?: string;\r\n}\r\n\r\nfunction hexToRgb(\r\n  value: string\r\n) {\r\n  const clean =\r\n    value\r\n      .replace(\r\n        \"#\",\r\n        \"\"\r\n      )\r\n      .trim();\r\n\r\n  const normalized =\r\n    clean.length ===\r\n    3\r\n      ? clean\r\n          .split(\"\")\r\n          .map(\r\n            (\r\n              character\r\n            ) =>\r\n              character +\r\n              character\r\n          )\r\n          .join(\"\")\r\n      : clean;\r\n\r\n  if (\r\n    normalized.length !==\r\n    6\r\n  ) {\r\n    return {\r\n      r: 143,\r\n      g: 115,\r\n      b: 255,\r\n    };\r\n  }\r\n\r\n  return {\r\n    r:\r\n      Number.parseInt(\r\n        normalized.slice(\r\n          0,\r\n          2\r\n        ),\r\n        16\r\n      ),\r\n\r\n    g:\r\n      Number.parseInt(\r\n        normalized.slice(\r\n          2,\r\n          4\r\n        ),\r\n        16\r\n      ),\r\n\r\n    b:\r\n      Number.parseInt(\r\n        normalized.slice(\r\n          4,\r\n          6\r\n        ),\r\n        16\r\n      ),\r\n  };\r\n}\r\n\r\nexport function GlassCard({\r\n  children = (\r\n    <>\r\n      <span className=\"fb-glass-card__eyebrow\">\r\n        01 / FEATURE\r\n      </span>\r\n\r\n      <div className=\"fb-glass-card__content\">\r\n        <strong>\r\n          Built for\r\n          <br />\r\n          motion.\r\n        </strong>\r\n\r\n        <p>\r\n          Premium interaction\r\n          without visual noise.\r\n        </p>\r\n      </div>\r\n    </>\r\n  ),\r\n\r\n  tint = \"#8f73ff\",\r\n\r\n  opacity = 0.08,\r\n\r\n  blur = 18,\r\n\r\n  radius = 22,\r\n\r\n  borderOpacity = 0.16,\r\n\r\n  glowColor = \"#8f73ff\",\r\n\r\n  glow = 34,\r\n\r\n  className = \"\",\r\n\r\n  style,\r\n\r\n  ...props\r\n}: GlassCardProps) {\r\n  const tintRgb =\r\n    hexToRgb(\r\n      tint\r\n    );\r\n\r\n  const glowRgb =\r\n    hexToRgb(\r\n      glowColor\r\n    );\r\n\r\n  return (\r\n    <div\r\n      {...props}\r\n      className={`fb-glass-card ${className}`}\r\n      style={{\r\n        ...style,\r\n\r\n        borderRadius:\r\n          radius,\r\n\r\n        borderColor:\r\n          `rgba(\r\n            255,\r\n            255,\r\n            255,\r\n            ${borderOpacity}\r\n          )`,\r\n\r\n        background:\r\n          `linear-gradient(\r\n            145deg,\r\n            rgba(\r\n              ${tintRgb.r},\r\n              ${tintRgb.g},\r\n              ${tintRgb.b},\r\n              ${opacity}\r\n            ),\r\n            rgba(\r\n              255,\r\n              255,\r\n              255,\r\n              ${opacity * 0.35}\r\n            )\r\n          )`,\r\n\r\n        backdropFilter:\r\n          `blur(${blur}px)`,\r\n\r\n        WebkitBackdropFilter:\r\n          `blur(${blur}px)`,\r\n\r\n        boxShadow:\r\n          `0 24px 80px rgba(\r\n            ${glowRgb.r},\r\n            ${glowRgb.g},\r\n            ${glowRgb.b},\r\n            ${glow / 400}\r\n          )`,\r\n      }}\r\n    >\r\n      <span\r\n        className=\"fb-glass-card__glow\"\r\n        aria-hidden=\"true\"\r\n        style={{\r\n          background:\r\n            glowColor,\r\n\r\n          filter:\r\n            `blur(${glow}px)`,\r\n        }}\r\n      />\r\n\r\n      <div className=\"fb-glass-card__inner\">\r\n        {children}\r\n      </div>\r\n    </div>\r\n  );\r\n}"]}

package/dist/chunk-H2AV67DY.cjs

@@ -0,0 +1,260 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('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
+  ] = react.useState(0);
+  const frameRef = react.useRef(
+    null
+  );
+  react.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...props,
+      className: `fb-animated-counter ${className}`,
+      style: {
+        ...style,
+        color,
+        ["--fb-counter-accent"]: accent,
+        ["--fb-counter-size"]: `${fontSize}px`
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fb-animated-counter__label", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
+          prefix,
+          displayed.toLocaleString(
+            void 0,
+            {
+              minimumFractionDigits: decimals,
+              maximumFractionDigits: decimals
+            }
+          ),
+          suffix
+        ] }),
+        delta && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            viewBox: "0 0 100 100",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  cx: "50",
+                  cy: "50",
+                  r: radius,
+                  fill: "none",
+                  stroke: trackColor,
+                  strokeWidth
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "fb-radial-progress__content", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
+            Math.round(
+              clamped
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("small", { children: "%" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+          "article",
+          {
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label }),
+              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: item.value }),
+              item.delta && /* @__PURE__ */ jsxRuntime.jsx(
+                "small",
+                {
+                  className: item.positive === false ? "is-negative" : "",
+                  children: item.delta
+                }
+              )
+            ]
+          },
+          item.label
+        )
+      )
+    }
+  );
+}
+
+exports.AnimatedCounter = AnimatedCounter;
+exports.MetricGrid = MetricGrid;
+exports.RadialProgress = RadialProgress;
+//# sourceMappingURL=chunk-H2AV67DY.cjs.map
+//# sourceMappingURL=chunk-H2AV67DY.cjs.map

package/dist/chunk-H2AV67DY.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data/AnimatedCounter.tsx","../src/data/RadialProgress.tsx","../src/data/MetricGrid.tsx"],"names":["useState","useRef","useEffect","jsxs","jsx"],"mappings":"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","file":"chunk-H2AV67DY.cjs","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}"]}