@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
53 lines • 2.03 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledThumb = exports.StyledSwitch = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const Switch = tslib_1.__importStar(require("@radix-ui/react-switch"));
const css_1 = require("@reservoir0x/relay-design-system/css");
const react_1 = require("react");
const StyledSwitchCss = (0, css_1.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'
}
}
});
exports.StyledSwitch = (0, react_1.forwardRef)(({ children, css, ...props }, forwardedRef) => {
return ((0, jsx_runtime_1.jsx)(Switch.Root, { ref: forwardedRef, ...props, className: (0, css_1.css)(StyledSwitchCss.raw(), css_1.css.raw(css)), children: children }));
});
const StyledThumbCss = (0, css_1.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)'
}
}
});
exports.StyledThumb = (0, react_1.forwardRef)(({ children, css, ...props }, forwardedRef) => {
return ((0, jsx_runtime_1.jsx)(Switch.Thumb, { ref: forwardedRef, ...props, className: (0, css_1.css)(StyledThumbCss.raw(), css_1.css.raw(css)) }));
});
//# sourceMappingURL=Switch.js.map