argentui 0.3.0 → 0.4.1

package/dist/index.d.cts

@@ -49,7 +49,7 @@ declare function mountMetal(canvas: HTMLCanvasElement, params: NativeMetalParams
  * `@paper-design/shaders-react` is a peer dependency — install it alongside
  * `argentui`. It is licensed under PolyForm Shield by Paper.
  */
-type MetalTone = "silver" | "gold" | "gunmetal" | "obsidian";
+type MetalTone = "silver" | "gold" | "gunmetal" | "obsidian" | "cobalt" | "crimson" | "amethyst" | "emerald";
 type Tuned = Pick<LiquidMetalParams, "colorBack" | "colorTint" | "repetition" | "softness" | "shiftRed" | "shiftBlue" | "distortion" | "contour" | "angle">;
 declare const TONE_PARAMS: Record<MetalTone, Tuned>;
 /** True once mounted on the client — the WebGL canvas can't render during SSR. */
@@ -191,6 +191,8 @@ interface MetalButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
     effect?: MetalEffect;
     angle?: number;
     halo?: boolean | number;
+    /** An icon (any SVG element) rendered before the label, in the label colour. */
+    icon?: React.ReactNode;
 }
 /** A liquid-metal button — readable at rest, molten on hover, with a stamped press. */
 declare const MetalButton: react.ForwardRefExoticComponent<MetalButtonProps & react.RefAttributes<HTMLButtonElement>>;
