@tampadevs/react 0.1.0

package/dist/index12.js

@@ -0,0 +1,133 @@
+import { jsxs as e, Fragment as l, jsx as t } from "react/jsx-runtime";
+import { clsx as p } from "./index28.js";
+import { Button as b } from "./index2.js";
+function h({
+  title: r,
+  description: a,
+  primaryText: n,
+  primaryHref: i,
+  secondaryText: o,
+  secondaryHref: c,
+  children: s,
+  className: d
+}) {
+  return /* @__PURE__ */ e(l, { children: [
+    /* @__PURE__ */ e("div", { className: p("td-cta-section", d), children: [
+      r && /* @__PURE__ */ t("h2", { className: "td-cta-section__title", children: r }),
+      a && /* @__PURE__ */ t("p", { className: "td-cta-section__description", children: a }),
+      s,
+      /* @__PURE__ */ e("div", { className: "td-cta-section__actions", children: [
+        n && i && /* @__PURE__ */ t(
+          b,
+          {
+            variant: "primary",
+            href: i,
+            className: "td-cta-section__btn td-cta-section__btn--primary",
+            children: n
+          }
+        ),
+        o && c && /* @__PURE__ */ t("a", { href: c, className: "td-cta-section__btn td-cta-section__btn--secondary", children: o })
+      ] })
+    ] }),
+    /* @__PURE__ */ t(m, {})
+  ] });
+}
+function m() {
+  return /* @__PURE__ */ t("style", { children: `
+      .td-cta-section {
+        border-radius: 1rem;
+        padding: 2rem;
+        text-align: center;
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
+        background: rgba(28, 36, 56, 0.8);
+        border: 1px solid rgba(255, 255, 255, 0.05);
+        box-shadow:
+          inset 0 1px 1px 0 rgba(255, 255, 255, 0.05),
+          0 8px 24px -4px rgba(0, 0, 0, 0.15);
+      }
+
+      @media (min-width: 768px) {
+        .td-cta-section {
+          padding: 3rem;
+        }
+      }
+
+      .td-cta-section__title {
+        font-size: 1.5rem;
+        font-weight: 700;
+        color: white;
+        margin: 0 0 1rem 0;
+      }
+
+      @media (min-width: 768px) {
+        .td-cta-section__title {
+          font-size: 1.875rem;
+        }
+      }
+
+      .td-cta-section__description {
+        color: rgba(209, 213, 219, 0.8);
+        max-width: 42rem;
+        margin: 0 auto 2rem;
+        line-height: 1.6;
+      }
+
+      .td-cta-section__actions {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        gap: 1rem;
+      }
+
+      .td-cta-section__btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        min-width: 160px;
+        height: 48px;
+        padding: 0 1.5rem;
+        border-radius: 0.5rem;
+        font-weight: 600;
+        font-size: 0.875rem;
+        text-decoration: none;
+        transition: all 0.15s ease;
+        border: 1px solid transparent;
+        box-sizing: border-box;
+      }
+
+      .td-cta-section__btn--primary {
+        background-color: #E85A4F;
+        color: white;
+        border-color: transparent;
+        text-transform: uppercase;
+        letter-spacing: 0.025em;
+        box-shadow: 0 4px 6px -1px rgba(232, 90, 79, 0.25);
+      }
+
+      .td-cta-section__btn--primary:hover {
+        background-color: #F07167;
+        transform: translateY(-1px);
+        box-shadow: 0 6px 10px -2px rgba(232, 90, 79, 0.3);
+      }
+
+      .td-cta-section__btn--secondary {
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
+        background: rgba(255, 255, 255, 0.15);
+        border-color: rgba(255, 255, 255, 0.2);
+        color: white;
+      }
+
+      .td-cta-section__btn--secondary:hover {
+        background: rgba(255, 255, 255, 0.25);
+        transform: translateY(-2px);
+      }
+    ` });
+}
+export {
+  h as CtaSection
+};
+//# sourceMappingURL=index12.js.map

