@farzadbagheri/fb-components 0.1.0

package/dist/chunk-H6Y3EJPA.cjs

@@ -0,0 +1,83 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/text/RevealText.tsx
+function RevealText({
+  children = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    "Build",
+    /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+    "better",
+    /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+    "interfaces"
+  ] }),
+  color = "#ffffff",
+  accent = "#866cff",
+  fontSize = 42,
+  lineHeight = 0.86,
+  duration = 0.7,
+  uppercase = true,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `fb-reveal-text ${className}`,
+      style: {
+        fontSize: `${fontSize}px`,
+        lineHeight,
+        animationDuration: `${duration}s`,
+        textTransform: uppercase ? "uppercase" : "none",
+        background: `linear-gradient(
+            90deg,
+            ${color},
+            ${accent}
+          )`,
+        backgroundClip: "text",
+        WebkitBackgroundClip: "text",
+        color: "transparent"
+      },
+      children
+    }
+  );
+}
+function BlurReveal({
+  children = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    "Interfaces",
+    /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+    "worth",
+    /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+    "remembering."
+  ] }),
+  color = "#ffffff",
+  fontSize = 48,
+  blur = 14,
+  distance = 24,
+  duration = 0.8,
+  repeat = false,
+  className = "",
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      className: `fb-blur-reveal ${repeat ? "fb-blur-reveal--repeat" : ""} ${className}`,
+      style: {
+        ...style,
+        color,
+        fontSize: `${fontSize}px`,
+        ["--fb-blur-reveal-blur"]: `${blur}px`,
+        ["--fb-blur-reveal-distance"]: `${distance}px`,
+        ["--fb-blur-reveal-duration"]: `${duration}s`
+      },
+      children
+    }
+  );
+}
+
+exports.BlurReveal = BlurReveal;
+exports.RevealText = RevealText;
+//# sourceMappingURL=chunk-H6Y3EJPA.cjs.map
+//# sourceMappingURL=chunk-H6Y3EJPA.cjs.map

