Find the cost of adding an npm package to your app's bundle size
teardown.kelinci.dev
1import clsx from 'clsx';
2import { createUniqueId, splitProps, type JSX } from 'solid-js';
3
4export interface ToggleProps extends JSX.InputHTMLAttributes<HTMLInputElement> {
5 children: JSX.Element;
6}
7
8const Toggle = (props: ToggleProps) => {
9 const [local, rest] = splitProps(props, ['children', 'class', 'id']);
10
11 const id = createUniqueId();
12
13 return (
14 <div class={clsx('relative inline-flex items-start', local.class)}>
15 <input
16 id={id}
17 type="checkbox"
18 role="switch"
19 class={clsx(`peer absolute top-0 left-0 h-9 w-14 opacity-0 outline-none`)}
20 {...rest}
21 />
22
23 <div
24 aria-hidden="true"
25 class={clsx(
26 `pointer-events-none m-2 h-5 w-10 shrink-0 rounded-full border transition duration-200 ease-fluent`,
27
28 `border-neutral-stroke-accessible peer-hover:border-neutral-stroke-accessible-hover peer-active:border-neutral-stroke-accessible-pressed peer-disabled:border-neutral-stroke-disabled`,
29 `p peer-checked:border-transparent-stroke peer-checked:bg-compound-brand-background peer-checked:peer-hover:border-transparent-stroke-interactive peer-checked:peer-hover:bg-compound-brand-background-hover peer-checked:peer-active:border-transparent-stroke-interactive peer-checked:peer-active:bg-compound-brand-background-pressed peer-checked:peer-disabled:border-transparent-stroke-disabled peer-checked:peer-disabled:bg-neutral-background-disabled`,
30 )}
31 ></div>
32
33 <div
34 aria-hidden="true"
35 class={clsx(
36 `pointer-events-none absolute top-0 left-0 m-2.75 size-3.5 rounded-full transition duration-200 ease-fluent`,
37
38 `peer-checked:translate-x-5`,
39
40 `bg-neutral-stroke-accessible peer-hover:bg-neutral-stroke-accessible-hover peer-active:bg-neutral-stroke-accessible-pressed peer-disabled:bg-neutral-foreground-disabled`,
41 `peer-checked:bg-neutral-foreground-inverted peer-checked:peer-hover:bg-neutral-foreground-inverted peer-checked:peer-active:bg-neutral-foreground-inverted peer-checked:peer-disabled:bg-neutral-foreground-disabled`,
42 )}
43 ></div>
44
45 <div
46 aria-hidden="true"
47 class="pointer-events-none absolute inset-0 rounded-md outline-2 outline-transparent peer-focus-visible:outline-stroke-focus-2"
48 ></div>
49
50 <label
51 for={id}
52 class={clsx(
53 `p-2 text-base-300 select-none`,
54 `text-neutral-foreground-1 peer-disabled:text-neutral-foreground-disabled`,
55 )}
56 >
57 {local.children}
58 </label>
59 </div>
60 );
61};
62
63export default Toggle;