@warmio/ui 1.4.0 → 1.5.2

package/dist/chunks/chunk-B47G2BJV.js

@@ -0,0 +1,534 @@
+import {
+  cn
+} from "./chunk-VIB7OX7D.js";
+
+// ../ui/src/warmio/mascot.tsx
+import { useEffect, useEffectEvent, useRef, useState } from "react";
+
+// ../ui/src/warmio/mascot-pupils.ts
+var MAX_LOOK = 1.35;
+var MAX_WANDER = 0.55;
+var FOLLOW = 0.045;
+var pointer = { x: 0, y: 0 };
+var pointerBound = false;
+var pointerCount = 0;
+function bindPointer() {
+  if (pointerBound) return;
+  pointerBound = true;
+  pointer = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
+  window.addEventListener("pointermove", onPointerMove, { passive: true });
+}
+function unbindPointer() {
+  if (pointerCount > 0) return;
+  if (!pointerBound) return;
+  pointerBound = false;
+  window.removeEventListener("pointermove", onPointerMove);
+}
+function onPointerMove(event) {
+  pointer = { x: event.clientX, y: event.clientY };
+}
+function findSvgGroup(svg, id) {
+  for (const node of svg.getElementsByTagName("g")) {
+    if (node.id === id && node instanceof SVGGElement) return node;
+  }
+  return null;
+}
+function uniquifyClipIds(svg) {
+  const prefix = `m${Math.random().toString(36).slice(2, 8)}`;
+  for (const id of ["left_eye_clip", "right_eye_clip"]) {
+    let clip = null;
+    for (const node of svg.getElementsByTagName("clipPath")) {
+      if (node.id === id) {
+        clip = node;
+        break;
+      }
+    }
+    if (!clip) continue;
+    const nextId = `${prefix}-${id}`;
+    clip.id = nextId;
+    for (const node of svg.querySelectorAll("[clip-path]")) {
+      if (node.getAttribute("clip-path") === `url(#${id})`) {
+        node.setAttribute("clip-path", `url(#${nextId})`);
+      }
+    }
+  }
+}
+function lookTarget(svg) {
+  const box = svg.getBoundingClientRect();
+  if (box.width === 0 || box.height === 0) return { x: 0, y: 0 };
+  const cx = box.left + box.width / 2;
+  const cy = box.top + box.height * 0.62;
+  const nx = Math.max(-1, Math.min(1, (pointer.x - cx) / (box.width * 1.6)));
+  const ny = Math.max(-1, Math.min(1, (pointer.y - cy) / (box.height * 1.6)));
+  return { x: nx * MAX_LOOK, y: ny * MAX_LOOK * 0.85 };
+}
+function warmMascotSourceSupportsLivePupils(source) {
+  if (!source.endsWith(".svg")) return false;
+  const file = source.split("/").pop() ?? "";
+  return !file.toUpperCase().includes("CLOSED");
+}
+function startWarmMascotPupilDrift(host) {
+  const svg = host.querySelector("svg");
+  if (!(svg instanceof SVGSVGElement)) return () => {
+  };
+  const left = findSvgGroup(svg, "left_pupil");
+  const right = findSvgGroup(svg, "right_pupil");
+  if (!left || !right) {
+    return () => {
+    };
+  }
+  uniquifyClipIds(svg);
+  pointerCount += 1;
+  bindPointer();
+  const phase = Math.random() * Math.PI * 2;
+  let x = 0;
+  let y = 0;
+  let frame = 0;
+  const tick = (now) => {
+    const t = now / 1e3;
+    const wanderX = Math.sin(t * 0.32 + phase) * MAX_WANDER;
+    const wanderY = Math.cos(t * 0.24 + phase * 1.3) * MAX_WANDER * 0.7;
+    const look = lookTarget(svg);
+    const targetX = look.x + wanderX;
+    const targetY = look.y + wanderY;
+    x += (targetX - x) * FOLLOW;
+    y += (targetY - y) * FOLLOW;
+    const transform = `translate(${x.toFixed(3)} ${y.toFixed(3)})`;
+    left.setAttribute("transform", transform);
+    right.setAttribute("transform", transform);
+    frame = window.requestAnimationFrame(tick);
+  };
+  frame = window.requestAnimationFrame(tick);
+  return () => {
+    window.cancelAnimationFrame(frame);
+    pointerCount -= 1;
+    unbindPointer();
+  };
+}
+
+// ../ui/src/warmio/mascot-assets.ts
+var WARM_MASCOT_IDS = ["NORMAL", "CLOSED", "SAD", "HYPE", "CONFUSED"];
+var WARM_MASCOT_MOOD_TO_EXPRESSION = {
+  calm: "NORMAL",
+  happy: "HYPE",
+  focused: "NORMAL",
+  relieved: "NORMAL",
+  "password-retry": "NORMAL",
+  sad: "SAD"
+};
+function isWarmMascotMood(expression) {
+  return Object.hasOwn(WARM_MASCOT_MOOD_TO_EXPRESSION, expression);
+}
+function isWarmMascotId(expression) {
+  for (const id of WARM_MASCOT_IDS) {
+    if (id === expression) return true;
+  }
+  return false;
+}
+function getWarmMascotSrc(expression, _theme) {
+  return `/mascot/${expression}.svg`;
+}
+function getWarmMascotPeekSrc(eyes, _theme) {
+  if (eyes === "closed") {
+    return "/mascot/CLOSED.svg";
+  }
+  return "/mascot/NORMAL.svg";
+}
+function getWarmMascotStillSrc(expression, peekEyes) {
+  if (peekEyes === "closed") {
+    return "/mascot/CLOSED.svg";
+  }
+  if (peekEyes === "open") {
+    return "/mascot/NORMAL.svg";
+  }
+  return `/mascot/${expression}.svg`;
+}
+function getWarmMascotFallbackSrc(expression, peekEyes) {
+  if (peekEyes === "closed") {
+    return "/mascot/CLOSED.svg";
+  }
+  return `/mascot/${expression}.svg`;
+}
+function prefersReducedMascotMotion() {
+  return globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
+}
+function resolveWarmMascotId(expression) {
+  if (!expression) return "NORMAL";
+  if (isWarmMascotMood(expression)) {
+    return WARM_MASCOT_MOOD_TO_EXPRESSION[expression];
+  }
+  if (isWarmMascotId(expression)) {
+    return expression;
+  }
+  return "NORMAL";
+}
+
+// ../ui/src/warmio/mascot.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var HYPE_CTA_SELECTOR = "[data-auth-cta], [data-auth-guest], [data-waitlist-cta], [data-home-marketing-nav-login], [data-home-marketing-nav-signup]";
+function isWarmMascotHypeCta(node) {
+  return node instanceof Element && node.closest(HYPE_CTA_SELECTOR) != null;
+}
+function useCtaHype(enabled) {
+  const [active, setActiveState] = useState(false);
+  const setActive = useEffectEvent((next) => {
+    if (next) {
+      setActiveState(true);
+      return;
+    }
+    const focused = isWarmMascotHypeCta(document.activeElement);
+    const hovered = document.querySelector(":hover");
+    setActiveState(focused || isWarmMascotHypeCta(hovered));
+  });
+  useEffect(() => {
+    if (!enabled) return;
+    const onEnter = (event) => {
+      if (isWarmMascotHypeCta(event.target)) setActive(true);
+    };
+    const onLeave = (event) => {
+      if (!isWarmMascotHypeCta(event.target)) return;
+      const next = "relatedTarget" in event ? event.relatedTarget : null;
+      if (isWarmMascotHypeCta(next)) return;
+      setActive(false);
+    };
+    document.addEventListener("pointerenter", onEnter, true);
+    document.addEventListener("pointerleave", onLeave, true);
+    document.addEventListener("focusin", onEnter);
+    document.addEventListener("focusout", onLeave);
+    return () => {
+      document.removeEventListener("pointerenter", onEnter, true);
+      document.removeEventListener("pointerleave", onLeave, true);
+      document.removeEventListener("focusin", onEnter);
+      document.removeEventListener("focusout", onLeave);
+    };
+  }, [enabled]);
+  return enabled && active;
+}
+function markMascotFallback(target) {
+  if (!(target instanceof HTMLElement)) return;
+  const root = target.closest('[data-slot="warm-mascot"]');
+  if (root instanceof HTMLElement) root.dataset["mascotFallback"] = "";
+}
+function WarmMascotMedia({
+  source,
+  stillSrc,
+  fallbackSrc
+}) {
+  const liveHostRef = useRef(null);
+  const [liveMarkup, setLiveMarkup] = useState(null);
+  const useLivePupils = warmMascotSourceSupportsLivePupils(source);
+  useEffect(() => {
+    if (!useLivePupils) {
+      setLiveMarkup(null);
+      return;
+    }
+    if (prefersReducedMascotMotion()) return;
+    let cancelled = false;
+    fetch(source).then((response) => response.text()).then((markup) => {
+      if (!cancelled) setLiveMarkup(markup);
+    }).catch(() => {
+      if (!cancelled) setLiveMarkup(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [source, useLivePupils]);
+  useEffect(() => {
+    const host = liveHostRef.current;
+    if (!host || liveMarkup == null) return;
+    return startWarmMascotPupilDrift(host);
+  }, [liveMarkup]);
+  if (liveMarkup) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: liveHostRef,
+        className: "warm-mascot__frame",
+        dangerouslySetInnerHTML: { __html: liveMarkup }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("picture", { children: [
+    /* @__PURE__ */ jsx("source", { srcSet: stillSrc, media: "(prefers-reduced-motion: reduce)" }),
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        className: "warm-mascot__frame",
+        src: source,
+        alt: "",
+        draggable: false,
+        "aria-hidden": "true",
+        onError: (event) => {
+          const img = event.currentTarget;
+          if (img.dataset["fallbackApplied"] != null) return;
+          img.dataset["fallbackApplied"] = "";
+          img.src = fallbackSrc;
+          markMascotFallback(img);
+        }
+      }
+    )
+  ] });
+}
+function toggleWarmMascotOnKeyDown(event, onToggleHype) {
+  if (event.key !== "Enter" && event.key !== " ") return;
+  event.preventDefault();
+  onToggleHype();
+}
+function WarmMascotFrame({
+  size,
+  expression,
+  peekEyes,
+  theme,
+  source,
+  stillSrc,
+  fallbackSrc,
+  label,
+  clickHype,
+  clickedHype,
+  onToggleHype
+}) {
+  const className = cn(
+    "warm-mascot",
+    clickHype ? "pointer-events-auto cursor-pointer" : "pointer-events-none",
+    "inline-flex shrink-0 select-none"
+  );
+  const commonProps = {
+    className,
+    "data-slot": "warm-mascot",
+    "data-size": size,
+    "data-expression": expression,
+    "data-flame-peek-eyes": peekEyes,
+    "data-flame-theme": theme,
+    "data-flame-vector": source.endsWith(".svg") ? "" : void 0
+  };
+  const media = /* @__PURE__ */ jsx(WarmMascotMedia, { source, stillSrc, fallbackSrc });
+  if (clickHype) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...commonProps,
+        role: "button",
+        tabIndex: 0,
+        "aria-label": "Make the Warm mascot poggers",
+        "aria-pressed": clickedHype,
+        onClick: onToggleHype,
+        onKeyDown: (event) => toggleWarmMascotOnKeyDown(event, onToggleHype),
+        children: media
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...commonProps,
+      role: label ? "img" : void 0,
+      "aria-label": label ?? void 0,
+      "aria-hidden": label ? void 0 : true,
+      children: media
+    }
+  );
+}
+function WarmMascot({
+  expression: expressionProp = "NORMAL",
+  size = "default",
+  label = null,
+  theme: themeProp,
+  peekEyes,
+  ctaHype = true,
+  clickHype = false
+}) {
+  const [clickedHype, setClickedHype] = useState(false);
+  const activePeekEyes = clickHype && clickedHype ? void 0 : peekEyes;
+  const baseExpression = resolveWarmMascotId(expressionProp);
+  const hype = useCtaHype(ctaHype && activePeekEyes == null) || clickHype && clickedHype;
+  const expression = hype ? "HYPE" : baseExpression;
+  const theme = themeProp ?? "light";
+  const source = activePeekEyes ? getWarmMascotPeekSrc(activePeekEyes, theme) : getWarmMascotSrc(expression, theme);
+  return /* @__PURE__ */ jsx(
+    WarmMascotFrame,
+    {
+      size,
+      expression,
+      peekEyes: activePeekEyes,
+      theme,
+      source,
+      stillSrc: getWarmMascotStillSrc(expression, activePeekEyes),
+      fallbackSrc: getWarmMascotFallbackSrc(expression, activePeekEyes),
+      label,
+      clickHype,
+      clickedHype,
+      onToggleHype: () => setClickedHype((current) => !current)
+    }
+  );
+}
+
+// ../design/src/logo.tsx
+import * as React from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var WShape = /* @__PURE__ */ jsxs2("g", { fill: "currentColor", transform: "translate(0 108)", children: [
+  /* @__PURE__ */ jsx2("path", { d: "M 33.500 40.660 C 20.206 42.744, 0 48.560, -0 50.302 C -0 51.759, 123.955 348.889, 127.738 356.500 C 142.182 385.561, 169.450 410.275, 198.946 421.040 C 218.922 428.330, 243.683 430.825, 264.526 427.648 C 277.151 425.724, 294.628 420.011, 294.194 417.952 C 293.790 416.040, 172.732 124.599, 168.522 115.405 C 161.779 100.679, 149.168 84.171, 135.093 71.646 C 119.358 57.644, 98.880 47.362, 77 42.478 C 69.645 40.836, 40.220 39.606, 33.500 40.660" }),
+  /* @__PURE__ */ jsx2("path", { d: "M 229.651 41.597 C 217.916 43.718, 202.443 49.144, 202.744 51.035 C 203.418 55.268, 329.689 356.584, 333.687 363.500 C 340.525 375.327, 345.293 381.483, 355.408 391.538 C 374.603 410.619, 398.878 423.014, 425.907 427.533 C 439.649 429.831, 463.594 429.132, 476 426.072 C 489.892 422.645, 497.188 419.815, 496.703 418.043 C 495.416 413.331, 371.058 116.094, 367.406 109 C 349.467 74.149, 313.008 47.875, 273.752 41.509 C 262.281 39.648, 240.195 39.693, 229.651 41.597" }),
+  /* @__PURE__ */ jsx2("path", { d: "M 463 40.593 C 451.670 42.545, 447.288 43.569, 439 46.203 C 433.775 47.864, 429.338 49.372, 429.140 49.555 C 428.942 49.737, 434.670 64.021, 441.868 81.297 C 455.574 114.190, 462.215 131.660, 468.447 151.208 C 475.360 172.892, 486.124 186.213, 503.834 194.997 C 530.956 208.450, 564.982 201.679, 583.654 179.112 C 604.399 154.041, 605.407 121.944, 586.291 95.155 C 567.827 69.280, 539.107 50.114, 508 42.907 C 500.680 41.212, 494.713 40.644, 482 40.434 C 472.925 40.284, 464.375 40.356, 463 40.593" })
+] });
+function WarmLogoIcon({
+  size = "default",
+  tone = "default",
+  decorative = false,
+  className: _className,
+  style: _style,
+  asChild: _asChild,
+  render: _render,
+  ...props
+}) {
+  const label = decorative ? void 0 : "Warm logo";
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 600 600",
+      "data-warm-logo": true,
+      "data-size": size,
+      "data-tone": tone,
+      width: size === "hero" ? 56 : size === "feature" ? 32 : size === "default" ? 28 : 12,
+      height: size === "hero" ? 56 : size === "feature" ? 32 : size === "default" ? 28 : 12,
+      "aria-hidden": decorative ? true : void 0,
+      "aria-label": label,
+      ...props,
+      children: WShape
+    }
+  );
+}
+var Logo = React.forwardRef(function Logo2({
+  size = "default",
+  tone = "default",
+  showText = true,
+  className: _className,
+  style: _style,
+  textClass: _textClass,
+  asChild: _asChild,
+  render: _render,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxs2("div", { ref, "data-warm-logo": true, "data-size": size, "data-tone": tone, ...props, children: [
+    /* @__PURE__ */ jsx2(WarmLogoIcon, { size, tone, decorative: showText }),
+    showText ? /* @__PURE__ */ jsx2("span", { children: "Warm" }) : null
+  ] });
+});
+
+// ../ui/src/warmio/logo.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var brandedLogoShellClassNameBySize = {
+  sm: "size-8",
+  md: "size-10",
+  lg: "size-14"
+};
+var brandedLogoIconClassNameBySize = {
+  sm: "size-5",
+  md: "size-6",
+  lg: "size-8"
+};
+var _WarmLogoGlyph = /* @__PURE__ */ jsxs3(Fragment, { children: [
+  /* @__PURE__ */ jsx3(
+    "path",
+    {
+      d: "M 33.500 40.660 C 20.206 42.744, 0 48.560, -0 50.302 C -0 51.759, 123.955 348.889, 127.738 356.500 C 142.182 385.561, 169.450 410.275, 198.946 421.040 C 218.922 428.330, 243.683 430.825, 264.526 427.648 C 277.151 425.724, 294.628 420.011, 294.194 417.952 C 293.790 416.040, 172.732 124.599, 168.522 115.405 C 161.779 100.679, 149.168 84.171, 135.093 71.646 C 119.358 57.644, 98.880 47.362, 77 42.478 C 69.645 40.836, 40.220 39.606, 33.500 40.660",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx3(
+    "path",
+    {
+      d: "M 229.651 41.597 C 217.916 43.718, 202.443 49.144, 202.744 51.035 C 203.418 55.268, 329.689 356.584, 333.687 363.500 C 340.525 375.327, 345.293 381.483, 355.408 391.538 C 374.603 410.619, 398.878 423.014, 425.907 427.533 C 439.649 429.831, 463.594 429.132, 476 426.072 C 489.892 422.645, 497.188 419.815, 496.703 418.043 C 495.416 413.331, 371.058 116.094, 367.406 109 C 349.467 74.149, 313.008 47.875, 273.752 41.509 C 262.281 39.648, 240.195 39.693, 229.651 41.597",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx3(
+    "path",
+    {
+      d: "M 463 40.593 C 451.670 42.545, 447.288 43.569, 439 46.203 C 433.775 47.864, 429.338 49.372, 429.140 49.555 C 428.942 49.737, 434.670 64.021, 441.868 81.297 C 455.574 114.190, 462.215 131.660, 468.447 151.208 C 475.360 172.892, 486.124 186.213, 503.834 194.997 C 530.956 208.450, 564.982 201.679, 583.654 179.112 C 604.399 154.041, 605.407 121.944, 586.291 95.155 C 567.827 69.280, 539.107 50.114, 508 42.907 C 500.680 41.212, 494.713 40.644, 482 40.434 C 472.925 40.284, 464.375 40.356, 463 40.593",
+      fill: "currentColor"
+    }
+  )
+] });
+function WarmBrandedLogoMark({
+  size = "md",
+  className,
+  logoClassName
+}) {
+  return /* @__PURE__ */ jsxs3(
+    "span",
+    {
+      className: cn(
+        "relative inline-flex shrink-0 items-center justify-center",
+        brandedLogoShellClassNameBySize[size],
+        className
+      ),
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx3("span", { className: "pointer-events-none absolute inset-0 scale-[1.35] opacity-90", children: /* @__PURE__ */ jsx3(WarmMascot, { expression: "calm", label: null }) }),
+        /* @__PURE__ */ jsx3(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 600 600",
+            className: cn(
+              "relative z-10 drop-shadow-sm",
+              brandedLogoIconClassNameBySize[size],
+              logoClassName
+            ),
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx3("g", { transform: "translate(0 108)", children: _WarmLogoGlyph })
+          }
+        )
+      ]
+    }
+  );
+}
+function WarmBrandedLogoLink({
+  href,
+  ariaLabel = "Warm home",
+  size = "md",
+  className,
+  logoClassName
+}) {
+  return /* @__PURE__ */ jsx3("a", { href, "aria-label": ariaLabel, className: "inline-flex shrink-0 items-center", children: /* @__PURE__ */ jsx3(
+    WarmBrandedLogoMark,
+    {
+      size,
+      ...className !== void 0 ? { className } : {},
+      ...logoClassName !== void 0 ? { logoClassName } : {}
+    }
+  ) });
+}
+function WarmBrandedLogoMarkStatic({
+  className,
+  logoClassName
+}) {
+  return /* @__PURE__ */ jsxs3("span", { className: cn("relative inline-flex size-8 items-center justify-center", className), children: [
+    /* @__PURE__ */ jsx3(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "absolute inset-0 rounded-full bg-gradient-to-br from-primary/90 via-warning/80 to-primary/70"
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 600 600",
+        className: cn("relative z-10 size-5 drop-shadow-sm", logoClassName),
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx3("g", { transform: "translate(0 108)", children: _WarmLogoGlyph })
+      }
+    )
+  ] });
+}
+
+export {
+  WarmLogoIcon,
+  Logo,
+  WarmBrandedLogoMark,
+  WarmBrandedLogoLink,
+  WarmBrandedLogoMarkStatic
+};