package/dist/chunk-H6Y3EJPA.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/text/RevealText.tsx","../src/text/BlurReveal.tsx"],"names":["jsxs","Fragment","jsx"],"mappings":";;;;;AAmBO,SAAS,UAAA,CAAW;AAAA,EACzB,2BACEA,eAAA,CAAAC,mBAAA,EAAA,EAAE,QAAA,EAAA;AAAA,IAAA,OAAA;AAAA,mCAEC,IAAA,EAAA,EAAG,CAAA;AAAA,IAAE,QAAA;AAAA,mCAEL,IAAA,EAAA,EAAG,CAAA;AAAA,IAAE;AAAA,GAAA,EAER,CAAA;AAAA,EAGF,KAAA,GACE,SAAA;AAAA,EAEF,MAAA,GACE,SAAA;AAAA,EAEF,QAAA,GACE,EAAA;AAAA,EAEF,UAAA,GACE,IAAA;AAAA,EAEF,QAAA,GACE,GAAA;AAAA,EAEF,SAAA,GACE,IAAA;AAAA,EAEF,SAAA,GACE;AACJ,CAAA,EAAoB;AAClB,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,kBAAkB,SAAS,CAAA,CAAA;AAAA,MACtC,KAAA,EAAO;AAAA,QACL,QAAA,EAEE,GAAG,QAAQ,CAAA,EAAA,CAAA;AAAA,QAEb,UAAA;AAAA,QAEA,iBAAA,EACE,GAAG,QAAQ,CAAA,CAAA,CAAA;AAAA,QAEb,aAAA,EACE,YACI,WAAA,GACA,MAAA;AAAA,QAEN,UAAA,EACE,CAAA;AAAA;AAAA,YAAA,EAEI,KAAK,CAAA;AAAA,YAAA,EACL,MAAM;AAAA,WAAA,CAAA;AAAA,QAGZ,cAAA,EACE,MAAA;AAAA,QAEF,oBAAA,EACE,MAAA;AAAA,QAEF,KAAA,EACE;AAAA,OACJ;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AC/DO,SAAS,UAAA,CAAW;AAAA,EACzB,QAAA,mBACEF,eAAAA,CAAAC,mBAAAA,EAAA,EAAE,QAAA,EAAA;AAAA,IAAA,YAAA;AAAA,oBAEAC,eAAC,IAAA,EAAA,EAAG,CAAA;AAAA,IAAE,OAAA;AAAA,oBAENA,eAAC,IAAA,EAAA,EAAG,CAAA;AAAA,IAAE;AAAA,GAAA,EAER,CAAA;AAAA,EAGF,KAAA,GAAQ,SAAA;AAAA,EAER,QAAA,GAAW,EAAA;AAAA,EAEX,IAAA,GAAO,EAAA;AAAA,EAEP,QAAA,GAAW,EAAA;AAAA,EAEX,QAAA,GAAW,GAAA;AAAA,EAEX,MAAA,GAAS,KAAA;AAAA,EAET,SAAA,GAAY,EAAA;AAAA,EAEZ,KAAA;AAAA,EAEA,GAAG;AACL,CAAA,EAAoB;AAClB,EAAA,uBACEA,cAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,WAAW,CAAA,eAAA,EACT,MAAA,GACI,wBAAA,GACA,EACN,IAAI,SAAS,CAAA,CAAA;AAAA,MACb,KAAA,EAAO;AAAA,QACL,GAAG,KAAA;AAAA,QAEH,KAAA;AAAA,QAEA,QAAA,EACE,GAAG,QAAQ,CAAA,EAAA,CAAA;AAAA,QAEb,CAAC,uBAAiC,GAChC,CAAA,EAAG,IAAI,CAAA,EAAA,CAAA;AAAA,QAET,CAAC,2BAAqC,GACpC,CAAA,EAAG,QAAQ,CAAA,EAAA,CAAA;AAAA,QAEb,CAAC,2BAAqC,GACpC,CAAA,EAAG,QAAQ,CAAA,CAAA;AAAA,OACf;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-H6Y3EJPA.cjs","sourcesContent":["import \"./RevealText.css\";\r\n\r\nexport interface RevealTextProps {\r\n  children?: React.ReactNode;\r\n\r\n  color?: string;\r\n  accent?: string;\r\n\r\n  fontSize?: number;\r\n\r\n  lineHeight?: number;\r\n\r\n  duration?: number;\r\n\r\n  uppercase?: boolean;\r\n\r\n  className?: string;\r\n}\r\n\r\nexport function RevealText({\r\n  children = (\r\n    <>\r\n      Build\r\n      <br />\r\n      better\r\n      <br />\r\n      interfaces\r\n    </>\r\n  ),\r\n\r\n  color =\r\n    \"#ffffff\",\r\n\r\n  accent =\r\n    \"#866cff\",\r\n\r\n  fontSize =\r\n    42,\r\n\r\n  lineHeight =\r\n    0.86,\r\n\r\n  duration =\r\n    0.7,\r\n\r\n  uppercase =\r\n    true,\r\n\r\n  className =\r\n    \"\",\r\n}: RevealTextProps) {\r\n  return (\r\n    <div\r\n      className={`fb-reveal-text ${className}`}\r\n      style={{\r\n        fontSize:\r\n\r\n          `${fontSize}px`,\r\n\r\n        lineHeight,\r\n\r\n        animationDuration:\r\n          `${duration}s`,\r\n\r\n        textTransform:\r\n          uppercase\r\n            ? \"uppercase\"\r\n            : \"none\",\r\n\r\n        background:\r\n          `linear-gradient(\r\n            90deg,\r\n            ${color},\r\n            ${accent}\r\n          )`,\r\n\r\n        backgroundClip:\r\n          \"text\",\r\n\r\n        WebkitBackgroundClip:\r\n          \"text\",\r\n\r\n        color:\r\n          \"transparent\",\r\n      }}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n}","import type {\r\n  HTMLAttributes,\r\n  ReactNode,\r\n} from \"react\";\r\n\r\nimport \"./BlurReveal.css\";\r\n\r\nexport interface BlurRevealProps\r\n  extends HTMLAttributes<HTMLDivElement> {\r\n  children?: ReactNode;\r\n\r\n  color?: string;\r\n\r\n  fontSize?: number;\r\n\r\n  blur?: number;\r\n\r\n  distance?: number;\r\n\r\n  duration?: number;\r\n\r\n  repeat?: boolean;\r\n\r\n  className?: string;\r\n}\r\n\r\nexport function BlurReveal({\r\n  children = (\r\n    <>\r\n      Interfaces\r\n      <br />\r\n      worth\r\n      <br />\r\n      remembering.\r\n    </>\r\n  ),\r\n\r\n  color = \"#ffffff\",\r\n\r\n  fontSize = 48,\r\n\r\n  blur = 14,\r\n\r\n  distance = 24,\r\n\r\n  duration = 0.8,\r\n\r\n  repeat = false,\r\n\r\n  className = \"\",\r\n\r\n  style,\r\n\r\n  ...props\r\n}: BlurRevealProps) {\r\n  return (\r\n    <div\r\n      {...props}\r\n      className={`fb-blur-reveal ${\r\n        repeat\r\n          ? \"fb-blur-reveal--repeat\"\r\n          : \"\"\r\n      } ${className}`}\r\n      style={{\r\n        ...style,\r\n\r\n        color,\r\n\r\n        fontSize:\r\n          `${fontSize}px`,\r\n\r\n        [\"--fb-blur-reveal-blur\" as string]:\r\n          `${blur}px`,\r\n\r\n        [\"--fb-blur-reveal-distance\" as string]:\r\n          `${distance}px`,\r\n\r\n        [\"--fb-blur-reveal-duration\" as string]:\r\n          `${duration}s`,\r\n      }}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n}"]}

