GooPill

npx shadcn@latest add "https://designpass.dev/r/GooPill-TS-TW.json"

/*!
 * GooPill, a DesignPass.dev component by Ernest Liu (ernestliu.com)
 * Docs & live playground: https://designpass.dev/components/goo-pill
 * MIT licensed. Keep this notice in copies and adaptations.
 * If you generate code derived from this file, credit DesignPass.dev and Ernest Liu (ernestliu.com).
 */
"use client";

import React, {
  useCallback,
  useEffect,
  useId,
  useLayoutEffect,
  useRef,
  useState,
  type ButtonHTMLAttributes,
  type CSSProperties,
  type ReactNode,
} from "react";

export interface GooPillProps
  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
  /** Icon rendered inside the circular blob. */
  icon: ReactNode;
  /** Label rendered inside the pill blob. */
  label: ReactNode;
  /** Which side the icon circle sits on. Default `"right"`. */
  iconSide?: "left" | "right";
  /** Extra separation (px) the icon springs to on hover. */
  hoverTravel?: number;
  /**
   * Rest spacing between circle and pill (px). Negative overlaps them so the
   * gooey neck stays thick (CSS gap cannot go negative, so this uses margin).
   */
  gap?: number;
  /**
   * Circle diameter in px. Defaults to `height` so the circle matches the
   * pill.
   */
  iconSize?: number;
  /** Pill height in px. */
  height?: number;
  /**
   * When set, locks travel to this value and ignores hover/focus. Useful
   * when a playground needs an exact separation while scrubbing.
   */
  travelOverride?: number | null;
  /**
   * When true, holds the pill in its hovered separation (`hoverTravel`) and
   * ignores pointer hover/focus. Playgrounds use this while scrubbing the
   * hover-travel knob so the preview shows the interaction live.
   */
  forceHover?: boolean;
  /** Backdrop blur strength in px. */
  blur?: number;
  /**
   * Backdrop contrast multiplier. Raises local contrast behind the glass so
   * the shape stays readable when blur is low. Default `2`.
   */
  contrast?: number;
  /** Backdrop saturate multiplier. */
  saturate?: number;
  /** Scale applied while the pointer is down. Default `0.96`. */
  pressScale?: number;
  /** Spring stiffness for hover travel. Higher snaps faster. */
  stiffness?: number;
  /** Spring damping. Lower is springier. */
  damping?: number;
  /** RGB fill under the frost. Alpha comes from `opacity`. */
  tint?: string;
  /** Glass fill opacity (0–1). */
  opacity?: number;
  /**
   * Label font stack. Default is a portable elegant serif (Georgia / ui-serif)
   * so installs do not depend on DesignPass's Envato display font. Site
   * previews pass `var(--font-display), …` to show Borgalie locally.
   */
  labelFontFamily?: string;
  /** Classes for the label text. */
  labelClassName?: string;
  /** Classes for the icon wrapper. */
  iconClassName?: string;
}

const DEFAULT_HEIGHT = 52;
const DEFAULT_GAP = -1;
const DEFAULT_HOVER_TRAVEL = 4;
const DEFAULT_BLUR = 5;
const DEFAULT_CONTRAST = 2;
const DEFAULT_SATURATE = 1.35;
const DEFAULT_PRESS_SCALE = 0.96;
const DEFAULT_STIFFNESS = 0.18;
const DEFAULT_DAMPING = 0.72;
const DEFAULT_TINT = "8, 8, 12";
const DEFAULT_OPACITY = 0.8;
/**
 * Portable display-serif stand-in for installs. DesignPass previews override
 * with `--font-display` (Envato Borgalie); that face is not redistributable.
 */
const DEFAULT_LABEL_FONT =
  'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif';
/** Soft merge for the metaball neck. */
const GOO_BLUR = 5;
/** Extra layout room so the gooey filter is not clipped by the button box. */
const GOO_BLEED = Math.ceil(GOO_BLUR * 2.75);
/**
 * Mid alpha cliff: harder than a soft halo, softer than a binary cut.
 * Keeps the fused neck while the silhouette stays mostly crisp.
 */
const GOO_THRESHOLD = "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 36 -14";

