Switch

1import * as React from 'react';
2 
3import {
4  Switch as SwitchPrimitive,
5  SwitchThumb as SwitchThumbPrimitive,
6  SwitchIcon as SwitchIconPrimitive,
7  type SwitchProps as SwitchPrimitiveProps,
8} from '@/components/animate-ui/primitives/base/switch';
9import { cn } from '@/lib/utils';
10 
11type SwitchProps = SwitchPrimitiveProps & {
12  pressedWidth?: number;
13  startIcon?: React.ReactElement;
14  endIcon?: React.ReactElement;
15  thumbIcon?: React.ReactElement;
16};
17 
18function Switch({
19  className,
20  pressedWidth = 19,
21  startIcon,
22  endIcon,
23  thumbIcon,
24  ...props
25}: SwitchProps) {
26  return (
27    <SwitchPrimitive
28      className={cn(
29        'relative peer focus-visible:border-ring focus-visible:ring-ring/50 flex h-5 w-8 px-px shrink-0 items-center justify-start rounded-full border border-transparent shadow-xs outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
30        'data-[checked]:bg-primary data-[unchecked]:bg-input dark:data-[unchecked]:bg-input/80 data-[checked]:justify-end',
31        className,
32      )}
33      {...props}
34    >
35      <SwitchThumbPrimitive
36        className={cn(
37          'relative z-10 bg-background dark:data-[unchecked]:bg-foreground dark:data-[checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0',
38        )}
39        pressedAnimation={{ width: pressedWidth }}
40      >
41        {thumbIcon && (
42          <SwitchIconPrimitive
43            position="thumb"
44            className="absolute [&_svg]:size-[9px] left-1/2 top-1/2 -translate-1/2 dark:text-neutral-500 text-neutral-400"
45          >
46            {thumbIcon}
47          </SwitchIconPrimitive>
48        )}
49      </SwitchThumbPrimitive>
50 
51      {startIcon && (
52        <SwitchIconPrimitive
53          position="left"
54          className="absolute [&_svg]:size-[9px] left-0.5 top-1/2 -translate-y-1/2 dark:text-neutral-500 text-neutral-400"
55        >
56          {startIcon}
57        </SwitchIconPrimitive>
58      )}
59      {endIcon && (
60        <SwitchIconPrimitive
61          position="right"
62          className="absolute [&_svg]:size-[9px] right-0.5 top-1/2 -translate-y-1/2 dark:text-neutral-400 text-neutral-500"
63        >
64          {endIcon}
65        </SwitchIconPrimitive>
66      )}
67    </SwitchPrimitive>
68  );
69}
70 
71export { Switch, type SwitchProps };