package/dist/chunk-JHOJY54P.js

@@ -0,0 +1,123 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/heroes/SaasLaunchHero.tsx
+function SaasLaunchHero({
+  accent = "#8f73ff",
+  background = "#09090d",
+  headlineSize = 72,
+  eyebrow = "BUILT FOR MODERN TEAMS",
+  title = "Ship faster.\nScale smarter.",
+  description = "Everything your team needs to launch, learn and scale without adding unnecessary complexity.",
+  primaryLabel = "Start free",
+  secondaryLabel = "See demo",
+  showSecondary = true,
+  showProof = true,
+  className = "",
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ...props,
+      className: `fb-saas-launch-hero ${className}`,
+      style: {
+        ...style,
+        background,
+        ["--fb-saas-accent"]: accent,
+        ["--fb-saas-headline-size"]: `${headlineSize}px`
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "fb-saas-launch-hero__glow",
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "fb-saas-launch-hero__content", children: [
+          /* @__PURE__ */ jsx("span", { className: "fb-saas-launch-hero__eyebrow", children: eyebrow }),
+          /* @__PURE__ */ jsx("h2", { children: title.split("\n").map(
+            (line, index) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                children: line
+              },
+              `${line}-${index}`
+            )
+          ) }),
+          /* @__PURE__ */ jsx("p", { children: description }),
+          /* @__PURE__ */ jsxs("div", { className: "fb-saas-launch-hero__actions", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "fb-saas-launch-hero__primary",
+                children: primaryLabel
+              }
+            ),
+            showSecondary && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "fb-saas-launch-hero__secondary",
+                children: secondaryLabel
+              }
+            )
+          ] }),
+          showProof && /* @__PURE__ */ jsxs("div", { className: "fb-saas-launch-hero__proof", children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx("span", {}),
+                  /* @__PURE__ */ jsx("span", {}),
+                  /* @__PURE__ */ jsx("span", {})
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { children: "Trusted by product teams building the next generation." })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "fb-saas-launch-hero__visual",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "fb-saas-launch-hero__visual-card", children: [
+                /* @__PURE__ */ jsx("span", { children: "ACTIVE USERS" }),
+                /* @__PURE__ */ jsx("strong", { children: "42,891" }),
+                /* @__PURE__ */ jsx("small", { children: "+18.4%" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "fb-saas-launch-hero__bars", children: [
+                42,
+                64,
+                51,
+                76,
+                68,
+                88,
+                72
+              ].map(
+                (height, index) => /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      height: `${height}%`
+                    }
+                  },
+                  index
+                )
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { SaasLaunchHero };
+//# sourceMappingURL=chunk-JHOJY54P.js.map
+//# sourceMappingURL=chunk-JHOJY54P.js.map

package/dist/chunk-JHOJY54P.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/heroes/SaasLaunchHero.tsx"],"names":[],"mappings":"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","file":"chunk-JHOJY54P.js","sourcesContent":["import type {\r\n  HTMLAttributes,\r\n} from \"react\";\r\n\r\nimport \"./SaasLaunchHero.css\";\r\n\r\nexport interface SaasLaunchHeroProps\r\n  extends HTMLAttributes<HTMLElement> {\r\n  accent?: string;\r\n  background?: string;\r\n  headlineSize?: number;\r\n\r\n  eyebrow?: string;\r\n  title?: string;\r\n  description?: string;\r\n\r\n  primaryLabel?: string;\r\n  secondaryLabel?: string;\r\n\r\n  showSecondary?: boolean;\r\n  showProof?: boolean;\r\n\r\n  className?: string;\r\n}\r\n\r\nexport function SaasLaunchHero({\r\n  accent = \"#8f73ff\",\r\n  background = \"#09090d\",\r\n  headlineSize = 72,\r\n\r\n  eyebrow =\r\n    \"BUILT FOR MODERN TEAMS\",\r\n\r\n  title =\r\n    \"Ship faster.\\nScale smarter.\",\r\n\r\n  description =\r\n    \"Everything your team needs to launch, learn and scale without adding unnecessary complexity.\",\r\n\r\n  primaryLabel =\r\n    \"Start free\",\r\n\r\n  secondaryLabel =\r\n    \"See demo\",\r\n\r\n  showSecondary = true,\r\n  showProof = true,\r\n\r\n  className = \"\",\r\n  style,\r\n\r\n  ...props\r\n}: SaasLaunchHeroProps) {\r\n  return (\r\n    <section\r\n      {...props}\r\n      className={`fb-saas-launch-hero ${className}`}\r\n      style={{\r\n        ...style,\r\n\r\n        background,\r\n\r\n        [\"--fb-saas-accent\" as string]:\r\n          accent,\r\n\r\n        [\"--fb-saas-headline-size\" as string]:\r\n          `${headlineSize}px`,\r\n      }}\r\n    >\r\n      <div\r\n        className=\"fb-saas-launch-hero__glow\"\r\n        aria-hidden=\"true\"\r\n      />\r\n\r\n      <div className=\"fb-saas-launch-hero__content\">\r\n        <span className=\"fb-saas-launch-hero__eyebrow\">\r\n          {eyebrow}\r\n        </span>\r\n\r\n        <h2>\r\n          {title\r\n            .split(\"\\n\")\r\n            .map(\r\n              (\r\n                line,\r\n                index\r\n              ) => (\r\n                <span\r\n                  key={`${line}-${index}`}\r\n                >\r\n                  {line}\r\n                </span>\r\n              )\r\n            )}\r\n        </h2>\r\n\r\n        <p>\r\n          {description}\r\n        </p>\r\n\r\n        <div className=\"fb-saas-launch-hero__actions\">\r\n          <button\r\n            type=\"button\"\r\n            className=\"fb-saas-launch-hero__primary\"\r\n          >\r\n            {primaryLabel}\r\n          </button>\r\n\r\n          {showSecondary && (\r\n            <button\r\n              type=\"button\"\r\n              className=\"fb-saas-launch-hero__secondary\"\r\n            >\r\n              {secondaryLabel}\r\n            </button>\r\n          )}\r\n        </div>\r\n\r\n        {showProof && (\r\n          <div className=\"fb-saas-launch-hero__proof\">\r\n            <div\r\n              aria-hidden=\"true\"\r\n            >\r\n              <span />\r\n              <span />\r\n              <span />\r\n            </div>\r\n\r\n            <p>\r\n              Trusted by product\r\n              teams building the\r\n              next generation.\r\n            </p>\r\n          </div>\r\n        )}\r\n      </div>\r\n\r\n      <div\r\n        className=\"fb-saas-launch-hero__visual\"\r\n        aria-hidden=\"true\"\r\n      >\r\n        <div className=\"fb-saas-launch-hero__visual-card\">\r\n          <span>\r\n            ACTIVE USERS\r\n          </span>\r\n\r\n          <strong>\r\n            42,891\r\n          </strong>\r\n\r\n          <small>\r\n            +18.4%\r\n          </small>\r\n        </div>\r\n\r\n        <div className=\"fb-saas-launch-hero__bars\">\r\n          {[\r\n            42,\r\n            64,\r\n            51,\r\n            76,\r\n            68,\r\n            88,\r\n            72,\r\n          ].map(\r\n            (\r\n              height,\r\n              index\r\n            ) => (\r\n              <span\r\n                key={index}\r\n                style={{\r\n                  height:\r\n                    `${height}%`,\r\n                }}\r\n              />\r\n            )\r\n          )}\r\n        </div>\r\n      </div>\r\n    </section>\r\n  );\r\n}"]}

