Botón claymorfismo

"use client";

import type { CSSProperties, ReactNode } from "react";

/** Botón claymorfismo: masa blanda, hinchada, que se aplasta al presionar. React + TypeScript, sin dependencias. Personaliza con variables --gcarc-*. */
export type BotonArcillaTono = "melocoton" | "menta" | "lila" | "cielo" | "limon";

export type BotonArcillaProps = {
  children?: ReactNode;
  tone?: BotonArcillaTono;
  /** Color propio; sustituye al tono. Las sombras se derivan de él. */
  color?: string;
  type?: "button" | "submit";
  disabled?: boolean;
  onClick?: () => void;
  className?: string;
  style?: CSSProperties;
};

const TONES: Record<BotonArcillaTono, { c: string; ink: string }> = {
  melocoton: { c: "#ffb08a", ink: "#5a2e1a" },
  menta: { c: "#8fe3c0", ink: "#12483a" },
  lila: { c: "#c3b1ff", ink: "#32246b" },
  cielo: { c: "#8cd0ff", ink: "#0f3e63" },
  limon: { c: "#f6e27a", ink: "#524506" },
};

const CSS = `
.gcarc-root { box-sizing: border-box; display: inline-block; min-width: 0; max-width: 100%; font: 400 15px/1.4 ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, sans-serif; }
.gcarc-root *, .gcarc-root *::before, .gcarc-root *::after { box-sizing: border-box; }
.gcarc-root button { font: inherit; -webkit-tap-highlight-color: transparent; }
.gcarc-root :focus-visible { outline: 3px solid var(--gcarc-focus, #3b2ea8); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .gcarc-root *, .gcarc-root *::before, .gcarc-root *::after { animation: none !important; transition-duration: .01ms !important; } }
.gcarc-btn { --gcarc-c: var(--gcarc-bg, #ffb08a); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 32px; border: 0; border-radius: 999px; background: var(--gcarc-c); color: var(--gcarc-ink, #5a2e1a); font-size: 17px; font-weight: 800; letter-spacing: .01em; cursor: pointer;
  box-shadow: inset -7px -9px 14px color-mix(in srgb, var(--gcarc-c) 62%, #3a1100), inset 7px 9px 14px color-mix(in srgb, var(--gcarc-c) 45%, #fff), 0 14px 22px -6px color-mix(in srgb, var(--gcarc-c) 70%, #000 8%), 0 4px 6px rgba(60, 30, 10, .12);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease, filter .2s; }
.gcarc-btn::before { content: ""; position: absolute; top: 9px; left: 22px; width: 34%; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .62); filter: blur(2.5px); pointer-events: none; transition: opacity .2s; }
.gcarc-btn:hover:not(:disabled) { transform: translateY(-3px) scale(1.04); }
.gcarc-btn:active:not(:disabled) { transform: translateY(2px) scale(.95, .9); transition-duration: .12s;
  box-shadow: inset 7px 9px 14px color-mix(in srgb, var(--gcarc-c) 62%, #3a1100), inset -7px -9px 14px color-mix(in srgb, var(--gcarc-c) 45%, #fff), 0 4px 8px -2px color-mix(in srgb, var(--gcarc-c) 70%, #000 8%); }
.gcarc-btn:active:not(:disabled)::before { opacity: 0; }
.gcarc-btn:disabled { filter: saturate(.3) opacity(.7); cursor: not-allowed; }`;

export function BotonArcilla({ children = "Empezar", tone = "melocoton", color, type = "button", disabled, onClick, className = "", style }: BotonArcillaProps) {
  const t = TONES[tone];
  const vars = { "--gcarc-bg": color ?? t.c, "--gcarc-ink": color ? "#1d1d28" : t.ink } as CSSProperties;
  return (
    <span className={`gcarc-root ${className}`} style={{ ...vars, ...style }}>
      <style>{CSS}</style>
      <button className="gcarc-btn" type={type} disabled={disabled} onClick={onClick}>
        {children}
      </button>
    </span>
  );
}

npx shadcn@latest add https://www.gassierconsulting.com/r/boton-arcilla

import { BotonArcilla } from "./boton-arcilla";

export default function Ejemplo() {
  return <BotonArcilla tone="melocoton" color="Ejemplo">Contenido</BotonArcilla>;
}