package/dist/index12.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index12.js","sources":["../src/components/CtaSection.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { clsx } from 'clsx';\nimport { Button } from './Button';\n\nexport interface CtaSectionProps {\n  title?: string;\n  description?: string;\n  primaryText?: string;\n  primaryHref?: string;\n  secondaryText?: string;\n  secondaryHref?: string;\n  children?: ReactNode;\n  className?: string;\n}\n\nexport function CtaSection({\n  title,\n  description,\n  primaryText,\n  primaryHref,\n  secondaryText,\n  secondaryHref,\n  children,\n  className,\n}: CtaSectionProps) {\n  return (\n    <>\n      <div className={clsx('td-cta-section', className)}>\n        {title && <h2 className=\"td-cta-section__title\">{title}</h2>}\n        {description && <p className=\"td-cta-section__description\">{description}</p>}\n\n        {children}\n\n        <div className=\"td-cta-section__actions\">\n          {primaryText && primaryHref && (\n            <Button\n              variant=\"primary\"\n              href={primaryHref}\n              className=\"td-cta-section__btn td-cta-section__btn--primary\"\n            >\n              {primaryText}\n            </Button>\n          )}\n\n          {secondaryText && secondaryHref && (\n            <a href={secondaryHref} className=\"td-cta-section__btn td-cta-section__btn--secondary\">\n              {secondaryText}\n            </a>\n          )}\n        </div>\n      </div>\n      <CtaSectionStyles />\n    </>\n  );\n}\n\nfunction CtaSectionStyles() {\n  return (\n    <style>{`\n      .td-cta-section {\n        border-radius: 1rem;\n        padding: 2rem;\n        text-align: center;\n        backdrop-filter: blur(12px);\n        -webkit-backdrop-filter: blur(12px);\n        background: rgba(28, 36, 56, 0.8);\n        border: 1px solid rgba(255, 255, 255, 0.05);\n        box-shadow:\n          inset 0 1px 1px 0 rgba(255, 255, 255, 0.05),\n          0 8px 24px -4px rgba(0, 0, 0, 0.15);\n      }\n\n      @media (min-width: 768px) {\n        .td-cta-section {\n          padding: 3rem;\n        }\n      }\n\n      .td-cta-section__title {\n        font-size: 1.5rem;\n        font-weight: 700;\n        color: white;\n        margin: 0 0 1rem 0;\n      }\n\n      @media (min-width: 768px) {\n        .td-cta-section__title {\n          font-size: 1.875rem;\n        }\n      }\n\n      .td-cta-section__description {\n        color: rgba(209, 213, 219, 0.8);\n        max-width: 42rem;\n        margin: 0 auto 2rem;\n        line-height: 1.6;\n      }\n\n      .td-cta-section__actions {\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: center;\n        align-items: center;\n        gap: 1rem;\n      }\n\n      .td-cta-section__btn {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        gap: 0.5rem;\n        min-width: 160px;\n        height: 48px;\n        padding: 0 1.5rem;\n        border-radius: 0.5rem;\n        font-weight: 600;\n        font-size: 0.875rem;\n        text-decoration: none;\n        transition: all 0.15s ease;\n        border: 1px solid transparent;\n        box-sizing: border-box;\n      }\n\n      .td-cta-section__btn--primary {\n        background-color: #E85A4F;\n        color: white;\n        border-color: transparent;\n        text-transform: uppercase;\n        letter-spacing: 0.025em;\n        box-shadow: 0 4px 6px -1px rgba(232, 90, 79, 0.25);\n      }\n\n      .td-cta-section__btn--primary:hover {\n        background-color: #F07167;\n        transform: translateY(-1px);\n        box-shadow: 0 6px 10px -2px rgba(232, 90, 79, 0.3);\n      }\n\n      .td-cta-section__btn--secondary {\n        backdrop-filter: blur(12px);\n        -webkit-backdrop-filter: blur(12px);\n        background: rgba(255, 255, 255, 0.15);\n        border-color: rgba(255, 255, 255, 0.2);\n        color: white;\n      }\n\n      .td-cta-section__btn--secondary:hover {\n        background: rgba(255, 255, 255, 0.25);\n        transform: translateY(-2px);\n      }\n    `}</style>\n  );\n}\n"],"names":["CtaSection","title","description","primaryText","primaryHref","secondaryText","secondaryHref","children","className","jsxs","Fragment","clsx","jsx","Button","CtaSectionStyles"],"mappings":";;;AAeO,SAASA,EAAW;AAAA,EACzB,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAAoB;AAClB,SACE,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWE,EAAK,kBAAkBH,CAAS,GAC7C,UAAA;AAAA,MAAAP,KAAS,gBAAAW,EAAC,MAAA,EAAG,WAAU,yBAAyB,UAAAX,GAAM;AAAA,MACtDC,KAAe,gBAAAU,EAAC,KAAA,EAAE,WAAU,+BAA+B,UAAAV,GAAY;AAAA,MAEvEK;AAAA,MAED,gBAAAE,EAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,QAAAN,KAAeC,KACd,gBAAAQ;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAMT;AAAA,YACN,WAAU;AAAA,YAET,UAAAD;AAAA,UAAA;AAAA,QAAA;AAAA,QAIJE,KAAiBC,KAChB,gBAAAM,EAAC,KAAA,EAAE,MAAMN,GAAe,WAAU,sDAC/B,UAAAD,EAAA,CACH;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA,GACF;AAAA,sBACCS,GAAA,CAAA,CAAiB;AAAA,EAAA,GACpB;AAEJ;AAEA,SAASA,IAAmB;AAC1B,2BACG,SAAA,EAAO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OA4FN;AAEN;"}

package/dist/index13.js

@@ -0,0 +1,112 @@
+import { jsxs as t, Fragment as n, jsx as e } from "react/jsx-runtime";
+import { clsx as g } from "./index28.js";
+import { Button as _ } from "./index2.js";
+function v({
+  imageSrc: i,
+  imageAlt: o = "",
+  title: r,
+  description: a,
+  reversed: c = !1,
+  imagePosition: l = "cover",
+  ctaText: m,
+  ctaHref: d,
+  image: s,
+  children: p,
+  className: x
+}) {
+  return /* @__PURE__ */ t(n, { children: [
+    /* @__PURE__ */ t("div", { className: g("td-image-text", c && "td-image-text--reversed", x), children: [
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: g("td-image-text__image-wrapper", `td-image-text__image-wrapper--${l}`),
+          children: s || i && /* @__PURE__ */ e("img", { src: i, alt: o })
+        }
+      ),
+      /* @__PURE__ */ t("div", { className: "td-image-text__content", children: [
+        p || /* @__PURE__ */ t(n, { children: [
+          r && /* @__PURE__ */ e("h2", { className: "td-image-text__title", children: r }),
+          a && /* @__PURE__ */ e("p", { className: "td-image-text__description", children: a })
+        ] }),
+        m && d && /* @__PURE__ */ e(_, { variant: "primary", href: d, className: "td-image-text__cta", children: m })
+      ] })
+    ] }),
+    /* @__PURE__ */ e(h, {})
+  ] });
+}
+function h() {
+  return /* @__PURE__ */ e("style", { children: `
+      .td-image-text {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 2rem;
+        align-items: center;
+      }
+
+      @media (min-width: 768px) {
+        .td-image-text {
+          grid-template-columns: 1fr 1fr;
+        }
+
+        .td-image-text--reversed {
+          direction: rtl;
+        }
+
+        .td-image-text--reversed > * {
+          direction: ltr;
+        }
+      }
+
+      .td-image-text__image-wrapper {
+        width: 100%;
+        aspect-ratio: 16 / 10;
+        border-radius: 0.5rem;
+        overflow: hidden;
+        background-color: #E5E7EB;
+      }
+
+      .td-image-text__image-wrapper img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .td-image-text__image-wrapper--contain img {
+        object-fit: contain;
+      }
+
+      .td-image-text__image-wrapper--auto img {
+        object-fit: none;
+      }
+
+      .td-image-text__content {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      .td-image-text__title {
+        font-size: 2rem;
+        font-weight: 700;
+        color: #111827;
+        margin: 0;
+        line-height: 1.2;
+      }
+
+      .td-image-text__description {
+        font-size: 1.125rem;
+        color: #6B7280;
+        margin: 0;
+        line-height: 1.6;
+      }
+
+      .td-image-text__cta {
+        margin-top: 0.5rem;
+        width: fit-content;
+      }
+    ` });
+}
+export {
+  v as ImageText
+};
+//# sourceMappingURL=index13.js.map