package/dist/chunk-JWV3IITG.js

@@ -0,0 +1,80 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/text/RevealText.tsx
+function RevealText({
+  children = /* @__PURE__ */ jsxs(Fragment, { children: [
+    "Build",
+    /* @__PURE__ */ jsx("br", {}),
+    "better",
+    /* @__PURE__ */ jsx("br", {}),
+    "interfaces"
+  ] }),
+  color = "#ffffff",
+  accent = "#866cff",
+  fontSize = 42,
+  lineHeight = 0.86,
+  duration = 0.7,
+  uppercase = true,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `fb-reveal-text ${className}`,
+      style: {
+        fontSize: `${fontSize}px`,
+        lineHeight,
+        animationDuration: `${duration}s`,
+        textTransform: uppercase ? "uppercase" : "none",
+        background: `linear-gradient(
+            90deg,
+            ${color},
+            ${accent}
+          )`,
+        backgroundClip: "text",
+        WebkitBackgroundClip: "text",
+        color: "transparent"
+      },
+      children
+    }
+  );
+}
+function BlurReveal({
+  children = /* @__PURE__ */ jsxs(Fragment, { children: [
+    "Interfaces",
+    /* @__PURE__ */ jsx("br", {}),
+    "worth",
+    /* @__PURE__ */ jsx("br", {}),
+    "remembering."
+  ] }),
+  color = "#ffffff",
+  fontSize = 48,
+  blur = 14,
+  distance = 24,
+  duration = 0.8,
+  repeat = false,
+  className = "",
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: `fb-blur-reveal ${repeat ? "fb-blur-reveal--repeat" : ""} ${className}`,
+      style: {
+        ...style,
+        color,
+        fontSize: `${fontSize}px`,
+        ["--fb-blur-reveal-blur"]: `${blur}px`,
+        ["--fb-blur-reveal-distance"]: `${distance}px`,
+        ["--fb-blur-reveal-duration"]: `${duration}s`
+      },
+      children
+    }
+  );
+}
+
+export { BlurReveal, RevealText };
+//# sourceMappingURL=chunk-JWV3IITG.js.map
+//# sourceMappingURL=chunk-JWV3IITG.js.map

