33 lines
928 B
TypeScript
33 lines
928 B
TypeScript
import { styled } from '../stitches.config'
|
|
import * as SwitchPrimitive from '@radix-ui/react-switch'
|
|
|
|
const StyledSwitch = styled(SwitchPrimitive.Root, {
|
|
all: 'unset',
|
|
width: 42,
|
|
height: 25,
|
|
backgroundColor: '$mauve9',
|
|
borderRadius: '9999px',
|
|
position: 'relative',
|
|
boxShadow: `0 2px 10px $colors$mauve2`,
|
|
WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
|
|
'&:focus': { boxShadow: `0 0 0 2px $colors$mauveA2` },
|
|
'&[data-state="checked"]': { backgroundColor: '$green11' }
|
|
})
|
|
|
|
const StyledThumb = styled(SwitchPrimitive.Thumb, {
|
|
display: 'block',
|
|
width: 21,
|
|
height: 21,
|
|
backgroundColor: 'white',
|
|
borderRadius: '9999px',
|
|
boxShadow: `0 2px 2px $colors$mauveA6`,
|
|
transition: 'transform 100ms',
|
|
transform: 'translateX(2px)',
|
|
willChange: 'transform',
|
|
'&[data-state="checked"]': { transform: 'translateX(19px)' }
|
|
})
|
|
|
|
// Exports
|
|
export const Switch = StyledSwitch
|
|
export const SwitchThumb = StyledThumb
|