package/dist/index13.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index13.js","sources":["../src/components/ImageText.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { clsx } from 'clsx';\nimport { Button } from './Button';\n\nexport interface ImageTextProps {\n  imageSrc?: string;\n  imageAlt?: string;\n  title?: string;\n  description?: string;\n  reversed?: boolean;\n  imagePosition?: 'cover' | 'contain' | 'auto';\n  ctaText?: string;\n  ctaHref?: string;\n  image?: ReactNode;\n  children?: ReactNode;\n  className?: string;\n}\n\nexport function ImageText({\n  imageSrc,\n  imageAlt = '',\n  title,\n  description,\n  reversed = false,\n  imagePosition = 'cover',\n  ctaText,\n  ctaHref,\n  image,\n  children,\n  className,\n}: ImageTextProps) {\n  return (\n    <>\n      <div className={clsx('td-image-text', reversed && 'td-image-text--reversed', className)}>\n        <div\n          className={clsx('td-image-text__image-wrapper', `td-image-text__image-wrapper--${imagePosition}`)}\n        >\n          {image || (imageSrc && <img src={imageSrc} alt={imageAlt} />)}\n        </div>\n\n        <div className=\"td-image-text__content\">\n          {children || (\n            <>\n              {title && <h2 className=\"td-image-text__title\">{title}</h2>}\n              {description && <p className=\"td-image-text__description\">{description}</p>}\n            </>\n          )}\n\n          {ctaText && ctaHref && (\n            <Button variant=\"primary\" href={ctaHref} className=\"td-image-text__cta\">\n              {ctaText}\n            </Button>\n          )}\n        </div>\n      </div>\n      <ImageTextStyles />\n    </>\n  );\n}\n\nfunction ImageTextStyles() {\n  return (\n    <style>{`\n      .td-image-text {\n        display: grid;\n        grid-template-columns: 1fr;\n        gap: 2rem;\n        align-items: center;\n      }\n\n      @media (min-width: 768px) {\n        .td-image-text {\n          grid-template-columns: 1fr 1fr;\n        }\n\n        .td-image-text--reversed {\n          direction: rtl;\n        }\n\n        .td-image-text--reversed > * {\n          direction: ltr;\n        }\n      }\n\n      .td-image-text__image-wrapper {\n        width: 100%;\n        aspect-ratio: 16 / 10;\n        border-radius: 0.5rem;\n        overflow: hidden;\n        background-color: #E5E7EB;\n      }\n\n      .td-image-text__image-wrapper img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n\n      .td-image-text__image-wrapper--contain img {\n        object-fit: contain;\n      }\n\n      .td-image-text__image-wrapper--auto img {\n        object-fit: none;\n      }\n\n      .td-image-text__content {\n        display: flex;\n        flex-direction: column;\n        gap: 1rem;\n      }\n\n      .td-image-text__title {\n        font-size: 2rem;\n        font-weight: 700;\n        color: #111827;\n        margin: 0;\n        line-height: 1.2;\n      }\n\n      .td-image-text__description {\n        font-size: 1.125rem;\n        color: #6B7280;\n        margin: 0;\n        line-height: 1.6;\n      }\n\n      .td-image-text__cta {\n        margin-top: 0.5rem;\n        width: fit-content;\n      }\n    `}</style>\n  );\n}\n"],"names":["ImageText","imageSrc","imageAlt","title","description","reversed","imagePosition","ctaText","ctaHref","image","children","className","jsxs","Fragment","clsx","jsx","Button","ImageTextStyles"],"mappings":";;;AAkBO,SAASA,EAAU;AAAA,EACxB,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,eAAAC,IAAgB;AAAA,EAChB,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAAmB;AACjB,SACE,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAD,EAAC,SAAI,WAAWE,EAAK,iBAAiBT,KAAY,2BAA2BM,CAAS,GACpF,UAAA;AAAA,MAAA,gBAAAI;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWD,EAAK,gCAAgC,iCAAiCR,CAAa,EAAE;AAAA,UAE/F,eAAUL,KAAY,gBAAAc,EAAC,SAAI,KAAKd,GAAU,KAAKC,EAAA,CAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAG5D,gBAAAU,EAAC,OAAA,EAAI,WAAU,0BACZ,UAAA;AAAA,QAAAF,KACC,gBAAAE,EAAAC,GAAA,EACG,UAAA;AAAA,UAAAV,KAAS,gBAAAY,EAAC,MAAA,EAAG,WAAU,wBAAwB,UAAAZ,GAAM;AAAA,UACrDC,KAAe,gBAAAW,EAAC,KAAA,EAAE,WAAU,8BAA8B,UAAAX,EAAA,CAAY;AAAA,QAAA,GACzE;AAAA,QAGDG,KAAWC,KACV,gBAAAO,EAACC,GAAA,EAAO,SAAQ,WAAU,MAAMR,GAAS,WAAU,sBAChD,UAAAD,EAAA,CACH;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA,GACF;AAAA,sBACCU,GAAA,CAAA,CAAgB;AAAA,EAAA,GACnB;AAEJ;AAEA,SAASA,IAAkB;AACzB,2BACG,SAAA,EAAO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAqEN;AAEN;"}