package/dist/chunk-JWV3IITG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/text/RevealText.tsx","../src/text/BlurReveal.tsx"],"names":["jsxs","Fragment","jsx"],"mappings":";;;AAmBO,SAAS,UAAA,CAAW;AAAA,EACzB,2BACE,IAAA,CAAA,QAAA,EAAA,EAAE,QAAA,EAAA;AAAA,IAAA,OAAA;AAAA,wBAEC,IAAA,EAAA,EAAG,CAAA;AAAA,IAAE,QAAA;AAAA,wBAEL,IAAA,EAAA,EAAG,CAAA;AAAA,IAAE;AAAA,GAAA,EAER,CAAA;AAAA,EAGF,KAAA,GACE,SAAA;AAAA,EAEF,MAAA,GACE,SAAA;AAAA,EAEF,QAAA,GACE,EAAA;AAAA,EAEF,UAAA,GACE,IAAA;AAAA,EAEF,QAAA,GACE,GAAA;AAAA,EAEF,SAAA,GACE,IAAA;AAAA,EAEF,SAAA,GACE;AACJ,CAAA,EAAoB;AAClB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,kBAAkB,SAAS,CAAA,CAAA;AAAA,MACtC,KAAA,EAAO;AAAA,QACL,QAAA,EAEE,GAAG,QAAQ,CAAA,EAAA,CAAA;AAAA,QAEb,UAAA;AAAA,QAEA,iBAAA,EACE,GAAG,QAAQ,CAAA,CAAA,CAAA;AAAA,QAEb,aAAA,EACE,YACI,WAAA,GACA,MAAA;AAAA,QAEN,UAAA,EACE,CAAA;AAAA;AAAA,YAAA,EAEI,KAAK,CAAA;AAAA,YAAA,EACL,MAAM;AAAA,WAAA,CAAA;AAAA,QAGZ,cAAA,EACE,MAAA;AAAA,QAEF,oBAAA,EACE,MAAA;AAAA,QAEF,KAAA,EACE;AAAA,OACJ;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AC/DO,SAAS,UAAA,CAAW;AAAA,EACzB,QAAA,mBACEA,IAAAA,CAAAC,QAAAA,EAAA,EAAE,QAAA,EAAA;AAAA,IAAA,YAAA;AAAA,oBAEAC,IAAC,IAAA,EAAA,EAAG,CAAA;AAAA,IAAE,OAAA;AAAA,oBAENA,IAAC,IAAA,EAAA,EAAG,CAAA;AAAA,IAAE;AAAA,GAAA,EAER,CAAA;AAAA,EAGF,KAAA,GAAQ,SAAA;AAAA,EAER,QAAA,GAAW,EAAA;AAAA,EAEX,IAAA,GAAO,EAAA;AAAA,EAEP,QAAA,GAAW,EAAA;AAAA,EAEX,QAAA,GAAW,GAAA;AAAA,EAEX,MAAA,GAAS,KAAA;AAAA,EAET,SAAA,GAAY,EAAA;AAAA,EAEZ,KAAA;AAAA,EAEA,GAAG;AACL,CAAA,EAAoB;AAClB,EAAA,uBACEA,GAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,WAAW,CAAA,eAAA,EACT,MAAA,GACI,wBAAA,GACA,EACN,IAAI,SAAS,CAAA,CAAA;AAAA,MACb,KAAA,EAAO;AAAA,QACL,GAAG,KAAA;AAAA,QAEH,KAAA;AAAA,QAEA,QAAA,EACE,GAAG,QAAQ,CAAA,EAAA,CAAA;AAAA,QAEb,CAAC,uBAAiC,GAChC,CAAA,EAAG,IAAI,CAAA,EAAA,CAAA;AAAA,QAET,CAAC,2BAAqC,GACpC,CAAA,EAAG,QAAQ,CAAA,EAAA,CAAA;AAAA,QAEb,CAAC,2BAAqC,GACpC,CAAA,EAAG,QAAQ,CAAA,CAAA;AAAA,OACf;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-JWV3IITG.js","sourcesContent":["import \"./RevealText.css\";\r\n\r\nexport interface RevealTextProps {\r\n  children?: React.ReactNode;\r\n\r\n  color?: string;\r\n  accent?: string;\r\n\r\n  fontSize?: number;\r\n\r\n  lineHeight?: number;\r\n\r\n  duration?: number;\r\n\r\n  uppercase?: boolean;\r\n\r\n  className?: string;\r\n}\r\n\r\nexport function RevealText({\r\n  children = (\r\n    <>\r\n      Build\r\n      <br />\r\n      better\r\n      <br />\r\n      interfaces\r\n    </>\r\n  ),\r\n\r\n  color =\r\n    \"#ffffff\",\r\n\r\n  accent =\r\n    \"#866cff\",\r\n\r\n  fontSize =\r\n    42,\r\n\r\n  lineHeight =\r\n    0.86,\r\n\r\n  duration =\r\n    0.7,\r\n\r\n  uppercase =\r\n    true,\r\n\r\n  className =\r\n    \"\",\r\n}: RevealTextProps) {\r\n  return (\r\n    <div\r\n      className={`fb-reveal-text ${className}`}\r\n      style={{\r\n        fontSize:\r\n\r\n          `${fontSize}px`,\r\n\r\n        lineHeight,\r\n\r\n        animationDuration:\r\n          `${duration}s`,\r\n\r\n        textTransform:\r\n          uppercase\r\n            ? \"uppercase\"\r\n            : \"none\",\r\n\r\n        background:\r\n          `linear-gradient(\r\n            90deg,\r\n            ${color},\r\n            ${accent}\r\n          )`,\r\n\r\n        backgroundClip:\r\n          \"text\",\r\n\r\n        WebkitBackgroundClip:\r\n          \"text\",\r\n\r\n        color:\r\n          \"transparent\",\r\n      }}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n}","import type {\r\n  HTMLAttributes,\r\n  ReactNode,\r\n} from \"react\";\r\n\r\nimport \"./BlurReveal.css\";\r\n\r\nexport interface BlurRevealProps\r\n  extends HTMLAttributes<HTMLDivElement> {\r\n  children?: ReactNode;\r\n\r\n  color?: string;\r\n\r\n  fontSize?: number;\r\n\r\n  blur?: number;\r\n\r\n  distance?: number;\r\n\r\n  duration?: number;\r\n\r\n  repeat?: boolean;\r\n\r\n  className?: string;\r\n}\r\n\r\nexport function BlurReveal({\r\n  children = (\r\n    <>\r\n      Interfaces\r\n      <br />\r\n      worth\r\n      <br />\r\n      remembering.\r\n    </>\r\n  ),\r\n\r\n  color = \"#ffffff\",\r\n\r\n  fontSize = 48,\r\n\r\n  blur = 14,\r\n\r\n  distance = 24,\r\n\r\n  duration = 0.8,\r\n\r\n  repeat = false,\r\n\r\n  className = \"\",\r\n\r\n  style,\r\n\r\n  ...props\r\n}: BlurRevealProps) {\r\n  return (\r\n    <div\r\n      {...props}\r\n      className={`fb-blur-reveal ${\r\n        repeat\r\n          ? \"fb-blur-reveal--repeat\"\r\n          : \"\"\r\n      } ${className}`}\r\n      style={{\r\n        ...style,\r\n\r\n        color,\r\n\r\n        fontSize:\r\n          `${fontSize}px`,\r\n\r\n        [\"--fb-blur-reveal-blur\" as string]:\r\n          `${blur}px`,\r\n\r\n        [\"--fb-blur-reveal-distance\" as string]:\r\n          `${distance}px`,\r\n\r\n        [\"--fb-blur-reveal-duration\" as string]:\r\n          `${duration}s`,\r\n      }}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n}"]}

