@farzadbagheri/fb-components 0.1.0

package/dist/chunk-4FWJRWS5.cjs

@@ -0,0 +1,125 @@
+'use strict';
+
+var jsxRuntime = require('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__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      ...props,
+      className: `fb-saas-launch-hero ${className}`,
+      style: {
+        ...style,
+        background,
+        ["--fb-saas-accent"]: accent,
+        ["--fb-saas-headline-size"]: `${headlineSize}px`
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "fb-saas-launch-hero__glow",
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fb-saas-launch-hero__content", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fb-saas-launch-hero__eyebrow", children: eyebrow }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title.split("\n").map(
+            (line, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                children: line
+              },
+              `${line}-${index}`
+            )
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { children: description }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fb-saas-launch-hero__actions", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "fb-saas-launch-hero__primary",
+                children: primaryLabel
+              }
+            ),
+            showSecondary && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "fb-saas-launch-hero__secondary",
+                children: secondaryLabel
+              }
+            )
+          ] }),
+          showProof && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fb-saas-launch-hero__proof", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", {})
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Trusted by product teams building the next generation." })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "fb-saas-launch-hero__visual",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fb-saas-launch-hero__visual-card", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "ACTIVE USERS" }),
+                /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "42,891" }),
+                /* @__PURE__ */ jsxRuntime.jsx("small", { children: "+18.4%" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fb-saas-launch-hero__bars", children: [
+                42,
+                64,
+                51,
+                76,
+                68,
+                88,
+                72
+              ].map(
+                (height, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    style: {
+                      height: `${height}%`
+                    }
+                  },
+                  index
+                )
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.SaasLaunchHero = SaasLaunchHero;
+//# sourceMappingURL=chunk-4FWJRWS5.cjs.map
+//# sourceMappingURL=chunk-4FWJRWS5.cjs.map

package/dist/chunk-4FWJRWS5.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/heroes/SaasLaunchHero.tsx"],"names":["jsxs","jsx"],"mappings":"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","file":"chunk-4FWJRWS5.cjs","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-BSEOOGOV.cjs

@@ -0,0 +1,217 @@
+'use strict';
+
+var react = require('react');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/ai/AiPromptBox.tsx
+function AiPromptBox({
+  background = "#111116",
+  accent = "#9b7cff",
+  textColor = "#ffffff",
+  radius = 20,
+  minHeight = 150,
+  showModel = true,
+  showAttachment = true,
+  modelLabel = "FB AI \xB7 Fast",
+  placeholder = "Ask anything...",
+  defaultValue = "",
+  disabled = false,
+  onSubmit,
+  className = "",
+  style,
+  ...props
+}) {
+  const [
+    value,
+    setValue
+  ] = react.useState(
+    defaultValue
+  );
+  function handleSubmit(event) {
+    event.preventDefault();
+    const trimmed = value.trim();
+    if (disabled || !trimmed) {
+      return;
+    }
+    onSubmit?.(
+      trimmed
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      className: `fb-ai-prompt-box ${className}`,
+      style: {
+        ...style,
+        background,
+        color: textColor,
+        borderRadius: radius,
+        minHeight,
+        ["--fb-ai-prompt-accent"]: accent
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "form",
+        {
+          className: "fb-ai-prompt-box__form",
+          onSubmit: handleSubmit,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fb-ai-prompt-box__field", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                lucideReact.Sparkles,
+                {
+                  className: "fb-ai-prompt-box__spark",
+                  size: 16,
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "textarea",
+                {
+                  value,
+                  disabled,
+                  placeholder,
+                  "aria-label": placeholder,
+                  onChange: (event) => setValue(
+                    event.target.value
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fb-ai-prompt-box__footer", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fb-ai-prompt-box__actions", children: [
+                showAttachment && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Attach file",
+                    className: "fb-ai-prompt-box__secondary",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      lucideReact.Paperclip,
+                      {
+                        size: 15,
+                        "aria-hidden": "true"
+                      }
+                    )
+                  }
+                ),
+                showModel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fb-ai-prompt-box__model", children: modelLabel })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "submit",
+                  disabled: disabled || !value.trim(),
+                  className: "fb-ai-prompt-box__submit",
+                  "aria-label": "Submit prompt",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    lucideReact.ArrowUp,
+                    {
+                      size: 16,
+                      "aria-hidden": "true"
+                    }
+                  )
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function StreamingResponse({
+  text = "FB Components gives your application a reusable system for motion, interaction and AI-native interfaces.",
+  accent = "#9b7cff",
+  textColor = "#ffffff",
+  speed = 24,
+  showCursor = true,
+  showStatus = true,
+  statusLabel = "GENERATING",
+  className = "",
+  style,
+  ...props
+}) {
+  const [
+    length,
+    setLength
+  ] = react.useState(0);
+  react.useEffect(() => {
+    setLength(
+      0
+    );
+    if (text.length === 0) {
+      return;
+    }
+    const interval = window.setInterval(
+      () => {
+        setLength(
+          (current) => {
+            if (current >= text.length) {
+              window.clearInterval(
+                interval
+              );
+              return current;
+            }
+            return current + 1;
+          }
+        );
+      },
+      Math.max(
+        5,
+        speed
+      )
+    );
+    return () => window.clearInterval(
+      interval
+    );
+  }, [
+    text,
+    speed
+  ]);
+  const complete = length >= text.length;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...props,
+      className: `fb-streaming-response ${className}`,
+      style: {
+        ...style,
+        color: textColor,
+        ["--fb-streaming-accent"]: accent
+      },
+      "aria-live": "polite",
+      children: [
+        showStatus && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fb-streaming-response__status", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: complete ? "is-complete" : "",
+              "aria-hidden": "true"
+            }
+          ),
+          complete ? "COMPLETE" : statusLabel
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+          text.slice(
+            0,
+            length
+          ),
+          showCursor && !complete && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "fb-streaming-response__cursor",
+              "aria-hidden": "true"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+exports.AiPromptBox = AiPromptBox;
+exports.StreamingResponse = StreamingResponse;
+//# sourceMappingURL=chunk-BSEOOGOV.cjs.map
+//# sourceMappingURL=chunk-BSEOOGOV.cjs.map

package/dist/chunk-BSEOOGOV.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ai/AiPromptBox.tsx","../src/ai/StreamingResponse.tsx"],"names":["useState","jsx","jsxs","Sparkles","Paperclip","ArrowUp","useEffect"],"mappings":";;;;;;;AAmDO,SAAS,WAAA,CAAY;AAAA,EAC1B,UAAA,GAAa,SAAA;AAAA,EAEb,MAAA,GAAS,SAAA;AAAA,EAET,SAAA,GAAY,SAAA;AAAA,EAEZ,MAAA,GAAS,EAAA;AAAA,EAET,SAAA,GAAY,GAAA;AAAA,EAEZ,SAAA,GAAY,IAAA;AAAA,EAEZ,cAAA,GAAiB,IAAA;AAAA,EAEjB,UAAA,GAAa,iBAAA;AAAA,EAEb,WAAA,GACE,iBAAA;AAAA,EAEF,YAAA,GAAe,EAAA;AAAA,EAEf,QAAA,GAAW,KAAA;AAAA,EAEX,QAAA;AAAA,EAEA,SAAA,GAAY,EAAA;AAAA,EAEZ,KAAA;AAAA,EAEA,GAAG;AACL,CAAA,EAAqB;AACnB,EAAA,MAAM;AAAA,IACJ,KAAA;AAAA,IACA;AAAA,GACF,GACEA,cAAA;AAAA,IACE;AAAA,GACF;AAEF,EAAA,SAAS,aACP,KAAA,EAEA;AACA,IAAA,KAAA,CAAM,cAAA,EAAe;AAErB,IAAA,MAAM,OAAA,GACJ,MAAM,IAAA,EAAK;AAEb,IAAA,IACE,QAAA,IACA,CAAC,OAAA,EACD;AACA,MAAA;AAAA,IACF;AAEA,IAAA,QAAA;AAAA,MACE;AAAA,KACF;AAAA,EACF;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,oBAAoB,SAAS,CAAA,CAAA;AAAA,MACxC,KAAA,EAAO;AAAA,QACL,GAAG,KAAA;AAAA,QAEH,UAAA;AAAA,QAEA,KAAA,EACE,SAAA;AAAA,QAEF,YAAA,EACE,MAAA;AAAA,QAEF,SAAA;AAAA,QAEA,CAAC,uBAAiC,GAChC;AAAA,OACJ;AAAA,MAEA,QAAA,kBAAAC,eAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,wBAAA;AAAA,UACV,QAAA,EACE,YAAA;AAAA,UAGF,QAAA,EAAA;AAAA,4BAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yBAAA,EACb,QAAA,EAAA;AAAA,8BAAAD,cAAA;AAAA,gBAACE,oBAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,yBAAA;AAAA,kBACV,IAAA,EAAM,EAAA;AAAA,kBACN,aAAA,EAAY;AAAA;AAAA,eACd;AAAA,8BAEAF,cAAA;AAAA,gBAAC,UAAA;AAAA,gBAAA;AAAA,kBACC,KAAA;AAAA,kBAGA,QAAA;AAAA,kBAGA,WAAA;AAAA,kBAGA,YAAA,EACE,WAAA;AAAA,kBAEF,QAAA,EAAU,CACR,KAAA,KAEA,QAAA;AAAA,oBACE,MAAM,MAAA,CACH;AAAA;AACL;AAAA;AAEJ,aAAA,EACF,CAAA;AAAA,4BAEAC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0BAAA,EACb,QAAA,EAAA;AAAA,8BAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,2BAAA,EACZ,QAAA,EAAA;AAAA,gBAAA,cAAA,oBACCD,cAAA;AAAA,kBAAC,QAAA;AAAA,kBAAA;AAAA,oBACC,IAAA,EAAK,QAAA;AAAA,oBACL,YAAA,EAAW,aAAA;AAAA,oBACX,SAAA,EAAU,6BAAA;AAAA,oBAEV,QAAA,kBAAAA,cAAA;AAAA,sBAACG,qBAAA;AAAA,sBAAA;AAAA,wBACC,IAAA,EAAM,EAAA;AAAA,wBACN,aAAA,EAAY;AAAA;AAAA;AACd;AAAA,iBACF;AAAA,gBAGD,SAAA,oBACCH,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,2BAEZ,QAAA,EAAA,UAAA,EAEJ;AAAA,eAAA,EAEJ,CAAA;AAAA,8BAEAA,cAAA;AAAA,gBAAC,QAAA;AAAA,gBAAA;AAAA,kBACC,IAAA,EAAK,QAAA;AAAA,kBACL,QAAA,EACE,QAAA,IACA,CAAC,KAAA,CAAM,IAAA,EAAK;AAAA,kBAEd,SAAA,EAAU,0BAAA;AAAA,kBACV,YAAA,EAAW,eAAA;AAAA,kBAEX,QAAA,kBAAAA,cAAA;AAAA,oBAACI,mBAAA;AAAA,oBAAA;AAAA,sBACC,IAAA,EAAM,EAAA;AAAA,sBACN,aAAA,EAAY;AAAA;AAAA;AACd;AAAA;AACF,aAAA,EACF;AAAA;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;ACxLO,SAAS,iBAAA,CAAkB;AAAA,EAChC,IAAA,GACE,0GAAA;AAAA,EAEF,MAAA,GAAS,SAAA;AAAA,EACT,SAAA,GAAY,SAAA;AAAA,EAEZ,KAAA,GAAQ,EAAA;AAAA,EAER,UAAA,GAAa,IAAA;AAAA,EACb,UAAA,GAAa,IAAA;AAAA,EAEb,WAAA,GACE,YAAA;AAAA,EAEF,SAAA,GAAY,EAAA;AAAA,EACZ,KAAA;AAAA,EAEA,GAAG;AACL,CAAA,EAA2B;AACzB,EAAA,MAAM;AAAA,IACJ,MAAA;AAAA,IACA;AAAA,GACF,GACEL,eAAS,CAAC,CAAA;AAEZ,EAAAM,eAAA,CAAU,MAAM;AACd,IAAA,SAAA;AAAA,MACE;AAAA,KACF;AAEA,IAAA,IACE,IAAA,CAAK,WACL,CAAA,EACA;AACA,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,WACJ,MAAA,CAAO,WAAA;AAAA,MACL,MAAM;AACJ,QAAA,SAAA;AAAA,UACE,CACE,OAAA,KACG;AACH,YAAA,IACE,OAAA,IACA,KAAK,MAAA,EACL;AACA,cAAA,MAAA,CAAO,aAAA;AAAA,gBACL;AAAA,eACF;AAEA,cAAA,OAAO,OAAA;AAAA,YACT;AAEA,YAAA,OACE,OAAA,GACA,CAAA;AAAA,UAEJ;AAAA,SACF;AAAA,MACF,CAAA;AAAA,MACA,IAAA,CAAK,GAAA;AAAA,QACH,CAAA;AAAA,QACA;AAAA;AACF,KACF;AAEF,IAAA,OAAO,MACL,MAAA,CAAO,aAAA;AAAA,MACL;AAAA,KACF;AAAA,EACJ,CAAA,EAAG;AAAA,IACD,IAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,QAAA,GACJ,UACA,IAAA,CAAK,MAAA;AAEP,EAAA,uBACEJ,eAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,yBAAyB,SAAS,CAAA,CAAA;AAAA,MAC7C,KAAA,EAAO;AAAA,QACL,GAAG,KAAA;AAAA,QAEH,KAAA,EACE,SAAA;AAAA,QAEF,CAAC,uBAAiC,GAChC;AAAA,OACJ;AAAA,MACA,WAAA,EAAU,QAAA;AAAA,MAET,QAAA,EAAA;AAAA,QAAA,UAAA,oBACCA,eAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+BAAA,EACb,QAAA,EAAA;AAAA,0BAAAD,cAAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EACE,WACI,aAAA,GACA,EAAA;AAAA,cAEN,aAAA,EAAY;AAAA;AAAA,WACd;AAAA,UAEC,WACG,UAAA,GACA;AAAA,SAAA,EACN,CAAA;AAAA,wBAGFC,gBAAC,GAAA,EAAA,EACE,QAAA,EAAA;AAAA,UAAA,IAAA,CAAK,KAAA;AAAA,YACJ,CAAA;AAAA,YACA;AAAA,WACF;AAAA,UAEC,UAAA,IACC,CAAC,QAAA,oBACCD,cAAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,+BAAA;AAAA,cACV,aAAA,EAAY;AAAA;AAAA;AACd,SAAA,EAEN;AAAA;AAAA;AAAA,GACF;AAEJ","file":"chunk-BSEOOGOV.cjs","sourcesContent":["import {\r\n  useState,\r\n} from \"react\";\r\n\r\nimport type {\r\n  FormEvent,\r\n  HTMLAttributes,\r\n} from \"react\";\r\n\r\nimport {\r\n  ArrowUp,\r\n  Paperclip,\r\n  Sparkles,\r\n} from \"lucide-react\";\r\n\r\nimport \"./AiPromptBox.css\";\r\n\r\nexport interface AiPromptBoxProps\r\n  extends Omit<\r\n    HTMLAttributes<HTMLDivElement>,\r\n    \"onSubmit\"\r\n  > {\r\n  background?: string;\r\n\r\n  accent?: string;\r\n\r\n  textColor?: string;\r\n\r\n  radius?: number;\r\n\r\n  minHeight?: number;\r\n\r\n  showModel?: boolean;\r\n\r\n  showAttachment?: boolean;\r\n\r\n  modelLabel?: string;\r\n\r\n  placeholder?: string;\r\n\r\n  defaultValue?: string;\r\n\r\n  disabled?: boolean;\r\n\r\n  onSubmit?: (\r\n    value: string\r\n  ) => void;\r\n\r\n  className?: string;\r\n}\r\n\r\nexport function AiPromptBox({\r\n  background = \"#111116\",\r\n\r\n  accent = \"#9b7cff\",\r\n\r\n  textColor = \"#ffffff\",\r\n\r\n  radius = 20,\r\n\r\n  minHeight = 150,\r\n\r\n  showModel = true,\r\n\r\n  showAttachment = true,\r\n\r\n  modelLabel = \"FB AI · Fast\",\r\n\r\n  placeholder =\r\n    \"Ask anything...\",\r\n\r\n  defaultValue = \"\",\r\n\r\n  disabled = false,\r\n\r\n  onSubmit,\r\n\r\n  className = \"\",\r\n\r\n  style,\r\n\r\n  ...props\r\n}: AiPromptBoxProps) {\r\n  const [\r\n    value,\r\n    setValue,\r\n  ] =\r\n    useState(\r\n      defaultValue\r\n    );\r\n\r\n  function handleSubmit(\r\n    event:\r\n      FormEvent<HTMLFormElement>\r\n  ) {\r\n    event.preventDefault();\r\n\r\n    const trimmed =\r\n      value.trim();\r\n\r\n    if (\r\n      disabled ||\r\n      !trimmed\r\n    ) {\r\n      return;\r\n    }\r\n\r\n    onSubmit?.(\r\n      trimmed\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div\r\n      {...props}\r\n      className={`fb-ai-prompt-box ${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        minHeight,\r\n\r\n        [\"--fb-ai-prompt-accent\" as string]:\r\n          accent,\r\n      }}\r\n    >\r\n      <form\r\n        className=\"fb-ai-prompt-box__form\"\r\n        onSubmit={\r\n          handleSubmit\r\n        }\r\n      >\r\n        <div className=\"fb-ai-prompt-box__field\">\r\n          <Sparkles\r\n            className=\"fb-ai-prompt-box__spark\"\r\n            size={16}\r\n            aria-hidden=\"true\"\r\n          />\r\n\r\n          <textarea\r\n            value={\r\n              value\r\n            }\r\n            disabled={\r\n              disabled\r\n            }\r\n            placeholder={\r\n              placeholder\r\n            }\r\n            aria-label={\r\n              placeholder\r\n            }\r\n            onChange={(\r\n              event\r\n            ) =>\r\n              setValue(\r\n                event.target\r\n                  .value\r\n              )\r\n            }\r\n          />\r\n        </div>\r\n\r\n        <div className=\"fb-ai-prompt-box__footer\">\r\n          <div className=\"fb-ai-prompt-box__actions\">\r\n            {showAttachment && (\r\n              <button\r\n                type=\"button\"\r\n                aria-label=\"Attach file\"\r\n                className=\"fb-ai-prompt-box__secondary\"\r\n              >\r\n                <Paperclip\r\n                  size={15}\r\n                  aria-hidden=\"true\"\r\n                />\r\n              </button>\r\n            )}\r\n\r\n            {showModel && (\r\n              <span className=\"fb-ai-prompt-box__model\">\r\n                {\r\n                  modelLabel\r\n                }\r\n              </span>\r\n            )}\r\n          </div>\r\n\r\n          <button\r\n            type=\"submit\"\r\n            disabled={\r\n              disabled ||\r\n              !value.trim()\r\n            }\r\n            className=\"fb-ai-prompt-box__submit\"\r\n            aria-label=\"Submit prompt\"\r\n          >\r\n            <ArrowUp\r\n              size={16}\r\n              aria-hidden=\"true\"\r\n            />\r\n          </button>\r\n        </div>\r\n      </form>\r\n    </div>\r\n  );\r\n}","import {\r\n  useEffect,\r\n  useState,\r\n} from \"react\";\r\n\r\nimport type {\r\n  HTMLAttributes,\r\n} from \"react\";\r\n\r\nimport \"./StreamingResponse.css\";\r\n\r\nexport interface StreamingResponseProps\r\n  extends HTMLAttributes<HTMLDivElement> {\r\n  text?: string;\r\n\r\n  accent?: string;\r\n  textColor?: string;\r\n\r\n  speed?: number;\r\n\r\n  showCursor?: boolean;\r\n  showStatus?: boolean;\r\n\r\n  statusLabel?: string;\r\n\r\n  className?: string;\r\n}\r\n\r\nexport function StreamingResponse({\r\n  text =\r\n    \"FB Components gives your application a reusable system for motion, interaction and AI-native interfaces.\",\r\n\r\n  accent = \"#9b7cff\",\r\n  textColor = \"#ffffff\",\r\n\r\n  speed = 24,\r\n\r\n  showCursor = true,\r\n  showStatus = true,\r\n\r\n  statusLabel =\r\n    \"GENERATING\",\r\n\r\n  className = \"\",\r\n  style,\r\n\r\n  ...props\r\n}: StreamingResponseProps) {\r\n  const [\r\n    length,\r\n    setLength,\r\n  ] =\r\n    useState(0);\r\n\r\n  useEffect(() => {\r\n    setLength(\r\n      0\r\n    );\r\n\r\n    if (\r\n      text.length ===\r\n      0\r\n    ) {\r\n      return;\r\n    }\r\n\r\n    const interval =\r\n      window.setInterval(\r\n        () => {\r\n          setLength(\r\n            (\r\n              current\r\n            ) => {\r\n              if (\r\n                current >=\r\n                text.length\r\n              ) {\r\n                window.clearInterval(\r\n                  interval\r\n                );\r\n\r\n                return current;\r\n              }\r\n\r\n              return (\r\n                current +\r\n                1\r\n              );\r\n            }\r\n          );\r\n        },\r\n        Math.max(\r\n          5,\r\n          speed\r\n        )\r\n      );\r\n\r\n    return () =>\r\n      window.clearInterval(\r\n        interval\r\n      );\r\n  }, [\r\n    text,\r\n    speed,\r\n  ]);\r\n\r\n  const complete =\r\n    length >=\r\n    text.length;\r\n\r\n  return (\r\n    <div\r\n      {...props}\r\n      className={`fb-streaming-response ${className}`}\r\n      style={{\r\n        ...style,\r\n\r\n        color:\r\n          textColor,\r\n\r\n        [\"--fb-streaming-accent\" as string]:\r\n          accent,\r\n      }}\r\n      aria-live=\"polite\"\r\n    >\r\n      {showStatus && (\r\n        <div className=\"fb-streaming-response__status\">\r\n          <span\r\n            className={\r\n              complete\r\n                ? \"is-complete\"\r\n                : \"\"\r\n            }\r\n            aria-hidden=\"true\"\r\n          />\r\n\r\n          {complete\r\n            ? \"COMPLETE\"\r\n            : statusLabel}\r\n        </div>\r\n      )}\r\n\r\n      <p>\r\n        {text.slice(\r\n          0,\r\n          length\r\n        )}\r\n\r\n        {showCursor &&\r\n          !complete && (\r\n            <span\r\n              className=\"fb-streaming-response__cursor\"\r\n              aria-hidden=\"true\"\r\n            />\r\n          )}\r\n      </p>\r\n    </div>\r\n  );\r\n}"]}

package/dist/chunk-C3ASXASL.cjs

@@ -0,0 +1,205 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/ui/SpotlightCard.tsx
+function SpotlightCard({
+  children = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "FB" }),
+    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Spotlight" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Move your pointer across the card." })
+  ] }),
+  background = "#111116",
+  spotlightColor = "#9b7cff",
+  radius = 14,
+  glow = 35,
+  borderOpacity = 0.12,
+  className = ""
+}) {
+  const [
+    point,
+    setPoint
+  ] = react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fb-glass-card__eyebrow", children: "01 / FEATURE" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fb-glass-card__content", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
+        "Built for",
+        /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+        "motion."
+      ] }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "fb-glass-card__glow",
+            "aria-hidden": "true",
+            style: {
+              background: glowColor,
+              filter: `blur(${glow}px)`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fb-glass-card__inner", children })
+      ]
+    }
+  );
+}
+
+exports.GlassCard = GlassCard;
+exports.SpotlightCard = SpotlightCard;
+//# sourceMappingURL=chunk-C3ASXASL.cjs.map
+//# sourceMappingURL=chunk-C3ASXASL.cjs.map

package/dist/chunk-C3ASXASL.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/SpotlightCard.tsx","../src/ui/GlassCard.tsx"],"names":["jsxs","Fragment","jsx","useState"],"mappings":"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","file":"chunk-C3ASXASL.cjs","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}"]}