@@ -232,9 +234,10 @@ interface MetalTextProps extends React.HTMLAttributes<HTMLElement> {
     shimmer?: boolean;
     /**
      * Pour the real liquid-metal shader into the glyphs — flowing bands, liquid
-     * edges, chromatic fringe. Costs a WebGL canvas; the CSS gradient renders as
-     * a placeholder until the shader is ready, and stands in wherever WebGL
-     * isn't. Children must be a plain string in this mode.
+     * edges, chromatic fringe. On by default (one WebGL canvas; the CSS chrome
+     * gradient renders as a placeholder until the shader is ready, and stands in
+     * wherever WebGL isn't). Set `shader={false}` for the pure-CSS gradient.
+     * Shader mode requires a plain string child; element children fall back to CSS.
      */
     shader?: boolean;
     /**
@@ -270,11 +273,11 @@ interface MetalTextProps extends React.HTMLAttributes<HTMLElement> {
     speed?: number;
 }
 /**
- * Metal type. By default a chrome gradient clipped to the glyphs with a flowing
- * shimmer — pure CSS, use it freely at any scale. Pass `shader` to pour the
- * real liquid-metal shader into the letterforms — `variant="fill"` floods the
- * glyphs; `variant="outline"` runs the metal around their edges over a dark or
- * gradient interior.
+ * Metal type. By default the real liquid-metal shader is poured into the glyphs
+ * — `variant="fill"` floods them, `variant="outline"` runs the metal around
+ * their edges over a dark or gradient interior. The CSS chrome gradient stands
+ * in until the shader loads. Set `shader={false}` for the pure-CSS gradient
+ * (free at any scale); element children also fall back to it.
  */
 declare const MetalText: react.ForwardRefExoticComponent<MetalTextProps & react.RefAttributes<HTMLElement>>;
 
@@ -296,6 +299,27 @@ interface MetalLogoProps extends React.HTMLAttributes<HTMLDivElement> {
  */
 declare function MetalLogo({ src, tone, size, width, height, speed, style, ...rest }: MetalLogoProps): react.JSX.Element;
 
+/**
+ * Liquid metal poured into an icon. Pass any SVG icon — a React element from
+ * lucide-react / heroicons, a raw SVG string, or a URL — and it renders filled
+ * with the liquid-metal shader (one WebGL canvas, gated to the viewport like
+ * every metal surface). React icons are serialized from the DOM to a silhouette.
+ */
+interface MetalIconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** A React SVG element, e.g. `<Beaker />` (lucide) or `<BeakerIcon />` (heroicons). */
+    icon?: React.ReactNode;
+    /** Raw SVG markup (alternative to `icon`). */
+    svg?: string;
+    /** SVG URL or data URI (alternative to `icon`). */
+    src?: string;
+    tone?: MetalTone;
+    /** Rendered size in px (square). Defaults to `32`. */
+    size?: number;
+    /** Shader animation speed. */
+    speed?: number;
+}
+declare function MetalIcon({ icon, svg, src, tone, size, speed, className, style, ...rest }: MetalIconProps): react.JSX.Element;
+
 /**
  * Tiny haptics for metal presses — `navigator.vibrate` where available
  * (Android Chrome; iOS Safari ignores it). On by default, like Glacé.
@@ -303,4 +327,4 @@ declare function MetalLogo({ src, tone, size, width, height, speed, style, ...re
 /** Globally enable/disable Argent haptics. */
 declare function setHaptics(on: boolean): void;
 
-export { EFFECTS, FINISHES, Metal, MetalBadge, type MetalBadgeProps, MetalButton, type MetalButtonProps, MetalCard, type MetalCardProps, type MetalEffect, type MetalEngine, MetalFill, type MetalFillProps, type MetalFinish, type MetalFrame, MetalLogo, type MetalLogoProps, type MetalMount, MetalProgress, type MetalProgressProps, type MetalProps, MetalText, type MetalTextProps, type MetalTextVariant, MetalToggle, type MetalToggleProps, type MetalTone, type MetalVariant, NATIVE_TONES, type NativeMetalParams, TONE_PARAMS, mountMetal, setHaptics, useInView, useMounted, useReducedMotion };
+export { EFFECTS, FINISHES, Metal, MetalBadge, type MetalBadgeProps, MetalButton, type MetalButtonProps, MetalCard, type MetalCardProps, type MetalEffect, type MetalEngine, MetalFill, type MetalFillProps, type MetalFinish, type MetalFrame, MetalIcon, type MetalIconProps, MetalLogo, type MetalLogoProps, type MetalMount, MetalProgress, type MetalProgressProps, type MetalProps, MetalText, type MetalTextProps, type MetalTextVariant, MetalToggle, type MetalToggleProps, type MetalTone, type MetalVariant, NATIVE_TONES, type NativeMetalParams, TONE_PARAMS, mountMetal, setHaptics, useInView, useMounted, useReducedMotion };

package/dist/index.d.ts

@@ -49,7 +49,7 @@ declare function mountMetal(canvas: HTMLCanvasElement, params: NativeMetalParams
  * `@paper-design/shaders-react` is a peer dependency — install it alongside
  * `argentui`. It is licensed under PolyForm Shield by Paper.
  */
-type MetalTone = "silver" | "gold" | "gunmetal" | "obsidian";
+type MetalTone = "silver" | "gold" | "gunmetal" | "obsidian" | "cobalt" | "crimson" | "amethyst" | "emerald";
 type Tuned = Pick<LiquidMetalParams, "colorBack" | "colorTint" | "repetition" | "softness" | "shiftRed" | "shiftBlue" | "distortion" | "contour" | "angle">;
 declare const TONE_PARAMS: Record<MetalTone, Tuned>;
 /** True once mounted on the client — the WebGL canvas can't render during SSR. */
@@ -191,6 +191,8 @@ interface MetalButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
     effect?: MetalEffect;
     angle?: number;
     halo?: boolean | number;
+    /** An icon (any SVG element) rendered before the label, in the label colour. */
+    icon?: React.ReactNode;
 }
 /** A liquid-metal button — readable at rest, molten on hover, with a stamped press. */
 declare const MetalButton: react.ForwardRefExoticComponent<MetalButtonProps & react.RefAttributes<HTMLButtonElement>>;
@@ -232,9 +234,10 @@ interface MetalTextProps extends React.HTMLAttributes<HTMLElement> {
     shimmer?: boolean;
     /**
      * Pour the real liquid-metal shader into the glyphs — flowing bands, liquid
-     * edges, chromatic fringe. Costs a WebGL canvas; the CSS gradient renders as
-     * a placeholder until the shader is ready, and stands in wherever WebGL
-     * isn't. Children must be a plain string in this mode.
+     * edges, chromatic fringe. On by default (one WebGL canvas; the CSS chrome
+     * gradient renders as a placeholder until the shader is ready, and stands in
+     * wherever WebGL isn't). Set `shader={false}` for the pure-CSS gradient.
+     * Shader mode requires a plain string child; element children fall back to CSS.
      */
     shader?: boolean;
     /**
@@ -270,11 +273,11 @@ interface MetalTextProps extends React.HTMLAttributes<HTMLElement> {
     speed?: number;
 }
 /**
- * Metal type. By default a chrome gradient clipped to the glyphs with a flowing
- * shimmer — pure CSS, use it freely at any scale. Pass `shader` to pour the
- * real liquid-metal shader into the letterforms — `variant="fill"` floods the
- * glyphs; `variant="outline"` runs the metal around their edges over a dark or
- * gradient interior.
+ * Metal type. By default the real liquid-metal shader is poured into the glyphs
+ * — `variant="fill"` floods them, `variant="outline"` runs the metal around
+ * their edges over a dark or gradient interior. The CSS chrome gradient stands
+ * in until the shader loads. Set `shader={false}` for the pure-CSS gradient
+ * (free at any scale); element children also fall back to it.
  */
 declare const MetalText: react.ForwardRefExoticComponent<MetalTextProps & react.RefAttributes<HTMLElement>>;
 
@@ -296,6 +299,27 @@ interface MetalLogoProps extends React.HTMLAttributes<HTMLDivElement> {
  */
 declare function MetalLogo({ src, tone, size, width, height, speed, style, ...rest }: MetalLogoProps): react.JSX.Element;
 
+/**
+ * Liquid metal poured into an icon. Pass any SVG icon — a React element from
+ * lucide-react / heroicons, a raw SVG string, or a URL — and it renders filled
+ * with the liquid-metal shader (one WebGL canvas, gated to the viewport like
+ * every metal surface). React icons are serialized from the DOM to a silhouette.
+ */
+interface MetalIconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** A React SVG element, e.g. `<Beaker />` (lucide) or `<BeakerIcon />` (heroicons). */
+    icon?: React.ReactNode;
+    /** Raw SVG markup (alternative to `icon`). */
+    svg?: string;
+    /** SVG URL or data URI (alternative to `icon`). */
+    src?: string;
+    tone?: MetalTone;
+    /** Rendered size in px (square). Defaults to `32`. */
+    size?: number;
+    /** Shader animation speed. */
+    speed?: number;
+}
+declare function MetalIcon({ icon, svg, src, tone, size, speed, className, style, ...rest }: MetalIconProps): react.JSX.Element;
+
 /**
  * Tiny haptics for metal presses — `navigator.vibrate` where available
  * (Android Chrome; iOS Safari ignores it). On by default, like Glacé.
@@ -303,4 +327,4 @@ declare function MetalLogo({ src, tone, size, width, height, speed, style, ...re
 /** Globally enable/disable Argent haptics. */
 declare function setHaptics(on: boolean): void;
 
-export { EFFECTS, FINISHES, Metal, MetalBadge, type MetalBadgeProps, MetalButton, type MetalButtonProps, MetalCard, type MetalCardProps, type MetalEffect, type MetalEngine, MetalFill, type MetalFillProps, type MetalFinish, type MetalFrame, MetalLogo, type MetalLogoProps, type MetalMount, MetalProgress, type MetalProgressProps, type MetalProps, MetalText, type MetalTextProps, type MetalTextVariant, MetalToggle, type MetalToggleProps, type MetalTone, type MetalVariant, NATIVE_TONES, type NativeMetalParams, TONE_PARAMS, mountMetal, setHaptics, useInView, useMounted, useReducedMotion };
+export { EFFECTS, FINISHES, Metal, MetalBadge, type MetalBadgeProps, MetalButton, type MetalButtonProps, MetalCard, type MetalCardProps, type MetalEffect, type MetalEngine, MetalFill, type MetalFillProps, type MetalFinish, type MetalFrame, MetalIcon, type MetalIconProps, MetalLogo, type MetalLogoProps, type MetalMount, MetalProgress, type MetalProgressProps, type MetalProps, MetalText, type MetalTextProps, type MetalTextVariant, MetalToggle, type MetalToggleProps, type MetalTone, type MetalVariant, NATIVE_TONES, type NativeMetalParams, TONE_PARAMS, mountMetal, setHaptics, useInView, useMounted, useReducedMotion };

package/dist/index.js

@@ -106,7 +106,11 @@ 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 }
+  obsidian: { light: "#787c88", dark: "#000000", repetition: 1.4, angle: 92, softness: 0.42, dispersion: 0.02, distortion: 0.28 },
+  cobalt: { light: "#dbe7ff", dark: "#16244e", repetition: 1.8, angle: 70, softness: 0.34, dispersion: 0.03, distortion: 0.36 },
+  crimson: { light: "#ffd6da", dark: "#48101a", repetition: 1.8, angle: 68, softness: 0.34, dispersion: 0.03, distortion: 0.36 },
+  amethyst: { light: "#e8d6ff", dark: "#2c1854", repetition: 1.8, angle: 70, softness: 0.34, dispersion: 0.03, distortion: 0.36 },
+  emerald: { light: "#caffe0", dark: "#0e3a28", repetition: 1.7, angle: 74, softness: 0.34, dispersion: 0.028, distortion: 0.34 }
 };
 function compile(gl, type, src) {
   const sh = gl.createShader(type);
@@ -232,6 +236,50 @@ var TONE_PARAMS = {
     distortion: 0.07,
     contour: 0.32,
     angle: 92
+  },
+  cobalt: {
+    colorBack: "#27407e",
+    colorTint: "#cfe0ff",
+    repetition: 3,
+    softness: 0.2,
+    shiftRed: 0.22,
+    shiftBlue: 0.34,
+    distortion: 0.13,
+    contour: 0.5,
+    angle: 70
+  },
+  crimson: {
+    colorBack: "#7a1820",
+    colorTint: "#ffd0d4",
+    repetition: 3,
+    softness: 0.2,
+    shiftRed: 0.34,
+    shiftBlue: 0.16,
+    distortion: 0.13,
+    contour: 0.5,
+    angle: 68
+  },
+  amethyst: {
+    colorBack: "#4a2a86",
+    colorTint: "#e6d0ff",
+    repetition: 3,
+    softness: 0.2,
+    shiftRed: 0.3,
+    shiftBlue: 0.34,
+    distortion: 0.13,
+    contour: 0.5,
+    angle: 70
+  },
+  emerald: {
+    colorBack: "#155e42",
+    colorTint: "#c8ffdf",
+    repetition: 3,
+    softness: 0.2,
+    shiftRed: 0.24,
+    shiftBlue: 0.28,
+    distortion: 0.12,
+    contour: 0.5,
+    angle: 74
   }
 };
 var imageMountQueue = Promise.resolve();
