@material-tailwind/react
Version:
@material-tailwind/react is an easy-to-use components library for ReactJS & Tailwind CSS inspired by Material Design.
1 lines • 2 kB
JavaScript
Object.defineProperty(exports,"__esModule",{value:true});function _export(target,all){for(var name in all)Object.defineProperty(target,name,{enumerable:true,get:all[name]})}_export(exports,{checkbox:function(){return checkbox},default:function(){return _default}});var _checkboxColors=_interopRequireDefault(require("./checkboxColors"));var _checkbox=require("../../../types/components/checkbox");function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}var checkbox={defaultProps:{color:"gray",label:undefined,icon:undefined,ripple:true,className:"",disabled:false,containerProps:undefined,labelProps:undefined,iconProps:undefined},valid:{colors:_checkbox.propTypesColor},styles:{base:{root:{display:"inline-flex",alignItems:"items-center"},container:{position:"relative",display:"flex",alignItems:"items-center",cursor:"cursor-pointer",p:"p-3",borderRadius:"rounded-full"},input:{peer:"peer",position:"relative",appearance:"appearance-none",width:"w-5",height:"h-5",borderWidth:"border",borderRadius:"rounded-md",borderColor:"border-blue-gray-200",cursor:"cursor-pointer",transition:"transition-all",before:{content:"before:content['']",display:"before:block",bg:"before:bg-blue-gray-500",width:"before:w-12",height:"before:h-12",borderRadius:"before:rounded-full",position:"before:absolute",top:"before:top-2/4",left:"before:left-2/4",transform:"before:-translate-y-2/4 before:-translate-x-2/4",opacity:"before:opacity-0 hover:before:opacity-10",transition:"before:transition-opacity"}},label:{color:"text-gray-700",fontWeight:"font-light",userSelect:"select-none",cursor:"cursor-pointer",mt:"mt-px"},icon:{color:"text-white",position:"absolute",top:"top-2/4",left:"left-2/4",translate:"-translate-y-2/4 -translate-x-2/4",pointerEvents:"pointer-events-none",opacity:"opacity-0 peer-checked:opacity-100",transition:"transition-opacity"},disabled:{opacity:"opacity-50",pointerEvents:"pointer-events-none"}},colors:_checkboxColors.default}};var _default=checkbox;
;