"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[74288],{74288:(n,e,o)=>{o.r(e),o.d(e,{default:()=>i});var s=o(67841),t=o(89207);let i=()=>(0,s.jsx)(t.default,{title:"Checkbox Demo",layout:"split",size:"wide",splitRatio:.6,minPreviewHeight:"10rem",dependencies:{"use-sound":"4.0.3","react-spring":"9.7.3"},files:{"/App.js":"\nimport React from 'react';\nimport useSound from 'use-sound';\n\nimport Checkbox from './Checkbox';\n\nfunction CheckboxDemo() {\n  const [isChecked, setIsChecked] = React.useState(false);\n\n  const [playActive] = useSound('/sounds/pop-down.mp3', {\n    volume: 0.25,\n  });\n  const [playOn] = useSound('/sounds/pop-up-on.mp3', {\n    volume: 0.25,\n  });\n  const [playOff] = useSound('/sounds/pop-up-off.mp3', {\n    volume: 0.25,\n  });\n\n  return (\n    <Checkbox\n      name=\"demo-checkbox\"\n      checked={isChecked}\n      size={20}\n      label=\"I agree to the terms\"\n      onChange={() => setIsChecked(!isChecked)}\n      onMouseDown={playActive}\n      onMouseUp={() => {\n        isChecked ? playOff() : playOn();\n      }}\n    />\n  );\n}\n\nexport default CheckboxDemo;\n        ","/Checkbox.js":"\nimport React from 'react';\nimport { useSpring, animated } from 'react-spring';\n\nimport styles from './Checkbox.module.css';\n\nfunction Checkbox({\n  size = 18,\n  name,\n  checked,\n  label,\n  onChange,\n  onMouseDown,\n  onMouseUp,\n}) {\n  const [active, setActive] = React.useState(false);\n\n  const springConfig = {\n    tension: 400,\n    friction: 22,\n    clamp: !checked,\n  };\n\n  const filledScale = checked ? (active ? 1.4 : 1) : 0;\n  const filledSpring = useSpring({\n    transform: `scale(${filledScale})`,\n    config: springConfig,\n  });\n\n  const outlineScale = active ? 0.8 : 1;\n  const outlineSpring = useSpring({\n    transform: `scale(${outlineScale})`,\n    config: springConfig,\n  });\n\n  return (\n    <div className={styles.wrapper}>\n      <div className={styles.visibleContents}>\n        <animated.div className={styles.visibleBox}\n          style={{ width: size, height: size, ...outlineSpring }}\n        >\n          <animated.div\n            className={styles.filled}\n            style={filledSpring}\n          />\n        </animated.div>\n\n        <span className={styles.text}>{label}</span>\n      </div>\n      <input\n        type=\"checkbox\"\n        className={styles.realCheckbox}\n        onMouseDown={() => {\n          setActive(true);\n          onMouseDown();\n        }}\n        onMouseUp={() => {\n          setActive(false);\n          onMouseUp();\n        }}\n        onChange={onChange}\n        onClick={onChange}\n      />\n    </div>\n  );\n};\n\nexport default Checkbox;\n        ","/Checkbox.module.css":"\n.wrapper {\n  --color-gray-700: hsl(225deg 12% 40%);\n  --color-gray-1000: hsl(225deg 15% 15%);\n  --color-primary: hsl(240deg 95% 62%);\n\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.realCheckbox {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n}\n\n.visibleContents {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.visibleBox {\n  position: relative;\n  border: 2px solid var(--color-gray-700);\n  border-radius: 4px;\n  margin-right: 8px;\n}\n.realCheckbox:hover + .visibleContents .visibleBox {\n  border-color: var(--color-gray-1000);\n}\n.realCheckbox:focus-visible + .visibleContents .visibleBox {\n  outline: 2px auto var(--color-primary);\n  outline-offset: 2px;\n}\n\n.filled {\n  position: absolute;\n  z-index: 1;\n  top: 2px;\n  left: 2px;\n  right: 2px;\n  bottom: 2px;\n  background: var(--color-primary);\n  border-radius: 2px;\n}\n.text {\n  font-size: 1rem;\n  font-family: var(--font-family);\n  color: var(--color-gray-700);\n  white-space: nowrap;\n}\n"}})}}]);
//# sourceMappingURL=74288.72cba03fb030cc7b.js.map