Classic Theme Toggle

1import { type ButtonHTMLAttributes, type CSSProperties, useId } from "react";
2 
3export interface ClassicProps extends Omit<
4  ButtonHTMLAttributes<HTMLButtonElement>,
5  "children"
6> {
7  duration?: number;
8  [key: `data-${string}`]: string | number | boolean | null | undefined;
9}
10 
11export function Classic({
12  duration = 400,
13  className,
14  type = "button",
15  title = "Toggle theme",
16  "aria-label": ariaLabel = "Toggle theme",
17  ...props
18}: ClassicProps) {
19  const toggleId = useId();
20 
21  const clipMainId = `toggles.dev-classic-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 24 24"
35        aria-hidden="true"
36        style={
37          { "--toggles-dot-dev--duration": `${duration}ms` } as CSSProperties
38        }
39      >
40        <defs>
41          <clipPath id={clipMainId}>
42            <path
43              d={"M0 0h25a1 1 0 0010 10v14H0Z"}
44              className="transition-[d,translate] duration-(--toggles-dot-dev--duration) dark:delay-[calc(var(--toggles-dot-dev--duration)*0.15)] dark:[d:path('M0_2h13a1_1_0_0010_10v14H0Z')] dark:not-supports-[d:path('M0_0')]:-translate-x-3.25 dark:not-supports-[d:path('M0_0')]:translate-y-0.5"
45            />
46          </clipPath>
47        </defs>
48        <g stroke={"currentColor"} strokeLinecap={"round"}>
49          <circle
50            cx={12}
51            cy={12}
52            r={5}
53            fill={"currentColor"}
54            clipPath={`url(#${clipMainId})`}
55            className="origin-center transition-transform duration-(--toggles-dot-dev--duration) dark:scale-170"
56          />
57          <path
58            d={"M12 1.4v2.4"}
59            fill={"none"}
60            strokeWidth={2}
61            strokeLinejoin={"round"}
62            strokeMiterlimit={0}
63            paintOrder={"stroke markers fill"}
64            className="[transform-box:view-box] [transform-origin:center] [transition:transform_var(--toggles-dot-dev--duration),opacity_var(--toggles-dot-dev--duration)] delay-[calc(var(--toggles-dot-dev--duration)*0.15)] dark:delay-0 dark:[transform:scale(0)] dark:opacity-0"
65          />
66          <path
67            d={"m20.3 3.7-2.5 2.5"}
68            fill={"none"}
69            strokeWidth={2}
70            strokeLinejoin={"round"}
71            strokeMiterlimit={0}
72            paintOrder={"stroke markers fill"}
73// … truncated