@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
49 lines • 1.77 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import * as Switch from '@radix-ui/react-switch';
import { cva, css as designCss } from '@reservoir0x/relay-design-system/css';
import { forwardRef } from 'react';
const StyledSwitchCss = cva({
base: {
cursor: 'pointer',
width: '38px',
height: '20px',
backgroundColor: 'gray7',
borderRadius: '9999px',
position: 'relative',
WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
display: 'flex',
alignItems: 'center',
padding: '0 10px',
transition: 'background-color 250ms',
"&[data-state='checked']": {
backgroundColor: 'primary-button-background'
}
}
});
export const StyledSwitch = forwardRef(({ children, css, ...props }, forwardedRef) => {
return (_jsx(Switch.Root, { ref: forwardedRef, ...props, className: designCss(StyledSwitchCss.raw(), designCss.raw(css)), children: children }));
});
const StyledThumbCss = cva({
base: {
display: 'block',
width: '17.5px',
height: '17.5px',
backgroundColor: 'gray1',
borderRadius: '9999px',
zIndex: 1,
'--borderColor': 'colors.gray.8',
border: '1px solid var(--borderColor)',
transition: 'transform 100ms',
transform: 'translateX(0px)',
willChange: 'transform',
position: 'absolute',
left: '2px',
"&[data-state='checked']": {
transform: 'translateX(17px)'
}
}
});
export const StyledThumb = forwardRef(({ children, css, ...props }, forwardedRef) => {
return (_jsx(Switch.Thumb, { ref: forwardedRef, ...props, className: designCss(StyledThumbCss.raw(), designCss.raw(css)) }));
});
//# sourceMappingURL=Switch.js.map