package/dist/chunk-K5QRX5CZ.js

@@ -0,0 +1,194 @@
+import { useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/buttons/MagneticButton.tsx
+function MagneticButton({
+  children = "Explore",
+  background = "#ffffff",
+  textColor = "#000000",
+  fontSize = 14,
+  radius = 999,
+  paddingX = 22,
+  paddingY = 13,
+  strength = 0.3,
+  className = ""
+}) {
+  const [
+    offset,
+    setOffset
+  ] = useState({
+    x: 0,
+    y: 0
+  });
+  function handleMove(event) {
+    const rect = event.currentTarget.getBoundingClientRect();
+    const centerX = rect.width / 2;
+    const centerY = rect.height / 2;
+    const x = event.clientX - rect.left - centerX;
+    const y = event.clientY - rect.top - centerY;
+    setOffset({
+      x: x * strength,
+      y: y * strength
+    });
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: `fb-magnetic-button ${className}`,
+      onMouseMove: handleMove,
+      onMouseLeave: () => setOffset({
+        x: 0,
+        y: 0
+      }),
+      style: {
+        background,
+        color: textColor,
+        fontSize,
+        borderRadius: radius,
+        padding: `${paddingY}px ${paddingX}px`,
+        transform: `translate3d(
+            ${offset.x}px,
+            ${offset.y}px,
+            0
+          )`
+      },
+      children
+    }
+  );
+}
+function GlowButton({
+  children = "Get started",
+  background = "#7b5cff",
+  textColor = "#ffffff",
+  glowColor = "#9b7cff",
+  glow = 32,
+  radius = 14,
+  fontSize = 14,
+  paddingX = 24,
+  className = "",
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...props,
+      type: props.type ?? "button",
+      className: `fb-glow-button ${className}`,
+      style: {
+        ...style,
+        background,
+        color: textColor,
+        borderRadius: radius,
+        fontSize,
+        padding: `13px ${paddingX}px`,
+        boxShadow: `0 0 ${glow}px ${glowColor}66`,
+        ["--fb-glow-button-color"]: glowColor
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "fb-glow-button__content", children }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "fb-glow-button__glow",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+}
+function hexToRgb(hex) {
+  const clean = hex.replace(
+    "#",
+    ""
+  );
+  if (clean.length !== 6) {
+    return {
+      r: 255,
+      g: 255,
+      b: 255
+    };
+  }
+  return {
+    r: parseInt(
+      clean.slice(
+        0,
+        2
+      ),
+      16
+    ),
+    g: parseInt(
+      clean.slice(
+        2,
+        4
+      ),
+      16
+    ),
+    b: parseInt(
+      clean.slice(
+        4,
+        6
+      ),
+      16
+    )
+  };
+}
+function GlassButton({
+  children = "Explore",
+  textColor = "#ffffff",
+  tint = "#ffffff",
+  opacity = 0.08,
+  blur = 16,
+  radius = 16,
+  borderOpacity = 0.18,
+  className = "",
+  style,
+  ...props
+}) {
+  const rgb = hexToRgb(
+    tint
+  );
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...props,
+      type: props.type ?? "button",
+      className: `fb-glass-button ${className}`,
+      style: {
+        ...style,
+        color: textColor,
+        background: `rgba(
+            ${rgb.r},
+            ${rgb.g},
+            ${rgb.b},
+            ${opacity}
+          )`,
+        backdropFilter: `blur(${blur}px)`,
+        WebkitBackdropFilter: `blur(${blur}px)`,
+        borderRadius: radius,
+        borderColor: `rgba(
+            255,
+            255,
+            255,
+            ${borderOpacity}
+          )`
+      },
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "fb-glass-button__shine",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { GlassButton, GlowButton, MagneticButton };
+//# sourceMappingURL=chunk-K5QRX5CZ.js.map
+//# sourceMappingURL=chunk-K5QRX5CZ.js.map

package/dist/chunk-K5QRX5CZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/buttons/MagneticButton.tsx","../src/buttons/GlowButton.tsx","../src/buttons/GlassButton.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"chunk-K5QRX5CZ.js","sourcesContent":["import {\r\n  useState,\r\n} from \"react\";\r\n\r\nimport \"./MagneticButton.css\";\r\n\r\nexport interface MagneticButtonProps {\r\n  children?: React.ReactNode;\r\n\r\n  background?: string;\r\n  textColor?: string;\r\n  fontSize?: number;\r\n  radius?: number;\r\n  paddingX?: number;\r\n  paddingY?: number;\r\n  strength?: number;\r\n\r\n  className?: string;\r\n}\r\n\r\nexport function MagneticButton({\r\n  children = \"Explore\",\r\n\r\n  background =\r\n    \"#ffffff\",\r\n\r\n  textColor =\r\n    \"#000000\",\r\n\r\n  fontSize =\r\n    14,\r\n\r\n  radius =\r\n    999,\r\n\r\n  paddingX =\r\n    22,\r\n\r\n  paddingY =\r\n    13,\r\n\r\n  strength =\r\n    0.3,\r\n\r\n  className =\r\n    \"\",\r\n}: MagneticButtonProps) {\r\n  const [\r\n    offset,\r\n    setOffset,\r\n  ] =\r\n    useState({\r\n      x: 0,\r\n      y: 0,\r\n    });\r\n\r\n  function handleMove(\r\n    event:\r\n      React.MouseEvent<HTMLButtonElement>\r\n  ) {\r\n    const rect =\r\n      event.currentTarget.getBoundingClientRect();\r\n\r\n    const centerX =\r\n      rect.width /\r\n      2;\r\n\r\n    const centerY =\r\n      rect.height /\r\n      2;\r\n\r\n    const x =\r\n      event.clientX -\r\n      rect.left -\r\n      centerX;\r\n\r\n    const y =\r\n      event.clientY -\r\n      rect.top -\r\n      centerY;\r\n\r\n    setOffset({\r\n      x:\r\n        x *\r\n        strength,\r\n\r\n      y:\r\n        y *\r\n        strength,\r\n    });\r\n  }\r\n\r\n  return (\r\n    <button\r\n      type=\"button\"\r\n      className={`fb-magnetic-button ${className}`}\r\n      onMouseMove={\r\n        handleMove\r\n      }\r\n      onMouseLeave={() =>\r\n        setOffset({\r\n          x: 0,\r\n          y: 0,\r\n        })\r\n      }\r\n      style={{\r\n        background,\r\n        color:\r\n          textColor,\r\n\r\n        fontSize,\r\n\r\n        borderRadius:\r\n          radius,\r\n\r\n        padding:\r\n          `${paddingY}px ${paddingX}px`,\r\n\r\n        transform:\r\n          `translate3d(\r\n            ${offset.x}px,\r\n            ${offset.y}px,\r\n            0\r\n          )`,\r\n      }}\r\n    >\r\n      {children}\r\n    </button>\r\n  );\r\n}","import type {\r\n  ButtonHTMLAttributes,\r\n  ReactNode,\r\n} from \"react\";\r\n\r\nimport \"./GlowButton.css\";\r\n\r\nexport interface GlowButtonProps\r\n  extends Omit<\r\n    ButtonHTMLAttributes<HTMLButtonElement>,\r\n    \"color\"\r\n  > {\r\n  children?: ReactNode;\r\n\r\n  background?: string;\r\n\r\n  textColor?: string;\r\n\r\n  glowColor?: string;\r\n\r\n  glow?: number;\r\n\r\n  radius?: number;\r\n\r\n  fontSize?: number;\r\n\r\n  paddingX?: number;\r\n}\r\n\r\nexport function GlowButton({\r\n  children = \"Get started\",\r\n\r\n  background = \"#7b5cff\",\r\n\r\n  textColor = \"#ffffff\",\r\n\r\n  glowColor = \"#9b7cff\",\r\n\r\n  glow = 32,\r\n\r\n  radius = 14,\r\n\r\n  fontSize = 14,\r\n\r\n  paddingX = 24,\r\n\r\n  className = \"\",\r\n\r\n  style,\r\n\r\n  ...props\r\n}: GlowButtonProps) {\r\n  return (\r\n    <button\r\n      {...props}\r\n      type={\r\n        props.type ??\r\n        \"button\"\r\n      }\r\n      className={`fb-glow-button ${className}`}\r\n      style={{\r\n        ...style,\r\n\r\n        background,\r\n\r\n        color:\r\n          textColor,\r\n\r\n        borderRadius:\r\n          radius,\r\n\r\n        fontSize,\r\n\r\n        padding:\r\n          `13px ${paddingX}px`,\r\n\r\n        boxShadow:\r\n          `0 0 ${glow}px ${glowColor}66`,\r\n\r\n        [\"--fb-glow-button-color\" as string]:\r\n          glowColor,\r\n      }}\r\n    >\r\n      <span className=\"fb-glow-button__content\">\r\n        {\r\n          children\r\n        }\r\n      </span>\r\n\r\n      <span\r\n        className=\"fb-glow-button__glow\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </button>\r\n  );\r\n}","import type {\r\n  ButtonHTMLAttributes,\r\n  ReactNode,\r\n} from \"react\";\r\n\r\nimport \"./GlassButton.css\";\r\n\r\nexport interface GlassButtonProps\r\n  extends Omit<\r\n    ButtonHTMLAttributes<HTMLButtonElement>,\r\n    \"color\"\r\n  > {\r\n  children?: ReactNode;\r\n\r\n  textColor?: string;\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\r\nfunction hexToRgb(\r\n  hex: string\r\n) {\r\n  const clean =\r\n    hex.replace(\r\n      \"#\",\r\n      \"\"\r\n    );\r\n\r\n  if (\r\n    clean.length !==\r\n    6\r\n  ) {\r\n    return {\r\n      r: 255,\r\n      g: 255,\r\n      b: 255,\r\n    };\r\n  }\r\n\r\n  return {\r\n    r:\r\n      parseInt(\r\n        clean.slice(\r\n          0,\r\n          2\r\n        ),\r\n        16\r\n      ),\r\n\r\n    g:\r\n      parseInt(\r\n        clean.slice(\r\n          2,\r\n          4\r\n        ),\r\n        16\r\n      ),\r\n\r\n    b:\r\n      parseInt(\r\n        clean.slice(\r\n          4,\r\n          6\r\n        ),\r\n        16\r\n      ),\r\n  };\r\n}\r\n\r\nexport function GlassButton({\r\n  children = \"Explore\",\r\n\r\n  textColor = \"#ffffff\",\r\n\r\n  tint = \"#ffffff\",\r\n\r\n  opacity = 0.08,\r\n\r\n  blur = 16,\r\n\r\n  radius = 16,\r\n\r\n  borderOpacity = 0.18,\r\n\r\n  className = \"\",\r\n\r\n  style,\r\n\r\n  ...props\r\n}: GlassButtonProps) {\r\n  const rgb =\r\n    hexToRgb(\r\n      tint\r\n    );\r\n\r\n  return (\r\n    <button\r\n      {...props}\r\n      type={\r\n        props.type ??\r\n        \"button\"\r\n      }\r\n      className={`fb-glass-button ${className}`}\r\n      style={{\r\n        ...style,\r\n\r\n        color:\r\n          textColor,\r\n\r\n        background:\r\n          `rgba(\r\n            ${rgb.r},\r\n            ${rgb.g},\r\n            ${rgb.b},\r\n            ${opacity}\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        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    >\r\n      {\r\n        children\r\n      }\r\n\r\n      <span\r\n        className=\"fb-glass-button__shine\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </button>\r\n  );\r\n}"]}