Lightbulb Theme Toggle

1import { type ButtonHTMLAttributes, type CSSProperties } from "react";
2 
3export interface LightbulbProps extends Omit<
4  ButtonHTMLAttributes<HTMLButtonElement>,
5  "children"
6> {
7  duration?: number;
8  [key: `data-${string}`]: string | number | boolean | null | undefined;
9}
10 
11export function Lightbulb({
12  duration = 500,
13  className,
14  type = "button",
15  title = "Toggle theme",
16  "aria-label": ariaLabel = "Toggle theme",
17  ...props
18}: LightbulbProps) {
19  return (
20    <button
21      type={type}
22      title={title}
23      aria-label={ariaLabel}
24      className={className}
25      {...props}
26    >
27      <svg
28        width="1em"
29        height="1em"
30        viewBox="0 0 32 32"
31        aria-hidden="true"
32        strokeWidth={"2"}
33        stroke={"currentColor"}
34        fill={"currentColor"}
35        strokeLinecap={"round"}
36        style={
37          { "--toggles-lightbulb--duration": `${duration}ms` } as CSSProperties
38        }
39      >
40        <path
41          strokeWidth={1}
42          d={
43            "M9.4 9.9c1.8-1.8 4.1-2.7 6.6-2.7 5.1 0 9.3 4.2 9.3 9.3 0 2.3-.8 4.4-2.3 6.1-.7.8-2 2.8-2.5 4.4 0 .2-.2.4-.5.4-.2 0-.4-.2-.4-.5v-.1c.5-1.8 2-3.9 2.7-4.8 1.4-1.5 2.1-3.5 2.1-5.6 0-4.7-3.7-8.5-8.4-8.5-2.3 0-4.4.9-5.9 2.5-1.6 1.6-2.5 3.7-2.5 6 0 2.1.7 4 2.1 5.6.8.9 2.2 2.9 2.7 4.9 0 .2-.1.5-.4.5h-.1c-.2 0-.4-.1-.4-.4-.5-1.7-1.8-3.7-2.5-4.5-1.5-1.7-2.3-3.9-2.3-6.1 0-2.3 1-4.7 2.7-6.5z"
44          }
45        />
46        <path d={"M19.8 27.5h-7.6"} />
47        <path d={"M19.8 29.2h-7.6"} />
48        <path d={"M19.8 30.9h-7.6"} />
49        <path
50          pathLength={1}
51          fill={"none"}
52          d={
53            "M14.6 27.1c0-3.4 0-6.8-.1-10.2-.2-1-1.1-1.7-2-1.7-1.2-.1-2.3 1-2.2 2.3.1 1 .9 1.9 2.1 2h7.2c1.1-.1 2-1 2.1-2 .1-1.2-1-2.3-2.2-2.3-.9 0-1.7.7-2 1.7 0 3.4 0 6.8-.1 10.2"
54          }
55          className="[stroke-dasharray:1.1] transition-[stroke-dashoffset,opacity] duration-(--toggles-lightbulb--duration) [stroke-dashoffset:0] opacity-100 dark:[stroke-dashoffset:1] dark:opacity-0"
56        />
57        <path
58          d={"M16 5V1.3"}
59          pathLength={1}
60          strokeWidth={1.5}
61          className="[stroke-dasharray:1.1] transition-[stroke-dashoffset,opacity] duration-(--toggles-lightbulb--duration) [stroke-dashoffset:0] opacity-100 dark:[stroke-dashoffset:1] dark:opacity-0"
62        />
63        <path
64          d={"M27.5 15.8h3.9"}
65          pathLength={1}
66          strokeWidth={1.5}
67// … truncated