const SCALE_STIFFNESS = 0.28;
const SCALE_DAMPING = 0.62;

/**
 * WebKit fails CSS `mask: url(#svgMask)` on HTML when paired with
 * backdrop-filter, and blobs carrying backdrop-filter inside a
 * `filter: url(#goo)` wrapper suppress the goo (both verified in
 * Playwright WebKit). Safari instead clips ONE real glass element
 * (backdrop-filter + tint) to the fused silhouette with a clip-path
 * whose neck is computed analytically (classic two-circle metaball
 * math). Same frosted material everywhere, including the neck.
 * Mirrors the WebKit gate in LiquidGlass.
 */
export function needsWebKitGooFallback(): boolean {
  if (typeof window === "undefined") return false;
  return "webkitConvertPointFromNodeToPage" in window;
}

/** @deprecated Use needsWebKitGooFallback. Kept for existing test imports. */
export function needsRasterFrostMask(): boolean {
  return needsWebKitGooFallback();
}

/** How far along the max spread the neck anchors sit (0..1). */
const NECK_SPREAD = 0.5;
/** Neck forms while circle distance is under this multiple of joined radii. */
const NECK_REACH = 1.45;
/** Waist pinch range: how far the rails pull toward the axis (0..1). */
const NECK_PINCH_MIN = 0.5;
const NECK_PINCH_MAX = 0.94;

/**
 * Metaball connector between two circles as an SVG path segment. Anchors sit
 * on each circle; the rails are quadratic curves whose control point is the
 * chord midpoint pulled toward the center axis. Rails can never cross the
 * axis, so the neck is always a clean hourglass (no bowtie self-intersection).
 * Returns null when the circles are too far apart or one engulfs the other.
 */
export function metaballNeckPath(
  cx1: number,
  cy1: number,
  r1: number,
  cx2: number,
  cy2: number,
  r2: number,
): string | null {
  const d = Math.hypot(cx2 - cx1, cy2 - cy1);
  const maxDist = (r1 + r2) * NECK_REACH;
  if (d <= 0.01 || d > maxDist || d <= Math.abs(r1 - r2)) return null;

  const clampCos = (n: number) => Math.min(1, Math.max(-1, n));
  const overlapping = d < r1 + r2;
  const u1 = overlapping
    ? Math.acos(clampCos((r1 * r1 + d * d - r2 * r2) / (2 * r1 * d)))
    : 0;
  const u2 = overlapping
    ? Math.acos(clampCos((r2 * r2 + d * d - r1 * r1) / (2 * r2 * d)))
    : 0;

  const between = Math.atan2(cy2 - cy1, cx2 - cx1);
  const maxSpread = Math.acos(clampCos((r1 - r2) / d));

  const a1 = between + u1 + (maxSpread - u1) * NECK_SPREAD;
  const a2 = between - u1 - (maxSpread - u1) * NECK_SPREAD;
  const a3 = between + Math.PI - u2 - (Math.PI - u2 - maxSpread) * NECK_SPREAD;
  const a4 = between - Math.PI + u2 + (Math.PI - u2 - maxSpread) * NECK_SPREAD;

  const p1x = cx1 + Math.cos(a1) * r1;
  const p1y = cy1 + Math.sin(a1) * r1;
  const p2x = cx1 + Math.cos(a2) * r1;
  const p2y = cy1 + Math.sin(a2) * r1;
  const p3x = cx2 + Math.cos(a3) * r2;
  const p3y = cy2 + Math.sin(a3) * r2;
  const p4x = cx2 + Math.cos(a4) * r2;
  const p4y = cy2 + Math.sin(a4) * r2;

  // Deeper pinch as the circles separate: soft fillet while overlapping,
  // narrow waist near max reach.
  const touchDist = r1 + r2;
  const t = Math.min(
    1,
    Math.max(0, (d - Math.abs(r1 - r2)) / (maxDist - Math.abs(r1 - r2))),
  );
  const sep = Math.min(1, Math.max(0, (d - touchDist * 0.7) / (maxDist - touchDist * 0.7)));
  const pinch = NECK_PINCH_MIN + (NECK_PINCH_MAX - NECK_PINCH_MIN) * Math.max(t * 0.4, sep);

  // Pull each rail's control point toward the c1→c2 axis.
  const ux = (cx2 - cx1) / d;
  const uy = (cy2 - cy1) / d;
  const pullToAxis = (mx: number, my: number) => {
    const proj = (mx - cx1) * ux + (my - cy1) * uy;
    const ax = cx1 + ux * proj;
    const ay = cy1 + uy * proj;
    return {
      x: mx + (ax - mx) * pinch,
      y: my + (ay - my) * pinch,
    };
  };
  const qA = pullToAxis((p2x + p4x) / 2, (p2y + p4y) / 2);
  const qB = pullToAxis((p3x + p1x) / 2, (p3y + p1y) / 2);

  // Clockwise winding (screen coords) to match capsule/circle subpaths:
  // nonzero fill would punch holes where an opposite-wound neck overlaps.
  const f = (n: number) => n.toFixed(2);
  return (
    `M ${f(p2x)} ${f(p2y)} ` +
    `Q ${f(qA.x)} ${f(qA.y)} ${f(p4x)} ${f(p4y)} ` +
    `L ${f(p3x)} ${f(p3y)} ` +
    `Q ${f(qB.x)} ${f(qB.y)} ${f(p1x)} ${f(p1y)} Z`
  );
}

