motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-CGDKH6BB.js

@@ -0,0 +1,902 @@
+"use client";
+import {
+  GithubIcon
+} from "./chunk-NCEAUODT.js";
+import {
+  MapPinIcon
+} from "./chunk-EEQ2WHTN.js";
+import {
+  UserCheckIcon
+} from "./chunk-JT2EIO5M.js";
+import {
+  LinkedinIcon
+} from "./chunk-ADXWPWJR.js";
+import {
+  UserPlusIcon
+} from "./chunk-SKEE23KW.js";
+import {
+  MailCheckIcon
+} from "./chunk-CEQ56RF6.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/team-member-card/team-member-card.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  motion as motion3,
+  useInView,
+  useMotionTemplate,
+  useReducedMotion as useReducedMotion3,
+  useSpring
+} from "motion/react";
+
+// src/icons/dribbble.tsx
+import { motion, useAnimation, useReducedMotion } from "motion/react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CIRCLE_VARIANTS = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    pathOffset: 0,
+    transition: {
+      duration: 0.4,
+      opacity: { duration: 0.1 }
+    }
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    pathOffset: [1, 0],
+    transition: {
+      duration: 0.6,
+      ease: "linear",
+      opacity: { duration: 0.1 }
+    }
+  }
+};
+var PATH_VARIANTS = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    pathOffset: 0,
+    transition: {
+      duration: 0.4,
+      opacity: { duration: 0.1 }
+    }
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    pathOffset: [1, 0],
+    transition: {
+      duration: 0.6,
+      ease: "linear",
+      opacity: { duration: 0.1 }
+    }
+  }
+};
+var DribbbleIcon = forwardRef(
+  ({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+    const circleControls = useAnimation();
+    const path1Controls = useAnimation();
+    const path2Controls = useAnimation();
+    const path3Controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => {
+          circleControls.start("animate");
+          path1Controls.start("animate");
+          path2Controls.start("animate");
+          path3Controls.start("animate");
+        },
+        stopAnimation: () => {
+          circleControls.start("normal");
+          path1Controls.start("normal");
+          path2Controls.start("normal");
+          path3Controls.start("normal");
+        }
+      };
+    });
+    const handleMouseEnter = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          circleControls.start("animate");
+          path1Controls.start("animate");
+          path2Controls.start("animate");
+          path3Controls.start("animate");
+        }
+      },
+      [
+        circleControls,
+        onMouseEnter,
+        path1Controls,
+        path2Controls,
+        path3Controls
+      ]
+    );
+    const handleMouseLeave = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          circleControls.start("normal");
+          path1Controls.start("normal");
+          path2Controls.start("normal");
+          path3Controls.start("normal");
+        }
+      },
+      [
+        circleControls,
+        path1Controls,
+        path2Controls,
+        path3Controls,
+        onMouseLeave
+      ]
+    );
+    const wrap = useRef(null);
+    const reduced = useReducedMotion();
+    const [hosted, setHosted] = useState(false);
+    useEffect(() => {
+      const fake = {};
+      if (reduced) {
+        setHosted(true);
+        return;
+      }
+      if (active !== void 0) {
+        setHosted(true);
+        (active ? handleMouseEnter : handleMouseLeave)(fake);
+        return;
+      }
+      const host = wrap.current?.parentElement?.closest("button, a, [role=button], [role=menuitem], [role=tab], [role=switch], [role=radio], label");
+      setHosted(!!host);
+      if (!host) return;
+      const on = () => handleMouseEnter(fake);
+      const off = () => handleMouseLeave(fake);
+      host.addEventListener("pointerenter", on);
+      host.addEventListener("pointerleave", off);
+      return () => {
+        host.removeEventListener("pointerenter", on);
+        host.removeEventListener("pointerleave", off);
+      };
+    }, [active, reduced, handleMouseEnter, handleMouseLeave]);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: wrap,
+        className: cn("inline-grid size-6 shrink-0 place-items-center align-middle [&>svg]:size-full", className),
+        style: size ? { width: size, height: size, ...style } : style,
+        onMouseEnter: hosted ? void 0 : handleMouseEnter,
+        onMouseLeave: hosted ? void 0 : handleMouseLeave,
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            fill: "none",
+            height: size,
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx(
+                motion.circle,
+                {
+                  animate: circleControls,
+                  cx: "12",
+                  cy: "12",
+                  initial: "normal",
+                  r: "10",
+                  variants: CIRCLE_VARIANTS
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  animate: path1Controls,
+                  d: "M19.13 5.09C15.22 9.14 10 10.44 2.25 10.94",
+                  initial: "normal",
+                  variants: PATH_VARIANTS
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  animate: path2Controls,
+                  d: "M21.75 12.84c-6.62-1.41-12.14 1-16.38 6.32",
+                  initial: "normal",
+                  variants: PATH_VARIANTS
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  animate: path3Controls,
+                  d: "M8.56 2.75c4.37 6 6 9.42 8 17.72",
+                  initial: "normal",
+                  variants: PATH_VARIANTS
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+DribbbleIcon.displayName = "DribbbleIcon";
+
+// src/icons/twitter.tsx
+import { motion as motion2, useAnimation as useAnimation2, useReducedMotion as useReducedMotion2 } from "motion/react";
+import { forwardRef as forwardRef2, useCallback as useCallback2, useEffect as useEffect2, useImperativeHandle as useImperativeHandle2, useRef as useRef2, useState as useState2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var PATH_VARIANTS2 = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    pathOffset: 0,
+    transition: {
+      duration: 0.4,
+      opacity: { duration: 0.1 }
+    }
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    pathOffset: [1, 0],
+    transition: {
+      duration: 0.6,
+      ease: "linear",
+      opacity: { duration: 0.1 }
+    }
+  }
+};
+var TwitterIcon = forwardRef2(
+  ({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+    const controls = useAnimation2();
+    const isControlledRef = useRef2(false);
+    useImperativeHandle2(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal")
+      };
+    });
+    const handleMouseEnter = useCallback2(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+    const handleMouseLeave = useCallback2(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+    const wrap = useRef2(null);
+    const reduced = useReducedMotion2();
+    const [hosted, setHosted] = useState2(false);
+    useEffect2(() => {
+      const fake = {};
+      if (reduced) {
+        setHosted(true);
+        return;
+      }
+      if (active !== void 0) {
+        setHosted(true);
+        (active ? handleMouseEnter : handleMouseLeave)(fake);
+        return;
+      }
+      const host = wrap.current?.parentElement?.closest("button, a, [role=button], [role=menuitem], [role=tab], [role=switch], [role=radio], label");
+      setHosted(!!host);
+      if (!host) return;
+      const on = () => handleMouseEnter(fake);
+      const off = () => handleMouseLeave(fake);
+      host.addEventListener("pointerenter", on);
+      host.addEventListener("pointerleave", off);
+      return () => {
+        host.removeEventListener("pointerenter", on);
+        host.removeEventListener("pointerleave", off);
+      };
+    }, [active, reduced, handleMouseEnter, handleMouseLeave]);
+    return /* @__PURE__ */ jsx2(
+      "span",
+      {
+        ref: wrap,
+        className: cn("inline-grid size-6 shrink-0 place-items-center align-middle [&>svg]:size-full", className),
+        style: size ? { width: size, height: size, ...style } : style,
+        onMouseEnter: hosted ? void 0 : handleMouseEnter,
+        onMouseLeave: hosted ? void 0 : handleMouseLeave,
+        ...props,
+        children: /* @__PURE__ */ jsx2(
+          "svg",
+          {
+            fill: "none",
+            height: size,
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ jsx2(
+              motion2.path,
+              {
+                animate: controls,
+                d: "M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z",
+                initial: "normal",
+                variants: PATH_VARIANTS2
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+TwitterIcon.displayName = "TwitterIcon";
+
+// src/components/team-member-card/team-member-card.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var ICONS = {
+  x: TwitterIcon,
+  linkedin: LinkedinIcon,
+  github: GithubIcon,
+  dribbble: DribbbleIcon,
+  email: MailCheckIcon
+};
+var NAMES = {
+  x: "X",
+  linkedin: "LinkedIn",
+  github: "GitHub",
+  dribbble: "Dribbble",
+  email: "Email"
+};
+var DEFAULT_SOCIALS = [
+  { kind: "x", href: "https://x.com" },
+  { kind: "linkedin", href: "https://linkedin.com" },
+  { kind: "github", href: "https://github.com" },
+  { kind: "dribbble", href: "https://dribbble.com" },
+  { kind: "email", href: "mailto:hello@example.com" }
+];
+var GLIDE = [0.22, 1, 0.36, 1];
+var TILT = { stiffness: 220, damping: 20, mass: 0.6 };
+var CARD = {
+  hidden: { opacity: 0, y: 20 },
+  shown: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.6,
+      ease: GLIDE,
+      staggerChildren: 0.07,
+      delayChildren: 0.15
+    }
+  }
+};
+var PANEL = {
+  closed: {
+    height: 0,
+    opacity: 0,
+    transition: {
+      height: { type: "spring", stiffness: 320, damping: 34 },
+      opacity: { duration: 0.15 },
+      staggerChildren: 0.03,
+      staggerDirection: -1
+    }
+  },
+  open: {
+    height: "auto",
+    opacity: 1,
+    transition: {
+      height: { type: "spring", stiffness: 240, damping: 28 },
+      opacity: { duration: 0.2 },
+      staggerChildren: 0.06,
+      delayChildren: 0.05
+    }
+  }
+};
+var REVEAL = {
+  closed: {
+    opacity: 0,
+    y: 12,
+    filter: "blur(4px)",
+    transition: { duration: 0.15 }
+  },
+  open: {
+    opacity: 1,
+    y: 0,
+    filter: "blur(0px)",
+    transition: { duration: 0.45, ease: GLIDE }
+  }
+};
+var ITEM = {
+  hidden: { opacity: 0, y: 10, filter: "blur(4px)" },
+  shown: {
+    opacity: 1,
+    y: 0,
+    filter: "blur(0px)",
+    transition: { duration: 0.5, ease: GLIDE }
+  }
+};
+function useLocalTime(timeZone) {
+  const fmt = React.useMemo(
+    () => new Intl.DateTimeFormat("en", {
+      hour: "numeric",
+      minute: "2-digit",
+      timeZone
+    }),
+    [timeZone]
+  );
+  const [now, setNow] = React.useState(() => /* @__PURE__ */ new Date());
+  React.useEffect(() => {
+    const t = window.setInterval(() => setNow(/* @__PURE__ */ new Date()), 15e3);
+    return () => window.clearInterval(t);
+  }, []);
+  return fmt.format(now);
+}
+var BAYER = [0, 8, 2, 10, 12, 4, 14, 6, 3, 11, 1, 9, 15, 7, 13, 5].map(
+  (v) => (v + 0.5) / 16
+);
+var STEPS = [0, 0, 0.16, 0.26, 0.38, 0.5, 0.62, 0.74, 0.86];
+var hash = (x, y) => {
+  let h = Math.imul(x, 374761393) + Math.imul(y, 668265263);
+  h = Math.imul(h ^ h >>> 13, 1274126177);
+  return ((h ^ h >>> 16) >>> 0) / 4294967295;
+};
+var smooth = (t) => t * t * (3 - 2 * t);
+var noise = (x, y) => {
+  const ix = Math.floor(x);
+  const iy = Math.floor(y);
+  const fx = smooth(x - ix);
+  const fy = smooth(y - iy);
+  const a = hash(ix, iy);
+  const b = hash(ix + 1, iy);
+  const c = hash(ix, iy + 1);
+  const d = hash(ix + 1, iy + 1);
+  return a + (b - a) * fx + (c - a) * fy + (a - b - c + d) * fx * fy;
+};
+var band = (lo, hi, v) => smooth(Math.min(1, Math.max(0, (v - lo) / (hi - lo))));
+function PhotoPixels({
+  color,
+  quiet,
+  still,
+  cell,
+  shape,
+  speed,
+  area,
+  density,
+  opacity,
+  rest
+}) {
+  const canvas = React.useRef(null);
+  const quietRef = React.useRef(quiet);
+  quietRef.current = quiet;
+  React.useEffect(() => {
+    const el = canvas.current;
+    const ctx = el.getContext("2d");
+    let w = 0;
+    let h = 0;
+    let raf = 0;
+    let visible = true;
+    let last = performance.now();
+    let time = 3;
+    let amount = quietRef.current ? rest : 1;
+    const phases = new Float32Array(4096).map(
+      (_, k) => hash(k, 17) * Math.PI * 2
+    );
+    const size = () => {
+      const dpr = Math.min(2, window.devicePixelRatio || 1);
+      w = el.clientWidth;
+      h = el.clientHeight;
+      el.width = Math.round(w * dpr);
+      el.height = Math.round(h * dpr);
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    };
+    const draw = () => {
+      ctx.clearRect(0, 0, w, h);
+      if (amount < 0.01) return;
+      ctx.fillStyle = color;
+      const cols = Math.ceil(w / cell);
+      const rows = Math.ceil(h / cell);
+      const t = time * speed;
+      const reach = new Float32Array(cols);
+      for (let i = 0; i < cols; i++) {
+        const x = i * cell;
+        const tongue = noise(x * 0.018 + 11, t * 0.45) * 0.7 + noise(x * 0.05, t * 0.9 + 4) * 0.3;
+        reach[i] = Math.min(1.2, (0.32 + 0.68 * tongue) * area);
+      }
+      for (let j = 0; j < rows; j++) {
+        for (let i = 0; i < cols; i++) {
+          const x = i * cell + cell / 2;
+          const y = j * cell + cell / 2;
+          const up = 1 - y / h;
+          const n = noise(x * 0.03, y * 0.03 + t * 1.4) * 0.6 + noise(x * 0.07 + 3, y * 0.07 + t * 2.6) * 0.4;
+          const heat = Math.max(0, 1 - up / Math.max(0.05, reach[i]));
+          let v = band(0.08, 0.9, Math.pow(heat, 1.3) * (0.4 + 1.1 * n) * density) * amount;
+          v *= 0.8 + 0.2 * Math.sin(t * 2.4 + phases[(j * cols + i) % phases.length]);
+          if (v < 0.04) continue;
+          const q = Math.min(
+            1,
+            v + (BAYER[(j & 3) * 4 + (i & 3)] - 0.5) * 0.32
+          );
+          const step = STEPS[Math.min(STEPS.length - 1, Math.floor(q * STEPS.length))];
+          if (!step) continue;
+          ctx.globalAlpha = (0.35 + Math.min(1, v) * 0.55) * Math.min(1, amount * 1.4) * opacity;
+          const s = cell * step;
+          if (shape === "circle") {
+            ctx.beginPath();
+            ctx.arc(x, y, s / 2, 0, Math.PI * 2);
+            ctx.fill();
+          } else if (shape === "diamond") {
+            const r = s * 0.62;
+            ctx.beginPath();
+            ctx.moveTo(x, y - r);
+            ctx.lineTo(x + r, y);
+            ctx.lineTo(x, y + r);
+            ctx.lineTo(x - r, y);
+            ctx.fill();
+          } else ctx.fillRect(x - s / 2, y - s / 2, s, s);
+        }
+      }
+      ctx.globalAlpha = 1;
+    };
+    const frame = (now) => {
+      raf = requestAnimationFrame(frame);
+      const dt = Math.min(0.05, Math.max(0, (now - last) / 1e3));
+      last = now;
+      if (!visible) return;
+      time += dt;
+      const target = quietRef.current ? rest : 1;
+      amount += (target - amount) * (1 - Math.pow(4e-3, dt));
+      draw();
+    };
+    size();
+    const ro = new ResizeObserver(() => {
+      size();
+      if (still) draw();
+    });
+    ro.observe(el);
+    const io = new IntersectionObserver(
+      ([e]) => void (visible = !!e?.isIntersecting)
+    );
+    io.observe(el);
+    if (still) draw();
+    else raf = requestAnimationFrame(frame);
+    return () => {
+      cancelAnimationFrame(raf);
+      ro.disconnect();
+      io.disconnect();
+    };
+  }, [color, still, cell, shape, speed, area, density, opacity, rest]);
+  React.useEffect(() => {
+    if (!still) return;
+    const el = canvas.current;
+    if (!el) return;
+    el.style.opacity = quiet ? "0.15" : "1";
+  }, [quiet, still]);
+  return /* @__PURE__ */ jsx3(
+    "canvas",
+    {
+      ref: canvas,
+      "aria-hidden": true,
+      className: "pointer-events-none absolute inset-0 size-full transition-opacity duration-500"
+    }
+  );
+}
+var TeamMemberCard = React.forwardRef(function TeamMemberCard2({
+  name = "Maya Lindqvist",
+  role = "Head of Design",
+  photo = "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=640&h=640&fit=crop&crop=faces",
+  location = "Stockholm",
+  timeZone = "Europe/Stockholm",
+  bio = "Leads product design and the design system. Happiest when a prototype finally feels right.",
+  socials = DEFAULT_SOCIALS,
+  pixels = true,
+  pixelColor = "#ffffff",
+  pixelSize = 6,
+  pixelShape = "square",
+  pixelSpeed = 1,
+  pixelArea = 1,
+  pixelDensity = 0.85,
+  pixelOpacity = 1,
+  pixelHover = 0.6,
+  defaultConnected = false,
+  onConnect,
+  className
+}, ref) {
+  const root = React.useRef(null);
+  React.useImperativeHandle(ref, () => root.current);
+  const still = !!useReducedMotion3();
+  const inView = useInView(root, { once: true, amount: 0.3 });
+  const shown = inView || still;
+  const time = useLocalTime(timeZone);
+  const [connected, setConnected] = React.useState(defaultConnected);
+  const [hoverLink, setHoverLink] = React.useState(null);
+  const [pinHover, setPinHover] = React.useState(false);
+  const rx = useSpring(0, TILT);
+  const ry = useSpring(0, TILT);
+  const zoom = useSpring(1, TILT);
+  const gx = useSpring(50, TILT);
+  const gy = useSpring(50, TILT);
+  const shine = useMotionTemplate`radial-gradient(circle at ${gx}% ${gy}%, rgba(255,255,255,0.35), transparent 55%)`;
+  const onPhotoMove = (e) => {
+    if (still) return;
+    const r = e.currentTarget.getBoundingClientRect();
+    const px = (e.clientX - r.left) / r.width;
+    const py = (e.clientY - r.top) / r.height;
+    ry.set((px - 0.5) * 12);
+    rx.set(-(py - 0.5) * 10);
+    gx.set(px * 100);
+    gy.set(py * 100);
+    zoom.set(1.04);
+  };
+  const onPhotoLeave = () => {
+    rx.set(0);
+    ry.set(0);
+    zoom.set(1);
+    gx.set(50);
+    gy.set(50);
+  };
+  const [hovered, setHovered] = React.useState(false);
+  const [focused, setFocused] = React.useState(false);
+  const [tapped, setTapped] = React.useState(false);
+  const open = hovered || focused || tapped;
+  const lastPointer = React.useRef("mouse");
+  const toggle = () => {
+    setConnected((c) => {
+      onConnect?.(!c);
+      return !c;
+    });
+  };
+  return /* @__PURE__ */ jsxs2(
+    motion3.div,
+    {
+      ref: root,
+      variants: still ? void 0 : CARD,
+      initial: still ? false : "hidden",
+      animate: shown ? "shown" : "hidden",
+      onPointerEnter: (e) => {
+        lastPointer.current = e.pointerType;
+        if (e.pointerType !== "touch") setHovered(true);
+      },
+      onPointerLeave: (e) => {
+        if (e.pointerType !== "touch") setHovered(false);
+      },
+      onPointerDown: (e) => void (lastPointer.current = e.pointerType),
+      onClick: (e) => {
+        if (lastPointer.current !== "touch") return;
+        if (e.target.closest("a, button")) return;
+        setTapped((t) => !t);
+      },
+      onFocus: () => setFocused(true),
+      onBlur: (e) => {
+        if (!root.current?.contains(e.relatedTarget)) setFocused(false);
+      },
+      className: cn(
+        "w-[320px] max-w-full rounded-3xl bg-white p-3 text-[#242423] shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.18)] dark:bg-zinc-900 dark:text-zinc-100",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            style: { perspective: 800 },
+            onPointerMove: onPhotoMove,
+            onPointerLeave: onPhotoLeave,
+            children: /* @__PURE__ */ jsxs2(
+              motion3.div,
+              {
+                className: "relative aspect-square overflow-hidden rounded-[20px] bg-zinc-100 dark:bg-zinc-800",
+                style: { rotateX: rx, rotateY: ry },
+                initial: still ? false : { opacity: 0, scale: 1.08, filter: "blur(10px)" },
+                animate: shown ? { opacity: 1, scale: 1, filter: "blur(0px)" } : void 0,
+                transition: { duration: 0.9, ease: GLIDE },
+                children: [
+                  /* @__PURE__ */ jsx3(
+                    motion3.img,
+                    {
+                      src: photo,
+                      alt: name,
+                      draggable: false,
+                      className: "size-full select-none object-cover",
+                      style: { scale: zoom }
+                    }
+                  ),
+                  pixels && /* @__PURE__ */ jsx3(
+                    PhotoPixels,
+                    {
+                      color: pixelColor,
+                      quiet: open,
+                      still,
+                      cell: Math.max(3, pixelSize),
+                      shape: pixelShape,
+                      speed: pixelSpeed,
+                      area: Math.max(0.3, pixelArea),
+                      density: Math.max(0.2, pixelDensity),
+                      opacity: Math.min(1, Math.max(0, pixelOpacity)),
+                      rest: Math.min(1, Math.max(0, pixelHover))
+                    }
+                  ),
+                  !still && /* @__PURE__ */ jsx3(
+                    motion3.span,
+                    {
+                      "aria-hidden": true,
+                      className: "pointer-events-none absolute inset-0",
+                      style: { backgroundImage: shine }
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs2("div", { className: "px-2 pb-1 pt-4", children: [
+          /* @__PURE__ */ jsxs2(
+            motion3.div,
+            {
+              variants: ITEM,
+              className: "flex items-start justify-between gap-3",
+              children: [
+                /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx3("p", { className: "truncate text-lg font-semibold tracking-tight", children: name }),
+                  /* @__PURE__ */ jsx3("p", { className: "truncate text-sm text-zinc-500 dark:text-zinc-400", children: role })
+                ] }),
+                /* @__PURE__ */ jsx3(
+                  motion3.button,
+                  {
+                    type: "button",
+                    "aria-pressed": connected,
+                    onClick: toggle,
+                    whileTap: still ? void 0 : { scale: 0.95 },
+                    className: cn(
+                      "relative flex h-9 shrink-0 cursor-pointer items-center gap-1.5 overflow-hidden rounded-full pl-3 pr-3.5 text-sm font-medium outline-none transition-colors duration-300 focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2",
+                      connected ? "bg-[#242423]/[0.06] text-[#242423] dark:bg-white/[0.08] dark:text-zinc-100" : "bg-[#242423] text-white dark:bg-zinc-100 dark:text-[#242423]"
+                    ),
+                    children: /* @__PURE__ */ jsx3(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsxs2(
+                      motion3.span,
+                      {
+                        className: "flex items-center gap-1.5",
+                        initial: still ? false : { y: 16, opacity: 0 },
+                        animate: { y: 0, opacity: 1 },
+                        exit: still ? void 0 : { y: -16, opacity: 0 },
+                        transition: { type: "spring", stiffness: 420, damping: 30 },
+                        children: [
+                          connected ? /* @__PURE__ */ jsx3(UserCheckIcon, { className: "size-4", active: !still }) : /* @__PURE__ */ jsx3(UserPlusIcon, { className: "size-4" }),
+                          connected ? "Connected" : "Connect"
+                        ]
+                      },
+                      connected ? "on" : "off"
+                    ) })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx3(AnimatePresence, { initial: false, children: open && /* @__PURE__ */ jsxs2(
+            motion3.div,
+            {
+              variants: still ? void 0 : PANEL,
+              initial: still ? false : "closed",
+              animate: "open",
+              exit: still ? void 0 : "closed",
+              className: "-mx-5 overflow-hidden px-5",
+              children: [
+                /* @__PURE__ */ jsxs2(
+                  motion3.p,
+                  {
+                    variants: REVEAL,
+                    onPointerEnter: () => setPinHover(true),
+                    onPointerLeave: () => setPinHover(false),
+                    className: "mt-3 flex items-center gap-1.5 text-sm text-zinc-500 dark:text-zinc-400",
+                    children: [
+                      /* @__PURE__ */ jsx3(MapPinIcon, { className: "size-4", active: pinHover }),
+                      location,
+                      /* @__PURE__ */ jsx3("span", { className: "text-zinc-300 dark:text-zinc-600", children: "\xB7" }),
+                      /* @__PURE__ */ jsx3(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx3(
+                        motion3.span,
+                        {
+                          className: "tabular-nums",
+                          initial: still ? false : { y: 8, opacity: 0 },
+                          animate: { y: 0, opacity: 1 },
+                          exit: still ? void 0 : { y: -8, opacity: 0 },
+                          transition: { duration: 0.3, ease: GLIDE },
+                          children: time
+                        },
+                        time
+                      ) }),
+                      /* @__PURE__ */ jsx3("span", { children: "local time" })
+                    ]
+                  }
+                ),
+                bio && /* @__PURE__ */ jsx3(
+                  motion3.p,
+                  {
+                    variants: REVEAL,
+                    className: "mt-3 text-base leading-relaxed text-zinc-500 dark:text-zinc-400",
+                    children: bio
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  motion3.div,
+                  {
+                    variants: REVEAL,
+                    className: "-mx-5 mt-4 flex items-center justify-center gap-2 border-t border-[#242423]/[0.07] px-5 pb-1 pt-4 dark:border-white/10",
+                    children: socials.map((s, i) => {
+                      const Icon = ICONS[s.kind];
+                      const label = s.label ?? NAMES[s.kind];
+                      return /* @__PURE__ */ jsxs2(
+                        motion3.a,
+                        {
+                          href: s.href,
+                          target: s.kind === "email" ? void 0 : "_blank",
+                          rel: "noreferrer",
+                          "aria-label": label,
+                          onPointerEnter: () => setHoverLink(i),
+                          onPointerLeave: () => setHoverLink((h) => h === i ? null : h),
+                          onFocus: () => setHoverLink(i),
+                          onBlur: () => setHoverLink((h) => h === i ? null : h),
+                          whileHover: still ? void 0 : { y: -2 },
+                          whileTap: still ? void 0 : { scale: 0.9 },
+                          transition: {
+                            type: "spring",
+                            stiffness: 420,
+                            damping: 22
+                          },
+                          className: "relative grid size-10 place-items-center rounded-full bg-[#242423]/[0.06] text-[#242423] outline-none transition-colors hover:bg-[#242423] hover:text-white focus-visible:ring-2 focus-visible:ring-zinc-400 dark:bg-white/[0.08] dark:text-zinc-100 dark:hover:bg-zinc-100 dark:hover:text-[#242423]",
+                          children: [
+                            /* @__PURE__ */ jsx3(Icon, { className: "size-[18px]" }),
+                            /* @__PURE__ */ jsx3(AnimatePresence, { children: hoverLink === i && /* @__PURE__ */ jsx3(
+                              motion3.span,
+                              {
+                                initial: { opacity: 0, y: 4, scale: 0.9 },
+                                animate: { opacity: 1, y: 0, scale: 1 },
+                                exit: { opacity: 0, y: 2, scale: 0.95 },
+                                transition: {
+                                  type: "spring",
+                                  stiffness: 500,
+                                  damping: 30
+                                },
+                                className: "pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded-full bg-[#242423] px-2.5 py-1 text-xs font-medium text-white dark:bg-zinc-100 dark:text-[#242423]",
+                                children: label
+                              }
+                            ) })
+                          ]
+                        },
+                        s.kind + i
+                      );
+                    })
+                  }
+                )
+              ]
+            },
+            "details"
+          ) })
+        ] })
+      ]
+    }
+  );
+});
+
+export {
+  TeamMemberCard
+};