Botón de aluminio cepillado

"use client";

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

/** Botón skeuomórfico de aluminio cepillado con texto grabado, tornillos y luz piloto. React + TypeScript, sin dependencias. */
export type BotonMetalProps = {
  children?: ReactNode;
  /** Muestra el LED piloto encendido, para estados activos. */
  active?: boolean;
  type?: "button" | "submit";
  disabled?: boolean;
  onClick?: () => void;
  className?: string;
  style?: CSSProperties;
};

const CSS = `
.gcmet-root { box-sizing: border-box; display: inline-block; max-width: 100%; font: 700 15px/1 "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.gcmet-root *, .gcmet-root *::before, .gcmet-root *::after { box-sizing: border-box; }
.gcmet-root button { font: inherit; letter-spacing: inherit; text-transform: inherit; -webkit-tap-highlight-color: transparent; }
.gcmet-root :focus-visible { outline: 3px solid #2f7bff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .gcmet-root *, .gcmet-root *::before, .gcmet-root *::after { animation: none !important; transition-duration: .01ms !important; } }
.gcmet-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 60px; padding: 0 44px; border: 1px solid #7d8088; border-radius: 12px; cursor: pointer; color: #52555d;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .95), 0 -1px 0 rgba(0, 0, 0, .18);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .0) 0 1px, rgba(255, 255, 255, .22) 1px 2px, rgba(0, 0, 0, .035) 2px 3px), linear-gradient(180deg, #f4f5f7 0%, #d9dbe0 48%, #c2c5cc 52%, #dfe1e6 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0, 0, 0, .14), 0 1px 0 rgba(255, 255, 255, .6), 0 3px 0 #9a9da6, 0 8px 14px rgba(0, 0, 0, .28); transition: transform .1s, box-shadow .1s; }
.gcmet-btn::before, .gcmet-btn::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #9a9da6 70%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
.gcmet-btn::before { left: 14px; }
.gcmet-btn::after { right: 14px; }
.gcmet-btn:hover:not(:disabled) { filter: brightness(1.04); }
.gcmet-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 3px 6px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 #9a9da6, 0 3px 6px rgba(0, 0, 0, .25); }
.gcmet-btn:disabled { opacity: .55; cursor: not-allowed; }
.gcmet-led { width: 10px; height: 10px; border-radius: 50%; background: #5a2a2a; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .8); transition: background .2s, box-shadow .2s; }
.gcmet-btn[data-active="true"] .gcmet-led { background: radial-gradient(circle at 35% 30%, #d8ffd0, #35d24a 60%); box-shadow: 0 0 10px 2px rgba(53, 210, 74, .7), 0 1px 0 rgba(255, 255, 255, .8); }`;

export function BotonMetal({ children = "Encender", active = false, type = "button", disabled, onClick, className = "", style }: BotonMetalProps) {
  return (
    <span className={`gcmet-root ${className}`} style={style}>
      <style>{CSS}</style>
      <button className="gcmet-btn" type={type} disabled={disabled} onClick={onClick} data-active={active ? "true" : undefined} aria-pressed={active}>
        <span className="gcmet-led" aria-hidden="true" />
        {children}
      </button>
    </span>
  );
}

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

import { BotonMetal } from "./boton-metal";

export default function Ejemplo() {
  return <BotonMetal type="button" active>Contenido</BotonMetal>;
}