@@ -455,7 +503,7 @@ var MetalCard = forwardRef(function MetalCard2({ className, radius = 18, ...rest
   return /* @__PURE__ */ jsx2(Metal, { ref, radius, className: cx("argent-card", className), ...rest });
 });
 var SIZE_RADIUS = { sm: 11, md: 13, lg: 15 };
-var MetalButton = 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) {
+var MetalButton = 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, icon, type = "button", className, children, style, onPointerDown, ...rest }, ref) {
   const border = variant === "border";
   return /* @__PURE__ */ jsxs(
     "button",
@@ -474,7 +522,10 @@ var MetalButton = forwardRef(function MetalButton2({ tone = "silver", size = "md
         /* @__PURE__ */ jsx2("span", { className: "argent-fill", "aria-hidden": "true", children: /* @__PURE__ */ jsx2(MetalFill, { tone, speed, engine, finish, effect, angle }) }),
         border && /* @__PURE__ */ jsx2("span", { className: "argent-core", "aria-hidden": "true" }),
         /* @__PURE__ */ jsx2("span", { className: "argent-sheen", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx2("span", { className: "argent-content argent-btn-label", children })
+        /* @__PURE__ */ jsxs("span", { className: "argent-content argent-btn-label", children: [
+          icon && /* @__PURE__ */ jsx2("span", { className: "argent-btn-icon", "aria-hidden": "true", children: icon }),
+          children
+        ] })
       ]
     }
   );
@@ -695,7 +746,7 @@ var MetalText = forwardRef3(function MetalText2({
   as,
   tone = "silver",
   shimmer = true,
-  shader = false,
+  shader = true,
   variant = "fill",
   fill = "#101114",
   fillGradient,
@@ -709,7 +760,7 @@ var MetalText = forwardRef3(function MetalText2({
   children,
   ...rest
 }, ref) {
-  if (shader) {
+  if (shader && typeof children === "string") {
     return /* @__PURE__ */ jsx4(
       ShaderText,
       {
@@ -771,6 +822,42 @@ function MetalLogo({ src, tone = "silver", size = 160, width, height, speed = 1,
     src
   ) });
 }
+
+// src/icon.tsx
+import { useEffect as useEffect3, useRef as useRef4, useState as useState4 } from "react";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function svgToUri(markup) {
+  return `data:image/svg+xml,${encodeURIComponent(markup)}`;
+}
+function serialize(svg) {
+  const clone = svg.cloneNode(true);
+  if (!clone.getAttribute("xmlns")) clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  return svgToUri(new XMLSerializer().serializeToString(clone));
+}
+function useIconUri({ svg, src }) {
+  const ref = useRef4(null);
+  const direct = src ?? (svg ? svgToUri(svg) : null);
+  const [uri, setUri] = useState4(direct);
+  useEffect3(() => {
+    if (direct) {
+      setUri(direct);
+      return;
+    }
+    const node = ref.current?.querySelector("svg");
+    if (!node) return;
+    const next = serialize(node);
+    setUri((prev) => prev === next ? prev : next);
+  });
+  return { ref, uri, fromNode: !direct };
+}
+function MetalIcon({ icon, svg, src, tone = "silver", size = 32, speed = 1, className, style, ...rest }) {
+  const { ref, uri, fromNode } = useIconUri({ svg, src });
+  const cls = ["argent-icon-wrap", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs3("span", { className: cls, style: { display: "inline-flex", width: size, height: size, ...style }, ...rest, children: [
+    fromNode && /* @__PURE__ */ jsx6("span", { ref, "aria-hidden": "true", style: { position: "absolute", width: 0, height: 0, overflow: "hidden", color: "#000" }, children: icon }),
+    uri && /* @__PURE__ */ jsx6(MetalLogo, { src: uri, tone, size, speed })
+  ] });
+}
 export {
   EFFECTS,
   FINISHES,
@@ -779,6 +866,7 @@ export {
   MetalButton,
   MetalCard,
   MetalFill,
+  MetalIcon,
   MetalLogo,
   MetalProgress,
   MetalText,