argentui 0.3.0

package/dist/index.cjs

@@ -0,0 +1,838 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  EFFECTS: () => EFFECTS,
+  FINISHES: () => FINISHES,
+  Metal: () => Metal,
+  MetalBadge: () => MetalBadge,
+  MetalButton: () => MetalButton,
+  MetalCard: () => MetalCard,
+  MetalFill: () => MetalFill,
+  MetalLogo: () => MetalLogo,
+  MetalProgress: () => MetalProgress,
+  MetalText: () => MetalText,
+  MetalToggle: () => MetalToggle,
+  NATIVE_TONES: () => NATIVE_TONES,
+  TONE_PARAMS: () => TONE_PARAMS,
+  mountMetal: () => mountMetal,
+  setHaptics: () => setHaptics,
+  useInView: () => useInView,
+  useMounted: () => useMounted,
+  useReducedMotion: () => useReducedMotion
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/surfaces.tsx
+var import_react2 = require("react");
+
+// src/metal.tsx
+var import_react = require("react");
+var import_shaders_react = require("@paper-design/shaders-react");
+
+// src/engine.ts
+var VERT = `#version 300 es
+void main() {
+  vec2 pos = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));
+  gl_Position = vec4(pos * 2.0 - 1.0, 0.0, 1.0);
+}`;
+var FRAG = `#version 300 es
+precision highp float;
+uniform vec2 u_res;
+uniform float u_time;
+uniform vec3 u_light;
+uniform vec3 u_dark;
+uniform float u_rep;
+uniform float u_angle;
+uniform float u_soft;
+uniform float u_disp;
+uniform float u_dist;
+uniform float u_scale;
+out vec4 outColor;
+
+// 2D simplex noise \u2014 Ashima Arts / Stefan Gustavson (webgl-noise, MIT).
+vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec3 permute(vec3 x) { return mod289(((x * 34.0) + 1.0) * x); }
+float snoise(vec2 v) {
+  const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);
+  vec2 i = floor(v + dot(v, C.yy));
+  vec2 x0 = v - i + dot(i, C.xx);
+  vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+  vec4 x12 = x0.xyxy + C.xxzz;
+  x12.xy -= i1;
+  i = mod289(i);
+  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));
+  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.0);
+  m = m * m;
+  m = m * m;
+  vec3 x = 2.0 * fract(p * C.www) - 1.0;
+  vec3 h = abs(x) - 0.5;
+  vec3 ox = floor(x + 0.5);
+  vec3 a0 = x - ox;
+  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);
+  vec3 g;
+  g.x = a0.x * x0.x + h.x * x0.y;
+  g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+  return 130.0 * dot(m, g);
+}
+
+// One reflection band: a soft triangle wave over the warped coordinate.
+float stripe(float coord) {
+  float f = fract(coord);
+  float tri = abs(f * 2.0 - 1.0);
+  return smoothstep(0.5 - u_soft, 0.5 + u_soft, tri);
+}
+
+void main() {
+  vec2 uv = (gl_FragCoord.xy / u_res - 0.5);
+  uv.x *= u_res.x / u_res.y;
+  uv /= max(u_scale, 0.001);
+
+  float t = u_time;
+
+  // curvature: bands bend as if wrapping a bulged surface
+  float d = length(uv);
+  float bulge = 1.0 - 0.45 * d * d;
+
+  // flowing warp \u2014 two noise octaves drifting at different rates
+  float n = snoise(uv * 0.9 + vec2(0.0, -t * 0.28));
+  n += 0.35 * snoise(uv * 1.8 + vec2(t * 0.1, -t * 0.45));
+
+  // rotate so bands run along u_angle
+  float c = cos(u_angle), s = sin(u_angle);
+  vec2 ruv = mat2(c, -s, s, c) * uv;
+
+  float coord = ruv.y * bulge * u_rep + n * u_dist * 2.2 - t * 0.22;
+
+  // per-channel dispersion \u2014 the chrome fringing
+  float r = stripe(coord + u_disp);
+  float g = stripe(coord);
+  float b = stripe(coord - u_disp);
+
+  vec3 col = vec3(
+    mix(u_dark.r, u_light.r, r),
+    mix(u_dark.g, u_light.g, g),
+    mix(u_dark.b, u_light.b, b)
+  );
+
+  // rim lift toward the edges
+  col *= 0.94 + 0.14 * smoothstep(0.25, 0.85, d);
+
+  outColor = vec4(col, 1.0);
+}`;
+function hexToRgb(hex) {
+  const h = hex.replace("#", "");
+  const v = h.length === 3 ? h.split("").map((ch) => ch + ch).join("") : h;
+  const n = parseInt(v, 16);
+  return [(n >> 16 & 255) / 255, (n >> 8 & 255) / 255, (n & 255) / 255];
+}
+var NATIVE_TONES = {
+  silver: { light: "#f8fafc", dark: "#23262b", repetition: 1.8, angle: 68, softness: 0.34, dispersion: 0.03, distortion: 0.38 },
+  gold: { light: "#ffe9a8", dark: "#6e5408", repetition: 1.8, angle: 68, softness: 0.34, dispersion: 0.028, distortion: 0.36 },
+  gunmetal: { light: "#b6bec9", dark: "#14161a", repetition: 1.6, angle: 80, softness: 0.36, dispersion: 0.025, distortion: 0.34 },
+  obsidian: { light: "#787c88", dark: "#000000", repetition: 1.4, angle: 92, softness: 0.42, dispersion: 0.02, distortion: 0.28 }
+};
+function compile(gl, type, src) {
+  const sh = gl.createShader(type);
+  if (!sh) return null;
+  gl.shaderSource(sh, src);
+  gl.compileShader(sh);
+  if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
+    console.error("argent shader:", gl.getShaderInfoLog(sh));
+    gl.deleteShader(sh);
+    return null;
+  }
+  return sh;
+}
+function mountMetal(canvas, params) {
+  const gl = canvas.getContext("webgl2", { antialias: true });
+  if (!gl) return null;
+  const vs = compile(gl, gl.VERTEX_SHADER, VERT);
+  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG);
+  if (!vs || !fs) return null;
+  const prog = gl.createProgram();
+  gl.attachShader(prog, vs);
+  gl.attachShader(prog, fs);
+  gl.linkProgram(prog);
+  if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+    console.error("argent shader link:", gl.getProgramInfoLog(prog));
+    return null;
+  }
+  gl.useProgram(prog);
+  const U = (name) => gl.getUniformLocation(prog, name);
+  const uRes = U("u_res"), uTime = U("u_time"), uLight = U("u_light"), uDark = U("u_dark");
+  const uRep = U("u_rep"), uAngle = U("u_angle"), uSoft = U("u_soft");
+  const uDisp = U("u_disp"), uDist = U("u_dist"), uScale = U("u_scale");
+  let p = { ...params };
+  let raf = 0;
+  let tAcc = Math.random() * 40;
+  let last = performance.now();
+  let dead = false;
+  function draw() {
+    raf = 0;
+    if (dead) return;
+    const dpr = Math.min(window.devicePixelRatio || 1, 2);
+    const w = Math.max(1, Math.round(canvas.clientWidth * dpr));
+    const h = Math.max(1, Math.round(canvas.clientHeight * dpr));
+    if (canvas.width !== w || canvas.height !== h) {
+      canvas.width = w;
+      canvas.height = h;
+      gl.viewport(0, 0, w, h);
+    }
+    const now = performance.now();
+    tAcc += (now - last) / 1e3 * p.speed;
+    last = now;
+    gl.uniform2f(uRes, w, h);
+    gl.uniform1f(uTime, tAcc);
+    gl.uniform3fv(uLight, hexToRgb(p.light));
+    gl.uniform3fv(uDark, hexToRgb(p.dark));
+    gl.uniform1f(uRep, p.repetition);
+    gl.uniform1f(uAngle, p.angle * Math.PI / 180);
+    gl.uniform1f(uSoft, Math.max(0.02, p.softness));
+    gl.uniform1f(uDisp, p.dispersion);
+    gl.uniform1f(uDist, p.distortion);
+    gl.uniform1f(uScale, p.scale);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+    if (p.speed > 0) raf = requestAnimationFrame(draw);
+  }
+  draw();
+  return {
+    update(np) {
+      p = { ...p, ...np };
+      last = performance.now();
+      if (!raf) raf = requestAnimationFrame(draw);
+    },
+    destroy() {
+      dead = true;
+      if (raf) cancelAnimationFrame(raf);
+      gl.getExtension("WEBGL_lose_context")?.loseContext();
+    }
+  };
+}
+
+// src/metal.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var TONE_PARAMS = {
+  silver: {
+    colorBack: "#a7abb1",
+    colorTint: "#ffffff",
+    repetition: 3,
+    softness: 0.18,
+    shiftRed: 0.32,
+    shiftBlue: 0.32,
+    distortion: 0.14,
+    contour: 0.55,
+    angle: 68
+  },
+  gold: {
+    colorBack: "#94700e",
+    colorTint: "#ffedb0",
+    repetition: 3,
+    softness: 0.2,
+    shiftRed: 0.3,
+    shiftBlue: 0.12,
+    distortion: 0.13,
+    contour: 0.5,
+    angle: 68
+  },
+  gunmetal: {
+    colorBack: "#33373d",
+    colorTint: "#b2bac4",
+    repetition: 2.6,
+    softness: 0.26,
+    shiftRed: 0.22,
+    shiftBlue: 0.32,
+    distortion: 0.1,
+    contour: 0.45,
+    angle: 80
+  },
+  obsidian: {
+    colorBack: "#000000",
+    colorTint: "#9498a6",
+    repetition: 2,
+    softness: 0.4,
+    shiftRed: 0.14,
+    shiftBlue: 0.24,
+    distortion: 0.07,
+    contour: 0.32,
+    angle: 92
+  }
+};
+var imageMountQueue = Promise.resolve();
+function useStaggeredMount() {
+  const [go, setGo] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    let alive = true;
+    imageMountQueue = imageMountQueue.then(async () => {
+      if (!alive) return;
+      setGo(true);
+      await new Promise((r) => setTimeout(r, 300));
+    });
+    return () => {
+      alive = false;
+    };
+  }, []);
+  return go;
+}
+function useMounted() {
+  const [m, setM] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => setM(true), []);
+  return m;
+}
+function useReducedMotion() {
+  const [reduced, setReduced] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReduced(mq.matches);
+    const onChange = (e) => setReduced(e.matches);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, []);
+  return reduced;
+}
+function useInView(ref, margin = "250px") {
+  const [inView, setInView] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    const el = ref.current;
+    if (!el) return;
+    const io = new IntersectionObserver(([entry]) => setInView(entry.isIntersecting), { rootMargin: margin });
+    io.observe(el);
+    return () => io.disconnect();
+  }, [ref, margin]);
+  return inView;
+}
+var FINISHES = {
+  /** Cards, nav, panels — broad flowing reflection bands (the tone defaults). */
+  surface: { scale: 1.1 },
+  /** Buttons — slightly spread, calmer warp so labels stay readable. */
+  button: { scale: 1.4, distortion: 0.1 },
+  /** Thin horizontal strips (progress) — near-vertical stripes crossing the bar. */
+  bar: { angle: 14, repetition: 5, softness: 0.3, distortion: 0.06, shift: 0.5, scale: 0.8, speed: 0.75 },
+  /** Small round things (toggle thumbs) — one soft highlight, like a polished sphere. */
+  orb: { angle: 112, angleJitter: 20, repetition: 1.7, softness: 0.5, distortion: 0.05, shift: 0.4, scale: 1.5 },
+  /** Hairline edges (badges, thin borders) — dense bands so any slice sparkles. */
+  rim: { angle: 40, repetition: 4.5, softness: 0.3, distortion: 0.08, shift: 0.5, scale: 0.85, speed: 0.85 }
+};
+var EFFECTS = {
+  /** The default — steady flowing reflection bands. */
+  flow: {},
+  /** Slow, heavy, half-melted — soft wide bands churning lazily. */
+  molten: { softness: 0.5, distortion: 0.3, speed: 0.45, shift: 0.6 },
+  /** Agitated surface — tighter bands, hard noise, quick motion. */
+  ripple: { repetition: 4, softness: 0.24, distortion: 0.5, speed: 1.4 },
+  /** Mirror-polished — crisp hard bands, strong chromatic fringe, calm. */
+  chrome: { softness: 0.05, distortion: 0.05, shift: 1.6, speed: 0.8 },
+  /** Horizontal swells rolling through the surface. */
+  wave: { angle: 0, repetition: 5, softness: 0.36, distortion: 0.18, speed: 0.7 }
+};
+var FILL_STYLE = { position: "absolute", inset: 0, width: "100%", height: "100%" };
+function NativeCanvas({ params }) {
+  const canvasRef = (0, import_react.useRef)(null);
+  const mountRef = (0, import_react.useRef)(null);
+  const initial = (0, import_react.useRef)(params);
+  initial.current = params;
+  (0, import_react.useEffect)(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    mountRef.current = mountMetal(canvas, initial.current);
+    return () => {
+      mountRef.current?.destroy();
+      mountRef.current = null;
+    };
+  }, []);
+  (0, import_react.useEffect)(() => {
+    mountRef.current?.update(params);
+  }, [params]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("canvas", { ref: canvasRef, style: { ...FILL_STYLE, display: "block" } });
+}
+function MetalFill({ tone, speed = 1, scale, engine = "paper", finish = "surface", effect = "flow", angle }) {
+  const ref = (0, import_react.useRef)(null);
+  const mounted = useMounted();
+  const inView = useInView(ref);
+  const reduced = useReducedMotion();
+  const f = FINISHES[finish];
+  const e = EFFECTS[effect];
+  const [jitter] = (0, import_react.useState)(() => f.angleJitter ? (Math.random() * 2 - 1) * f.angleJitter : 0);
+  const base = TONE_PARAMS[tone];
+  const effAngle = (angle ?? e.angle ?? f.angle ?? base.angle ?? 70) + jitter;
+  const effScale = scale ?? f.scale ?? 1.1;
+  const effSpeed = (reduced ? 0 : speed) * (f.speed ?? 1) * (e.speed ?? 1);
+  const shift = (f.shift ?? 1) * (e.shift ?? 1);
+  const repetition = e.repetition ?? f.repetition ?? base.repetition;
+  const softness = e.softness ?? f.softness ?? base.softness;
+  const distortion = e.distortion ?? f.distortion ?? base.distortion;
+  const native = NATIVE_TONES[tone];
+  const nativeParams = {
+    ...native,
+    angle: effAngle,
+    repetition: repetition ?? native.repetition,
+    softness: softness ?? native.softness,
+    // the native warp amount runs ~3× paper's distortion scale
+    distortion: distortion !== void 0 ? distortion * 3 : native.distortion,
+    dispersion: native.dispersion * shift,
+    speed: effSpeed,
+    scale: effScale
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ref, "aria-hidden": "true", style: { position: "absolute", inset: 0 }, children: mounted && inView && (engine === "native" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeCanvas, { params: nativeParams }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_shaders_react.LiquidMetal,
+    {
+      shape: "none",
+      fit: "cover",
+      scale: effScale,
+      speed: effSpeed,
+      ...base,
+      angle: effAngle,
+      repetition,
+      softness,
+      distortion,
+      shiftRed: (base.shiftRed ?? 0.3) * shift,
+      shiftBlue: (base.shiftBlue ?? 0.3) * shift,
+      style: FILL_STYLE
+    }
+  )) });
+}
+
+// src/haptics.ts
+var enabled = true;
+function setHaptics(on) {
+  enabled = on;
+}
+function vibrate(pattern) {
+  if (!enabled || typeof navigator === "undefined" || !("vibrate" in navigator)) return;
+  try {
+    navigator.vibrate(pattern);
+  } catch {
+  }
+}
+var PRESS_PATTERN = 8;
+
+// src/surfaces.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function assignRef(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+function buildVars(radius, borderWidth, halo, style) {
+  const vars = {
+    borderRadius: radius,
+    "--argent-bw": `${borderWidth}px`,
+    "--argent-radius": `${radius}px`,
+    ...style
+  };
+  if (halo) vars["--argent-halo"] = `${halo === true ? 8 : halo}px`;
+  return vars;
+}
+var Metal = (0, import_react2.forwardRef)(function Metal2({
+  as,
+  tone = "silver",
+  variant = "border",
+  frame = "single",
+  tint = false,
+  borderWidth = 1.5,
+  revealOnHover = false,
+  radius = 14,
+  speed,
+  metalScale,
+  engine,
+  finish,
+  effect,
+  angle,
+  sheen = false,
+  halo = false,
+  className,
+  style,
+  children,
+  ...rest
+}, ref) {
+  const Tag = as ?? "div";
+  const border = variant === "border";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    Tag,
+    {
+      ref: (node) => assignRef(ref, node),
+      className: cx(
+        "argent",
+        border ? "argent--border" : "argent--fill",
+        border && frame === "double" && "argent--double",
+        border && tint && "argent--tint",
+        revealOnHover && "argent--reveal",
+        sheen && "argent--sheen",
+        !!halo && "argent--halo",
+        className
+      ),
+      "data-tone": tone,
+      style: buildVars(radius, borderWidth, halo, style),
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "argent-fill", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MetalFill, { tone, speed, scale: metalScale, engine, finish, effect, angle }) }),
+        border && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "argent-core", "aria-hidden": "true" }),
+        sheen && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "argent-sheen", "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "argent-content", children })
+      ]
+    }
+  );
+});
+var MetalCard = (0, import_react2.forwardRef)(function MetalCard2({ className, radius = 18, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Metal, { ref, radius, className: cx("argent-card", className), ...rest });
+});
+var SIZE_RADIUS = { sm: 11, md: 13, lg: 15 };
+var MetalButton = (0, import_react2.forwardRef)(function MetalButton2({ tone = "silver", size = "md", variant = "border", radius, borderWidth = 1.5, revealOnHover = true, haptics = true, speed, engine, finish = "button", effect, angle, halo = false, type = "button", className, children, style, onPointerDown, ...rest }, ref) {
+  const border = variant === "border";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "button",
+    {
+      ref,
+      type,
+      onPointerDown: (e) => {
+        if (haptics) vibrate(PRESS_PATTERN);
+        onPointerDown?.(e);
+      },
+      className: cx("argent", border ? "argent--border" : "argent--fill", border && revealOnHover && "argent--reveal", "argent--sheen", !!halo && "argent--halo", "argent-btn", `argent-btn--${size}`, className),
+      "data-tone": tone,
+      style: buildVars(radius ?? SIZE_RADIUS[size], borderWidth, halo, style),
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "argent-fill", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MetalFill, { tone, speed, engine, finish, effect, angle }) }),
+        border && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "argent-core", "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "argent-sheen", "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "argent-content argent-btn-label", children })
+      ]
+    }
+  );
+});
+
+// src/controls.tsx
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var MetalToggle = (0, import_react3.forwardRef)(function MetalToggle2({ tone = "silver", checked, defaultChecked = false, onCheckedChange, haptics = true, className, onClick, ...rest }, ref) {
+  const [internal, setInternal] = (0, import_react3.useState)(defaultChecked);
+  const isOn = checked ?? internal;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "switch",
+      "aria-checked": isOn,
+      "data-tone": tone,
+      "data-checked": isOn || void 0,
+      className: ["argent-toggle", className].filter(Boolean).join(" "),
+      onClick: (e) => {
+        if (haptics) vibrate(PRESS_PATTERN);
+        if (checked === void 0) setInternal(!isOn);
+        onCheckedChange?.(!isOn);
+        onClick?.(e);
+      },
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "argent-toggle-thumb", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetalFill, { tone, finish: "orb" }) })
+    }
+  );
+});
+var MetalProgress = (0, import_react3.forwardRef)(function MetalProgress2({ tone = "silver", value, height = 10, className, style, ...rest }, ref) {
+  const indeterminate = value === void 0;
+  const clamped = indeterminate ? 0 : Math.max(0, Math.min(100, value));
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      ref,
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": indeterminate ? void 0 : clamped,
+      "data-tone": tone,
+      className: ["argent-progress", indeterminate && "argent-progress--indeterminate", className].filter(Boolean).join(" "),
+      style: { height, ...style },
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "span",
+        {
+          className: "argent-progress-fill",
+          style: indeterminate ? void 0 : { width: `${clamped}%` },
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetalFill, { tone, finish: "bar" })
+        }
+      )
+    }
+  );
+});
+var MetalBadge = (0, import_react3.forwardRef)(function MetalBadge2({ className, radius = 999, borderWidth = 1, finish = "rim", ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Metal,
+    {
+      ref,
+      as: "span",
+      variant: "border",
+      radius,
+      borderWidth,
+      finish,
+      className: ["argent-badge", className].filter(Boolean).join(" "),
+      ...rest
+    }
+  );
+});
+
+// src/text.tsx
+var import_react4 = require("react");
+var import_shaders_react2 = require("@paper-design/shaders-react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var DEFAULT_STACK = "-apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif";
+function svgOpen(g) {
+  const style = g.fontCss ? `<style>${g.fontCss}</style>` : "";
+  return `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${g.w} ${g.h}' width='${g.w}' height='${g.h}'>${style}`;
+}
+function svgText(g, attrs) {
+  const safe = g.text.replace(/&/g, "&amp;").replace(/</g, "&lt;");
+  return `<text x='50%' y='${Math.round(g.fontSize * 1)}' font-size='${g.fontSize}' font-family="${g.fontFamily.replace(/"/g, "'")}" font-weight='${g.fontWeight}' text-anchor='middle' ${attrs}>${safe}</text>`;
+}
+function encode(svg) {
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}
+function fillSilhouette(g) {
+  return encode(`${svgOpen(g)}${svgText(g, "fill='#000'")}</svg>`);
+}
+function outlineSilhouette(g, ow) {
+  return encode(`${svgOpen(g)}${svgText(g, `fill='none' stroke='#000' stroke-width='${ow}' stroke-linejoin='round'`)}</svg>`);
+}
+function interior(g, fill, gradient) {
+  if (!gradient) return encode(`${svgOpen(g)}${svgText(g, `fill='${fill}'`)}</svg>`);
+  const defs = `<defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='${gradient[0]}'/><stop offset='1' stop-color='${gradient[1]}'/></linearGradient></defs>`;
+  return encode(`${svgOpen(g)}${defs}${svgText(g, "fill='url(#g)'")}</svg>`);
+}
+var LAYER = { position: "absolute", inset: 0, width: "100%", height: "100%" };
+function ShaderText({
+  text,
+  tone,
+  variant,
+  fill,
+  fillGradient,
+  outlineWidth,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  fontCss,
+  speed,
+  shimmer,
+  className,
+  style,
+  ...rest
+}) {
+  const ref = (0, import_react4.useRef)(null);
+  const mounted = useMounted();
+  const inView = useInView(ref);
+  const reduced = useReducedMotion();
+  const turn = useStaggeredMount();
+  const [geom, setGeom] = (0, import_react4.useState)(null);
+  const outlined = variant === "outline";
+  const ow = outlineWidth ?? Math.max(2, Math.round(fontSize * 0.05));
+  (0, import_react4.useEffect)(() => {
+    let alive = true;
+    const fontSpec = `${fontWeight} ${fontSize}px ${fontFamily}`;
+    const measure = () => {
+      if (!alive) return;
+      const ctx = document.createElement("canvas").getContext("2d");
+      if (!ctx) return;
+      ctx.font = fontSpec;
+      const m = ctx.measureText(text);
+      setGeom({
+        text,
+        w: Math.ceil(m.width + fontSize * 0.24 + ow * 2),
+        h: Math.ceil(fontSize * 1.3 + ow),
+        fontSize,
+        fontWeight,
+        fontFamily,
+        fontCss
+      });
+    };
+    if (document.fonts?.load) document.fonts.load(fontSpec, text).then(measure, measure);
+    else measure();
+    return () => {
+      alive = false;
+    };
+  }, [text, fontSize, fontWeight, fontFamily, fontCss, ow]);
+  const ready = mounted && inView && turn && geom;
+  const { colorBack: _drop, ...params } = TONE_PARAMS[tone];
+  const shaderParams = outlined ? { ...params, contour: 0.2, distortion: Math.min(params.distortion ?? 0.1, 0.08) } : params;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "span",
+    {
+      ref,
+      role: "img",
+      "aria-label": text,
+      className,
+      style: {
+        position: "relative",
+        display: "inline-block",
+        verticalAlign: "middle",
+        width: geom?.w,
+        height: geom?.h,
+        ...style
+      },
+      ...rest,
+      children: ready ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        outlined && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { src: interior(geom, fill, fillGradient), alt: "", "aria-hidden": "true", style: LAYER }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_shaders_react2.LiquidMetal,
+          {
+            image: outlined ? outlineSilhouette(geom, ow) : fillSilhouette(geom),
+            suspendWhenProcessingImage: false,
+            colorBack: "#00000000",
+            fit: "contain",
+            scale: 0.97,
+            speed: reduced ? 0 : speed,
+            ...shaderParams,
+            style: LAYER
+          },
+          `${geom.text}|${geom.fontFamily}|${geom.w}|${outlined ? "o" : "f"}`
+        )
+      ] }) : (
+        // CSS chrome stands in until the shader is ready (and during SSR)
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: ["argent-text", shimmer && !outlined && "argent-text--shimmer"].filter(Boolean).join(" "),
+            "data-tone": tone,
+            style: {
+              fontSize,
+              fontWeight,
+              fontFamily,
+              lineHeight: 1.3,
+              whiteSpace: "nowrap",
+              ...outlined && {
+                background: "none",
+                WebkitTextFillColor: fillGradient?.[0] ?? fill,
+                color: fillGradient?.[0] ?? fill,
+                WebkitTextStroke: "1px rgba(220, 224, 230, 0.55)"
+              }
+            },
+            children: text
+          }
+        )
+      )
+    }
+  );
+}
+var MetalText = (0, import_react4.forwardRef)(function MetalText2({
+  as,
+  tone = "silver",
+  shimmer = true,
+  shader = false,
+  variant = "fill",
+  fill = "#101114",
+  fillGradient,
+  outlineWidth,
+  fontSize = 64,
+  fontWeight = 800,
+  fontFamily = DEFAULT_STACK,
+  fontCss,
+  speed = 1,
+  className,
+  children,
+  ...rest
+}, ref) {
+  if (shader) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      ShaderText,
+      {
+        text: String(children),
+        tone,
+        variant,
+        fill,
+        fillGradient,
+        outlineWidth,
+        fontSize,
+        fontWeight,
+        fontFamily,
+        fontCss,
+        speed,
+        shimmer,
+        className,
+        ...rest
+      }
+    );
+  }
+  const Tag = as ?? "span";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    Tag,
+    {
+      ref,
+      className: ["argent-text", shimmer && "argent-text--shimmer", className].filter(Boolean).join(" "),
+      "data-tone": tone,
+      ...rest,
+      children
+    }
+  );
+});
+
+// src/logo.tsx
+var import_react5 = require("react");
+var import_shaders_react3 = require("@paper-design/shaders-react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function MetalLogo({ src, tone = "silver", size = 160, width, height, speed = 1, style, ...rest }) {
+  const ref = (0, import_react5.useRef)(null);
+  const mounted = useMounted();
+  const inView = useInView(ref);
+  const reduced = useReducedMotion();
+  const turn = useStaggeredMount();
+  const w = width ?? size;
+  const h = height ?? size;
+  const { colorBack: _drop, ...params } = TONE_PARAMS[tone];
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref, style: { position: "relative", width: w, height: h, ...style }, ...rest, children: mounted && inView && turn && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_shaders_react3.LiquidMetal,
+    {
+      image: src,
+      suspendWhenProcessingImage: false,
+      colorBack: "#00000000",
+      fit: "contain",
+      scale: 0.92,
+      speed: reduced ? 0 : speed,
+      ...params,
+      style: { position: "absolute", inset: 0, width: "100%", height: "100%" }
+    },
+    src
+  ) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EFFECTS,
+  FINISHES,
+  Metal,
+  MetalBadge,
+  MetalButton,
+  MetalCard,
+  MetalFill,
+  MetalLogo,
+  MetalProgress,
+  MetalText,
+  MetalToggle,
+  NATIVE_TONES,
+  TONE_PARAMS,
+  mountMetal,
+  setHaptics,
+  useInView,
+  useMounted,
+  useReducedMotion
+});
+//# sourceMappingURL=index.cjs.map