Eclipse Theme Toggle

1import { type ButtonHTMLAttributes, type CSSProperties, useId } from "react";
2 
3export interface EclipseProps extends Omit<
4  ButtonHTMLAttributes<HTMLButtonElement>,
5  "children"
6> {
7  duration?: number;
8  [key: `data-${string}`]: string | number | boolean | null | undefined;
9}
10 
11export function Eclipse({
12  duration = 500,
13  className,
14  type = "button",
15  title = "Toggle theme",
16  "aria-label": ariaLabel = "Toggle theme",
17  ...props
18}: EclipseProps) {
19  const toggleId = useId();
20 
21  const clipMainId = `toggles.dev-eclipse-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-eclipse--duration": `${duration}ms` } as CSSProperties
39        }
40      >
41        <defs>
42          <clipPath id={clipMainId}>
43            <path
44              d={"M0 0h64v32h-64zm38 16a1 1 0 0020 0 1 1 0 00-20 0"}
45              className="origin-center transition-[d,translate] [transition-duration:var(--toggles-eclipse--duration)] [transition-timing-function:cubic-bezier(0,0,0.05,1.15)] [transition-delay:0s] dark:[d:path('M-16_-16h64v64h-64zm22_32a1_1_0_0020_0_1_1_0_00-20_0')] dark:not-supports-[d:path('M0_0')]:-translate-x-[32px] dark:[transition-duration:calc(var(--toggles-eclipse--duration)_*_0.8)] dark:[transition-delay:calc(var(--toggles-eclipse--duration)_*_0.2)]"
46            />
47          </clipPath>
48        </defs>
49        <g clipPath={`url(#${clipMainId})`}>
50          <circle
51            cx={16}
52            cy={16}
53            r={16}
54            className="[transform-origin:center] [transition-property:transform] [transition-duration:var(--toggles-eclipse--duration)] [transition-timing-function:cubic-bezier(0,0,0.05,1.15)]"
55          />
56        </g>
57      </svg>
58    </button>
59  );
60}