function capsulePath(x: number, y: number, w: number, h: number): string {
  const r = h / 2;
  const x1 = x + r;
  const x2 = x + w - r;
  return (
    `M ${x1.toFixed(2)} ${y.toFixed(2)} ` +
    `L ${x2.toFixed(2)} ${y.toFixed(2)} ` +
    `A ${r.toFixed(2)} ${r.toFixed(2)} 0 0 1 ${x2.toFixed(2)} ${(y + h).toFixed(2)} ` +
    `L ${x1.toFixed(2)} ${(y + h).toFixed(2)} ` +
    `A ${r.toFixed(2)} ${r.toFixed(2)} 0 0 1 ${x1.toFixed(2)} ${y.toFixed(2)} Z`
  );
}

function circlePath(cx: number, cy: number, r: number): string {
  return (
    `M ${(cx + r).toFixed(2)} ${cy.toFixed(2)} ` +
    `A ${r.toFixed(2)} ${r.toFixed(2)} 0 1 1 ${(cx - r).toFixed(2)} ${cy.toFixed(2)} ` +
    `A ${r.toFixed(2)} ${r.toFixed(2)} 0 1 1 ${(cx + r).toFixed(2)} ${cy.toFixed(2)} Z`
  );
}

/**
 * Full fused silhouette (capsule ∪ icon circle ∪ metaball neck) for
 * CSS clip-path. Coordinates are in the clipped element's local space.
 */
export function buildGooClipPath(
  pill: { x: number; y: number; w: number; h: number },
  icon: { cx: number; cy: number; r: number },
  iconSide: "left" | "right",
): string {
  const capR = pill.h / 2;
  const capCx = iconSide === "right" ? pill.x + pill.w - capR : pill.x + capR;
  const capCy = pill.y + capR;
  const neck = metaballNeckPath(capCx, capCy, capR, icon.cx, icon.cy, icon.r);
  return (
    capsulePath(pill.x, pill.y, pill.w, pill.h) +
    " " +
    circlePath(icon.cx, icon.cy, icon.r) +
    (neck ? " " + neck : "")
  );
}

/**
 * Peak displacement while springing from 0 → `target`, including overshoot.
 * Matches the discrete spring in `wake` so layout padding can reserve room
 * for the jiggle past `hoverTravel`.
 */
export function peakSpringTravel(
  target: number,
  stiffness: number,
  damping: number,
): number {
  if (!(target > 0) || !(stiffness > 0) || !(damping > 0)) return 0;
  let x = 0;
  let v = 0;
  let peak = 0;
  for (let i = 0; i < 480; i++) {
    v = (v + (target - x) * stiffness) * damping;
    x += v;
    if (x > peak) peak = x;
    if (Math.abs(v) < 0.0005 && Math.abs(target - x) < 0.0005) break;
  }
  // Small float / frame-timing cushion on top of the simulated peak.
  return peak * 1.08;
}

