Simple Theme Toggle

1import { type ButtonHTMLAttributes, type CSSProperties, useId } from "react";
2 
3export interface SimpleProps extends Omit<
4  ButtonHTMLAttributes<HTMLButtonElement>,
5  "children"
6> {
7  duration?: number;
8  [key: `data-${string}`]: string | number | boolean | null | undefined;
9}
10 
11export function Simple({
12  duration = 500,
13  className,
14  type = "button",
15  title = "Toggle theme",
16  "aria-label": ariaLabel = "Toggle theme",
17  ...props
18}: SimpleProps) {
19  const toggleId = useId();
20 
21  const clipMainId = `toggles.dev-simple-main-${toggleId}`;
22 
23  return (
24    <button
25      type={type}
26      title={title}
27      aria-label={ariaLabel}
28      className={className}
29      {...props}
30    >
31      <svg
32        width="1em"
33        height="1em"
34        viewBox="0 0 32 32"
35        aria-hidden="true"
36        fill={"currentColor"}
37        style={
38          { "--toggles-simple--duration": `${duration}ms` } as CSSProperties
39        }
40      >
41        <defs>
42          <clipPath id={clipMainId}>
43            <path
44              d={"M0-5h55v37h-55zm32 12a1 1 0 0025 0 1 1 0 00-25 0"}
45              className="transition-[d,translate] duration-(--toggles-simple--duration) [transition-timing-function:cubic-bezier(0,0,0.15,1.25)] dark:[d:path('M-18-1h55v37h-55zm32_12a1_1_0_0025_0_1_1_0_00-25_0')] dark:not-supports-[d:path('M0_0')]:-translate-x-[19px] dark:not-supports-[d:path('M0_0')]:translate-y-[5px]"
46            />
47          </clipPath>
48        </defs>
49        <g clipPath={`url(#${clipMainId})`}>
50          <circle cx={16} cy={16} r={15} />
51        </g>
52      </svg>
53    </button>
54  );
55}