@braintwopoint0/playback-commons 0.1.21 → 0.2.1

package/dist/ui/index.js

@@ -2364,69 +2364,507 @@ function LumaSpin() {
 }
 
 // src/ui/footer.tsx
+import * as React26 from "react";
 import Image2 from "next/image";
 import Link2 from "next/link";
 import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
-function Footer() {
-  return /* @__PURE__ */ jsxs19("footer", { className: "container mx-auto flex p-5 items-center justify-between border-t border-[var(--timberwolf)]", children: [
-    /* @__PURE__ */ jsxs19("div", { className: "flex gap-4", children: [
-      /* @__PURE__ */ jsx35(Link2, { href: "https://www.instagram.com/playback_global", target: "_blank", children: /* @__PURE__ */ jsx35(
-        Image2,
-        {
-          src: "/assets/instagram.png",
-          alt: "PLAYBACK Instagram",
-          height: 50,
-          width: 50,
-          className: "h-9 w-9"
-        }
-      ) }),
-      /* @__PURE__ */ jsx35(Link2, { href: "https://youtube.com/@playback_global", target: "_blank", children: /* @__PURE__ */ jsx35(
-        Image2,
-        {
-          src: "/assets/youtube.png",
-          alt: "PLAYBACK YouTube",
-          height: 50,
-          width: 50,
-          className: "h-9 w-9"
-        }
-      ) }),
-      /* @__PURE__ */ jsx35(Link2, { href: "https://www.tiktok.com/@playback_global", target: "_blank", children: /* @__PURE__ */ jsx35(
-        Image2,
-        {
-          src: "/assets/tiktok.png",
-          alt: "PLAYBACK TikTok",
-          height: 50,
-          width: 50,
-          className: "h-9 w-9"
-        }
-      ) }),
-      /* @__PURE__ */ jsx35(
-        Link2,
-        {
-          href: "https://www.linkedin.com/company/playbacksports/",
-          target: "_blank",
-          children: /* @__PURE__ */ jsx35(
-            Image2,
+var DEFAULT_SOCIALS = [
+  {
+    label: "Instagram",
+    href: "https://www.instagram.com/playback_global",
+    src: "/assets/instagram.png"
+  },
+  {
+    label: "YouTube",
+    href: "https://youtube.com/@playback_global",
+    src: "/assets/youtube.png"
+  },
+  {
+    label: "TikTok",
+    href: "https://www.tiktok.com/@playback_global",
+    src: "/assets/tiktok.png"
+  },
+  {
+    label: "LinkedIn",
+    href: "https://www.linkedin.com/company/playbacksports/",
+    src: "/assets/linkedin.png"
+  }
+];
+function NewsletterForm({
+  onSubmit
+}) {
+  const [email, setEmail] = React26.useState("");
+  const [state, setState] = React26.useState("idle");
+  const handle = async (e) => {
+    e.preventDefault();
+    const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());
+    if (!ok) {
+      setState("error");
+      return;
+    }
+    try {
+      if (onSubmit) await onSubmit(email.trim());
+      setState("sent");
+      setEmail("");
+    } catch {
+      setState("error");
+    }
+  };
+  return /* @__PURE__ */ jsxs19(
+    "form",
+    {
+      onSubmit: handle,
+      noValidate: true,
+      "aria-label": "Subscribe to updates",
+      className: "w-full max-w-md",
+      children: [
+        /* @__PURE__ */ jsx35(
+          "label",
+          {
+            htmlFor: "footer-newsletter",
+            className: "block text-[12px] uppercase tracking-[0.14em] text-[rgba(214,213,201,0.44)] mb-3",
+            children: "Stay in the loop"
+          }
+        ),
+        /* @__PURE__ */ jsxs19("div", { className: "flex flex-col sm:flex-row gap-2", children: [
+          /* @__PURE__ */ jsx35(
+            "input",
+            {
+              id: "footer-newsletter",
+              type: "email",
+              inputMode: "email",
+              autoComplete: "email",
+              required: true,
+              value: email,
+              onChange: (e) => {
+                setEmail(e.target.value);
+                if (state !== "idle") setState("idle");
+              },
+              placeholder: "you@club.com",
+              "aria-invalid": state === "error",
+              "aria-describedby": "footer-newsletter-feedback",
+              className: cn(
+                "flex-1 h-11 rounded-full bg-[var(--surface-1,#0f1512)] border px-4 text-[14px] text-[var(--timberwolf)] placeholder:text-[rgba(214,213,201,0.44)]",
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--timberwolf)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--night)]",
+                state === "error" ? "border-[rgba(237,106,106,0.5)]" : "border-[rgba(214,213,201,0.08)]"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx35(
+            "button",
             {
-              src: "/assets/linkedin.png",
-              alt: "PLAYBACK LinkedIn",
-              height: 50,
-              width: 50,
-              className: "h-9 w-9"
+              type: "submit",
+              className: "inline-flex items-center justify-center h-11 px-5 rounded-full bg-[var(--timberwolf)] text-[var(--night)] text-[14px] font-medium hover:bg-[var(--ash-grey)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--timberwolf)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--night)]",
+              children: "Subscribe"
             }
           )
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs19("h2", { className: "text-lg", children: [
-      "by",
-      " ",
-      /* @__PURE__ */ jsx35(Link2, { href: "https://www.braintwopoint0.com", children: /* @__PURE__ */ jsxs19("span", { style: { fontFamily: "AvertaStd-Semibold" }, children: [
-        "BRAIN",
-        /* @__PURE__ */ jsx35("span", { style: { fontFamily: "AvertaStd-Thin" }, children: "2.0" })
-      ] }) })
-    ] })
-  ] });
+        ] }),
+        /* @__PURE__ */ jsxs19(
+          "p",
+          {
+            id: "footer-newsletter-feedback",
+            className: cn(
+              "mt-2 text-[13px] min-h-[1.25rem]",
+              state === "sent" && "text-[var(--timberwolf)]",
+              state === "error" && "text-[rgb(237,106,106)]",
+              state === "idle" && "text-[rgba(214,213,201,0.44)]"
+            ),
+            role: state === "error" ? "alert" : void 0,
+            children: [
+              state === "sent" && "Thanks \u2014 we\u2019ll be in touch.",
+              state === "error" && "Please enter a valid email address.",
+              state === "idle" && "Monthly notes on product, network, and matches."
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function FooterLinkItem({ link }) {
+  const classes = "text-[14px] text-[rgba(214,213,201,0.64)] hover:text-[var(--timberwolf)] transition-colors rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--timberwolf)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-0,#0a100d)]";
+  if (link.external) {
+    return /* @__PURE__ */ jsx35(
+      "a",
+      {
+        href: link.href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: classes,
+        children: link.label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx35(Link2, { href: link.href, className: classes, children: link.label });
+}
+function Footer({
+  columns,
+  socials = DEFAULT_SOCIALS,
+  newsletter = false,
+  tagline = "You PLAY. We BACK.",
+  showTagline = true,
+  logoSrc = "/branding/PLAYBACK-Text.png",
+  logoAlt = "PLAYBACK",
+  siteName = "PLAYBACK",
+  creditHref = "https://www.braintwopoint0.com",
+  creditLabel = "Built by BRAIN2.0",
+  newsletterAction,
+  className
+} = {}) {
+  const hasColumns = columns && columns.length > 0;
+  return /* @__PURE__ */ jsxs19(
+    "footer",
+    {
+      id: "footer",
+      className: cn(
+        "mt-24 border-t border-[rgba(214,213,201,0.08)] bg-[var(--surface-0,#0a100d)]",
+        className
+      ),
+      "aria-labelledby": "footer-heading",
+      children: [
+        /* @__PURE__ */ jsxs19("h2", { id: "footer-heading", className: "sr-only", children: [
+          siteName,
+          " site footer"
+        ] }),
+        /* @__PURE__ */ jsxs19("div", { className: "mx-auto max-w-[1400px] px-6 sm:px-10", children: [
+          /* @__PURE__ */ jsxs19(
+            "div",
+            {
+              className: cn(
+                "grid grid-cols-1 gap-12 py-16",
+                newsletter ? "lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] lg:items-end" : ""
+              ),
+              children: [
+                /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-8", children: [
+                  /* @__PURE__ */ jsx35(
+                    Link2,
+                    {
+                      href: "/",
+                      className: "inline-flex items-center gap-3 rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--timberwolf)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--night)]",
+                      "aria-label": `${siteName} home`,
+                      children: /* @__PURE__ */ jsx35(
+                        Image2,
+                        {
+                          src: logoSrc,
+                          alt: logoAlt,
+                          width: 200,
+                          height: 40,
+                          className: "h-7 w-auto"
+                        }
+                      )
+                    }
+                  ),
+                  showTagline && tagline ? /* @__PURE__ */ jsx35("p", { className: "font-semibold text-[clamp(28px,3.6vw,44px)] leading-[1.05] tracking-[-0.035em] text-[var(--timberwolf)] max-w-[18ch]", children: tagline }) : null
+                ] }),
+                newsletter ? /* @__PURE__ */ jsx35("div", { className: "lg:justify-self-end w-full lg:max-w-md", children: /* @__PURE__ */ jsx35(NewsletterForm, { onSubmit: newsletterAction }) }) : null
+              ]
+            }
+          ),
+          hasColumns ? /* @__PURE__ */ jsx35("div", { className: "border-t border-[rgba(214,213,201,0.08)] py-14", children: /* @__PURE__ */ jsx35("div", { className: "grid grid-cols-2 gap-x-6 gap-y-10 md:grid-cols-4", children: columns.map((col) => /* @__PURE__ */ jsxs19("nav", { "aria-label": col.title, children: [
+            /* @__PURE__ */ jsx35("p", { className: "text-[12px] uppercase tracking-[0.14em] text-[rgba(214,213,201,0.44)] mb-4", children: col.title }),
+            /* @__PURE__ */ jsx35("ul", { className: "flex flex-col gap-3", children: col.links.map((link) => /* @__PURE__ */ jsx35("li", { children: /* @__PURE__ */ jsx35(FooterLinkItem, { link }) }, `${col.title}-${link.label}`)) })
+          ] }, col.title)) }) }) : null,
+          /* @__PURE__ */ jsxs19("div", { className: "border-t border-[rgba(214,213,201,0.08)] py-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [
+            /* @__PURE__ */ jsx35("ul", { className: "flex items-center gap-2", children: socials.map(({ label, href, src }) => /* @__PURE__ */ jsx35("li", { children: /* @__PURE__ */ jsx35(
+              "a",
+              {
+                href,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "aria-label": `${siteName} on ${label}`,
+                className: "inline-flex items-center justify-center h-9 w-9 rounded-full hover:bg-[var(--surface-1,#0f1512)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--timberwolf)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--night)]",
+                children: /* @__PURE__ */ jsx35(
+                  Image2,
+                  {
+                    src,
+                    alt: "",
+                    width: 20,
+                    height: 20,
+                    className: "h-[18px] w-[18px] object-contain opacity-80 hover:opacity-100 transition-opacity"
+                  }
+                )
+              }
+            ) }, label)) }),
+            /* @__PURE__ */ jsxs19("p", { className: "text-[13px] text-[rgba(214,213,201,0.44)] order-last sm:order-none", children: [
+              "\xA9 ",
+              (/* @__PURE__ */ new Date()).getFullYear(),
+              " ",
+              siteName,
+              ". All rights reserved."
+            ] }),
+            /* @__PURE__ */ jsx35(
+              "a",
+              {
+                href: creditHref,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "text-[13px] text-[rgba(214,213,201,0.44)] hover:text-[var(--timberwolf)] transition-colors rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--timberwolf)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--night)]",
+                children: creditLabel
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/ui/footer-credits-bar.tsx
+import Image3 from "next/image";
+import { Fragment as Fragment5, jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
+var DEFAULT_SOCIALS2 = [
+  {
+    label: "Instagram",
+    href: "https://www.instagram.com/playback_global",
+    src: "/assets/instagram.png"
+  },
+  {
+    label: "YouTube",
+    href: "https://youtube.com/@playback_global",
+    src: "/assets/youtube.png"
+  },
+  {
+    label: "TikTok",
+    href: "https://www.tiktok.com/@playback_global",
+    src: "/assets/tiktok.png"
+  },
+  {
+    label: "LinkedIn",
+    href: "https://www.linkedin.com/company/playbacksports/",
+    src: "/assets/linkedin.png"
+  }
+];
+function FooterCreditsBar({
+  socials = DEFAULT_SOCIALS2,
+  companyName = "PLAYBACK",
+  creditHref = "https://www.braintwopoint0.com",
+  showCredit = true,
+  copyrightYear,
+  className
+} = {}) {
+  const year = copyrightYear ?? (/* @__PURE__ */ new Date()).getFullYear();
+  return /* @__PURE__ */ jsxs20(
+    "div",
+    {
+      className: cn(
+        "border-t py-6 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:items-center",
+        "border-[rgba(214,213,201,0.08)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-4 sm:justify-self-start", children: [
+          /* @__PURE__ */ jsx36("ul", { className: "flex items-center gap-2", children: socials.map(({ label, href, src }) => /* @__PURE__ */ jsx36("li", { children: /* @__PURE__ */ jsx36(
+            "a",
+            {
+              href,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              "aria-label": `${companyName} on ${label}`,
+              className: cn(
+                "inline-flex items-center justify-center h-10 w-10 rounded-full",
+                "hover:bg-[var(--surface-1,#0f1512)] transition-colors",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--timberwolf)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--night)]"
+              ),
+              children: /* @__PURE__ */ jsx36(
+                Image3,
+                {
+                  src,
+                  alt: "",
+                  width: 24,
+                  height: 24,
+                  className: "h-[22px] w-[22px] object-contain opacity-80 hover:opacity-100 transition-opacity"
+                }
+              )
+            }
+          ) }, label)) }),
+          showCredit ? /* @__PURE__ */ jsxs20(Fragment5, { children: [
+            /* @__PURE__ */ jsx36(
+              "span",
+              {
+                "aria-hidden": true,
+                className: "h-5 w-px bg-[rgba(214,213,201,0.16)] flex-shrink-0"
+              }
+            ),
+            /* @__PURE__ */ jsx36(
+              "a",
+              {
+                href: creditHref,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "aria-label": "Built by BRAIN2.0",
+                className: cn(
+                  "text-[13px] text-[rgba(214,213,201,0.44)] hover:text-[var(--timberwolf)] transition-colors rounded-sm",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--timberwolf)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--night)]",
+                  "whitespace-nowrap"
+                ),
+                children: /* @__PURE__ */ jsxs20("span", { "aria-hidden": true, children: [
+                  "Built by",
+                  " ",
+                  /* @__PURE__ */ jsxs20("span", { style: { fontFamily: "AvertaStd-Semibold" }, children: [
+                    "BRAIN",
+                    /* @__PURE__ */ jsx36("span", { style: { fontFamily: "AvertaStd-Thin" }, children: "2.0" })
+                  ] })
+                ] })
+              }
+            )
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsxs20("p", { className: "text-[13px] text-[rgba(214,213,201,0.44)] text-center sm:text-right sm:justify-self-end", children: [
+          "\xA9 ",
+          year,
+          " ",
+          companyName,
+          ". All rights reserved."
+        ] })
+      ]
+    }
+  );
+}
+
+// src/ui/newsletter-form.tsx
+import * as React27 from "react";
+import { jsx as jsx37, jsxs as jsxs21 } from "react/jsx-runtime";
+function NewsletterForm2({
+  endpoint = "/api/newsletter/subscribe",
+  source = "footer",
+  role,
+  placeholder = "you@club.com",
+  ariaLabel = "Subscribe to updates",
+  submitLabel = "Subscribe",
+  sendingLabel = "Subscribing\u2026",
+  className
+}) {
+  const [email, setEmail] = React27.useState("");
+  const [website, setWebsite] = React27.useState("");
+  const [state, setState] = React27.useState("idle");
+  const inFlight = React27.useRef(false);
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    if (inFlight.current) return;
+    const trimmed = email.trim();
+    const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed);
+    if (!ok) {
+      setState("error");
+      return;
+    }
+    inFlight.current = true;
+    setState("sending");
+    try {
+      const res = await fetch(endpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          email: trimmed,
+          source,
+          ...role ? { role } : {},
+          website
+        })
+      });
+      if (res.ok) {
+        setState("sent");
+        setEmail("");
+      } else if (res.status === 429) {
+        setState("rate_limited");
+      } else {
+        setState("error");
+      }
+    } catch {
+      setState("error");
+    } finally {
+      inFlight.current = false;
+    }
+  };
+  const feedbackId = React27.useId();
+  const inputId = React27.useId();
+  return /* @__PURE__ */ jsxs21(
+    "form",
+    {
+      onSubmit,
+      noValidate: true,
+      "aria-label": ariaLabel,
+      className: cn("w-full max-w-md", className),
+      children: [
+        /* @__PURE__ */ jsx37("label", { htmlFor: inputId, className: "sr-only", children: "Email address" }),
+        /* @__PURE__ */ jsxs21(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute left-[-10000px] top-auto h-px w-px overflow-hidden",
+            children: [
+              /* @__PURE__ */ jsx37("label", { htmlFor: `${inputId}-website`, children: "Website" }),
+              /* @__PURE__ */ jsx37(
+                "input",
+                {
+                  type: "text",
+                  id: `${inputId}-website`,
+                  name: "website",
+                  tabIndex: -1,
+                  autoComplete: "off",
+                  value: website,
+                  onChange: (e) => setWebsite(e.target.value)
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs21("div", { className: "flex flex-col sm:flex-row gap-2", children: [
+          /* @__PURE__ */ jsx37(
+            "input",
+            {
+              id: inputId,
+              type: "email",
+              inputMode: "email",
+              autoComplete: "email",
+              required: true,
+              disabled: state === "sending",
+              value: email,
+              onChange: (e) => {
+                setEmail(e.target.value);
+                if (state === "error" || state === "rate_limited") setState("idle");
+              },
+              placeholder,
+              "aria-invalid": state === "error",
+              "aria-describedby": feedbackId,
+              className: cn(
+                "flex-1 h-11 rounded-full bg-[var(--surface-1,#0f1512)] border px-4 text-[14px] text-[var(--timberwolf)] placeholder:text-[rgba(214,213,201,0.44)]",
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--timberwolf)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--night)]",
+                "disabled:opacity-60",
+                state === "error" ? "border-[rgba(237,106,106,0.5)]" : "border-[rgba(214,213,201,0.08)]"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx37(
+            "button",
+            {
+              type: "submit",
+              disabled: state === "sending",
+              className: "inline-flex items-center justify-center h-11 px-5 rounded-full bg-[var(--timberwolf)] text-[var(--night)] text-[14px] font-medium hover:bg-[var(--ash-grey)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--timberwolf)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--night)] disabled:opacity-60 disabled:cursor-not-allowed",
+              children: state === "sending" ? sendingLabel : submitLabel
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs21(
+          "p",
+          {
+            id: feedbackId,
+            "aria-live": "polite",
+            className: cn(
+              "mt-2 text-[13px] min-h-[1.25rem]",
+              state === "sent" && "text-[var(--timberwolf)]",
+              (state === "error" || state === "rate_limited") && "text-[rgb(237,106,106)]",
+              (state === "idle" || state === "sending") && "text-[rgba(214,213,201,0.44)]"
+            ),
+            role: state === "error" || state === "rate_limited" ? "alert" : void 0,
+            children: [
+              state === "sent" && "Thanks \u2014 we\u2019ll be in touch.",
+              state === "error" && "Please enter a valid email address.",
+              state === "rate_limited" && "Too many attempts. Try again in a minute."
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 export {
   AnimatedTooltip,
@@ -2470,6 +2908,7 @@ export {
   FadeIn,
   FlipWords,
   Footer,
+  FooterCreditsBar,
   HeroHighlight,
   Highlight,
   HoverCard,
@@ -2479,6 +2918,7 @@ export {
   Input,
   Label,
   LumaSpin,
+  NewsletterForm2 as NewsletterForm,
   PageShell,
   Popover,
   PopoverAnchor,