Interruptor claymorfismo

"use client";

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

/** Interruptor claymorfismo: pastilla de plastilina que se estira al deslizar y cambia de color. React + TypeScript, sin dependencias. Personaliza con --gcicl-*. */
export type InterruptorArcillaProps = {
  checked?: boolean;
  defaultChecked?: boolean;
  onChange?: (checked: boolean) => void;
  label?: string;
  disabled?: boolean;
  className?: string;
  style?: CSSProperties;
};

const CSS = `
.gcicl-root { box-sizing: border-box; display: inline-flex; align-items: center; gap: 16px; max-width: 100%; font: 800 16px/1.2 ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, sans-serif; color: var(--gcicl-ink, #4a3566); }
.gcicl-root *, .gcicl-root *::before, .gcicl-root *::after { box-sizing: border-box; }
.gcicl-root button { font: inherit; -webkit-tap-highlight-color: transparent; }
.gcicl-root :focus-visible { outline: 3px solid #4a3566; outline-offset: 5px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .gcicl-root *, .gcicl-root *::before, .gcicl-root *::after { animation: none !important; transition-duration: .01ms !important; } }
.gcicl-sw { position: relative; width: 84px; height: 46px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: var(--gcicl-off, #e4d9f5); box-shadow: inset 5px 6px 10px rgba(110, 80, 160, .3), inset -5px -6px 10px rgba(255, 255, 255, .8), 0 8px 14px -6px rgba(110, 80, 160, .35); transition: background .35s; }
.gcicl-sw[aria-checked="true"] { background: var(--gcicl-on, #7fe0b4); box-shadow: inset 5px 6px 10px rgba(10, 100, 60, .3), inset -5px -6px 10px rgba(255, 255, 255, .7), 0 8px 14px -6px rgba(20, 140, 90, .45); }
.gcicl-ball { position: absolute; top: 5px; left: 5px; width: 36px; height: 36px; border-radius: 999px; background: #fff7ee; box-shadow: inset -4px -5px 8px rgba(190, 140, 90, .4), inset 4px 5px 8px rgba(255, 255, 255, .9), 3px 6px 10px rgba(60, 30, 80, .3); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), width .25s; }
.gcicl-sw[aria-checked="true"] .gcicl-ball { transform: translateX(38px); }
.gcicl-sw:active:not(:disabled) .gcicl-ball { width: 46px; }
.gcicl-sw[aria-checked="true"]:active:not(:disabled) .gcicl-ball { transform: translateX(28px); }
.gcicl-sw:disabled { opacity: .5; cursor: not-allowed; }`;

export function InterruptorArcilla({ checked, defaultChecked = false, onChange, label = "Notificaciones", disabled, className = "", style }: InterruptorArcillaProps) {
  const [inner, setInner] = useState(defaultChecked);
  const on = checked ?? inner;
  return (
    <span className={`gcicl-root ${className}`} style={style}>
      <style>{CSS}</style>
      <button
        className="gcicl-sw"
        type="button"
        role="switch"
        aria-checked={on}
        aria-label={label}
        disabled={disabled}
        onClick={() => {
          setInner(!on);
          onChange?.(!on);
        }}
      >
        <span className="gcicl-ball" />
      </button>
      <span aria-hidden="true">{label}</span>
    </span>
  );
}

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

import { InterruptorArcilla } from "./interruptor-arcilla";

export default function Ejemplo() {
  return <InterruptorArcilla label="Ejemplo" checked />;
}