package/dist/index14.js

@@ -0,0 +1,286 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useState as b } from "react";
+import { clsx as c } from "./index28.js";
+import { Button as g } from "./index2.js";
+function N({
+  title: p = "Keep in touch",
+  description: u = "Stay informed with local tech news, upcoming events, job opportunities, and more from Tampa Devs.",
+  endpoint: w = "https://newsletter.api.tampa.dev/subscribe",
+  onSubmit: n,
+  onSuccess: o,
+  onError: i,
+  className: _
+}) {
+  const [s, r] = b("idle"), h = async (l) => {
+    l.preventDefault(), r("submitting");
+    const d = l.currentTarget, m = new FormData(d);
+    n == null || n(m);
+    try {
+      if ((await fetch(w, {
+        method: "POST",
+        body: m
+      })).ok)
+        r("success"), d.reset(), o == null || o(), setTimeout(() => r("idle"), 2e3);
+      else
+        throw new Error("Subscription failed");
+    } catch (a) {
+      r("error"), i == null || i(a instanceof Error ? a : new Error("Unknown error")), setTimeout(() => r("idle"), 2e3);
+    }
+  }, f = {
+    idle: "Subscribe",
+    submitting: "Subscribing...",
+    success: "Subscribed",
+    error: "Something Broke"
+  };
+  return /* @__PURE__ */ t("section", { className: c("td-newsletter", _), id: "newsletter", children: [
+    /* @__PURE__ */ t("div", { className: "td-newsletter__content", children: [
+      /* @__PURE__ */ t("div", { children: [
+        /* @__PURE__ */ t("h2", { className: "td-newsletter__title", children: [
+          /* @__PURE__ */ e(
+            "svg",
+            {
+              className: "td-newsletter__icon",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              children: /* @__PURE__ */ e(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+                }
+              )
+            }
+          ),
+          p
+        ] }),
+        /* @__PURE__ */ e("p", { className: "td-newsletter__description", children: u })
+      ] }),
+      /* @__PURE__ */ t("form", { className: "td-newsletter__form", onSubmit: h, children: [
+        /* @__PURE__ */ t("div", { className: "td-newsletter__form-row", children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "text",
+              name: "firstname",
+              placeholder: "First name",
+              autoComplete: "off",
+              className: "td-newsletter__input"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "text",
+              name: "lastname",
+              placeholder: "Last name",
+              autoComplete: "off",
+              className: "td-newsletter__input"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "email",
+              name: "email",
+              placeholder: "Email address",
+              required: !0,
+              autoComplete: "off",
+              className: "td-newsletter__input"
+            }
+          ),
+          /* @__PURE__ */ e(
+            g,
+            {
+              type: "submit",
+              loading: s === "submitting",
+              className: c("td-newsletter__submit", `td-newsletter__submit--${s}`),
+              children: f[s]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t("div", { "aria-hidden": "true", style: { display: "none" }, children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              name: "phone",
+              defaultValue: "(813) 555-0199",
+              placeholder: "Phone",
+              autoComplete: "off"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "email",
+              defaultValue: "",
+              name: "verify_email",
+              placeholder: "Verify Email Address",
+              autoComplete: "off"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ t("p", { className: "td-newsletter__footer", children: [
+        "Visit",
+        " ",
+        /* @__PURE__ */ e("a", { href: "https://www.tampadevs.com/", children: "our website" }),
+        " ",
+        "to learn more about Tampa Devs' charitable mission."
+      ] })
+    ] }),
+    /* @__PURE__ */ e("style", { children: `
+        .td-newsletter {
+          background: #E85A4F;
+          scroll-margin-top: 5rem;
+        }
+
+        .td-newsletter__content {
+          max-width: 56rem;
+          margin: 0 auto;
+          padding: 4rem 1rem;
+        }
+
+        @media (min-width: 640px) {
+          .td-newsletter__content {
+            padding: 4rem 1.5rem;
+          }
+        }
+
+        @media (min-width: 1024px) {
+          .td-newsletter__content {
+            padding: 4rem 2rem;
+          }
+        }
+
+        .td-newsletter__title {
+          font-size: 1.5rem;
+          font-weight: 700;
+          color: white;
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          margin: 0;
+        }
+
+        @media (min-width: 768px) {
+          .td-newsletter__title {
+            font-size: 1.875rem;
+          }
+        }
+
+        .td-newsletter__icon {
+          width: 1.75rem;
+          height: 1.75rem;
+        }
+
+        .td-newsletter__description {
+          margin-top: 0.75rem;
+          color: rgba(255, 255, 255, 0.9);
+          font-size: 1.125rem;
+          line-height: 1.5;
+        }
+
+        .td-newsletter__form {
+          margin-top: 2rem;
+        }
+
+        .td-newsletter__form-row {
+          display: flex;
+          flex-direction: column;
+          gap: 0.75rem;
+        }
+
+        @media (min-width: 768px) {
+          .td-newsletter__form-row {
+            flex-direction: row;
+          }
+        }
+
+        .td-newsletter__input {
+          flex: 1;
+          padding: 0.75rem 1rem;
+          border-radius: 0.5rem;
+          backdrop-filter: blur(4px);
+          background: rgba(255, 255, 255, 0.15);
+          border: 1px solid rgba(255, 255, 255, 0.25);
+          color: white;
+          font-size: 1rem;
+          transition: all 0.15s ease;
+          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
+        }
+
+        .td-newsletter__input::placeholder {
+          color: rgba(255, 255, 255, 0.5);
+        }
+
+        .td-newsletter__input:focus {
+          outline: none;
+          border-color: rgba(255, 255, 255, 0.6);
+          background: rgba(255, 255, 255, 0.2);
+        }
+
+        .td-newsletter__submit {
+          padding: 0.75rem 2rem;
+          border-radius: 0.5rem;
+          font-weight: 600;
+          transition: all 0.15s ease;
+          white-space: nowrap;
+          cursor: pointer;
+          border: none;
+          font-size: 1rem;
+        }
+
+        .td-newsletter__submit.td-newsletter__submit--idle {
+          background: white !important;
+          color: #374151 !important;
+          box-shadow: none !important;
+          text-transform: none;
+        }
+
+        .td-newsletter__submit.td-newsletter__submit--idle:hover {
+          background: #1C2438 !important;
+          color: white !important;
+          transform: translateY(-1px);
+          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
+        }
+
+        .td-newsletter__submit--submitting {
+          background: #E5E7EB;
+          color: #6B7280;
+          cursor: wait;
+        }
+
+        .td-newsletter__submit--success {
+          background: #DCFCE7;
+          color: #166534;
+        }
+
+        .td-newsletter__submit--error {
+          background: #374151;
+          color: white;
+        }
+
+        .td-newsletter__footer {
+          margin-top: 2rem;
+          font-size: 0.875rem;
+          color: rgba(255, 255, 255, 0.7);
+        }
+
+        .td-newsletter__footer a {
+          text-decoration: underline;
+          color: white;
+        }
+
+        .td-newsletter__footer a:hover {
+          color: rgba(255, 255, 255, 0.9);
+        }
+      ` })
+  ] });
+}
+export {
+  N as NewsletterSignup
+};
+//# sourceMappingURL=index14.js.map

package/dist/index14.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index14.js","sources":["../src/components/NewsletterSignup.tsx"],"sourcesContent":["'use client';\n\nimport { useState, FormEvent } from 'react';\nimport { clsx } from 'clsx';\nimport { Button } from './Button';\n\ntype SubmitStatus = 'idle' | 'submitting' | 'success' | 'error';\n\nexport interface NewsletterSignupProps {\n  title?: string;\n  description?: string;\n  endpoint?: string;\n  onSubmit?: (formData: FormData) => void;\n  onSuccess?: () => void;\n  onError?: (error: Error) => void;\n  className?: string;\n}\n\nexport function NewsletterSignup({\n  title = 'Keep in touch',\n  description = 'Stay informed with local tech news, upcoming events, job opportunities, and more from Tampa Devs.',\n  endpoint = 'https://newsletter.api.tampa.dev/subscribe',\n  onSubmit,\n  onSuccess,\n  onError,\n  className,\n}: NewsletterSignupProps) {\n  const [status, setStatus] = useState<SubmitStatus>('idle');\n\n  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    setStatus('submitting');\n\n    const form = e.currentTarget;\n    const formData = new FormData(form);\n\n    onSubmit?.(formData);\n\n    try {\n      const response = await fetch(endpoint, {\n        method: 'POST',\n        body: formData,\n      });\n\n      if (response.ok) {\n        setStatus('success');\n        form.reset();\n        onSuccess?.();\n        setTimeout(() => setStatus('idle'), 2000);\n      } else {\n        throw new Error('Subscription failed');\n      }\n    } catch (err) {\n      setStatus('error');\n      onError?.(err instanceof Error ? err : new Error('Unknown error'));\n      setTimeout(() => setStatus('idle'), 2000);\n    }\n  };\n\n  const buttonText: Record<SubmitStatus, string> = {\n    idle: 'Subscribe',\n    submitting: 'Subscribing...',\n    success: 'Subscribed',\n    error: 'Something Broke',\n  };\n\n  return (\n    <section className={clsx('td-newsletter', className)} id=\"newsletter\">\n      <div className=\"td-newsletter__content\">\n        <div>\n          <h2 className=\"td-newsletter__title\">\n            <svg\n              className=\"td-newsletter__icon\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\n              />\n            </svg>\n            {title}\n          </h2>\n          <p className=\"td-newsletter__description\">{description}</p>\n        </div>\n\n        <form className=\"td-newsletter__form\" onSubmit={handleSubmit}>\n          <div className=\"td-newsletter__form-row\">\n            <input\n              type=\"text\"\n              name=\"firstname\"\n              placeholder=\"First name\"\n              autoComplete=\"off\"\n              className=\"td-newsletter__input\"\n            />\n            <input\n              type=\"text\"\n              name=\"lastname\"\n              placeholder=\"Last name\"\n              autoComplete=\"off\"\n              className=\"td-newsletter__input\"\n            />\n            <input\n              type=\"email\"\n              name=\"email\"\n              placeholder=\"Email address\"\n              required\n              autoComplete=\"off\"\n              className=\"td-newsletter__input\"\n            />\n            <Button\n              type=\"submit\"\n              loading={status === 'submitting'}\n              className={clsx('td-newsletter__submit', `td-newsletter__submit--${status}`)}\n            >\n              {buttonText[status]}\n            </Button>\n          </div>\n\n          {/* Honeypot fields */}\n          <div aria-hidden=\"true\" style={{ display: 'none' }}>\n            <input\n              name=\"phone\"\n              defaultValue=\"(813) 555-0199\"\n              placeholder=\"Phone\"\n              autoComplete=\"off\"\n            />\n            <input\n              type=\"email\"\n              defaultValue=\"\"\n              name=\"verify_email\"\n              placeholder=\"Verify Email Address\"\n              autoComplete=\"off\"\n            />\n          </div>\n        </form>\n\n        <p className=\"td-newsletter__footer\">\n          Visit{' '}\n          <a href=\"https://www.tampadevs.com/\">our website</a>{' '}\n          to learn more about Tampa Devs&apos; charitable mission.\n        </p>\n      </div>\n\n      <style>{`\n        .td-newsletter {\n          background: #E85A4F;\n          scroll-margin-top: 5rem;\n        }\n\n        .td-newsletter__content {\n          max-width: 56rem;\n          margin: 0 auto;\n          padding: 4rem 1rem;\n        }\n\n        @media (min-width: 640px) {\n          .td-newsletter__content {\n            padding: 4rem 1.5rem;\n          }\n        }\n\n        @media (min-width: 1024px) {\n          .td-newsletter__content {\n            padding: 4rem 2rem;\n          }\n        }\n\n        .td-newsletter__title {\n          font-size: 1.5rem;\n          font-weight: 700;\n          color: white;\n          display: flex;\n          align-items: center;\n          gap: 0.75rem;\n          margin: 0;\n        }\n\n        @media (min-width: 768px) {\n          .td-newsletter__title {\n            font-size: 1.875rem;\n          }\n        }\n\n        .td-newsletter__icon {\n          width: 1.75rem;\n          height: 1.75rem;\n        }\n\n        .td-newsletter__description {\n          margin-top: 0.75rem;\n          color: rgba(255, 255, 255, 0.9);\n          font-size: 1.125rem;\n          line-height: 1.5;\n        }\n\n        .td-newsletter__form {\n          margin-top: 2rem;\n        }\n\n        .td-newsletter__form-row {\n          display: flex;\n          flex-direction: column;\n          gap: 0.75rem;\n        }\n\n        @media (min-width: 768px) {\n          .td-newsletter__form-row {\n            flex-direction: row;\n          }\n        }\n\n        .td-newsletter__input {\n          flex: 1;\n          padding: 0.75rem 1rem;\n          border-radius: 0.5rem;\n          backdrop-filter: blur(4px);\n          background: rgba(255, 255, 255, 0.15);\n          border: 1px solid rgba(255, 255, 255, 0.25);\n          color: white;\n          font-size: 1rem;\n          transition: all 0.15s ease;\n          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);\n        }\n\n        .td-newsletter__input::placeholder {\n          color: rgba(255, 255, 255, 0.5);\n        }\n\n        .td-newsletter__input:focus {\n          outline: none;\n          border-color: rgba(255, 255, 255, 0.6);\n          background: rgba(255, 255, 255, 0.2);\n        }\n\n        .td-newsletter__submit {\n          padding: 0.75rem 2rem;\n          border-radius: 0.5rem;\n          font-weight: 600;\n          transition: all 0.15s ease;\n          white-space: nowrap;\n          cursor: pointer;\n          border: none;\n          font-size: 1rem;\n        }\n\n        .td-newsletter__submit.td-newsletter__submit--idle {\n          background: white !important;\n          color: #374151 !important;\n          box-shadow: none !important;\n          text-transform: none;\n        }\n\n        .td-newsletter__submit.td-newsletter__submit--idle:hover {\n          background: #1C2438 !important;\n          color: white !important;\n          transform: translateY(-1px);\n          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;\n        }\n\n        .td-newsletter__submit--submitting {\n          background: #E5E7EB;\n          color: #6B7280;\n          cursor: wait;\n        }\n\n        .td-newsletter__submit--success {\n          background: #DCFCE7;\n          color: #166534;\n        }\n\n        .td-newsletter__submit--error {\n          background: #374151;\n          color: white;\n        }\n\n        .td-newsletter__footer {\n          margin-top: 2rem;\n          font-size: 0.875rem;\n          color: rgba(255, 255, 255, 0.7);\n        }\n\n        .td-newsletter__footer a {\n          text-decoration: underline;\n          color: white;\n        }\n\n        .td-newsletter__footer a:hover {\n          color: rgba(255, 255, 255, 0.9);\n        }\n      `}</style>\n    </section>\n  );\n}\n"],"names":["NewsletterSignup","title","description","endpoint","onSubmit","onSuccess","onError","className","status","setStatus","useState","handleSubmit","e","form","formData","err","buttonText","jsxs","clsx","jsx","Button"],"mappings":"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"}