Repository Public
1'use client';2import * as React from 'react';3import * as S from '@radix-ui/react-switch';4import { cn } from '@/lib/cn';56export function Switch({ className, label, ...props }: React.ComponentProps<typeof S.Root> & { label: string }) {7 return (8 <S.Root9 aria-label={label}10 className={cn(11 'relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-line-2 bg-surface-2 transition-colors duration-150 data-[state=checked]:border-accent/60 data-[state=checked]:bg-accent/70 disabled:opacity-50',12 'pointer-coarse:h-7 pointer-coarse:w-12',13 className,14 )}15 {...props}16 >17 <S.Thumb className="block size-3.5 translate-x-0.5 rounded-full bg-text transition-transform duration-150 data-[state=checked]:translate-x-[18px] pointer-coarse:size-5 pointer-coarse:data-[state=checked]:translate-x-[24px]" />18 </S.Root>19 );20}21