Around Theme Toggle

1import { type ButtonHTMLAttributes, type CSSProperties, useId } from "react";
2 
3export interface AroundProps extends Omit<
4  ButtonHTMLAttributes<HTMLButtonElement>,
5  "children"
6> {
7  duration?: number;
8  [key: `data-${string}`]: string | number | boolean | null | undefined;
9}
10 
11export function Around({
12  duration = 500,
13  className,
14  type = "button",
15  title = "Toggle theme",
16  "aria-label": ariaLabel = "Toggle theme",
17  ...props
18}: AroundProps) {
19  const toggleId = useId();
20 
21  const clipMainId = `toggles.dev-around-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-around--duration": `${duration}ms` } as CSSProperties
39        }
40      >
41        <defs>
42          <clipPath
43            id={clipMainId}
44            className="[transform-origin:center] [transition:transform_calc(var(--toggles-around--duration)_*_0.6)_ease] dark:[transform:rotate(-90deg)] dark:[transition:transform_var(--toggles-around--duration)_ease]"
45          >
46            <path
47              d={"M0 0h42v30a1 1 0 00-16 13H0Z"}
48              className="transition-[d,translate] [transition-duration:calc(var(--toggles-around--duration)_*_0.6)] [transition-timing-function:ease] dark:[d:path('M-12_-14h42v30a1_1_0_00-16_13H0Z')] dark:not-supports-[d:path('M0_0')]:-translate-x-[12px] dark:not-supports-[d:path('M0_0')]:-translate-y-[14px] dark:[transition-duration:var(--toggles-around--duration)]"
49            />
50          </clipPath>
51        </defs>
52        <g clipPath={`url(#${clipMainId})`}>
53          <circle
54            cx={16}
55            cy={16}
56            r={8.4}
57            className="[transform-origin:center] [transition:transform_calc(var(--toggles-around--duration)_*_0.6)_ease] dark:[transform:scale(1.4)] dark:[transition:transform_var(--toggles-around--duration)_ease]"
58          />
59          <g>
60            <circle
61              cx={16}
62              cy={3.3}
63              r={2.3}
64              className="[transform-origin:center] [transition:transform_calc(var(--toggles-around--duration)_*_0.2)_ease_calc(var(--toggles-around--duration)_*_0.253)] dark:[transform:scale(0)] dark:[transition:transform_calc(var(--toggles-around--duration)_*_0.4)_ease]"
65            />
66            <circle
67              cx={27}
68// … truncated