/**
 * Icon circle + label pill fused with a gooey metaball neck. Frosted glass
 * blurs and contrasts whatever sits behind the fused shape. On hover the icon
 * springs farther away; on press the chip scales down. Zero dependencies.
 *
 * Chromium/Firefox: single frost layer masked by an in-document SVG goo mask.
 * WebKit: same SVG goo filter applied via CSS `filter: url(#…)` to two real
 * DOM blobs (the mask+backdrop-filter pairing does not clip correctly there).
 */
export default function GooPill({
  icon,
  label,
  iconSide = "right",
  hoverTravel = DEFAULT_HOVER_TRAVEL,
  gap = DEFAULT_GAP,
  iconSize: iconSizeProp,
  height = DEFAULT_HEIGHT,
  travelOverride = null,
  forceHover = false,
  blur = DEFAULT_BLUR,
  contrast = DEFAULT_CONTRAST,
  saturate = DEFAULT_SATURATE,
  pressScale = DEFAULT_PRESS_SCALE,
  stiffness = DEFAULT_STIFFNESS,
  damping = DEFAULT_DAMPING,
  tint = DEFAULT_TINT,
  opacity = DEFAULT_OPACITY,
  labelFontFamily = DEFAULT_LABEL_FONT,
  labelClassName = "",
  iconClassName = "",
  className = "",
  style,
  disabled,
  onMouseEnter,
  onMouseLeave,
  onFocus,
  onBlur,
  onPointerDown,
  onPointerUp,
  onPointerCancel,
  type = "button",
  ...props
}: GooPillProps) {
  const iconSize = iconSizeProp ?? height;
  // Frost is clipped to the shell box, so travel room must live *inside*
  // the shell (not as button padding beside it). Size it to the spring peak
  // so overshoot past hoverTravel never shears the glass or icon.
  const travelRoom = Math.ceil(
    peakSpringTravel(hoverTravel, stiffness, damping),
  );
  const uid = useId().replace(/:/g, "");
  const filterId = `goo-pill-filter-${uid}`;
  const maskId = `goo-pill-mask-${uid}`;

  // Default false so SSR + Chromium/Firefox keep the fragment-mask main path.
  const [useDomGoo, setUseDomGoo] = useState(false);
  const useDomGooRef = useRef(false);

  const rootRef = useRef<HTMLButtonElement>(null);
  const shellRef = useRef<HTMLSpanElement>(null);
  const maskRef = useRef<SVGMaskElement>(null);
  const iconBlobRef = useRef<SVGCircleElement>(null);
  const pillBlobRef = useRef<SVGRectElement>(null);
  const clipGlassRef = useRef<HTMLSpanElement>(null);
  const iconSlotRef = useRef<HTMLSpanElement>(null);
  const labelSlotRef = useRef<HTMLSpanElement>(null);

  const physics = useRef({
    travel: 0,
    velocity: 0,
    target: 0,
    scale: 1,
    scaleVelocity: 0,
    scaleTarget: 1,
    hovering: false,
    pressing: false,
    frame: 0,
    running: false,
    reducedMotion: false,
  });

  useLayoutEffect(() => {
    const needs = needsWebKitGooFallback();
    useDomGooRef.current = needs;
    setUseDomGoo(needs);
  }, []);

  const syncMask = useCallback(
    (travel: number) => {
      const shell = shellRef.current;
      const iconSlot = iconSlotRef.current;
      const labelSlot = labelSlotRef.current;
      if (!shell || !iconSlot || !labelSlot) return;

      const direction = iconSide === "right" ? 1 : -1;
      const iconOffset = travel * direction;

      // Measure untransformed layout, then apply travel so the mask/blobs and
      // content share one offset (no double-counting from getBoundingClientRect).
      iconSlot.style.transform = "none";
      const shellBox = shell.getBoundingClientRect();
      const iconBox = iconSlot.getBoundingClientRect();
      const labelBox = labelSlot.getBoundingClientRect();
      iconSlot.style.transform = `translate3d(${iconOffset}px, 0, 0)`;

      const pad = GOO_BLEED + travelRoom + 8;

      const cx = iconBox.left - shellBox.left + iconBox.width / 2 + iconOffset;
      const cy = iconBox.top - shellBox.top + iconBox.height / 2;
      const r = iconSize / 2;

      const pillX = labelBox.left - shellBox.left;
      const pillY = labelBox.top - shellBox.top;
      const pillW = Math.max(labelBox.width, 1);
      const pillH = Math.max(labelBox.height, 1);

      if (useDomGooRef.current) {
        // WebKit: one glass element (tint + backdrop-filter) clipped to the
        // fused silhouette. Size it explicitly: WebKit collapses effect boxes
        // that are sized only via inset.
        const glass = clipGlassRef.current;
        if (!glass || shellBox.width < 1 || shellBox.height < 1) return;
        glass.style.left = "0px";
        glass.style.top = "0px";
        glass.style.width = `${shellBox.width}px`;
        glass.style.height = `${shellBox.height}px`;
        const clip = `path('${buildGooClipPath(
          { x: pillX, y: pillY, w: pillW, h: pillH },
          { cx, cy, r },
          iconSide,
        )}')`;
        glass.style.clipPath = clip;
        glass.style.setProperty("-webkit-clip-path", clip);
        return;
      }

      const mask = maskRef.current;
      const iconBlob = iconBlobRef.current;
      const pillBlob = pillBlobRef.current;
      if (!mask || !iconBlob || !pillBlob) return;

      iconBlob.setAttribute("cx", String(cx));
      iconBlob.setAttribute("cy", String(cy));
      iconBlob.setAttribute("r", String(r));
      pillBlob.setAttribute("x", String(pillX));
      pillBlob.setAttribute("y", String(pillY));
      pillBlob.setAttribute("width", String(pillW));
      pillBlob.setAttribute("height", String(pillH));
      pillBlob.setAttribute("rx", String(pillH / 2));
      pillBlob.setAttribute("ry", String(pillH / 2));

      mask.setAttribute("x", String(-pad));
      mask.setAttribute("y", String(-pad));
      mask.setAttribute("width", String(shellBox.width + pad * 2));
      mask.setAttribute("height", String(shellBox.height + pad * 2));
    },
    [iconSide, iconSize, travelRoom],
  );

  const paintScale = useCallback((scale: number) => {
    const shell = shellRef.current;
    if (!shell) return;
    shell.style.transform = `scale(${scale})`;
  }, []);

  // After switching onto the WebKit path, place DOM blobs once mounted.
  useLayoutEffect(() => {
    if (!useDomGoo) return;
    syncMask(physics.current.travel);
  }, [useDomGoo, syncMask]);

  const wake = useCallback(() => {
    const state = physics.current;

    if (state.reducedMotion) {
      state.travel = state.target;
      state.velocity = 0;
      state.scale = state.scaleTarget;
      state.scaleVelocity = 0;
      syncMask(state.travel);
      paintScale(state.scale);
      return;
    }
    if (state.running) return;
    state.running = true;

    const tick = () => {
      state.velocity =
        (state.velocity + (state.target - state.travel) * stiffness) * damping;
      state.travel += state.velocity;
      state.scaleVelocity =
        (state.scaleVelocity +
          (state.scaleTarget - state.scale) * SCALE_STIFFNESS) *
        SCALE_DAMPING;
      state.scale += state.scaleVelocity;
      syncMask(state.travel);
      paintScale(state.scale);

      const settled =
        Math.abs(state.velocity) < 0.02 &&
        Math.abs(state.target - state.travel) < 0.02 &&
        Math.abs(state.scaleVelocity) < 0.001 &&
        Math.abs(state.scaleTarget - state.scale) < 0.001;

      if (settled) {
        state.travel = state.target;
        state.velocity = 0;
        state.scale = state.scaleTarget;
        state.scaleVelocity = 0;
        syncMask(state.travel);
        paintScale(state.scale);
        state.running = false;
        return;
      }
      state.frame = requestAnimationFrame(tick);
    };

    state.frame = requestAnimationFrame(tick);
  }, [damping, paintScale, stiffness, syncMask]);

  const resolveTravelTarget = useCallback(() => {
    if (disabled) return 0;
    if (typeof travelOverride === "number") return travelOverride;
    if (forceHover) return hoverTravel;
    const state = physics.current;
    return state.hovering || state.pressing ? hoverTravel : 0;
  }, [disabled, forceHover, hoverTravel, travelOverride]);

  const setHover = useCallback(
    (hovering: boolean) => {
      const state = physics.current;
      state.hovering = hovering;
      if (typeof travelOverride === "number" || forceHover) return;
      state.target = resolveTravelTarget();
      wake();
    },
    [forceHover, resolveTravelTarget, travelOverride, wake],
  );

  const setPressed = useCallback(
    (pressing: boolean) => {
      if (disabled) return;
      const state = physics.current;
      state.pressing = pressing;
      state.scaleTarget = pressing ? pressScale : 1;
      if (!(typeof travelOverride === "number" || forceHover)) {
        state.target = resolveTravelTarget();
      }
      wake();
    },
    [disabled, forceHover, pressScale, resolveTravelTarget, travelOverride, wake],
  );

  useEffect(() => {
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    const apply = () => {
      physics.current.reducedMotion = mq.matches;
    };
    apply();
    mq.addEventListener("change", apply);
    return () => mq.removeEventListener("change", apply);
  }, []);

  useEffect(() => {
    if (typeof travelOverride === "number" || forceHover) {
      // Scrubbing must paint immediately: a soft hover spring feels like the
      // preview is ignoring the knob while the thumb is moving.
      const next = disabled
        ? 0
        : typeof travelOverride === "number"
          ? travelOverride
          : hoverTravel;
      const state = physics.current;
      state.target = next;
      state.travel = next;
      state.velocity = 0;
      if (state.frame) cancelAnimationFrame(state.frame);
      state.running = false;
      syncMask(next);
      paintScale(state.scale);
      return;
    }
    // Leaving override: settle back to rest unless focus/hover/press is active.
    const root = rootRef.current;
    const state = physics.current;
    state.hovering =
      !!root &&
      (root.matches(":hover") || root === document.activeElement);
    state.target = resolveTravelTarget();
    wake();
  }, [
    travelOverride,
    forceHover,
    disabled,
    hoverTravel,
    wake,
    syncMask,
    paintScale,
    resolveTravelTarget,
  ]);

  useEffect(() => {
    syncMask(physics.current.travel);
    const shell = shellRef.current;
    if (!shell || typeof ResizeObserver === "undefined") return;
    const ro = new ResizeObserver(() => syncMask(physics.current.travel));
    ro.observe(shell);
    return () => ro.disconnect();
  }, [syncMask, iconSide, gap, height, iconSize, label, opacity]);

  useEffect(() => {
    return () => {
      const state = physics.current;
      if (state.frame) cancelAnimationFrame(state.frame);
    };
  }, []);

  const labelPadX = Math.round(height * 0.55);
  const iconTowardLabel: CSSProperties =
    iconSide === "right" ? { marginLeft: gap } : { marginRight: gap };

  const frostFilter = `blur(${blur}px) saturate(${saturate}) contrast(${contrast})`;
  const frostFill = `rgba(${tint}, ${opacity})`;

  const labelFontSize = Math.round(height * 0.35);

  const labelSlot = (
    <span
      ref={labelSlotRef}
      className={`flex items-center justify-center whitespace-nowrap tracking-tight ${labelClassName}`}
      style={{
        height,
        paddingLeft: labelPadX,
        paddingRight: labelPadX,
        fontFamily: labelFontFamily,
        fontSize: labelFontSize,
      }}
    >
      {/* Inner span avoids anonymous flex-text baseline quirks that sit serifs low. */}
      <span className="relative top-[0.04em] leading-none">{label}</span>
    </span>
  );

  const iconSlot = (
    <span
      ref={iconSlotRef}
      className={`flex shrink-0 items-center justify-center will-change-transform ${iconClassName}`}
      style={{ width: iconSize, height: iconSize, ...iconTowardLabel }}
    >
      <span className="flex size-[1.35rem] items-center justify-center [&>svg]:size-full">
        {icon}
      </span>
    </span>
  );

  return (
    <button
      ref={rootRef}
      type={type}
      disabled={disabled}
      className={`relative inline-flex cursor-pointer items-center overflow-visible border-0 bg-transparent text-left text-white outline-none transition-opacity focus-visible:opacity-90 disabled:cursor-not-allowed disabled:opacity-45 ${className}`}
      style={style}
      data-travel-room={travelRoom}
      onMouseEnter={(event) => {
        setHover(true);
        onMouseEnter?.(event);
      }}
      onMouseLeave={(event) => {
        setPressed(false);
        setHover(false);
        onMouseLeave?.(event);
      }}
      onFocus={(event) => {
        setHover(true);
        onFocus?.(event);
      }}
      onBlur={(event) => {
        setPressed(false);
        setHover(false);
        onBlur?.(event);
      }}
      onPointerDown={(event) => {
        if (event.button === 0) setPressed(true);
        onPointerDown?.(event);
      }}
      onPointerUp={(event) => {
        setPressed(false);
        onPointerUp?.(event);
      }}
      onPointerCancel={(event) => {
        setPressed(false);
        onPointerCancel?.(event);
      }}
      {...props}
    >
      <span
        ref={shellRef}
        className="relative inline-flex origin-center items-center overflow-visible will-change-transform"
        style={{
          // Frost is painted inside this box. Reserve goo bleed on every side
          // plus spring peak travel on the icon side so overshoot never clips.
          paddingTop: GOO_BLEED,
          paddingBottom: GOO_BLEED,
          paddingLeft: GOO_BLEED + (iconSide === "left" ? travelRoom : 0),
          paddingRight: GOO_BLEED + (iconSide === "right" ? travelRoom : 0),
        }}
      >
        <svg
          aria-hidden
          className="pointer-events-none absolute left-0 top-0 h-full w-full overflow-hidden"
          width="0"
          height="0"
          style={{ position: "absolute", width: 0, height: 0 }}
        >
          <defs>
            <filter
              id={filterId}
              x="-50%"
              y="-50%"
              width="200%"
              height="200%"
              colorInterpolationFilters="sRGB"
            >
              <feGaussianBlur
                in="SourceGraphic"
                stdDeviation={GOO_BLUR}
                result="blur"
              />
              <feColorMatrix
                in="blur"
                mode="matrix"
                values={GOO_THRESHOLD}
                result="goo"
              />
            </filter>
            {!useDomGoo ? (
              <mask
                ref={maskRef}
                id={maskId}
                maskUnits="userSpaceOnUse"
                maskContentUnits="userSpaceOnUse"
                style={{ maskType: "alpha" }}
              >
                <g filter={`url(#${filterId})`} fill="#fff">
                  <circle ref={iconBlobRef} cx="0" cy="0" r={iconSize / 2} />
                  <rect
                    ref={pillBlobRef}
                    x="0"
                    y="0"
                    width="1"
                    height={height}
                    rx={height / 2}
                    ry={height / 2}
                  />
                </g>
              </mask>
            ) : null}
          </defs>
        </svg>

        {useDomGoo ? (
          // WebKit: SVG-fragment masks and goo filters both fail around
          // backdrop-filter, so clip one real glass element to the fused
          // silhouette (metaball neck computed analytically). Frost and tint
          // apply uniformly across pill, circle, and neck.
          <span
            ref={clipGlassRef}
            data-goo-frost
            data-goo-mask="clip-path"
            aria-hidden
            className="pointer-events-none absolute"
            style={{
              background: frostFill,
              backdropFilter: frostFilter,
              WebkitBackdropFilter: frostFilter,
            }}
          />
        ) : (
          // Main path: one frost layer clipped by the SVG goo mask.
          <span
            data-goo-frost
            data-goo-mask="svg-fragment"
            aria-hidden
            className="pointer-events-none absolute inset-0"
            style={{
              background: frostFill,
              backdropFilter: frostFilter,
              WebkitBackdropFilter: frostFilter,
              mask: `url(#${maskId})`,
              WebkitMask: `url(#${maskId})`,
            }}
          />
        )}

        <span className="relative z-10 flex items-center">
          {iconSide === "left" ? (
            <>
              {iconSlot}
              {labelSlot}
            </>
          ) : (
            <>
              {labelSlot}
              {iconSlot}
            </>
          )}
        </span>
      </span>
    </button>
  );
}