Dimple Switch

1
2
3
4
5
6
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
"use client";
 
import {
  forwardRef,
  useState,
  type ChangeEvent,
  type ComponentPropsWithoutRef,
} from "react";
 
import { cn } from "@/lib/cn";
 
const DIMPLE_MARK_COUNT = 12;
 
export type DimpleSwitchProps = Readonly<
  {
    checked?: boolean;
    defaultChecked?: boolean;
    onCheckedChange?: (checked: boolean) => void;
    label?: string;
  } & Omit<
    ComponentPropsWithoutRef<"input">,
    "type" | "checked" | "defaultChecked" | "onChange"
  >
>;
 
const DIMPLE_FRAME =
  "relative inline-flex items-center justify-center rounded-lg p-0.5 text-2xl bg-linear-to-b from-[#d5d5d5] to-[#e8e8e8] shadow-[0_1px_1px_rgba(255,255,255,0.6)]";
 
const DIMPLE_TRACK =
  "relative flex h-[1.5em] w-[3em] items-center rounded-md bg-[#e8e8e8] shadow-[inset_0_0_0.0625em_0.125em_rgba(255,255,255,0.2),inset_0_0_0.0625em_0.125em_rgba(0,0,0,0.4)] transition-[background-color] duration-400 ease-linear motion-reduce:transition-none peer-checked:bg-[#f3b519] peer-checked:[&>span]:left-[1.5625em]";
 
const DIMPLE_KNOB =
  "absolute left-[0.0625em] flex h-[1.375em] w-[1.375em] items-center justify-center rounded-[0.3125em] bg-[#e8e8e8] shadow-[inset_0_-0.0625em_0.0625em_0.125em_rgba(0,0,0,0.1),inset_0_-0.125em_0.0625em_rgba(0,0,0,0.2),inset_0_0.1875em_0.0625em_rgba(255,255,255,0.3),0_0.125em_0.125em_rgba(0,0,0,0.5)] transition-[left] duration-400 ease-linear motion-reduce:transition-none";
 
const DIMPLE_MARK_GRADIENT =
  "radial-gradient(circle at 50% 0, #f5f5f5, #c4c4c4)";
 
export const DimpleSwitch = forwardRef<HTMLInputElement, DimpleSwitchProps>(
  (
    {
      className,
      checked,
      defaultChecked = false,
      onCheckedChange,
      label = "Enable setting",
      disabled,
      id,
      ...props
    },
    ref,
  ) => {
    const [internalChecked, setInternalChecked] = useState(defaultChecked);
    const isControlled = checked !== undefined;
    const isOn = isControlled ? checked : internalChecked;
 
    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
      const next = event.target.checked;
      if (!isControlled) {
        setInternalChecked(next);
      }
      onCheckedChange?.(next);
    };
 
    return (
      <label
        data-slot="dimple-switch"
        data-state={isOn ? "on" : "off"}
        className={cn(
          DIMPLE_FRAME,
          "has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900",
          disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
          className,
        )}
      >
        <input
          ref={ref}
          id={id}
          type="checkbox"
          checked={isControlled ? checked : undefined}
          defaultChecked={isControlled ? undefined : defaultChecked}
          disabled={disabled}
          aria-label={label}
          onChange={handleChange}
          className="peer absolute inset-0 z-10 h-full w-full cursor-pointer appearance-none opacity-0 ring-0 outline-none focus:ring-0 disabled:cursor-not-allowed"
          {...props}
        />
 
        <span
          aria-hidden="true"
          data-layer="dimple-track"
          className={DIMPLE_TRACK}
        >
          <span data-layer="dimple-knob" className={DIMPLE_KNOB}>
            <span
              data-layer="dimple-knob-grid"
              className="absolute grid grid-cols-3 gap-0.5"
            >
              {Array.from({ length: DIMPLE_MARK_COUNT }, (_, index) => (
                <span
                  key={index}
                  data-layer="dimple-knob-mark"
                  className="size-0.5 rounded-full"
                  style={{ backgroundImage: DIMPLE_MARK_GRADIENT }}
                />
              ))}
            </span>
          </span>
        </span>
      </label>
    );
  },
);
 
DimpleSwitch.displayName = "DimpleSwitch";